Thuộc tính Border trong CSS

Tiếp theo loạt bài viết về Box Model, hôm nay chúng ta sẽ cùng tìm hiểu về thuộc tính Border trong CSS. Đây cũng là một thuộc tính khá quan trọng. Khi thuộc tính Border được khai báo cho phép chúng có thể quy định độ dày, màu sắc và kiểu hiện thị đường viền của một thành phần nào đó, tạo ra sự phân biệt giữa các thành phần với nhau trong trang web được rõ ràng hơn.
Các giá trị của border bao gồm: border-style, border-width và border-color
Để đường viền được hiện thị thì giá trị border-style luôn phải được khai báo.

Border style

Border-style sẽ quy định kiểu dáng hiển thị của đường viền, những ví dụ bên dưới cho thấy kiểu dáng hiện thị tương ứng của chúng.

none: không hiển thị đường viền (mặc định khi không được khai báo)

Hiển thị với giá trị solid
Hiển thị với giá trị dashed
Hiển thị với giá trị dotted
Hiển thị với giá trị double
Hiển thị với giá trị groove
Hiển thị với giá trị ridge
Hiển thị với giá trị inset
Hiển thị với giá trị outset

Border Width

Border-width sẽ quy định độ dày của đường viền.

Các giá trị của border-width được tính bằng px, hay có thể sử dụng 1 trong 3 giá trị: thin, medium, thick.

Ví dụ

1 p{ border-stylesolidborder-width1px;}

Đoạn văn bản này được hiển thị với giá trị solid và có border-width: 1px

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ụ:

1 p{ border-stylesolidborder-width1pxborder-color#000000 }

Giá trị border của cạnh riêng biệt

Chẳng hạn khi viết mã CSS như sau:

1 .myborder{ border-stylesolid }

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.

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-stylesolid;
3    border-right-styledashed;
4    border-bottom-styledotted;
5    border-left-styledouble;
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-stylesolid }

Cách viết tắt đối với thuộc tính border

Xét lại ví dụ sau:

1 p{
2    border-stylesolid;
3    border-width1px;
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.
Để đơn giản hơn chúng ta sẽ gộp chung lại để tiện cho việc chỉnh sửa cũng như làm giảm tối đa dung lượng của file CSS xuống mức thấp nhất có thể. Và đây cũng là cách hay được sử dụng nhất.
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 { border1px solid #000000 }

Như vậy đoạn mã nhìn gọn gàng hơn rất nhiều. Thứ tự để viết tắt cho thuộc tính border như sau:

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

Chúng ta cũng có thể viết tắt cho từng cạnh riêng biệt như sau:

1 p{ border-top1px solid red }
Advertisements

Posted on November 7, 2012, in HTML/CSS and tagged , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: