bài 2 cơ chế làm việc của css - giáo trình fpt
DESCRIPTION
Cách áp dụng CSS cho trang web Cấu trúc & Quy tắc khai báo CSS Pseudo-Class (lớp giả) Tính kế thừa trong CSS Khai báo giá trị màu sắc và số trong CSS Cách áp dụng CSS cho trang web Cấu trúc & Quy tắc khai báo CSS Pseudo-Class (lớp giả) Tính kế thừa trong CSS Khai báo giá trị màu sắc và số trong CSSTRANSCRIPT
Bài 2Cơ chế làm việc của CSS
NHẮC LẠI BÀI TRƯỚC
Nhắc lại về HTMLĐịnh nghĩa XHTML, CSSCách thiết kế layout trang webLàm quen với cấu trúc một trang webLàm quen với những plugin kiểm tra mã XHTML vàCSS trên những trình duyệt khác nhau
Nhắc lại về HTMLĐịnh nghĩa XHTML, CSSCách thiết kế layout trang webLàm quen với cấu trúc một trang webLàm quen với những plugin kiểm tra mã XHTML vàCSS trên những trình duyệt khác nhau
Bài 2 - Cơ chế làm việc của CSS 2
MỤC TIÊU BÀI HỌC
Cách áp dụng CSS cho trang webCấu trúc & Quy tắc khai báo CSSPseudo-Class (lớp giả)Tính kế thừa trong CSSKhai báo giá trị màu sắc và số trong CSS
Cách áp dụng CSS cho trang webCấu trúc & Quy tắc khai báo CSSPseudo-Class (lớp giả)Tính kế thừa trong CSSKhai báo giá trị màu sắc và số trong CSS
Bài 2 - Cơ chế làm việc của CSS 3
CÁCH ÁP DỤNG CSS
3 cách áp dụng CSS trong XHTML:
CSS
Bài 2 - Cơ chế làm việc của CSS
CSS
Linked Inline Embedded
4
INLINE
Inline: <p style="font-size: 25pt; font-weight:bold;font-style: italic; color:red;">nội dung ...</p>
Inline
Style trong Embedded bị ghi đèĐịnh nghĩa dưới dạngthuộc tính của thẻ
Bài 2 - Cơ chế làm việc của CSS
Giới hạn áp dụng trong thẻ được chèn
Nặng cho file HTML
Không có tính linh động
Lộn xộn giữa nội dung và trình bày
5
Định nghĩa dưới dạngthuộc tính của thẻ
EMBEDDED
<head><style type="text/css">
h1 {font-size: 16px;}p {color:blue;}
</style></head>
Embedded
Định nghĩa trong thẻ<head> của trang
<head><style type="text/css">
h1 {font-size: 16px;}p {color:blue;}
</style></head>
Bài 2 - Cơ chế làm việc của CSS
Định nghĩa style tập trung
Dùng lại được cho nhiều thẻ
Giới hạn áp dụng trong trang
Ghi đè style trong file CSS được Linked
6
LINKED
<head><link href="my_style_sheet.css" media="screen"rel="stylesheet" type="text/css" />
</head>
<head><link href="my_style_sheet.css" media="screen"rel="stylesheet" type="text/css" />
</head>
Bài 2 - Cơ chế làm việc của CSS 7
Các style được định nghĩatrong file .css riêng và
được liên kết với trang,định nghĩa liên kết đặt
trong thẻ <head>
/* CLASS:LIME TAG STYLES */body.lime {background-color:#FFF;}.lime #main_wrapper {background-color:#FFF;}.lime #header {background-color:#507EA1;}.lime #nav {background-color:transparent;}.lime #content {background-color:#CFE673;}.lime #promo {background-color:transparent;}.lime #footer {background-color:#BFCCD6;}
LINKED
Linked
Có tính kế thừa
Phạm vi áp dụng: toàn bộ các trang trong website
Bài 2 - Cơ chế làm việc của CSS
Phạm vi áp dụng: toàn bộ các trang trong website
Thiết kế, chỉnh sửa dễ dàng
Áp dụng được nhiều file CSS
8
Cấu trúc & Quy tắc khai báo CSS
CẤU TRÚC ĐỊNH NGHĨA STYLE
Selector Câu lệnh
Là thẻ, id, lớp,…
Bài 2 - Cơ chế làm việc của CSS
Thuộc tính : Giá trị
10
Là thẻ, id, lớp,…
Các thuộc tính vàkiểu được CSS quy
định sẵn
ĐỊNH NGHĨA SELECTOR THEO THẺ
Định nghĩa style cho một selector:h1 {color:blue; font-weight:bold;}
Định nghĩa cùng style cho nhiều selector:h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
Cùng một selector, có thể định nghĩa nhiều styleh1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}h3 {font-style: italic;}
Định nghĩa theo ngữ cảnhdiv p {color:red;}
Bài 2 - Cơ chế làm việc của CSS 11
Định nghĩa style cho một selector:h1 {color:blue; font-weight:bold;}
Định nghĩa cùng style cho nhiều selector:h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
Cùng một selector, có thể định nghĩa nhiều styleh1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}h3 {font-style: italic;}
Định nghĩa theo ngữ cảnhdiv p {color:red;}
CÂY PHÂN CẤP THẺ CỦA TRANG
Hệ thống phân cấp này thể hiện thẻ nào lồng trongthẻ nào
Bài 2 - Cơ chế làm việc của CSS 12
ĐỊNH NGHĨA SELECTOR THEO THẺCSS:
p span em {color:green;}XHTML:<h1>Selector ngữ cảnh <em>rất</em> chọn lọc. </h1><p>Ví dụ này hướng dẫn cách nhắm đến một thẻ <em>cụ thể</em> bằng hệ thống phân cấp của
trang.</p><p>Chỉ cần là thẻ con cháu <span>theo <em>thứ tự được chỉ định</em> trong selector</span>;các thẻ khác có thể nằm ở giữa và selector vẫn làm việc đúng.</p>
Bài 2 - Cơ chế làm việc của CSS 13
CSS:p span em {color:green;}
XHTML:<h1>Selector ngữ cảnh <em>rất</em> chọn lọc. </h1><p>Ví dụ này hướng dẫn cách nhắm đến một thẻ <em>cụ thể</em> bằng hệ thống phân cấp của
trang.</p><p>Chỉ cần là thẻ con cháu <span>theo <em>thứ tự được chỉ định</em> trong selector</span>;các thẻ khác có thể nằm ở giữa và selector vẫn làm việc đúng.</p>
Selector em nằm trong thẻ span, và tất cảnằm trong thẻ p nên chịu tác động của định
nghĩa CSS (đổi màu chữ thành xanh)
ĐỊNH NGHĨA SELECTOR THEO THẺ
Làm việc với selector conNếu muốn viết một định nghĩa để thẻ được địnhhướng phải là thẻ con (trực tiếp) của một thẻ cụthể, sử dụng ký hiệu >
p > em {color: green;}
Bài 2 - Cơ chế làm việc của CSS 14
ĐỊNH NGHĨA SELECTOR THEO THẺCSS:
p > em {color: green;}XHTML:<h1>Selector ngữ cảnh <em>rất</em> chọn lọc. </h1><p>Ví dụ này hướng dẫn cách nhắm đến một thẻ <em>cụ thể</em> bằng hệ thống phân cấp của
trang.</p><p>Chỉ cần là thẻ con cháu <span>theo <em>thứ tự được chỉ định</em> trong selector</span>;các thẻ khác có thể nằm ở giữa và selector vẫn làm việc đúng.</p>
Bài 2 - Cơ chế làm việc của CSS 15
CSS:p > em {color: green;}
XHTML:<h1>Selector ngữ cảnh <em>rất</em> chọn lọc. </h1><p>Ví dụ này hướng dẫn cách nhắm đến một thẻ <em>cụ thể</em> bằng hệ thống phân cấp của
trang.</p><p>Chỉ cần là thẻ con cháu <span>theo <em>thứ tự được chỉ định</em> trong selector</span>;các thẻ khác có thể nằm ở giữa và selector vẫn làm việc đúng.</p>
Selector em là con của p nên mới chịu tácđộng của thuộc tính màu sắc chữ xanh. Thẻem thứ hai không phải là con trực tiếp nên
không chịu tác động
ID & CLASS (LỚP)
Thuộc tính id: dùng để định danh (identifier) một thẻtrên trang webVí dụ:
<div id="header">nội dung</div>
Thuộc tính class: dùng để định nghĩa một kiểu địnhdạngVí dụ:
<div class="navigationbar">nội dung</div>
Slide 1 – XHTML: Cấu trúc nội dung web 16
Thuộc tính id: dùng để định danh (identifier) một thẻtrên trang webVí dụ:
<div id="header">nội dung</div>
Thuộc tính class: dùng để định nghĩa một kiểu địnhdạngVí dụ:
<div class="navigationbar">nội dung</div>
CLASS
Định dạng cụ thể vùng/thẻ tài liệuMang tính chất kế thừa, sử dụng lại nhiều lần vớinhiều vùng/thẻ trên trangĐược gắn với thẻ XHTMLCó thể áp dụng nhiều class trên một thẻ XHTMLSử dụng ký tự . ở đầu định nghĩa style
Định dạng cụ thể vùng/thẻ tài liệuMang tính chất kế thừa, sử dụng lại nhiều lần vớinhiều vùng/thẻ trên trangĐược gắn với thẻ XHTMLCó thể áp dụng nhiều class trên một thẻ XHTMLSử dụng ký tự . ở đầu định nghĩa style
Bài 2 - Cơ chế làm việc của CSS 17
ĐỊNH NGHĨA SELECTOR THEO CLASSCSS:p {font-family: Helvetica, sans-serif;}.specialtext {font-weight:bold;}XHTML:<h1 class="specialtext">Đây là tiêu đề có <span>cùng lớp</span> với đoạn thứ hai</h1><p>Thẻ này không thuộc lớp nào.</p><p class="specialtext">Khi một thẻ được xác định bởi một lớp, ta có thể định hướng tới thẻ đó
<span>bất kể</span> vị trí của nó trong hệ thống phân cấp.</p>
Bài 2 - Cơ chế làm việc của CSS
CSS:p {font-family: Helvetica, sans-serif;}.specialtext {font-weight:bold;}XHTML:<h1 class="specialtext">Đây là tiêu đề có <span>cùng lớp</span> với đoạn thứ hai</h1><p>Thẻ này không thuộc lớp nào.</p><p class="specialtext">Khi một thẻ được xác định bởi một lớp, ta có thể định hướng tới thẻ đó
<span>bất kể</span> vị trí của nó trong hệ thống phân cấp.</p>
18
ĐỊNH NGHĨA SELECTOR THEO ID
ID không mang tính sử dụng lại nhiều lần, áp dụngđể định danh cho một thẻID không mang tính chất kế thừaSử dụng ký tự # ở đầu định nghĩa style
Bài 2 - Cơ chế làm việc của CSS 19
ĐỊNH NGHĨA SELECTOR THEO IDCSS:p#specialtext {font-weight:bold; font-family: Helvetica, sans-serif;}XHTML:<p id="specialtext">Đây là văn bản đặc biệt</p>
Bài 2 - Cơ chế làm việc của CSS 20
SỰ KHÁC BIỆT GIỮA CLASS & ID
ID có sức mạnh hơn Class:ID chỉ được gắn với một thẻ (thường là div) trênXHTML (không xuất hiện nhiều lần)Class có thể được gán với nhiều thẻ (xuất hiện nhiềulần)
Có thể sử dụng nhiều thuộc tính id trong một trang,nhưng mỗi thuộc tính có một giá trị (tên) riêng đểđịnh nghĩa.Dùng ID để định danh các thẻ, phục vụ cho việc lậptrình JavaScript
Bài 2 - Cơ chế làm việc của CSS
ID có sức mạnh hơn Class:ID chỉ được gắn với một thẻ (thường là div) trênXHTML (không xuất hiện nhiều lần)Class có thể được gán với nhiều thẻ (xuất hiện nhiềulần)
Có thể sử dụng nhiều thuộc tính id trong một trang,nhưng mỗi thuộc tính có một giá trị (tên) riêng đểđịnh nghĩa.Dùng ID để định danh các thẻ, phục vụ cho việc lậptrình JavaScript
21
SELECTOR SAO (*)
Selector * hay còn gọi là selector đa năng, mangnghĩa là "bất cứ thẻ nào" -> áp dụng cho mọi thẻ
* {color:green;} -> áp style mọi nội dung trêntrang sẽ có màu xanh
Hay dùng để đại diện cho một thẻ không xác địnhp * em {font-weight:bold;} -> dấu * đại diệncho "bất cứ thẻ con nào của p"
Selector * hay còn gọi là selector đa năng, mangnghĩa là "bất cứ thẻ nào" -> áp dụng cho mọi thẻ
* {color:green;} -> áp style mọi nội dung trêntrang sẽ có màu xanh
Hay dùng để đại diện cho một thẻ không xác địnhp * em {font-weight:bold;} -> dấu * đại diệncho "bất cứ thẻ con nào của p"
Bài 2 - Cơ chế làm việc của CSS 22
SELECTOR THUỘC TÍNH
Selector cho một thẻ với thuộc tính xác địnhimg[title] {border: 2px solid blue;} -> áp dụngcho mọi thẻ img có định nghĩa thuộc tính titleimg[alt="Dartmoor-view of countryside"] {border:3pxgreen solid;} -> áp dụng cho thẻ img cóthuộc tính alt mang giá trị cụ thể
Selector cho một thẻ với thuộc tính xác địnhimg[title] {border: 2px solid blue;} -> áp dụngcho mọi thẻ img có định nghĩa thuộc tính titleimg[alt="Dartmoor-view of countryside"] {border:3pxgreen solid;} -> áp dụng cho thẻ img cóthuộc tính alt mang giá trị cụ thể
Bài 2 - Cơ chế làm việc của CSS 23
Pseudo-Class (lớp giả)
PSEU-DO CLASS
Pseudo-class là class phổ biến nhất được sử dụngvới các thẻ XHTMLCó tác dụng khi có sự kiện di chuột quaSử dụng tất cả những thành phần với Pseudo-classđể tạo hiệu ứng rolloverMột số trình duyệt sẽ không chấp nhận Pseudo-classnếu như không tuân thủ thứ tự khai báo:
LinkVisitedHoverActive
Bài 2 - Cơ chế làm việc của CSS
Pseudo-class là class phổ biến nhất được sử dụngvới các thẻ XHTMLCó tác dụng khi có sự kiện di chuột quaSử dụng tất cả những thành phần với Pseudo-classđể tạo hiệu ứng rolloverMột số trình duyệt sẽ không chấp nhận Pseudo-classnếu như không tuân thủ thứ tự khai báo:
LinkVisitedHoverActive
25
PSEU-DO CLASS
Một số thuộc tính khác của pseu-do class:FIRST-CHILD
div.weather strong:first-child {color:red;}ví dụ:<div class="weather"> Thời tiết <strong>rất</strong> nóng
<strong>cực kỳ</strong> ẩm.</div>
:FOCUSinput:focus {border: 1px solid blue;}
Bài 2 - Cơ chế làm việc của CSS
Một số thuộc tính khác của pseu-do class:FIRST-CHILD
div.weather strong:first-child {color:red;}ví dụ:<div class="weather"> Thời tiết <strong>rất</strong> nóng
<strong>cực kỳ</strong> ẩm.</div>
:FOCUSinput:focus {border: 1px solid blue;}
26
PSEU-DO CLASS
x:first-letterp:first-letter {font-size:300%; float:left;}
x:first-line
p:first-line{font-variant:small-caps;}x:before
h1.age:before {content:"Tuổi: "}x:after
h1.age:after {content:" tuổi."}
Bài 2 - Cơ chế làm việc của CSS
x:first-letterp:first-letter {font-size:300%; float:left;}
x:first-line
p:first-line{font-variant:small-caps;}x:before
h1.age:before {content:"Tuổi: "}x:after
h1.age:after {content:" tuổi."}
27
Tính kế thừa trong CSS
TÍNH KẾ THỪA TRONG CSS
Tính kế thừa là mối quan hệ giữa phần tử cha vàphần tử con trong CSSTối ưu hóa dung lượng của file .cssSử dụng lại cho nhiều trang trong websiteĐược áp dụng nhiều nhất với những thuộc tính vănbảnÁp dụng được cho nhiều vùng trên một trangSử dụng lại cho nhiều dự án khác
Bài 2 - Cơ chế làm việc của CSS
Tính kế thừa là mối quan hệ giữa phần tử cha vàphần tử con trong CSSTối ưu hóa dung lượng của file .cssSử dụng lại cho nhiều trang trong websiteĐược áp dụng nhiều nhất với những thuộc tính vănbảnÁp dụng được cho nhiều vùng trên một trangSử dụng lại cho nhiều dự án khác
29
TÍNH KẾ THỪA TRONG CSSCSS:body,td,th {font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color: #000; margin: 0px;
background-color:#ffffcc;}
Bài 2 - Cơ chế làm việc của CSS 30
Khi định nghĩa thuộc tính chothẻ body thì nhiều thẻ nằmtrong body sẽ kế thừa giá trị
các thuộc tính này
TÍNH KẾ THỪA TRONG CSS
Các thẻ con có thể định nghĩa lại giá trị các thuộctính kế thừaCác thẻ con không định nghĩa lại giá trị các thuộctính kế thừa sẽ mặc nhiên nhận các giá trị kế thừaKế thừa là khả năng mạnh mẽ của CSS, tuy nhiêncũng cần dùng cẩn thận vì nó có thể đặt nhữngthuộc tính style không mong muốn cho các thẻ con(đặc biệt là các thuộc tính về định vị)
Các thẻ con có thể định nghĩa lại giá trị các thuộctính kế thừaCác thẻ con không định nghĩa lại giá trị các thuộctính kế thừa sẽ mặc nhiên nhận các giá trị kế thừaKế thừa là khả năng mạnh mẽ của CSS, tuy nhiêncũng cần dùng cẩn thận vì nó có thể đặt nhữngthuộc tính style không mong muốn cho các thẻ con(đặc biệt là các thuộc tính về định vị)
Bài 2 - Cơ chế làm việc của CSS 31
PHÂN LỚP TRONG CSS
Cách áp dụng các style từ trên xuống dưới từ mộtcấp bậc của hệ thống phân cấp trong trang tới cấpbậc tiếp theoLà một cơ chế mạnh mẽGiúp viết css tiết kiệm, dễ dàng, tạo ra web với giaodiện tối ưuQuy tắc phân lớp:
Quy tắc 1: tìm tất cả khai báo áp dụng cho mỗi thẻ vàthuộc tínhQuy tắc 2: phân loại theo trật tự và trọng lượngQuy tắc 3: sắp xếp theo tính chuyên biệtQuy tắc 4: sắp xếp theo trật tự
Cách áp dụng các style từ trên xuống dưới từ mộtcấp bậc của hệ thống phân cấp trong trang tới cấpbậc tiếp theoLà một cơ chế mạnh mẽGiúp viết css tiết kiệm, dễ dàng, tạo ra web với giaodiện tối ưuQuy tắc phân lớp:
Quy tắc 1: tìm tất cả khai báo áp dụng cho mỗi thẻ vàthuộc tínhQuy tắc 2: phân loại theo trật tự và trọng lượngQuy tắc 3: sắp xếp theo tính chuyên biệtQuy tắc 4: sắp xếp theo trật tự
Bài 2 - Cơ chế làm việc của CSS 32
PHÂN LỚP TRONG CSS
Quy tắc 1:• Khi mỗi trang được tả, trình duyệt xem xét mỗi thẻ trong trang để
tìm những định nghĩa áp dụng cho nó
Quy tắc 2:• Trình duyệt tuần tự kiểm tra năm nguồn, thiết lập mọi thuộc tính
phù hợp trong quá trình đó• Giá trị của thuộc tính được thiết lập cuối cùng trong quá trình này
quyết định hình thức• Từ khoá !important:
– Đứng sau một khoagnr trống, sau style muốn trở nên quan trọng,đứng trước dấu ;
Quy tắc 1:• Khi mỗi trang được tả, trình duyệt xem xét mỗi thẻ trong trang để
tìm những định nghĩa áp dụng cho nó
Quy tắc 2:• Trình duyệt tuần tự kiểm tra năm nguồn, thiết lập mọi thuộc tính
phù hợp trong quá trình đó• Giá trị của thuộc tính được thiết lập cuối cùng trong quá trình này
quyết định hình thức• Từ khoá !important:
– Đứng sau một khoagnr trống, sau style muốn trở nên quan trọng,đứng trước dấu ;
Bài 2 - Cơ chế làm việc của CSS 33
PHÂN LỚP TRONG CSS
Quy tắc 3:• Tính chuyên biệt xác định độ cụ thể của định nghĩa
Quy tắc 4:• Nếu hai định nghĩa có trọng lượng chính xác như nhau,
định nghĩa ở cấp bậc thấp nhất trong phân lớp ghi đègiá trị
Quy tắc 3:• Tính chuyên biệt xác định độ cụ thể của định nghĩa
Quy tắc 4:• Nếu hai định nghĩa có trọng lượng chính xác như nhau,
định nghĩa ở cấp bậc thấp nhất trong phân lớp ghi đègiá trị
Bài 2 - Cơ chế làm việc của CSS 34
KHAI BÁO GIÁ TRỊ MÀU SẮC VÀ SỐ TRONG CSS
GIÁ TRỊ SỐ
Sử dụng giá trị số để miêu tả độ dài của tất cảnhững yếu tố trong trang2 giá trị: tuyệt đối và tương đối
Bài 2 - Cơ chế làm việc của CSS 36
GIÁ TRỊ TUYỆT ĐỐI
Mô tả độ dài trong thế giới thực
Các thành phần của trang thường sử dụng đơn vịpixel
Mô tả độ dài trong thế giới thực
Các thành phần của trang thường sử dụng đơn vịpixel
Bài 2 - Cơ chế làm việc của CSS 37
GIÁ TRỊ TƯƠNG ĐỐI
Em được lấy từ độ rộng của ký tự trong font, vì vậykích thước của nó thay đổi tùy thuộc vào font màbạn sử dụng.
Em được lấy từ độ rộng của ký tự trong font, vì vậykích thước của nó thay đổi tùy thuộc vào font màbạn sử dụng.
Bài 2 - Cơ chế làm việc của CSS 38
GIÁ TRỊ TƯƠNG ĐỐI
Có hai lợi ích quan trọng cho việc sử dụng kíchthước tương đối như em cho font chữ:
Tận dụng khả năng kế thừaNếu bạn không định nghĩa kích thước font với đơn vịtương đối, bạn đã vô hiệu hóa khả năng đặt kíchthước font trong menu View của Internet Explorer
Có hai lợi ích quan trọng cho việc sử dụng kíchthước tương đối như em cho font chữ:
Tận dụng khả năng kế thừaNếu bạn không định nghĩa kích thước font với đơn vịtương đối, bạn đã vô hiệu hóa khả năng đặt kíchthước font trong menu View của Internet Explorer
Bài 2 - Cơ chế làm việc của CSS 39
GIÁ TRỊ MÀU SẮC
Hệ nhị phân (#RRGGBB and #RGB).Phần trăm RGB (R%, G% B%).Tên màu (red, green, blue…).
Bài 2 - Cơ chế làm việc của CSS 40
PHỤ LỤC B: THUỘC TÍNH CỦA CSS
Hãy xem Phụ lục B để biết các thuộc tính của CSSXuyên suốt quá trình học tập, làm việcTự thực hành với những thuộc tính đơn giảnTự nghiên cứu
Bài 2 - Cơ chế làm việc của CSS 41
TỔNG KẾT
Có ba cách định nghĩa style cho trang là inline,embbed và linkedTrong định nghĩa CSS, thuộc tính bắt buộc phải cógiá trịCó các loại định nghĩa selector cho thẻ, lớp, id, *,thuộc tính, lớp giả…Áp dụng tính kế thừa trong CSS vào những thànhphần con khác nhau trên trang webGiá trị gán cho các thuộc tính có thể ở dạng tươngđối hoặc tuyệt đốiPhụ lục B của sách mô tả đầy đủ các thuộc tính CSS
Có ba cách định nghĩa style cho trang là inline,embbed và linkedTrong định nghĩa CSS, thuộc tính bắt buộc phải cógiá trịCó các loại định nghĩa selector cho thẻ, lớp, id, *,thuộc tính, lớp giả…Áp dụng tính kế thừa trong CSS vào những thànhphần con khác nhau trên trang webGiá trị gán cho các thuộc tính có thể ở dạng tươngđối hoặc tuyệt đốiPhụ lục B của sách mô tả đầy đủ các thuộc tính CSS
Bài 2 - Cơ chế làm việc của CSS 42