[Học CSS] Bài 10: Làm việc với khung viền – border trong CSS

Trong bài này chúng ta cùng tìm hiểu về  khung viền – border trong CSS, để xem hình thù nó ra sao và sử dụng như thế nào nhé !

Hình dung về border trong CSS

Để hình dung các bạn xem hình ảnh minh họa sau, đó là border (khung viền) mà mình sử dụng trên Hocban.vn

Vi du ve border

Trong ví dụ này thì khung viền (border) ở đây nó bao quanh đối tượng là link của “bài viết liên quan”. Và thứ hai nó là một đường viền ngăn cách “nét đứt” giữa phần bài viết liên quan và phần bình luận.

Sử dụng border trong CSS

Để sử dụng border trong CSS thì các bạn cho vùng chọn đoạn CSS về Border như sau:

Border: solid 1px blue;

Trong đoạn code trên thì các giá trị của border được hiểu như sau:

  • Solid: là kiểu border, ở đây là kiểu đường viền liền khối. Ngoài ra nó còn có các giá trị khác như: dotted (đường viền tạo bởi các dấu chấm), dashed (dấu gạch ngang), double (02 đường viền song song).
  • 1px : đây là độ dày của đường viền, giá trị 1px, 2px,…20px,.. gì đó tùy nhu cầu nhé !
  • blue: màu sắc của đường viền, đây là màu xanh dương, ngoài việc sử dụng các tên màu bạn cũng có thể sử dụng mã màu CSS cho nó.

Bây giờ các bạn xem qua ví dụ, nhớ dán vào công cụ Codepen để xem kết quả, sau đó thay thế các giá trị trong đoạn border solid blue 5px bằng các giá trị mà mình đã đưa ra ở trên.

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            h1 {
            font-size: 40px;
            color: red;
            font-family: Arial;
            font-weight: 800;                         
            }
            p {
            font-size: 16px;
            border: solid blue 3px;               
            }
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Boder là một cái khung viền, nó có thể bao quanh vùng chọn, cũng có thể nó chỉ bao ở một phía của vùng chọn như:

  • Border-top: Đường viền đặt phía trên vùng chọn;
  • Border-bottom: Đường viền đặt phía dưới vùng chọn;
  • Border-left: Đường viền đặt bên trái vùng chọn;
  • Border-right: Đường viền đặt bên phải vùng chọn.

Nếu bạn để nguyên border thì mặc định là nó sẽ bao quanh vùng chọn bằng một cái khung, còn nếu bạn chỉ muốn bao quanh phần bên trái, bên phải, 2 bên, 3 bên, 1 bên cũng được thì sử dụng cú pháp tương tự như:

Border-lerf: solid blue 5px ;
Border-top: solid red 2px ;
Border-bottom: dashed green #FFFFFF ;

Các bạn copy và thay thế đoạn code này bằng đoạn  border: solid blue 3px; trong ví dụ trên để xem nó hiển thị như thế nào nhé ! Thôi mình dán luôn cho rồi :v

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            h1 {
            font-size: 40px;
            color: red;
            font-family: Arial;
            font-weight: 800;                         
            }
            p {
            font-size: 16px;
            Border-left: solid blue 5px ;
            Border-top: solid red 2px ;
            Border-bottom: dashed green 2px ;              
            }
        </style>
    </head>
    <body>
        <h1> Tiêu đề bài viết </H1>
        <p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur 
            adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus 
            facilisis felis massa, at bibendum lorem fringilla ut. Sed 
            ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
        </p>
    </body>
</html>

Cũng ổn đó chứ nhỉ, cứ thế mà nghịch thôi. Thay thế tất cả những giá trị trong ví dụ bằng các giá trị mà bạn muốn. Ví dụ bạn chỉ muốn border nằm ở bên trái của nội dung, có màu đỏ và nét đậm liền khối, độ dày đường viền là 3px chẳng hạn thì làm sao ? Haha, thôi tự tìm hiểu nhé !

Nhưng mà sau khi xem xong ví dụ, các bạn để ý là phần nội dung quá sát với đường viền đúng không nào ? Và để giải quyết vấn đề này thì trong những bài tiếp theo chúng ta sẽ cho vị trí của khung viền cách xa phần nội dung với một khoảng cách nhất định.

Bài học trước đó và tiếp theo

2.7/5 - (4 votes)




Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 80% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+