Đường viền và các thuộc tính của đường viền

Trong hoc thiet ke web bằng CSS thì các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho các thẻ HTML như <div>, <li>, <table>,...

Trong thuộc tính đường viền (border) chúng ta có 3 giá trị cơ bản đó là:

1. border-color:
2. border-width:
3. border-style:

Thuộc tính màu của đường viền

Để đặt màu cho đường viền chúng ta sẽ đặt thông số màu cho thuộc tính border-color:

div.color {

  border-color: #CC0000;

}

Đặt chiều rộng cho đường viền (border)

Nếu muốn đặt chiều rộng của đường viền chúng ta sẽ đặt giá trị cho thuộc tính border-width:

div.borerwidth {

  border-width: 2px;

}

STT	Giá trị
1	thin
2	medium
3	thick
4	length

Chọn kiểu của đường viền

Bạn có thể sử dụng thuộc tính border-style để đặt kiểu cho đường viền. Chúng ta có thể gán cho thuộc tính này 9 giá trị khác nhau tương ứng với 9 kiểu đường viền khác nhau.

div.borderstyle {

  border-style: solid;

}

STT	border-style
1	none
2	hidden
3	dotted
4	dashed
5	solid
6	double
7	groove
8	ridge
9	inset
10	outset

Với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng:

1. border-top:
2. border-right:
3. border-bottom:
4. border-left:

Ứng với đường viền của mỗi phía chúng ta đều có 3 giá trị (color, width, style)

STT	Phía	Thuộc tính
1	top	border-top-color: border-top-width: border-top-style:
2	right	border-right-color: border-right-width: border-right-style:
3	bottom	border-bottom-color: border-bottom-width: border-bottom-style:
4	left	border-left-color: border-left-width: border-left-style:

Chúng ta có thể dùng phương pháp viết mã giản lược (shorthand) để viết các thuộc tính của đường viền gọn hơn. Giả sử chúng ta đặt thuộc tính border của thẻ <div> với độ rộng bằng 1, kiểu solid và màu là #CC0000

div.border {

  border: 1px solid #CC0000;

}

Các thuộc tính của margin

Thuộc tính margin sẽ định nghĩa khoảng trắng bao quanh một phần tử HTML. Nó có thể dùng giá trị âm để lồng nội dung vào với nhau. Tương ứng với 4 phía của một phần tử chúng ta có 4 thuộc tính tương ứng. Mặt khác để viết cho gọn chúng ta cũng có thể dùng cách viết giản lược để định nghĩa các giá trị cho thuộc tính margin.

Đối với các trình duyệt Netcape và IE thì giá trị mặc định của thuộc tính margin là 8px. Nhưng Opera thì không hỗ trợ như vậy. Để cho thống nhất chúng ta có thể đặt margin mặc định cho toàn bộ các phần tử.

Các giá trị mà thuộc tính margin có thể nhận được đó là: auto, length, %. Chúng ta đặt giá trị nào là tùy thích cộng với việc tương ứng tỉ lệ với các phần tử khác.

Tương ứng với 4 phía ta có 4 thuộc tính:

1. margin-top:
2. margin-right:
3. margin-bottom:
4. margin-left:

Để cho gọn chúng ta cũng có thể việt thuộc tính margin dưới dạng shorthand

div.margin {

  margin: 10px 4px 5px 9px; /* top  |  right  |  bottom  |  left*/

}