Related Posts
Bảo Nguyễn
Bảo Nguyễn
Bảo Nguyễn
Thuộc tính border hay còn gọi là đường viền biên đóng vai trò rất quan trọng trong css, thông thường chúng ta thường dùng nó để hiển thị rõ những phần phân chia ranh giới với nhau điều này giúp ích rất nhiều trong việc thiết kế website. Ở bài này chúng ta sẽ cùng nhau tìm hiểu về các thuộc tính cơ bản của border để từ đó có thể sử dụng chúng một cách thành thạo.
Border-color cho phép chúng ta thay đổi màu sắc của đường viền bao quanh, thông thường để bao đường viền chúng ta có 4 vị trí cần sử dụng đó là trên, dưới, trái, phải. Như vậy nếu bạn muốn thay đổi màu sắc cho chúng thì bạn chỉ việc chỉ định màu sắc ở vị trí nào hoặc là cả 4 cạnh.
Để hiểu rõ hơn tôi sẽ có một ví dụ minh họa cho bạn thấy :
<html>
<head>
<style type="text/css">
p.example1{
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2{
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class="example1">
Đây là ví dụ thứ nhất, 4 cạnh 4 màu khác nhau
</p>
<p class="example2">
Đây là ví dụ thứ hai, 4 cạnh 4 màu khác nhau
</p>
</body>
</html>
Và nó sẽ cho kết quả như thế này
Thuộc tính này quy định cách thức mà đường viền hiển thị, có thể là nét đứt, nét liền.. chúng được sử dụng bằng cú pháp border-style:giá trị; bạn chỉ việc thay phong cách hiển thị bằng giá trị tương ứng bạn cần, dưới đây là một số giá trị dành cho bạn:
Để dễ hình dung thì các bạn có thể xem qua hình bên dưới nhé
Ngoài ra các bạn cũng có thể thay đổi cách hiển thị của nó giống như border-color thông qua 4 hướng khác nhau:
Thuôc tính này cho phép thiết lập biên độ rộng của border, nó có thể nhận thuộc tính px, pt hoặc cm . Về cách dùng thì bạn chỉ việc thêm giá trị vào sau thuộc tính cần dùng.
Ví dụ: border-right-width: 12px;
Cho phép gộp chung các thuộc tính màu sắc, style, độ rộng trong một cú pháp chung, giúp tiết kiệm thời gian và giảm thiểu dung lượng css của bạn. Cách này rất nhanh phù hợp với nhũng người viết code chuyên nghiệp.
<p style="border:5px solid red;">
Đây là ví dụ, được bắt đầu bằng độ rộng, style, màu sắc.
</p>
Ở bài này mình đã hướng dẫn các bạn về thuộc tính border trong css, các bạn cần nắm vững kiến thức về mảng này nhé, sau này chsng ta sẽ sử dụng nó rất nhiều đó, hẹn gặp lại các bạn ở bài tiếp theo.
Bài viết khác cùng serie
Leave a Reply
1 Comment on "Học Css cơ bản – Thuộc tính border, đường viền"