Bài giảng Thiết kế web bài 2: Cơ chế làm việc của CSS

Bộ bài giảng thiết kế web do giảng viên đại học FPT biên soạn gồm 7 bài, trong bài 2 này chủ yếu đề cập đến vấn đề cơ chế làm việc của CSS. Nội dung chính của bài học là hướng dẫn cách áp dụng CSS cho trang web, cấu trúc & quy tắc khai báo của CSS, khái niệm và đặc điểm của Pseudo - Class(lớp giả). Ngoài ra bài này còn trình bày về tính kế thừa trong CSS và vấn đề khai báo giá trị màu sắc và số trong CSS. Với lượng kiến thức phù hợp và được trình bày một cách khoa học, bài 2 này sẽ mang lại nhiều khám phá thú vị cho người đọc về CSS nói riêng và thiết kế web nói chung.
Nội dung trích xuất từ tài liệu:
Bài giảng Thiết kế web 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 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 ...