[CSS] Bài 9. Border trong CSS

Posted by: Rain on 9/06/2013 in HTML và CSS 0

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.

1.Tổng Quát

3 Thuộc tính của thuộc tính Border

• border-style
• border-width
• border-color

2. 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
• 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:

3. 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)
• một giá trị đo cụ thể như pixels.

Ví Dụ:

<p class='p1'> ví dụ border thin</p>
<br/>
<p class='p2'> ví dụ border medium</p>
<br/>
<p class='p3'> ví dụ border thick</p>
<br/>
<p class='p4'> ví dụ border pixels</p>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

4. Thuộc tính Border- color:

Border-color sẽ quy định màu sắc của đường viền được hiển thị. Giá trị màu có thể là:

• Tên màu (tên tiếng anh): red, white, black . . .
• Hệ RGB – ví dụ: rgb(255,155,0)
• Hệ Hex – ví dụ: #ff0000

Ngoài ra border-color còn có giá trị ”transparent” (trong suốt). Tuy nhiên thì giá trị này không mấy khi được dùng tới. Bởi vì mục đích của chúng ta là muốn đường viền được hiển thị.

Ví Dụ:

<h1> I Love Design</h1>
<h2>Bài Học HTML và CSS cơ bản</h2>
<p>Bạn đang xem bài viết về thuộc tính border trong loạt bài về CSS</p>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

5. Giá Trị Border cho từng cạnh:

Để cấu thành border của một thành phần thì thành phân đó bao gồm 4 cạnh bao quanh:

Xét ví dụ:
Chẳng hạn khi viết mã CSS như sau:

1	.myborder{ border-style: solid }

Thì tất cả các cạnh sẽ được hiển thị với giá trị solid, nhưng có lúc nào đó trong thiết kế của bạn, bạn chỉ muốn một cạnh nào đó được hiện thị mà thôi, hay mỗi cạnh có một kiểu hiện thị khác nhau thì sao?
Để giải quyết vấn đề này thì chúng ta sẽ viết mã CSS cho từng cạnh riêng biệt theo cú pháp:

tag { border- vị trí - thuộc tính: value;} 

Trong đó:
- vị trí là : top, right, bottom, left (như hình)
- thuộc tính: style, width và color
Ví dụ sau thì mỗi cạnh sẽ được hiển thị với một kiểu khác nhau.

1	.myborder{

2	border-top-style: solid;

3	border-right-style: dashed;

4	border-bottom-style: dotted;

5	border-left-style: double;

6

}

Khi chỉ muốn cạnh nào đó hiển thị thì bạn chỉ cần viết CSS cho cạnh đó thôi.
Ví dụ sau chỉ hiện thị cạnh trên cùng.

1	.myborder{ border-top-style: solid }

6. Thuộc tính rút gọn:
Cũng như thuộc tính background, font,.. thuộc tính border cũng có thuộc tính rút gọn như sau:
Border:<border-width> |<border-color> |<border-style>

Ví Dụ:

1

p{

2	border-style: solid;

3	border-width: 1px;

4	border-color: #000000;

5

}

Ta nhận thấy các thành phần border-style, border-width, border-color được viết riêng biệt với các giá trị tương ứng. Từ ví dụ trên, ta sẽ viết chung tại như sau, đây gọi là cách viết tắt trong CSS.

1	p { border: 1px solid #000000 }