Hình 1.19 và Hình 1.20 là các ví dụ minh họa cách sử dụng CSS để định nghĩa cách hiển thị các phần tử trong một trang HTML.
Hình 1.19 - Ví dụ về cách dùng CSS để định dạng một trang HTML
1.2.6. Lớp giả (pseudo class)
Lớp giả được sử dụng để định nghĩa một trạng thái đặc biệt của một phần tử. Chẳng hạn, lớp giả được dùng để định dạng một phần tử khi người dùng đang di chuyển con trỏ chuột trên nó, hoặc để định dạng phần tử <a> khi phần tử này đã được người dùng click vào rồi. Hình 1.21 minh họa cách sử dụng lớp giả để định dạng phần tử <a> khi con trỏ chuột di chuyển trên nó. Trong trường hợp này, lớp giả được tạo ra bằng cách thêm chuỗi “:hover” vào sau tên lớp (highlight).
Hình 1.21 - Ví dụ cách dùng lớp giả 1.2.7. Phần tử giả (pseudo element)
Phần tử giả được dùng để định dạng từng phần nhỏ của một phần tử HTML. Chẳng hạn, nó được dùng để định dạng ký tự đầu tiên hoặc dòng đầu tiên của một phần tử; hoặc được dùng để chèn thêm nội dung vào trước/sau nội dung của một phần tử. Hình 1.22 cho thấy cách tạo phần tử giả p::first-line (thêm chuỗi “::first-line” vào tên phần tử p) để định dạng cho dòng đầu tiên của một đoạn văn (phần tử <p>).
1.2.8. Layout properties và Box model
Hình 1.23 minh họa các thuộc tính (property) được dùng để bố trí vị trí hiển thị các phần tử HTML khi trình duyệt hiển thị trang này. Các thuộc tính trong hình này gồm margin, padding, width, height và border.
Hình 1.23 - Layout properties
Khi hiển thị các phần tử HTML, trình duyệt dùng Box model để hiển thị. Theo mô hình này, trình duyệt hiển thị nội dung của phần tử bên trong một hình chữ nhật. Vị trí hiển thị nội dung của phần tử được xác định dựa vào 3 thuộc tính là margin, border, và padding (xem Hình 1.24). Trong đó, border và margin được xem là thành phần của phần tử, còn margin là khoảng cách từ phần tử đến phần tử khác.