Sunday, February 27, 2011

Các thuộc tính Border trong CSS

------------------------------------------------------------------------
Các thuộc tính Border trong CSS định nghĩa đường bao (viền) xung quanh một thành phần. ------------------------------------------------------------------------

Các ví dụ:

- Kiểu đường viền:
p {  border-style:double  }

Viền đôi

- Độ rộng viền:
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
- Màu viền: . Màu viền có thể đặt theo 3 cách:
+ Tên màu: chi định một màu đặc biệt, VD "red"
+ RGB: chỉ định màu theo mã rgb, VD "rgb(255,0,0)"
+ Hex: chỉ định màu theo mã Hex, VD "#ff0000"
    Chú ý: Đặc tính "màu viền" không sử dụng đơn độc. Dùng thuộc tính "kiểu viền" để đặt đường viền trước
     p.one
    {
    border-style:solid;
    border-color:red;
    }
    p.two
    {
    border-style:solid;
    border-color:#98bf21;
    }
    - Thiết lập mỗi cạnh riêng:
    p
    {
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
    }
    - Rút gọn các thuộc tính:
    VD: border:5px solid red;

    Các đường bao trong CSS

    Thuộc tính Border cho phép bạn chỉ định kiểu cách, màu sắc và độ rộng của đường bao của một thành phần. Trong HTML chúng ta sử dụng bảng để tạo ra các đường bao xung quanh một văn bản, nhưng với các thuộc tính Border trong CSS chúng ta có thể tạo các đường bao với hiệu ứng đẹp và nó có thể ứng dụng cho phần tử bất kỳ.

    Thuộc tính Border:
    Thuộc tính
    Mô tả
    Ví dụ
    border
    Một thuộc tính tốc hành để thiết lập thuộc tính cho toàn bộ cả 4 đường bao trong một khai báo.
    		 border-width
    border-style
    border-color
    border-bottom
    Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao đáy trong một khai báo.
    		 border-bottom-width
    border-style
    border-color
    border-bottom-color
    Thiết lập màu sắc của đường bao đáy
    		 border-color
    border-bottom-style
    Thiết lập kiểu cách của đường bao đáy.
    		 border-style
    border-bottom-width
    Thiết lập độ rộng của đường bao đáy
    		 thin
    medium
    thick
    length
    border-color
    Thiết lập màu sắc của bốn đường bao, có thể đạt màu từ một đến bốn.
    		 color
    border-left
    Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao trái trong một khai báo.
    		 border-left-width
    border-style
    border-color
    border-left-color
    Thiết lập màu sắc của đường bao trái.
    		 border-color
    border-left-style
    Thiết lập kiểu cách của đường bao trái.
    		 border-style
    border-left-width
    Thiết lập độ rộng của đường bao trái.
    		 thin
    medium
    thick
    length
    border-right
    Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao phải trong một khai báo.
    		 border-right-width
    border-style
    border-color
    border-right-color
    Thiết lập màu sắc của đường bao phải.
    		 border-color
    border-right-style
    Thiết lập kiểu cách của đường bao phải.
    		 border-style
    border-right-width
    Thiết lập độ rộng của đường bao phải.
    		 thin
    medium
    thick
    length
    border-style
    Thiết lập kiểu cách của cả bốn đường bao, có thể đạt được kiểu từ một đến bốn.
    		 none
    hidden
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
    border-top
    Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao đỉnh trong một khai báo.
    		 border-top-width
    border-style
    border-color
    border-top-color
    Thiết lập màu sắc của đường bao đỉnh.
    		border-color
    border-top-style
    Thiết lập kiểu cách của đường bao đỉnh.
    		 border-style
    border-top-width
    Thiết lập độ rộng của đường bao đỉnh
    		 thin
    medium
    thick
    length
    border-width
    Một thuộc tính tốc hành để thiết lập độ rộng của
    bốn đường bao trong một khai báo, có thể có từ một đến bốn giá trị.
    		 thin
    medium
    thick
    length

    Related Posts Plugin for WordPress, Blogger...