Danh Mục Bài Viết
Tiếp theo mình sẽ đề cập đến một thuộc tính nữa rất hay sử dụng trong Css đó là Border. Bài viết này mình sẽ đề cập đến các khái niệm như border-style, border-width , border-color, border-radius và cách viết gọn các thuộc tính. Nào Let's go thôi
Thuộc tính border trong CSS cho phép bạn chỉ định kiểu, chiều rộng và màu sắc của đường viền của một thẻ.
border-style trong CssThuộc tính border-style sẽ chỉ định các kiểu đường viền được hiển thị.
Thuộc tính border-style có thể chứa đến bốn giá trị (cho viền trên, viền phải, viền dưới và viền trái).
Ví dụ:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Ta có:
border-width là chiều rộng của đường viền. Chiều rộng có thể được đặt thành kích thước cụ thể (tính bằng px, pt, cm, em, v.v.) hoặc bằng cách sử dụng một trong ba giá trị được xác định trước: thin, medium, hoặc thick:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
</style>
</head>
<body>
<h2>Minacode - Border</h2>
<p class="one">Kiến thức lập trình miễn phí.</p>
<p class="two">Kiến thức lập trình miễn phí.</p>
<p class="three">Kiến thức lập trình miễn phí.</p>
<p class="four">Kiến thức lập trình miễn phí.</p>
<p class="five">Kiến thức lập trình miễn phí.</p>
<p class="six">SKiến thức lập trình miễn phí.</p>
</body>
</html>Ta có:
Lưu ý: border-width không thể đứng một mình mà phải có border-style đi theo nhé!
Cũng giống như border-style Thuộc tính border-width có thể có từ một đến bốn giá trị (cho viền trên, viền phải, viền dưới và viền trái):
Ví dụ:
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}Thuộc tính border-colorđược sử dụng để đặt màu cho bốn đường viền.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<h2>Minacode - border-color</h2>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
</body>
</html>Ta có:
Lưu ý: border-color không thể đứng một mình mà phải có border-style đi theo nhé!
Thuộc tính border-color có thể có từ một đến bốn giá trị (cho viền trên, viền phải, viền dưới và viền trái).
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}Một cách khác để style riêng cho từng đường viền:
Ví dụ:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}Thuộc tính này các thuộc tính đường viền riêng lẻ sau:
Ví dụ:
p {
border: 5px solid red;
}
hoặc cho một cạnh:
p {
border-left: 6px solid red;
}Thuộc tính border-radius được sử dụng để thêm bo tròn cho đường viền một thẻ:
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
padding: 5px;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
padding: 5px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
padding: 5px;
}
</style>
</head>
<body>
<h2>Minacode | border-radius</h2>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>Ta có:
>>Còn tiếp nhé>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
