CHƯƠNG 4: CASCADING STYLE SHEETS 4.1 Giới thiệu
4.4.6 Span và D
DIV viết tắt của cụm từ division, nó là phần tử html dùng để chứa các phần tử khác, nó thường được dùng để làm layout cho website thay cho cách dùng table-base truyền thống, ưu điểm của phương pháp này là mã của thẻ div thì rất ngắn, thông tin định dạng của nó nằm trong CSS mà thông tin này được trình duyệt cache nên tốc độ load trang nhanh hơn. Hơn nữa khi làm layout bằng div thì rất dễ thay đổi giao diện của website, chỉ cần thay định dạng CSS mà không cần viết lại mã HTML nên thậm chí có thể thay giao diện vào lúc chạy (runtime).
Span mang ý nghĩa giống với DIV tuy nhiên, nó chỉ nhóm được các đối tượng trên cùng một dòng (in-line). Thẻ <span> trong HTML thật ra là một thẻ trung hòa, nó không thêm hay bớt bất cứ một thứ gì vào một tài liệu HTML cả. Nhưng chính nhờ tính chất trung hòa này mà nó lại là một công cụ đánh dấu tuyệt vời để qua đó chúng ta có thể viết CSS định dạng cho các phần tử mong muốn.
Ví dụ: Chúng ta có đoạn HTML sau trích dẫn câu nói của chủ tịch Hồ Chí Minh <p>Không có gì quý hơn độc lập, tự do.</p>
Yêu cầu ở đây là chúng ta hãy dùng CSS tô đậm 2 từ độc lập, tự do. Để giải quyết vấn đề này, chúng ta sẽ thêm thẻ <span> vào đoạn HTML như sau:
<p>Không có gì quý hơn <span class=”nhanmanh”>độc lập</span>, <span class=”nhanmanh”>tự do</span>.
Và bây giờ chúng ta có thể viết CSS cho yêu cầu trên: .nhanmanh {
font-weight:bold }
4.4.7 Box model
Tất cả các thành phần của HTML đều có thể được coi như một hộp (box), chúng có thể sắp xệp cạnh nhau hoặc chồng lên nhau. CSS Box về cơ bản là hộp bao quanh một thành phần HTML và nó có các khoảng cách về: lề trong, lề ngoài, độ dày lề của hộp. Các hộp khi được xắp xếp với nhau sẽ xây dựng nên layout của một website. Hình sau mô tả về box của HTML:
Trong đó:
- Margin: sẽ tạo ra lề ngoài của box, toàn bộ khoảng này sẽ được xây dựng như khoảng trống và không có màu nền.
- Border: là phần lề bao bọc padding và content, border có thể có các thuộc tính về màu nền, bo tròn, độ dày…
- Padding: là phần lề trong, padding background có thể bị ảnh hưởng bởi màu của box.