TAILIEUCHUNG - Bài 7: Box Model ( Định dạng kiểu khối)

Box model: Định dạng kiểu khối( hay kiểu hộp) cho website. Bài này chúng ta sẽ tìm hiểu lần lượt 3 phần của Box model. 1. Border- Đường viền Trong border chúng ta có 3 thuộc tính a) Border-width: Độ dày của đường viền. Cú pháp: border-width: apx bpx cpx dpx; Với: a, b, c, d lần lượt là giá trị độ dày đường viền của các cạnh | Bài 7- Box Model Định dạng kiểu khối Box model Định dạng kiểu khối hay kiểu hộp cho website. Bài này chúng ta sẽ tìm hiểu lần lượt 3 phần của Box model. 1. Border- Đường viền - Trong border chúng ta có 3 thuộc tính a Border-width Độ dày của đường viền. - Cú pháp border-width apx bpx cpx dpx Với a b c d lần lượt là giá trị độ dày đường viền của các cạnh bên trên bên phải bên dưới và bên trái Theo thứ tự chiều kim đồng hồ Khi 1 trong 4 giá trị kia bị thiếu thì nó sẽ lấy giá trị độ dày của cạnh đối diện nó. Ví dụ borde-width 2px 3px 3px Như vậy Cạnh trên độ dày là 2px phải là 3px và dưới là 3px như vậy bên trái bị thiếu nó sẽ lấy của cạnh đối diện là độ dày cạnh bên phải. b Border-style Kiểu đường viền - Chúng ta có 1 số giá trị về đường viền như hình bên - Không nhất thiếu phải định dạng cả 4 cạnh có viền mà có thể sử dụng 4 thuộc tính sau border-top-style viền trên border-right-style viền phải Border-bottom-style viền dưới border-left-style viền trái . c Border-color Màu đường viền - Giá trị của border là các loại mã màu. css example - Mozilla Firefox File Edit View Go Bookmarks Tools Help r- J http v Go dotted dashed Bài 7- Box Model Định dạng kiểu khối Ví dụ p border-width 2px border-style solid border-color blue Có thể viết tắt các thuộc tính về border như sau border width style blue 2. Padding- Biên Là thuộc tính tạo khoảng cách đường viền và nội dung Đối với padding chúng ta cũng có 4 thuộc tính padding-top padding-right padding-bottom padding-left Sử dụng để căn chỉnh nội dung so với các viền tương ứng trên phải dưới trái. Tương tự như border-width ở phần trên Khi 1 thành phần bị thiếu nó sẽ lấy giá trị của thành phần đối diện. Như ở ví dụ trên do chỉ có 1 giá trị padding 20px nên khoảng cách từ nội dung tới đường viền đều bằng 20px. Các bạn sẽ để ý thấy hình trên nội dung cách đường viền bên phải hình như lớn hơn 20px lí do nó như vậy là nội dung của chúng ta ít trong khi đó chiều rộng của border lấy theo kích thước chiều ngang trình duyệt Các bạn .

• Quản trị Web
• Định dạng kiểu khối
• Box Model
• cơ bản về CSS
• cú pháp của CSS
• CSS với bảng biểu
• trình soạn thảo CSS
• background trong CSS
• định dạng màu nền
• Text trong CSS
• Định dạng màu chữ
• kinh nghiệm lập trình
• ngôn ngữ lập trình
• thủ thuật lập trình
• thiết kế web
• trình duyệt Web (Web browser)
• xây dựng website
• định dạng font Verdana
• định dạng font chữ
• lập trình web
• định vị trí
• bộ chọn thẻ
• định dạng webssite
• Phần tử giả
• định dạng màu sắc
• tìm hiểu Block
• thiết kế website