Border trong CSS - Tự học CSS

Trong bài hướng dẫn tự học CSS này, bạn sẽ học cách sử dụng CSS để tạo các đường viền (border) xung quanh của một phần tử.

Tóm Tắt

Thuộc tính border là gì?

Border trong CSS

Thuộc tính border trong CSS cho phép bạn tạo ra đường viền của hộp phần tử.

Các đường viền xuất hiện trực tiếp giữa phần lề (maring) và phần đệm (padding) của một phần tử.

Đường viền (border) có thể là kiểu được xác định trước như:

Bạn đang đọc: Border trong CSS – Tự học CSS

Đường viền nét liền
Đường viết nét đứt
Đường viền 2 nét
Hoặc cả hình ảnh
…

Phần dưới đây bạn sẽ học được cách thiết lập đường viền một cách chi tiết cụ thể nhất .
Nhưng thứ nhất, bạn dần biết

Có các kiểu border nào trong CSS?

Thuộc tính border-style trong CSScho phép thiết lập kiểu đường viền của hộp chẳng hạn như:

solid
dotted
…

Nó là thuộc tính viết tắt để thiết lập kiểu đường cho toàn bộ bốn cạnh của đường viền .

Ngoài ra, thuộc tính border-style còn có thể có các giá trị sau:

none
hidden
solid
dashed
dotted
double
inset
outset
grove
ridge

Bây giờ, hãy xem hình minh họa bên dưới đây, nó sẽ cho bạn thấy những kiểu viền khác nhau hiển thị như thế nào :
Các loại đường viền trong CSS

Các giá trị none và hidden không có đường viền.

Tuy nhiên, có một chút ít độc lạ giữa hai giá trị này .

Trong trường hợp ô của bảng và đường viền được thu gọn, giá trị none có mức độ ưu tiên thấp nhất, trong khi giá trị hidden có mức độ ưu tiên cao nhất, nếu có bất kỳ đường viền xung đột nào khác được thiết lập.

Các giá trị inset, outset, groove và ridge tạo ra hiệu ứng giống như 3D về cơ bản phụ thuộc vào giá trị border-color.

Điều này thường đạt được bằng cách tạo ra một ‘ bóng ’ từ hai màu sáng và tối hơn một chút ít so với màu của đường viền .
Hãy xem ví dụ sau :
HTML :

No border .
Hidden border .
dotted border .
dashed border .
solid border .
double border .
inset border .
outset border .
groove border .
ridge border .

CSS :

p { 
    border-width: 5px;
    border-color: #f2f2f2;
    color: #003999;
    padding: 20px;
    margin: 20px;
    width: 100px;
    float: left;
}
p.none {
    border-style: none;
}
p.hidden {
    border-style: hidden;
}
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;
}

Lưu ý : Bạn phải chỉ định một kiểu đường viền để làm cho đường viền Open xung quanh một thành phần, vì kiểu đường viền mặc định là không có. Trong khi, chiều rộng hoặc độ dày của đường viền mặc định là medium và màu đường viền mặc định giống với màu văn bản .

Thiết lập chiều rộng của đường viền (border-width)

Thuộc tính border-width chỉ định chiều rộng của đường viền.

Nó là một thuộc tính viết tắt để thiết lập độ dày của tổng thể bốn cạnh của đường viền thành phần cùng một lúc .

Nó có thể chấp nhận 4 giá trị tương ứng với TOP | RIGHT | BOTTOM | LEFT
3 giá trị tương ứng với TOP | RIGHT và LEFT | BOTTOM
2 giá trị tương ứng với TOP và BOTTOM | RIGHT và LEFT

Hãy thử ví dụ sau để hiểu cách nó hoạt động giải trí :
HTML :



Xem thêm: Chủ Đề Javascript Là Ngôn Ngữ Thông Dịch Hay Biên Dịch, Javascript Là Ngôn Ngữ Thông Dịch Hay Biên Dịch

CSS :

p { 
    border-style: solid;
    border-color: #003999;
    padding: 20px;
    margin: 20px;
    width: 200px;
    float: left;
}
p.one {
    border-width: 5px;
}
p.two {
    border-width: 5px 10px;
}
p.three {
    border-width: 5px 10px 15px;
}
p.four {
    border-width: medium 10px thick 15px;
}

Kết quả ta được như sau :
Cách thiết lập chiều rộng của đường viền trong CSS

Mẹo: Chiều rộng đường viền có thể được chỉ định bằng cách sử dụng bất kỳ giá trị chiều dài nào, chẳng hạn như px, em, rem, v.v. Ngoài các đơn vị chiều dài, chiều rộng đường viền cũng có thể được chỉ định bằng cách sử dụng một trong ba từ khóa: thin, medium và thick. Nhưng giá trị % thì không được.

Cách thiết lập màu sắc của đường viền (border-color)

Thuộc tính border-color chỉ định màu của đường viền. Đây cũng là một thuộc tính viết tắt để thiết lập màu của tất cả bốn cạnh của đường viền phần tử.

Các quy tắc CSS sau đây thêm một đường viền đặc màu đỏ xung quanh những đoạn văn .
HTML :

CSS :

p { 
border-width: 10px;
width: 100px;
float: left;
padding: 20px;
margin: 20px;
}
p.one {
border-style: solid;
border-color: #ff0000;
}
p.two {
border-style: solid;
border-color: #ff0000 #00ff00;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}

Kết quả ta được như sau :
Cách thiết lập màu sắc của đường viền trong CSS

Lưu ý: Thuộc tính border-width hoặc border-color trong CSS không hoạt động nếu nó được sử dụng một mình. Sử dụng thuộc tính border-style để thiết lập kiểu đường viền trước tiên.

Cách viết tắt thuộc tính border trong CSS

Thuộc tính border trong CSS là thuộc tính cho phép viết tắt để thiết lập một hoặc nhiều thuộc tính đường viền riêng lẻ là border-width, border-style và border-color trong một dòng code duy nhất.

Hãy xem ví dụ sau để hiểu cách nó hoạt động giải trí :
HTML :

Cách viết tắt thuộc tính border

CSS :

p { 
    border: 5px solid #003999;
    background: #fff;
    padding: 20px;
    margin: 20px;
}

Cách viết tắt thuộc tính border trong CSS (VD1)Nếu giá trị cho một thuộc tính đường viền riêng không liên quan gì đến nhau bị bỏ lỡ hoặc không được chỉ định trong khi viết tắt, giá trị mặc định cho thuộc tính đó sẽ được sử dụng sửa chữa thay thế, nếu có .

Ví dụ: Nếu giá trị cho thuộc tính border-color bị thiếu hoặc không được chỉ định khi thiết lập đường viền, thì thuộc tính color của phần tử sẽ được sử dụng làm giá trị cho màu đường viền.

Trong ví dụ bên dưới, đường viền sẽ là một đường nét liền nét màu đỏ có chiều rộng 5 px :
HTML :

Cách viết tắt thuộc tính border

CSS :

p { 
    color: red;
    border: 5px solid;
    background: #fff;
    padding: 20px;
    margin: 20px;
}

Cách viết tắt thuộc tính border trong CSS (VD2)

Tuy nhiên, trong trường hợp của border-style, việc bỏ qua giá trị sẽ khiến không có đường viền nào hiển thị vì giá trị mặc định cho thuộc tính này là none.

Như trong ví dụ sau sẽ không có đường viền :
HTML :

Không có đường viền vì border-style mặc định là none

CSS :

p { 
border: 5px #003999;
background: yellow;
padding: 20px;
margin: 20px;
}

Không có đường viền vì không thiết lập border-style

Như vậy, qua bài viết này, mình đã giúp bạn biết được các thuộc tính trong CSS sử dụng để thiết lập kiểu cho đường viền (border) của phần tử.

Xem thêm: Top 20 bài tập xử lý chuỗi trong java hay nhất 2022

Chúc bạn học tốt !
Học tiếp : ( Updating … )

Đọc thêm: Padding trong CSS

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com