[Thực hành] Sử dụng box model
Dùng border, background, padding, margin để định dạng kết quả như hình dưới đây:
Lần lượt tiến hành theo các bước hướng dẫn sau đây:
Bước 1: Tạo tài liệu mới html gồm đầy đủ các phần head, body. Trong body có sử dụng các thẻ div, p như sau:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sử dụng Boxmodel</title> </head> <body> <div> <p>Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML. Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p> <p>Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML. Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p> <p>Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML. Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p> </div> </body> </html>
Kết quả hiển thị:
Bước 2: Nhúng CSS định dạng hiển thị của thẻ div
Tạo class có tên boxmodel cho thẻ div:
<div class="boxmodel">
Và định nghĩa bộ chọn .boxmodel ở thẻ <style>:
<style>
.boxmodel{ margin: 0 auto; width: 800px; border: 10px; padding: 10px; border-color: chartreuse aqua blue blueviolet; border-style: solid; }
</style>
Trong đó:
- Thuộc tính width để quy định kích thước chiều rộng của div, giá trị là 800px
- Thuộc tính border để quy định viền của div, có độ dày 10px
- Thuộc tính border-color để quy định màu của viền (tuân thủ quy tắc chiều kim đồng hồ + quy tắc đối xứng)
- Thuộc tính border-style để quy định kiểu của viền, nét liền solid
- Thuộc tính padding để quy định khoảng cách từ nội dung đến viền 10px
- Thuộc tính margin nhận giá trị “0 auto” để căn div ra giữa cửa sổ hiển thị
Lưu ý: Lần lượt thêm các thuộc tính trên và chạy thử trên trình duyệt để xem sự thay đổi và hiểu ý nghĩa các thuộc tính
Kết quả hiển thị:
Bước 3: Viết bộ chọn html quy định hiển thị cho các thẻ p
.boxmodel p{ border: 3px dotted darkred; padding: 10px;}
Kết quả hiển thị:
Bước 4: Lần lượt viết các bộ chọn id cho các thẻ p để quy định hiển thị
Trong html:
<div class="boxmodel"> <p id="boxmodel1">Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML. Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p> <p id="boxmodel2">Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML. Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p> <p id="boxmodel3">Mô hình hộp trong CSS về cơ bản là một hộp bao quanh phần tử HTML. Nó bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content)</p> </div>
Định nghĩa các bộ chọn id trong CSS:
#boxmodel1{ margin-bottom: 20px;}
#boxmodel2{ margin-bottom: 40px;}
#boxmodel3{ margin-bottom: 60px;}
Trong đó:
- Thuộc tính margin-bottom để quy định khoảng cách lề dưới của các div, lần lượt là 20px, 40px, 60px
Kết quả hiển thị cuối cùng:
Leave a Reply