Casscading Style Sheet - CSS

1PART II:Casscading Style Sheet - CSS2CSS là gì?Một số đặc tính cơ bản của CSS Áp dụng CSS Cú pháp – Cách tạo CSSBackgroundThiết lập văn bảnTạo MenuMột số chức năng khácNỘI DUNG3CSS (Cascading Style Sheets) là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc...) cho một tài liệu Web viết bằng HTML, XHTML, XML, SVG, hay UML, .CSS mở rộng ngôn ngữ HTML truyền thống với hơn 70 thuộc tính về kiểu dáng có thể áp dụng cho các thẻ HTMLCác nhà lập trình Web có thêm nhiều lựa chọn về màu sắc, khoảng cách, vị trí, biên, lề, con trỏ.Định nghĩa CSS 4Tiện ích của CSSTách riêng nội dung và định dạng, làm cho mã nguồn gọn gàng hơn, Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang, tránh lặp lại việc định dạng các trang giống nhau.Tiết kiệm thời gian:Khi thay đổi định dạng trong CSS, các trang sử dụng CSS sẽ tự động cập nhật sự thay đổi đó.Kết hợp với JavaScript để tạo hiệu ứng đặc biệtMột số đặc tính cơ bản của CSS 5Bất lợi của CSS:Một số trình duyệt không chấp nhận CSS hoàn toànPhải mất thời gian để học cách sử dụngMột số đặc tính cơ bản của CSS 6Một số đặc tính cơ bản của CSS Mô hình 3 lớp trong phát triển WEB7Phân loại : Có 3 loạiInline styleInternal styleExternal style Mức độ ưu tiên của CSS sẽ theo thứ tự sau.Style đặt trong từng thẻ HTML riêng biệt (inline style)Style đặt trong phần (Internal style)Style đặt trong file mở rộng .css (External Style)Style mặc định của trình duyệtMức độ ưu tiên sẽ giảm dần từ trên xuống dưới. Một số đặc tính cơ bản của CSS 8Dùng inline style: là cách dùng style ngay trong câu lệnh, chỉ cần bổ sung thêm thuộc tính STYLE vào sau một phần tử HTML nào đó.Cú pháp: Nội dung Ví dụ: Màu xanh nước biển. This is a paragraph Áp dụng CSS vào trang HTML9Dùng inline style: Ví dụ: This paragraph has an inline style applied to it This paragraph is displayed in the default style. Can you see the difference in this lineÁp dụng CSS vào trang HTML10Một inline style áp dụng cho bất cứ thẻ nào và chỉ có tác dụng trên chính thẻ đó.Dùng inline style làm cho tài liệu rõ ràng hơn nhưng có thể dẫn đến việc viết mã quá nhiều. Làm cho các đoạn mã dư thừa, khó bảo trì Áp dụng CSS vào trang HTML11Cách 2: Nhúng style sheet (Internal Style)Internal style : Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn bản.Cách tạo: Taọ bảng mẫu chung trên phần đầu trang trong cặp tag Sử dụng: Trong phần body, nội dung nào muốn sử dụng định dạng theo Style sheet đã tạo ở trên thì đặt trong tag được định nghĩa trong phần head.Áp dụng CSS vào trang HTML12Cách 2: Nhúng style sheet (Internal Style)Cú pháp: TagName{property1:v1;property2:v2 } (lặp lại cho mỗi tag có thuộc tính cần định dạng).Áp dụng CSS vào trang HTML13 B {text-transform: lowercase; font-size:18px} P { border: silver thick solid; background-color:turquoise;} Mỗi đoạn sẽ có viền Đậm màu bạc Áp dụng CSS vào trang HTML14 H1,H2 { color: limegreen; font-family: Arial } This is the H1 element This is the H2 element This is the H3 element with its default style as displayed in the browser Áp dụng CSS vào trang HTML15Cách3: Nhiều StylesheetTrong trường hợp mà có một số thẻ có cùng định dạng, chúng ta có thể gộp chúng lại với nhau. Giả sử như sau:h1, h2, h3 { margin-left: 10px; font-size: 150%; ...}Áp dụng CSS vào trang HTML16Nhiều StylesheetVí dụ:h1 { color:#0000FF; text-transform:uppercase } h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; text-transform:uppercase; } h1, h2, h3 { color:#0000FF; text-transform:uppercase; } Áp dụng CSS vào trang HTML17Cách 4: Bên ngoài-ExternalLà một bảng kiểu được lưu trữ thành một file bên ngoài và được liên kết với trang HTML.Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các trang của một website.Áp dụng CSS vào trang HTML18Cách tạo:Tạo một tập tin văn bản mới Nhập tên các tag muốn định dạng thuộc tính theo mẫu:TagName{property1:v1;property2:v2;}Lưu tập tin với định dạng Text Only và có phần mở rộng .cssCách dùng External style:Cú pháp: Áp dụng CSS vào trang HTML19Ví dụ: Ví dụ Welcome To WallPearl’s Blog Áp dụng CSS vào trang HTML20Ví dụ:Sau đó hãy tạo một file style.css với nội dung: body { background-color:#FFF } p { color:#00FF00 } Lưu ý: Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng Việt. Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một file CSS vào CSS hiện hành. Cú pháp: @import url(link) Áp dụng CSS vào trang HTML21Cú pháp của CSS được chia làm 3 phần, phần thẻ chọn (selector), phần thuộc tính (property), phần nhãn (value). selector {property: value}Nếu nhãn có nhiều từ nên đặt nhãn vào trong dấu nháy kép p {font-family: "sans serif"}Nếu thẻ có nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi dấu (;). p {text-align:center;color:red}Cú pháp của CSS 22Khi thẻ chọn có nhiều thuộc tính thì nên để mỗi thuộc tính ở trên một dòng riêng biệt.p { text-align: center; color: black; font-family: arial}Cú pháp của CSS 23Phần tử chọn Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Các loạiDùng thẻ HTMLSử dụng CLASSSử dụng IDCú pháp của CSS 24Phần tử chọn Selector HTMLDùng các phần tử HTML làm phần tử chọn là cách tốt nhất để áp dụng CSS nếu muốn tất cả các phần tử thuộc một kiểu nào đó xuất hiện với cùng một định dạngCách làm này là cứng nhắc nhất trong 3 cách nhưng nó là cách tốt nhất để đảm bảo tính nhất quán của việc định dạng suốt tài liệu. Dùng thẻ HTML làm phần từ chọn thường được dùng là định dạng các siêu liên kết trong tài liệu. Cú pháp của CSS 25Cú pháp của CSS 26Phần tử chọn Selector HTMLBody {color: black} /*Phần chữ trong thẻ body sẽ có màu đen*/p {text-align: center} /*tất cả các thẻ trong trang HTML sẽ được canh giữa.*/p /*canh giữa, chữ màu đỏ, font arial*/{ text-align: center;color: red; font-family: arial}Cú pháp của CSS 27Dùng CLASS làm phần tử chọnBằng việc tạo ra các lớp (CLASS), có thể định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ HTML và áp dụng mỗi lớp vào một vị trí cần thiết trên trang web. Có 2 cách dùng:Các CLASS gắn với 1 thẻ cụ thểCác CLASS không gắn với một thẻ cụ thể (có thể gắn với hầu như tất cả các thẻ)Cú pháp của CSS 28Dùng CLASS làm phần tử chọnCú pháp:.ClassName{property1:v1; property2:v2;}Trong phần , đánh dấu phần nằm trong lớp.Cú pháp: Nội dung Cú pháp của CSS 29Dùng CLASS làm phần tử chọnVí dụ: .water{color:blue} .danger{color:red} test water test dangerCú pháp của CSS 30Dùng CLASS làm phần tử chọnVí dụ: Trên trang web có 3 loại đoạn văn: Đoạn văn canh lề trái, đoạn văn canh lề giữa và đoạn văn canh lề phải. Khi đó có thể định nghĩa 3 lớp riêng biệt cho 3 loại đoạn văn này như sau: .trai {text-align: left} .phai {text-align: right} .giua {text-align: center} Cú pháp của CSS 31Dùng CLASS làm phần tử chọnTiếp theo, trong trang HTML sử dụng như sau:Đoạn văn này được canh lề trái.Đoạn văn này được canh lề phải.Đoạn văn này được canh lề giữa.Áp dụng sai:Đây là đoạn định nghĩa saiVí dụ này không hoạt độngCú pháp của CSS 32Các CLASS gắn với tất cả các thẻ Có thể tạo ra một lớp mà lớp đó có thể gắn vào hầu như các thẻ trong trang web bằng cách bỏ tên thẻ ở đầu đi nhưng nhớ giữ lại dấu chấm (.)Ví dụ: định nghĩa một lớp "giua" có thể gắn với bất cứ thẻ nào: .giua { text-align="center“; }Cú pháp của CSS 33Các CLASS gắn với tất cả các thẻ Trong trang HTML ta sử dụng như sau: Đoạn này canh lề giữa. Câu này canh giữa. Cú pháp của CSS 34Đa lớp (Multi class) Một thẻ có thể được gán nhiều lớp bằng cách chỉ ra danh sách tên các lớp được phân cách nhau bằng khoảng trắng.warning { color: red } .highlight { background-color: yellow }Danger An important point. Cú pháp của CSS 35Cú pháp của CSS 36Cú pháp của CSS 37Dùng ID làm phần tử chọn Định danh(ID) cũng cho phép chia các thẻ thành nhiều loại khác nhau. Một lớp có thể áp dụng nhiều lần ở nhiều vị trí trên trang webĐịnh danh chỉ có thể áp dụng được duy nhất cho 1 thẻ và tên của định danh phải là duy nhất trên 1 trang web. Qui tắc cho Style dùng ID làm phần tử chọn bắt đầu bằng dấu thăng (#)Cú pháp của CSS 38Dùng ID làm phần tử chọn Cú pháp: TagName#IDName{property1:v1; property2:v2;} Trong tag Body nhập cú pháp: Nội dungCú pháp của CSS 39Dùng ID làm phần tử chọn Ví dụ : ID Selectors p#control {color: red;font-weight:bold; text-indent:18pt} p{color: magenta;text-indent:0pt} A hardware device that allows the user to make electronic copies of graphics or text. Short for picture element. A pixel refers to the small dots that make up an image on the screen. Cú pháp của CSS 40Cú pháp của CSS 41Dùng ID làm phần tử chọn Đoạn mã dưới đây có thể có hiệu lực cho thẻ đầu tiên có ID là xyz: #xyz {color: green}Khi sử dụng:Đoạn văn bảnCác thẻ khác không sử dụng đượcĐoạn văn bản không có hiệu lựcCú pháp của CSS 42Cú pháp của CSS 43Các phần tử chọn CLASS giả lập (Pseudo Class Selectors) Được sử dụng đối với các kiểu liên kết, ngoài ra còn được sử dụng cho các mục đích khác như bổ sung hiệu ứng cho các thẻ. Sức mạnh của loại phần tử này sẽ được phát huy đối với các liên kết đó là sự kết hợp của các phần tử với phần tử lớp để tạo ra các kiểu đa liên kết mà có thể áp dụng cho một trang.Cú pháp của CSS 44Các phần tử chọn CLASS giả lập (Pseudo Class Selectors) Phần tử lớp giả lập liên kết bắt đầu bằng dấu neo (anchor), tiếp theo là dấu “:”, cuối cùng là tên lớp giả lập. Một số phần tử lựa chọn lớp giả lập liên kết qui ước như sau:a:link: Bổ sung kiểu cho các liên kết chưa bấma:visited: bổ sung kiểu cho liên kết đã được viếng thăma:hover: bổ sung kiểu khi di chuột qua liên kếta:active: bổ sung kiểu khi kích chuột vào liên kếtCú pháp của CSS 45Các phần tử chọn CLASS giả lập (Pseudo Class Selectors) Có thể viết các luật cho mỗi phần tử chọn lớp và chúng có thể ứng dụng đến toàn bộ các liên kếtCó thể kết hợp các phần tử chọn trong một lớp, lớp này cho phép tạo ra kiểu đa liên kết. a.main:linka.subnav:linka.footer:linkCú pháp của CSS 46Dynamic Pseudo Class Selectors Cú pháp của CSS SelectorMục đích:hover Áp dụng cho các luật khi di chuyển chuột qua phân tử:activeÁp dụng khi click chuột vào một đối tượng:focusÁp dụng khi một phần tử đang được focus47Kết hợp lớp CSS và Pseudo ClassCú pháp: selector.class:pseudo-class {property: value} a.red:visited {color: #FF0000}CSS Syntax Cú pháp của CSS 48Cú pháp của CSS 49Kết hợp lớp CSS và Pseudo ClassCú pháp: selector:pseudo-element {property: value} Để áp dụng kiểu khác nhau đến dòng đầu tiên trong paragraph, sử dụng cú pháp phần tử giả lập: p:first-lineNếu muốn bổ sung nội dung sau hoặc trước một phần tử, cần phải định nghĩ nội dung trong tờ kiểu dáng. Ví dụ: p:first:line {color:red;} href="">Vimaru Cú pháp của CSS 50Cú pháp của CSS 51:first-line Pseudo-elementp {font-size: 12pt}p:first-line {color: #0000FF; font-variant: small-caps} Some text that ends up on two or more lines Cú pháp của CSS 52:first-line Pseudo-elementMột số thuộc tính của first-linefont properties color properties  background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear Cú pháp của CSS 53:first-letter Pseudo-elementp {font-size: 12pt} p:first-letter {font-size: 200%; float: left}The first words of an article. Sử dụng lớp CSS với Pseudo-elementCú pháp: selector.class:pseudo-element {property: value} Ví dụ:p.article:first-letter {color: #FF0000} A paragraph in an article Cú pháp của CSS 54Cú pháp của CSS 55Đa phần tử giả lập p {font-size: 12pt}p:first-letter {color: #FF0000; font-size: 200%} p:first-line {color: #0000FF}The first words of an articleCú pháp của CSS 56Các phần tử chọn phần tử giả lập (Pseudo Element Selectors) Để sinh ra nội dung sử dụng phần lựa chọn giả lập trước và sau, chúng ta định nghĩa phần tử đến luật sẽ được áp dụng, phần tử giả lập trước, sau, thuộc tính nội dung, và nội dung trong dấu nháy kép: h1:after {content: "header note"} Kết quả: Câu “hearder note” xuất hiện sau h1Cú pháp của CSS 57Descendant SelectorsTrong một số trường hợp cần áp dụng luật cho thẻ nằm trong một thẻ khác -> sử dụng descendant selectorVí dụdiv p {color:red;} /* chỉ có thẻ p nằm trong thẻ div ảnh hưởng bởi các luậtCú pháp của CSS 58Chaining Selectors Rất nhiều mẫu selector có thể được kết hợp để tạo thành các luật cụ thể hơndiv p a.definition { color: green } div p a.definition:hover { color: red } Rule đầu áp dụng liện kết có class="definition" mà liên kết này nằm trong phần tử p, ngay bản thân p nằm trong phần tử divRule 2 thay đổi liên kết sang màu đỏ khi di chuyển chuột qua liên kếtCú pháp của CSS 59Tính thừa kếMột vài thuộc tính định dạng được thừa kế theo mặc định. Có nghĩa là các phần tử con thừa kế giá trị định dạng của các phần tử cha. Nhung thuộc tính này như color, font và text-alignp { color: red } ... Sample paragraph with bold text.Cú pháp của CSS 60Giải quyết xung đột Ví dụ 1b { font-size: 12pt; } /* không có xung đột*/ p b { color: red; }Ví dụ 2:b { font-size: 12pt; } /* xung đột thuộc tính font-size */p b { font-size: 14pt; color: red; }Cú pháp của CSS 61Giải quyết xung đột Xác định tất cả các luật áp dụng cho phần tử. Sắp xếp theo thứ tự và mức độ quan trọng (dựa vào từ khóa !important).Sắp xếp dựa vào nét riêng biệtSử dụng thứ tự định nghĩa luật, luật cuối cùng được sử dụng Cú pháp của CSS 62Từ khóa !important Từ khóa !important có thể được sử dụng trong khai báo kiểu để đảo ngược thứ tự của tác giả và sheet định dạng người dùng/* in the user's style sheet */ p { color: red; font-size: 18pt !important; } /* in the author's style sheet */ p { color: green; font-size: 12pt; }Cú pháp của CSS 63Ví dụ: Từ khóa !importantTrong một trang web có liên kết tới file style.css có nội dung như sau (3): p { color:#333; text-align:left; width:500px } Trong thẻ giữa thẻ cũng có một đoạn CSS liên quan (2): p { background-color:#FF00FF; text-align:right; width:100%; height:150px } Trong phần nội dung trang web đó cũng có sử dụng CSS nội tuyến (1): link rel="stylesheet" type="text/css" href="background.css" /> Welcome To MyWebsite Hạnh phúc và thành đạt trong cuộc sống Ví vụ: file background.css và file html70Lặp lại ảnh nền (thuộc tính background-repeat): Thuộc tính này có 4 giá trị: repeat-x: Chỉ lặp lại ảnh theo phương ngang. repeat-y: Chỉ lặp lại ảnh theo phương dọc. repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định. no-repeat: Không lặp lại ảnh. Ví dụ:body { background-image:url(logo.png); background-repeat:no-repeat; } Background71Khóa ảnh nền: background-attachmentThuộc tính này có 2 giá trị: scroll: Ảnh nền sẽ cuộn cùng nội dung trang web. fixed: Cố định ảnh nền (mờ bất động). Định vị ảnh nền: background-position Mặc định ảnh nền nằm ở góc trên, bên trái màn hình. Background-position:5cm 2cm  Ảnh được định vị 5cm từ trái và 2cm từ trên.Background72Định vị ảnh nền (thuộc tính background-position): Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị chính xác như centimeters, pixels, inches, hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right. Background73Thuộc tính background rút gọn Ví dụ: Chúng ta có thể nhóm lại đoạn CSS sau”background-color:transparent; background-image: url(logo.png); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; Rút gọn: background:transparent url(logo.png) no-repeat fixed right bottom; Background74THIẾT LẬP VĂN BẢN75Đặt màu cho một đoạn văn bảnĐể đặt màu cho một đoạn văn bản chúng ta có thể dùng thuộc tính: color: #mã màu;p { color: #333333;}THIẾT LẬP VĂN BẢN76Đặt màu nền cho đoạn văn bản.Bạn có thể đặt màu nền (background) cho đoạn văn bản bằng thuộc tính background-color: #mã màu; p { background-color: #FFFF00; }THIẾT LẬP VĂN BẢN77Căn chỉnh khoảng cách giữa các ký tự.Khoảng cách giữa các ký tự trong một đoạn văn bản có thể được tăng hoặc giảm bởi thuộc tính letter-spacing: khoảng cách;h3 { letter-spacing: 2em;}h1 { letter-spacing: -3em;}THIẾT LẬP VĂN BẢN78Căn chỉnh khoảng cách giữa các dòng.Thuộc tính line-height: khoảng cách; sẽ giúp bạn căn chỉnh khoảng cách giữa các dòng trong một đoạn văn bản.p { line-height: 150%; // line-height: 15px;}THIẾT LẬP VĂN BẢN79Dóng hàngĐể gióng hàng cho một đoạn văn bản chúng ta sẽ dùng thuộc tính text-align: vị trí;p { text-align: left; /* left | center | right */}THIẾT LẬP VĂN BẢN80Trang hoàng thêm cho đoạn văn bản.Một đường gạch chân hoặc đường gạch ngang dòng văn bản sẽ làm cho đoạn văn bản của bạn thêm sinh động. Để tô điểm thêm cho đoạn văn bản chúng ta sẽ dùng thuộc tính text-decoration: thuộc tính;h3 { text-decoration: underline; /* Gạch chân */}h2 { text-decoration: line-through; /* Gạch ngang */}h1 { text-decoration: overline; /* kẻ trên */}THIẾT LẬP VĂN BẢN81Chỉnh vị trí của đoạn văn bản (indent).Thuộc tính text-indent: vị trí; sẽ căn chỉnh vị trí của dòng văn bản theo chiều ngang.h1 { text-indent: -2000px; /* text-indent: 30px; */}THIẾT LẬP VĂN BẢN82Điều kiển các ký tự trong một đoạn văn bản.Bạn có thể điều khiển toàn bộ đoạn văn bản là chữ hoa hay chữ thường bởi thuộc tính text-transform: kiểu chữ;p.uppercase { text-tranform: uppercase;}p.lowercase { text-tranform: lowercase; }p.capitalize { text-tranform: capitalize; }THIẾT LẬP VĂN BẢN83Đặt hướng cho đoạn văn bản.Hướng của đoạn văn bản có thể từ trái qua phải hay từ phải qua trái chúng ta có thể điều khiển bởi thuộc tính direction: hướng;div.rtl { direction: rtl; /* Right to left */ }div.ltr { direction: ltr; /* Left to right */ }THIẾT LẬP VĂN BẢN84Tăng khoảng cách giữa các từ.Khoảng cách giữa các từ có thể được tăng bởi thuộc tính word-spacing: khoảng cách; word-spacing: 30px;THIẾT LẬP VĂN BẢN85Làm mất tác dụng của đường bao của một thẻ HTML.Để làm mất tác dụng đường bao của một thẻ HTML chúng ta dùng thuộc tính white-space: giá trị;p { white-space: nowrap;}Thuộc tính white-space sẽ làm cho toàn bộ đoạn văn bản ở trên một dòng.THIẾT LẬP VĂN BẢN86THIẾT LẬP FONT87THIẾT LẬP FONT88Đặt font cho đoạn văn bản.Sử dụng thuộc tính font-family:p { font-family: Arial, Tahoma, Verdana, sans-serif;}Thông thường bạn cần phải khai báo họ của font ở cuối (trong ví dụ trên thì sans-serif là chỉ tới 1 họ font) để trong trường hợp máy của người duyệt Web không có các font như mình đã đặt thì nó sẽ lấy font mặc định của họ font trên.THIẾT LẬP FONT89Đặt đoạn văn bản sử dụng font nhãn caption.p.caption { font: caption;}THIẾT LẬP FONT90Đặt kích thước font cho đoạn văn bản.Sử dụng thuộc tính font-size:h1 { font-size: 20px;}h3 { font-size: 12px;}THIẾT LẬP FONT91Định lại kích thước font bằng thuộc tính font-size-ajust:p { font-size-ajust: 0.60;}THIẾT LẬP FONT92Đặt kiểu font cho đoạn văn bản.Chữ đậm, chữ nghiêng,... được đặt với thuộc tính font-style:p { font-style: italic; /* normal | italic | oblique */}THIẾT LẬP FONT93Đặt kiểu font cho đoạn văn bản.Chữ đậm, chữ nghiêng,... được đặt với thuộc tính font-style:p { font-style: italic; /* normal | italic | oblique */}Muốn hiển thị font ở dạng small-caps hoặc ở dạng normal thì chúng ta sẽ sử dụng thuộc tính font-variant. Thuộc tính này có hai giá trị normal và small-capsp { font-variant: normal; /* normal | small-caps */}THIẾT LẬP FONT94Đặt độ đậm nhạt của font.Dùng thuộc tính font-weight:. Chúng ta có thể đặt giá 3 loại giá trị cho thuộc tính này 1. normal(bình thường), 2. bold(đậm), 3. 300(đặt dạng số)h3 { font-weight: bold;}THIẾT LẬP FONT95Khai báo các thuộc tính font ở dạng shorthand.p { font: italic small-caps 900 12px arial;}THIẾT LẬP FONT9696© Dương Thành Phết-www.thayphet.netKhoa CNTT Trường CĐ CNTT TP.HCM2.5. Box ModelBox model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn. p{width:200px; margin:30px 20px; padding:20px 10px; border:1px solid #000; text-align:justify } Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. BOX MODEL – MÔ HÌNH HỘP972.6. Margin & Padding Thuộc tính margin: Dùng canh lề trang hay thành phần này với thành phần khácCú pháp như sau: margin:|||