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

Chia sẻ: Trần Viên | Ngày: | Loại File: PDF | Số trang:42

Thêm vào BST

Báo xấu

329
lượt xem 69
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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 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