Bài giảng XHTML - Bài 2: Cơ chế làm việc của CSS

Bài 2
Cơ 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, CSS
Cách thiết kế layout trang web
Làm quen với cấu trúc một trang web
Là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 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
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
Linked Inline Embedded
4
INLINE
Inline: <p style="font-size: 25pt; font-weight:bold;
font-style: italic; color:red;">nội dung ...
Inline
Style trong Embedded bị ghi đèĐịnh nghĩa dưới dạng
thuộ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
EMBEDDED
h1 {font-size: 16px;}
p {color:blue;}
Embedded
Định nghĩa trong thẻ
 của trang
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
<link href="my_style_sheet.css" media="screen"
rel="stylesheet" type="text/css" />
Bài 2 - Cơ chế làm việc của CSS 7
Các style được định nghĩa
trong file .css riêng và
được liên kết với trang,
định nghĩa liên kết đặt
trong thẻ 
/* 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
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
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 style
h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
h3 {font-style: italic;}
Định nghĩa theo ngữ cảnh
div p {color:red;}
Bài 2 - Cơ chế làm việc của CSS 11
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 trong
thẻ 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:
Selector ngữ cảnh rất chọn lọc. 
Ví dụ này hướng dẫn cách nhắm đến một thẻ cụ thể bằng hệ thống phân cấp của
trang.
Chỉ cần là thẻ con cháu theo thứ tự được chỉ định trong selector;
các thẻ khác có thể nằm ở giữa và selector vẫn làm việc đúng.
Bài 2 - Cơ chế làm việc của CSS 13
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 con
Nếu muốn viết một định nghĩa để thẻ được định
hướ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:
Selector ngữ cảnh rất chọn lọc. 
Ví dụ này hướng dẫn cách nhắm đến một thẻ cụ thể bằng hệ thống phân cấp của
trang.
Chỉ cần là thẻ con cháu theo thứ tự được chỉ định trong selector;
các thẻ khác có thể nằm ở giữa và selector vẫn làm việc đúng.
Bài 2 - Cơ chế làm việc của CSS 15
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 web
Ví dụ:
nội dung
Thuộc tính class: dùng để định nghĩa một kiểu định
dạng
Ví dụ:
nội dung
Slide 1 – XHTML: Cấu trúc nội dung web 16
CLASS
Định dạng cụ thể vùng/thẻ tài liệu
Mang tính chất kế thừa, sử dụng lại nhiều lần với
nhiều vùng/thẻ trên trang
Được gắn với thẻ XHTML
Có thể áp dụng nhiều class trên một thẻ XHTML
Sử 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 CLASS
CSS:
p {font-family: Helvetica, sans-serif;}
.specialtext {font-weight:bold;}
XHTML:
Đây là tiêu đề có cùng lớp với đoạn thứ hai
Thẻ này không thuộc lớp nào.
Khi một thẻ được xác định bởi một lớp, ta có thể định hướng tới thẻ đó
bất kể vị trí của nó trong hệ thống phân cấp.
Bài 2 - Cơ chế làm việc của CSS 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ừa
Sử 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 ID
CSS:
p#specialtext {font-weight:bold; font-family: Helvetica, sans-serif;}
XHTML:
Đây là văn bản đặc biệt
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ên
XHTML (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ều
lầ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ập
trình JavaScript
Bài 2 - Cơ chế làm việc của CSS 21
SELECTOR SAO (*)
Selector * hay còn gọi là selector đa năng, mang
nghĩ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ên
trang sẽ có màu xanh
Hay dùng để đại diện cho một thẻ không xác định
p * em {font-weight:bold;} -> dấu * đại diện
cho "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 định
img[title] {border: 2px solid blue;} -> áp dụng
cho mọi thẻ img có định nghĩa thuộc tính title
img[alt="Dartmoor-view of countryside"] {border:3px
green 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ụng
với các thẻ XHTML
Có tác dụng khi có sự kiện di chuột qua
Sử dụng tất cả những thành phần với Pseudo-class
để tạo hiệu ứng rollover
Một số trình duyệt sẽ không chấp nhận Pseudo-class
nếu như không tuân thủ thứ tự khai báo:
Link
Visited
Hover
Active
Bài 2 - Cơ chế làm việc của CSS 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ụ:
 Thời tiết rất nóng
cực kỳ ẩm.
:FOCUS
input:focus {border: 1px solid blue;}
Bài 2 - Cơ chế làm việc của CSS 26
PSEU-DO CLASS
x:first-letter
p: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 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 CSS
Tối ưu hóa dung lượng của file .css
Sử 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ăn
bản
Áp dụng được cho nhiều vùng trên một trang
Sử dụng lại cho nhiều dự án khác
Bài 2 - Cơ chế làm việc của CSS 29
TÍNH KẾ THỪA TRONG CSS
CSS:
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 cho
thẻ body thì nhiều thẻ nằm
trong 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ộc
tính kế thừa
Các thẻ con không định nghĩa lại giá trị các thuộc
tính kế thừa sẽ mặc nhiên nhận các giá trị kế thừa
Kế thừa là khả năng mạnh mẽ của CSS, tuy nhiên
cũng cần dùng cẩn thận vì nó có thể đặt những
thuộ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ột
cấp bậc của hệ thống phân cấp trong trang tới cấp
bậc tiếp theo
Là 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 giao
diện tối ưu
Quy 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ính
Quy tắc 2: phân loại theo trật tự và trọng lượng
Quy tắc 3: sắp xếp theo tính chuyên biệt
Quy 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 ;
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ị
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 trang
2 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
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ậy
kí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ích
thước tương đối như em cho font chữ:
Tận dụng khả năng kế thừa
Nế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ích
thướ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 CSS
Xuyên suốt quá trình học tập, làm việc
Tự thực hành với những thuộc tính đơn giản
Tự 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à linked
Trong đị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ành
phần con khác nhau trên trang web
Giá trị gán cho các thuộc tính có thể ở dạng tương
đối hoặc tuyệt đối
Phụ 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