Giới thiệu display style
Nghiên cứu bố cục trang bắt đầu với việc định nghĩa một phần tử riêng rẽ được trình bày trên trang
như thế nào. Trong các phần trước, chúng ta đã học rằng các phần tử HTML được phân loại thành phần
tử block như đoạn văn (paragraphs) hay đề mục (headings), hay thành phần tử inline như emphasized text
hay các ảnh nội dòng. Tuy nhiên, bất kể một phần tử được hiển thị như một khối hay nội dòng phụ thuộc
vào style sheet. Bạn có thể định nghĩa display style cho bất cứ phần tử trang nào với đặc tính display
sau:
display:type
nơi type định nghĩa dạng display. Một vài trong nhiều giá trị type được thể hiện ở ảnh dưới:
Ví dụ, để thay thế style trình duyệt bình thường cái hiển thị ảnh nội dòng, bạn có thể áp dụng quy tắc
style sau để hiển thị tất cả images của bạn như các blocks:
img {display:block;}
Nếu bạn muốn hiển thị tất cả block quotes như các vật list, hoàn chỉnh với list markers, bạn có thể
thêm quy tắc style sau vào style sheet của bạn:
blockquote {display:list-item;}
Bạn thậm chí có thể ngăn chặn các trình duyệt hiển thị một phần tử bằng cách thiết lập đặc tính display
của nó thành none. Trong trường hợp đó, phần tử vẫn là bộ phận của cấu trúc tài liệu nhưng nó không được
thể hiện tới người dùng và không chiếm không gian trong trang được hiển thị. Cái này là hữu dụng cho các
phần tử cái bao gồm nội dung cái người dùng không nên thấy hay không cần thiết để xem.
Reset style sheet
Bạn đã học trong các phần trước rằng trình duyệt của bạn áp dụng style của bản thân nó vào các phần tử
trang của bạn trừ phi các styles đó được thay thế bởi style của bản thân bạn. Nhiều nhà thiết kế thích làm
việc với clean slate và không muốn có các quy tắc style trình duyệt đi vào thiết kế cuối cùng của website
của họ. Cái này có thể được hoàn thành với một reset style sheet cái thay thế các styles mặc định của trình
duyệt và cung cấp một điểm bắt đầu ổn định cho thiết kế trang.