Học Css cơ bản – Thuộc tính border, đường viền

Bài này thuộc phần 6 nằm trong tổng 7 phần của serie Học CSS cơ bả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.

Thuộc tính border-color

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.

  1. border-bottom-color : Thay đổi màu sắc của đường viền phía dưới
  2. border-top-color : Thay đổi màu sắc của đường viền phía trên
  3. border-left-color : Thay đổi màu sắc của đường viền bên trái
  4. border-right-color : Thay đổi màu sắc của đường viền bên phải

Để 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

thuoc-tinh-border-4-canh

Thuộc tính border-style

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:

  • none : Không có border.
  • solid : Hiển thị theo vệ kẻ liền duy nhất
  • dotted : Hiển thị theo dạng dấu chấm
  • dashed : Giống nét kẻ đứt
  • double : Hiển thị dạng đôi vạch liền
  • groove : Không biết diễn tả thế nào về cái này 😀
  • ridge : 4 cạnh đậm kiểu bóng đổ
  • inset : Bên trái và bên trên đậm, bên dưới và bên phải mờ
  • outset : ngược lại của inset
  • hidden : Giống như không có thế nhưng nó được kế thừa hoàn toàn từ 4 phía

Để dễ hình dung thì các bạn có thể xem qua hình bên dưới nhé

thuoc-tinh-border-vien

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:

  • border-bottom-style : phía dưới
  • border-top-style : phía trên
  • border-left-style : Bên trái
  • border-right-style : bên phải

Thuộc tính border-width

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.

  • border-bottom-width
  • border-top-width
  • border-left-width
  • border-right-width

Ví dụ: border-right-width: 12px;

Thuộc tính Border Shorthand

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>

Lời kết:

Ở 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

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái công sở và thích bàn luận quân sự.

Leave a Reply

1 Comment on "Học Css cơ bản – Thuộc tính border, đường viền"

Notify of
avatar
Sort by:   newest | oldest | most voted
wpDiscuz

Create Account



Log In Your Account