Outline là một đường vẽ xung quanh các phần tử (bên ngoài border) để làm cho phần tử “nổi bật”. Trong bài viết này tôi sẽ viết về các thuộc tính như:
+ outline-style – kiểu dáng outline
+ outline-width – độ dày của outline
+ outline-color – màu sắc outline
+ outline – cách viết rút gọn
1. Lưu ý
Tuy các giá trị của thuộc tính outline tương tự như đường viền (border) nhưng thuộc tính outline KHÔNG là một phần kích thước của một phần tử; Tổng chiều rộng và chiều cao của phần tử KHÔNG bao gồm độ dày của outline.
2. outline-style (kiểu dáng outline)
Thuộc tính outline-style dùng để thiết lập kiểu dáng outline
Cú pháp outline-style: kiểu dáng;
Trong đó:
Các kiểu dáng như: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.
Các bạn thấy các giá trị của nó cũng tương tự như đường viền (border)
Ví dụ sau thiết lập một đường viền màu đen mỏng xung quanh mỗi phần tử <p>, sau đó nó cho thấy các outline-style giá trị khác nhau:
3. outline-width (độ dày của outline)
Độ dày của outline được xác định bởi thuộc tính outline-width, bạn có thể gán các giá trị theo tên như thin (mỏng), medium (vừa), hoặc thick (dày), các đơn vị khác cũng được sử dụng như px.
4. outline-color (màu sắc của outline)
Thuộc tính outline-color dùng để thiết lập màu của outline
Cú pháp outline-color: màu sắc;
Trong đó, “màu sắc” thường được dùng với:
+ Tên màu chẳng hạn như red (đỏ)
+ Giá trị Hex chẳng hạn như #ff0000
+ Giá trị RGB chẳng hạn như rgb(255,0,0)
+ invert – màu đối lập với màu nền (đảm bảo rằng outline có thể nhìn thấy được, bất kể màu nền)
Về màu sắc tôi đã viết một bài riêng, nếu bạn chưa biết thì hãy xem lại bài viết đó.
5. Cú pháp outline rút gọn
Thay vì phải định dạng cho outline bởi 3 thuộc tính (outline-style, outline-width, outline-color) riêng biệt, thì ta có thể viết chúng thành một theo cú pháp sau:
outline: độ dày kiểu dáng màu sắc;
Trong đó:
“độ dày” là giá trị của thuộc tính outline-width
“kiểu dáng” là giá trị của thuộc tính outline-style (cần thiết)
“màu sắc” là giá trị của thuộc tính outline-color
Lưu ý: Không nhất thiết thuộc tính outline phải có đủ 3 giá trị. Tuy nhiên, các giá trị phải được sắp xếp theo đúng thứ tự đó.
6. Các bài tập
6.1 Bài tập 1
Thiết lập màu outline cho thẻ <p> thành màu xanh lá (green).
<!DOCTYPE html>
<html>
<head>
<style>
p {
outline-style: solid;
outline-width: 4px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
</body>
</html>
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<head>
<style>
p {
outline-style: solid;
outline-width: 4px;
outline-color: green;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
</body>
</html>
6.2 Bài tập 2
Thiết lập outline cho thẻ <p> là màu “đỏ”, “dotted” và “10px”.
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn</p> </body> </html>
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
p {
outline: red dotted 10px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
</body>
</html>
7. Lời cuối bài
Đến đây là kết thúc bài về các thuộc tính outline trong CSS. Ở bài sau tôi sẽ viết về các thuộc tính trong text (văn bản).
The post [CSS bài 13] Các thuộc tính outline trong CSS appeared first on Học online.
from WordPress http://ift.tt/2iRgI7A
via IFTTT
Không có nhận xét nào:
Đăng nhận xét