Thiết kế Blog giá rẻ 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)
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ụ
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à:
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ụ:
Giá trị border của cạnh riêng biệt
Chẳng hạn khi viết mã CSS như sau:
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.
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.
Cách viết tắt đối với thuộc tính border
Xét lại ví dụ sau:
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.
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:
Chúng ta cũng có thể viết tắt cho từng cạnh riêng biệt như sau:
Read more: http://blog.linhdungvn.com/2012/12/thuoc-tinh-border-trong-css.html#ixzz2XhkhqRhJ
Nguồn : chúng tôi sưu tầm từ nhiều nguồ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ụ
p{ border-style: solid; border-width: 1px;}Đ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ụ:
p{ border-style: solid; border-width: 1px; border-color: #000000 }Giá trị border của cạnh riêng biệt
Chẳng hạn khi viết mã CSS như sau:
.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.
Ví dụ sau thì mỗi cạnh sẽ được hiển thị với một kiểu khác nhau.
.myborder{
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;
}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.
.myborder{ border-top-style: solid }Cách viết tắt đối với thuộc tính border
Xét lại ví dụ sau:
p{
border-style: solid;
border-width: 1px;
border-color: #000000;
}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.
p { border: 1px 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:
p{ border-top: 1px solid red }Nguồn bài viết: Ewebvn
Read more: http://blog.linhdungvn.com/2012/12/thuoc-tinh-border-trong-css.html#ixzz2XhkhqRhJ
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn
0 nhận xét:
Đăng nhận xét