Xem mẫu
- 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
Linked Inline Embedded
Bài 2 - Cơ chế làm việc của CSS 4
- INLINE
Inline: nội dung ...
Inline
Định nghĩa dưới dạng Style trong Embedded bị ghi đè
thuộc tính của thẻ
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
Bài 2 - Cơ chế làm việc của CSS 5
- EMBEDDED
Định nghĩa trong thẻ
h1 {font-size: 16px;} của trang
p {color:blue;}
Embedded
Đị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
Bài 2 - Cơ chế làm việc của CSS 6
- LINKED
Các style được định nghĩa /* CLASS: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
nguon tai.lieu . vn
