CHƢƠNG 3 ĐỊNH KIỂU TRÌNH DIỄN TRANG WEB BẰNG CSS
3.7. MƠ HÌNH TRÌNH DIỄN ĐỐI TƢỢNG TÀI LIỆU
C{c đối tƣợng tài liệu đƣợc trình diễn trên giao diện của trình duyệt theo mơ
hình hộp (box model) nhƣ đƣợc minh họa trong Hình 3.1. Theo mơ hình này, nội
dung của đối tƣợng tài liệu đƣợc hiển thị trong một hình chữ nhật đƣợc gọi là hộp nội dung (content box). Bao quanh hộp nội dung là đƣờng viền (border). Đƣờng
viền và hộp nội dung đƣợc phân cách nhau bởi phần đệm (padding). Đệm là
khoảng trống trong suốt có tác dụng khơng cho nội dung và đƣờng viền dính liền nhau khi hiển thị. Bao quanh bên ngoài viền là khoảng trống trong suốt khác đƣợc gọi là lề (margin). Lề có tác dụng phân cách các đối tƣợng tài liệu khi chúng đƣợc hiển thị cạnh nhau.
WebAppDevLê Đình Thanh, Nguyễn Việt Anh
45 Hình 3.1. Mơ hình hộp trình diễn đối tƣợng tài liệu.
Kích thƣớc hộp nội dung thƣờng đƣợc trình duyệt tính tốn tự động để tồn bộ nội dung đƣợc nhìn thấy. Tuy nhiên, lập trình viên có thể ấn định kích thƣớc
hộp này bằng các thuộc tính width (chiều rộng), height (chiều cao), max-width
(chiều rộng tối đa), min-width (chiều rộng tối thiểu), max-height (chiều cao tối đa),
min-height (chiều cao tối thiểu). Giá trị đƣợc gán cho các thuộc tính kể trên là độ
dài, sử dụng các đơn vị px (pixel), pt (point), hoặc % (phần trăm theo đối tƣợng
cha), ví dụ ‚width:100px;‛ hay ‚max-width:50%;‛.
Khác với hộp nội dung, đƣờng viền có nhiều thuộc tính hơn. Các thuộc tính
này cho phép chỉ định kiểu dáng, màu sắc và độ dày cho toàn bộ viền (border) hay viền ở từng phía (boder[-side] với [-side] là -top, -left, -right hay -bottom). Các thuộc tính cho viền đƣợc tóm tắt nhƣ sau:
Mục đích định dạng Thuộc tính: giá trị có thể nhận
Kiểu dáng viền border[-side]-style: solid|dashed|dotted|<
Màu sắc viền border[-side]-color: color-value
Độ dày viền border[-side]-width: thin/medium/thick/#px
Cả ba ở trên border[-side]: style width color
Đệm và lề chỉ đƣợc xác định bằng độ dày. Đối tƣợng tài liệu có các thuộc tính
cho tồn bộ đệm/lề hay các đệm/lề ở từng phía nhƣ đƣợc chỉ ra trên Hình 3.1. Nếu khơng đƣợc chỉ định cụ thể, viền, đệm và lề của mỗi đối tƣợng tài liệu đƣợc xác định bởi bảng định dạng mặc định của trình duyệt.
Trong trang web ví dụ sau đ}y, một đối tƣợng tiêu đề đƣợc khai báo, viền, đệm và lề của đối tƣợng đƣợc x{c định cụ thể. 1. <!DOCTYPE html><html><head> 2. <title>L.3.7</title> 3. <meta charset="utf-8"> 4. <style type="text/css"> 5. h1 { 6. border:solid 2px red; 7. padding:2px 15px; margin:10px;
WebAppDevLê Đình Thanh, Nguyễn Việt Anh 46 8. } 9. </style> 10.</head><body> 11. <h1>Tiêu đề 1</h1> 12.</body></html>