Simple CSS Bài 9: Mô hình hộp

Trong CSS, box model (mô hình hộp) mô  tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm margin (lề), border (viền), padding (vùng đệm) và phần nội dung của đối tượng. Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web trong FireBug. (Một phần mở rộng rất hữu ích trong việc chỉnh sửa CSS)

Mô hình hộp trong Firefox

Ví dụ: Với đoạn mã sau

view source

print?

1	textarea {

2

top: 5px;

3	left: 11px;

4	margin: 1px; (hay margin: 1px 1px 1px 1px;)

5	borderr: 1px; (hay border: 1px 1px 1px 1px;)

6	width: 458px;

7	height: 108px;

8

}

Thì khung văn bản (textarea) của bạn sẽ trông như thế này trong FireBug:

Hay trên trang web thì bạn sẽ nhìn thế này (với FireBug, bạn có thể nhìn thấy trực quan những thành phần của mô hình hộp, màu xanh nhạt: phần nội dung (content), màu tím: vùng đệm (padding), màu đỏ: viền (border), và màu vàng: lề (margin)

• Thuộc tính lề – margin:

Như tất cả những ai đã học qua MS Word đều biết là trong phần thiết lập Trang – Page, có một thiết lập lề – margin để định lề cho trang in. Tương tự, thuộc tính lề – margin trong CSS cũng được dùng để canh lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang.

Ví dụ sau sẽ chỉ cho chúng ta biết cách canh lề cho một trang web.

view source

print?

1

body {

2	margin-top:80px;

3	margin-bottom:40px;

4	margin-left:50px;

5	margin-right:30px;

6	border:1px dotted #FF0000

7

}

Hoặc gọn hơn chúng ta sẽ viết như sau:

view source

print?

1

body {

2	margin:80px 30px 40px 50px;

3	border:1px dotted #FF0000

4

}

Cú pháp như sau: margin: trên | phải | dưới | trái
Hoặc: margin: |< value2> – với value 1 là giá trị margin-top và margin-bottom và value2 là giá trị margin-left và margin-right.

Kết quả của ví dụ trên sẽ được mô hình hóa như sau:

Ví dụ kế tiếp sẽ thể hiện rõ hơn về việc dùng margin để canh lề cho các đối tượng trong trang web. Các bạn hãy quan sát các đường viền và nhận xét.

view source

print?

01

body {

02	margin:80px 30px 40px 50px;

03	border:1px solid #FF0000

04

}

05

06

#box1 {

07	margin:50px 30px 20px 40px;

08	border:1px solid #00FF00

09

}

10

11

#box2 {

12	margin:50px 30px 20px 40px;

13	border:1px solid #0000FF

14

}

• Thuộc tính vùng đệm – padding:

Vùng đệm – padding quy định khoảng cách giữa phần nội dung và viền của một đối tượng (xem lại ảnh minh họa về mô hình hộp ở trang trước).

Cú pháp: padding: trên | phải | dưới | trái
Hoặc: padding: |< value2> – với value 1 là giá trị margin-top và margin-bottom và value2 là giá trị margin-left và margin-right.

Các bạn hãy thử thực hiện lại 2 ví dụ ở phần margin, nhưng thay margin bằng padding, nhớ quan sát các thay đổi và chú ý tới vị trí của đường viền.

Đường viền – border là một thành phần quan trọng trong một trang web. Nó thường được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn,… Trong bài học này, chúng ta sẽ cùng tìm hiểu về cách dùng CSS để định border cho các đối tượng web.

• Thuộc tính border-width:

Border-width là một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web. Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels. Xem hình minh họa bên dưới.

• Thuộc tính border-color:

Border-color là thuộc tính CSS quy định màu viền cho một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.

• Thuộc tính border-style:

Border-style là thuộc tính CSS quy định kiểu viền thể hiện của một đối tượng web.
CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền. Để hiểu rõ hơn, chúng ta hãy xem hình minh họa dưới đây (tất cả viền có màu đỏ).

Ví dụ: Ví dụ sau sẽ định viền cho 3 thành phần h1, h2, p như sau:

view source

print?

01	h1 {   border-width:thin;

02	border-color:#FF0000;

03	border-style:solid   }

04

05	h2 {   border-width:thick;

06	border-color:#CCC;

07	border-style:dotted  }

08	p {   border-width:5px;

09	border-color:#FF00FF;

10	border-style:double  }

Ngoài ra, chúng ta cũng có thể dùng riêng các thuộc tính border-top, border-right, border-bottom hay border-left để chỉ định viền riêng cho các đối tượng.

Ví dụ:

view source

print?

01

h1 {

02	border-top-width:thin;

03	border-top-color:#FF0000;

04	border-top-style:solid;

05	border-right-width:thick;

06	border-right-color:#AFAFAF;

07	border-right-style:dotted;

08	border-bottom-width:2px;

09	border-bottom-color:blue;

10	border-bottom-style:double;

11	border-left-width:5px;

12	border-left-color:violet;

13	border-left-style:groove

14

}

Thuộc tính border rút gọn:
Để dễ nhớ chúng ta có thể sử dụng cấu trúc rút gọn của CSS như sau:
Border: | |

Có thể bạn đã thấy một số trang web có những ô, phần nhập văn bản, hay nút bấm có những đường cong mềm mại (trên Firefox, Safari)? Bạn có thể sử dụng các thuộc tính bổ sung sau cho đường viền của mình để tạo ra những đường cong như ý muốn (thuộc tính này có thể sẽ được đưa vào CSS3, còn với CSS2.1 thì thuộc tính này không được coi là chuẩn)

border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

Bài viết của link2caro - Cộng Đồng WordPress Việt Nam
Hãy tôn trọng tác giả và ghi rõ nguồn khi sao chép, sử dụng nội dung bài viết này.