Ứng dụng

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 đề <H1> 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

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

<tên thẻ>{<khai báo các thuộc tính css>}

-            Á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à <tên thẻ>

-            Ví dụ sau đây định nghĩa lại thẻ <fieldset> 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ó.

.<tên lớp>{<khai báo các thuộc tính css>}

 Áp dụng: tất cả các thẻ sử dụng thuộc tính class có giá trị là <tên lớp>. 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ẻ  <H1> áp dụng một còn thẻ  <DIV> á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 (#)

#<tên định danh>{<khai báo các thuộc tính css>}

Áp dụng: tất cả các thẻ sử dụng thuộc tính id với giá trị là <tên định danh>

Ví dụ sau định nghĩa bộ chọn định danh tên là #MyPara sau đó áp dụng cho một thẻ <P> trong trang web. Chú ý thẻ <P> còn lại không hề bị ảnh hưởng gì.