Các thuộc tính CSS về đường viền
Các thuộc tính CSS về đường
viền cho phép bạn xác định kiểu (style), chiều rộng và màu sắc cho đường viền của
một phần tử nào đó.
Phần tử này có viền kiểu là
đường rãnh (groove), rộng 15px và màu xanh lá cây.
Kiểu đường viền
Thuộc tính border-style chỉ định loại\kiểu đường viền sẽ hiển thị.
Các giá trị cho phép đối với
thuộc tính này:
dotted - đường viền là các điểm (dấu chấm)
dashed - đường viền là các nét đứt
solid - đường viền là nét liền mảnh
double - đường viền là nét đôi
groove - đường viền 3D có xẻ rãnh. Hiệu ứng phụ thuộc
vào màu viền
ridge - đường viền 3D tròn nổi. Hiệu ứng phụ thuộc vào
màu viền
inset - đường viền 3D khung chìm. Hiệu ứng phụ thuộc
vào màu viền
outset - đường viền 3D khung nổi. Hiệu ứng phụ thuộc vào
màu viền
none - không có đường viền
hidden - đường viền ẩn
Thuộc tính border-style có thể có từ một đến bốn giá trị (thiết lập cho 4 đường viền
trên (top), phải (right), dưới (bottom), và trái (left)).
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;}
Kết quả:
Lưu ý: Không có thuộc tính đường viền CSS KHÁC được mô tả dưới đây
có BẤT KỲ tác dụng nào tính border-style được thiết lập!
Chiều rộng đường viền
Thuộc tính border-width chỉ định chiều rộng của bốn đường viền.
Chiều rộng có thể được thiết
lập như với một giá trị cụ thể (trong px, pt, cm, em, v.v.) hoặc bằng cách sử dụng
một trong ba giá trị được định nghĩa trước: thin, medium hoặc thick.
Thuộc tính border-width có thể có từ một đến bốn giá trị (đường viền trên, đường viền
phải, đường viền dưới, và đường viền trái).
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px 10px 4px
20px;
}
Màu sắc đường viền
Thuộc tính border-color được sử dụng để thiết lập màu sắc của bốn đường viền (trên,
dưới, trái, phải).
Màu sắc có thể được thiết lập
theo các giá trị:
·
Tên - chỉ định tên một màu sắc cụ thể (tiếng Anh), ví dụ "red"
·
RGB - chỉ định một giá trị RGB, ví dụ "rgb(255,0,0)"
·
Hex - chỉ định một giá trị hex, ví dụ "#ff0000"
·
transparent - đường viền trong suốt
Thuộc tính border-color có thể có từ một đến bốn giá trị (cho đường viền trên, đường
viền phải, đường viền dưới, và đường viền trái).
Nếu border-color không được thiết lập, nó kế thừa màu sắc của các phần tử.
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue
yellow;
}
Đường viền - Các cạnh cụ thể
Từ những ví dụ ở trên, bạn đã thấy rằng có thể chỉ định một đường viền khác nhau cho mỗi cạnh của hộp.
Trong CSS, cũng có các thuộc
tính để chỉ định cụ thể cho mỗi đường viền (trên (top), phải (right), dưới
(bottom) và trái (left)):
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Ví dụ ở trên cho kết quả
tương tự như sau:
p {
border-style: dotted solid;
}
Vì vậy, đây là cách thức hoạt
động của nó:
Nếu thuộc tính border-style có bốn giá trị:
·
border-style: dotted solid
double dashed;
o đường viền trên là dotted
o đường viền phải là solid
o đường viền dưới là double
o đường viền trái là dashed Nếu
thuộc tính border-style có 3 giá trị:
·
border-style: dotted solid
double;
o đường viền trên là dotted
o đường viền phải và trái là
solid
o đường viền dưới là double
Nếu thuộc
tính border-style có hai giá trị:
·
border-style: dotted solid;
o đường viền trên và dưới là
dotted
o đường viền phải và trái là
solid Nếu thuộc tính border-style có một giá trị:
·
border-style: dotted;
o tất cả bốn cạnh đều có viền
là dotted
Thuộc tính border-style được sử dụng trong ví dụ trên. Tuy nhiên, điều này cũng đúng
với thuộc tính border-width vàborder-color.
Đường viền - Thuộc tính rút gọn
Như bạn có thể thấy ở những
ví dụ ở trên, có rất nhiều thuộc tính được xem xét khi làm việc với các đường
viền.
Để rút gọn mã, chúng ta cũng
có thể để xác định tất cả các thuộc tính đó trong một thuộc tính.
Thuộc tính border là thuộc tính rút gọn cho các thuộc tính sau đây:
·
border-width
·
border-style (required)
·
border-color
p {
border: 5px solid red;
}
Ví dụ khác
Tất cả các thuộc tính về đường viền trên trong một mô tả
Ví dụ này cho thấy một thuộc
tính rút gọn dùng để thiết lập tất cả các thuộc tính của đường viền trên trong
một mô tả (declaration).
Ví dụ này cho thấy cách thiết
lập kiểu (style) cho đường viền dưới (bottom).
Ví dụ này cho thấy cách thiết
lập chiều rộng cho đường viền trái.
Ví dụ này cho thấy cách thiết
lập màu sắc cho bốn đường viền (trên, phải, dưới, trái). Nó có thể có từ một đến
bốn màu sắc.
Ví dụ này cho thấy cách thiết
lập màu sắc cho đường viền phải.
Tự làm bài tập!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »Tất cả các thuộc tính CSS về đường viền
Thiết lập tất cả các thuộc
tính về đường viền trong một mô tả (declaratio
Thiết lập tấp cả các thuộc
tính cho đường viền dưới cùng (bottom) trong (declaration)
Thiết lập màu sắc cho đường
viền dưới cùng (bottom)
Thiết lập kiểu (style) cho đường
viền dưới cùng (bottom)
Thiết lập độ rộng cho đường
viền dưới cùng
Thiết lập màu sắc cho bốn đường
viền (top, right, bottom, left)
Thiết lập tất cả các thuộc tính
cho đường viền trái (left) trong một mô tả
Thiết lập màu sắc cho đường
viền trái (left)
Thiết lập kiểu (style) cho đường viền trái (left)
Thiết lập độ rộng cho đường
viền trái (left)
Thiết lập tất cả các thuộc
tính cho đường viền phải (right) trong một mô
Thiết lập màu sắc cho đường
viền phải (right)
Thiết lập kiểu (style) cho đường
viền phải (right)
Thiết lập độ rộng cho đường
viền phải (right)
|
|
Thiết lập kiểu (style) cho
cả bốn đường viền
|
|
Thiết lập tất cả các thuộc
tính cho đường viền trên (top) trong một mô tả
|
|
Thiết lập màu sắc cho đường viền trên
(top)
|
|
Thiết lập kiểu (style) cho
đường viền trên (top)
|
|
Thiết lập độ rộng cho đường
viền trên (top)
|
|
Thiết lập độ rộng cho cả bốn
đường viền
|
Đăng nhận xét