Bài giảng Lập trình Web - Bài 2: Cơ chế làm việc của CSS

ASS:LIME TAG STYLES */
 body.lime {background-color:#FFF;}
 trong file .css riêng và .lime #main_wrapper {background-color:#FFF;}
 được liên kết với trang, .lime #header {background-color:#507EA1;}
 định nghĩa liên kết đặt .lime #nav {background-color:transparent;}
 .lime #content {background-color:#CFE673;}
 trong thẻ .lime #promo {background-color:transparent;}
 .lime #footer {background-color:#BFCCD6;}
 Bài 2 - Cơ chế làm việc của CSS 7
 LINKED
 Linked
 Có tính kế thừa
 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
Bài 2 - Cơ chế làm việc của 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,…
 ẻ ớ Thuộc tính : Giá trị
 Các thuộc tính và
 kiểu được CSS quy
 định sẵn
Bài 2 - Cơ chế làm việc của CSS 10
 ĐỊ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.
 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)
Bài 2 - Cơ chế làm việc của CSS 13
 ĐỊ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.
 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
Bài 2 - Cơ chế làm việc của CSS 15
 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;}
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
Bài 2 - Cơ chế làm việc của CSS 30
 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