1 Qui tắc stylesheet

Stylesheet phân cấp(cascading style sheet) định nghĩa các kiểu có thể được áp dụng vào các trang hoặc các phần tử của trang.

- Qui tắc kiểu (Style Rule)- Stylesheet phân cấp là một tập hợp các qui tắc. Qui tắc định nghĩa kiểu của tài liệu. Ví dụ, chúng ta có thể tạo ra một qui tắc kiểu được xác định cho tất cả phần tiêu đề

hiển thị màu vàng xanh. Qui tắc kiểu có thể ứng dụng vào các thành phần được chọn của trang web.

Ví dụ: chúng ta có thể xác định một đoạn văn bản bất kỳ in đậm và in nghiêng trên trang. Điều này được gọi là khai báo kiểu có sẵn mà nhờ đó các kiểu được áp dụng vào các phần tử HTML đơn lẻ trên một trang web.

- Style Sheet – Là một danh mục các qui tắc kiểu và có thể nhúng vào bên trong tài liệu HTML. Trong trường hợp đó, nó được gọi là stylesheet nhúng. Stylesheet cũng có thể được tạo ra bằng một file bên ngoài và được liên kết với tài liệu HTML.

- Các qui tắc (Rules) – Bảng kiểu có thể có một hay nhiều qui tắc. Phần đầu của qui tắc gọi là bộ chọn (Selector). Mỗi bộ chọn có các thuộc tính và các giá trị liên quan đến nó.

RuleSelector {Declarations property: value; property: value; ... }

Phần của qui tắc được kèm theo trong phạm vi các dấu ngoặc móc được gọi là khai báo. Khai báo có hai phần, phần trước dấu hai chấm (:) là thuộc tính và phần nằm sau dấu hai chấm là giá trị của thuộc tính đó.

Các khai báo được phân cách bởi dấu chấm phẩy (;). Ta nên đặt dấu chấm phẩy sau lần khai báo cuối

H1 {color: blue}

cùng. Ví dụ như

Ở đây, H1 là bộ chọn, color: blue là khai báo, trong phạm vi khai báo: {Property: Value} thì color là thuộc tính, blue là giá trị.

2 Định nghĩa các bộ chọn (Selector)

Bộ chọn (selector) là nơi định nghĩa các qui luật kiểu dáng để áp dụng cho các thành phần trên trang web. Ở đây bạn có một số cách định nghĩa khác nhau làm ảnh hưởng đến cách áp dụng ở các thẻ trên trang web. Trong phần này bạn sẽ học cách định nghĩa các bộ chọn và cách áp dụng của nó.

a. Bộ chọn HTML (HTML Selector)

- Định nghĩa: định nghĩa kiểu dáng bổ sung cho các thẻ HTML

{}

- áp dụng: Tự động áp dụng các qui luật css trong phần khai báo cho tất cả các thẻ có tên là

- Ví dụ sau đây định nghĩa lại thẻ

và legend với các thuộc tính kích thước (width), đường kẻ (border), màu chữ (color), màu nền (background-color).

b. Bộ chọn lớp (Class Selector)

- Định nghĩa: định nghĩa một lớp được bắt đầu bởi dấu chấm (.) bên trong khai báo nhiều thuộc tính css để áp dụng cho bất kz thẻ nào chỉ định bởi thuộc tính class của nó.

.{}

áp dụng: tất cả các thẻ sử dụng thuộc tính class có giá trị là . Chú ý thuộc tính class của mỗi thể có thể chỉ đến nhiều class cùng một lúc (cách nhau khoản trắng).

Ví dụ sau định nghĩa 2 bộ chọn lớp sau đó thẻ

áp dụng một còn thẻ

áp dụng cả hai để tận dụng các đặc điểm tổng hợp.

c. Bộ chọn định danh (ID Selector)

- Định nghĩa: giống như bộ chọn lớp nhưng khởi đầu với dấu rào (#)

#{}

áp dụng: tất cả các thẻ sử dụng thuộc tính id với giá trị là

Ví dụ sau định nghĩa bộ chọn định danh tên là #MyPara sau đó áp dụng cho một thẻ

trong trang web. Chú ý thẻ

còn lại không hề bị ảnh hưởng gì.