[CSS bài 8] Cách tạo kiểu đường viền (border) trong CSS

Bài này thuộc phần 8 của 9 trong series Học CSS cơ bản

Đường viền (border) có thể sử dụng cho nhiều mục đích khác nhau chẳng hạn như trang trí đoạn văn, tiêu đề … Trong bài viết này tôi sẽ viết về các thuộc tính như:

+ border-style – kiểu dáng đường viền
+ border-width – độ dày của đường viền
+ border-color – màu sắc đường viền
+ border – cách viết rút gọn

1. border-style (kiểu dáng đường viền)

Thuộc tính border-style dùng để thiết lập kiểu dáng đường viền.

Cú pháp border-style: kiểu dáng đường viền;

Trong đó:

Các kiểu dáng đường viền như: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden.

2. border-width (độ dày của đường viền)

Độ dày của đường viền được xác định bởi thuộc tính border-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. Ảnh bên dưới minh họa các thông số thường được sử dụng

3. border-color (màu sắc đường viền)

Thuộc tính border-color dùng để thiết lập màu của đường viền

Cú pháp border-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)
+ transparent (trong suốt)

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 đó.

Lưu ý: Nếu màu sắc đường viền không được thiết lập thì nó sẽ giống màu phần tử HTML chứa nó.

4. Thiết lập đường viền ở các vị trí khác nhau

Đường viền luôn bao gồm bốn vị trí: top, right, bottom, left

Như các ví dụ trên thì bạn thấy khi tạo kiểu cho đường viền mà không xác định vị trí cụ thể thì cả 04 vị trí (top, right, bottom, left) sẽ có cùng một kiểu dáng.

Để tạo kiểu cho đường viền ở từng vị trí cụ thể ta có hai loại cú pháp sau:

Cú pháp 1:

+ Kiểu dáng đường viền: border-vị trí-style: giá trị;

+ Độ dày của đường viền: border-vị trí-width: giá trị;

+ Màu sắc đường viền: border-vị trí-color: giá trị;

Trong đó, “vị trí” là các giá trị như top, right, bottom, left.

Các bạn lưu ý rằng cú pháp này ít dùng vì nó dài dòng.

Cú pháp 2:

– Khi có 01 giá trị

border-style: giá trị;

border-width: giá trị;

border-color: giá trị;

Lưu ý: cả bốn vị trí có cùng giá trị

– Khi có 02 giá trị

border-style: giá trị 1 giá trị 2;

border-width: giá trị 1 giá trị 2;

border-color: giá trị 1 giá trị 2;

 

Lưu ý: 

+ Vị trí top, bottom có giá trị 1
+ Vị trí right, left có giá trị 2

– Khi có 03 giá trị

border-style: giá trị 1 giá trị 2 giá trị 3;

border-width: giá trị 1 giá trị 2 giá trị 3;

border-color: giá trị 1 giá trị 2 giá trị 3;

Lưu ý:

+ Vị trí top có giá trị 1
+ Vị trí right, left có giá trị 2
+ Vị trí bottom có giá trị 3

– Khi có 04 giá trị

border-style: giá trị 1 giá trị 2 giá trị 3 giá trị 4;

border-width: giá trị 1 giá trị 2 giá trị 3 giá trị 4;

border-color: giá trị 1 giá trị 2 giá trị 3 giá trị 4;

Lưu ý:

+ Vị trí top có giá trị 1
+ Vị trí right có giá trị 2
+ Vị trí bottom có giá trị 3
+ Vị trí left có giá trị 4

5. Cú pháp tạo kiểu đường viền rút gọn

Thay vì phải định dạng cho đường viền bởi 3 thuộc tính (border-style, border-width, border-color) riêng biệt, thì ta có thể viết chúng thành một theo cú pháp sau:

border: độ dày kiểu dáng màu sắc;

Trong đó:

“độ dày” là giá trị của thuộc tính border-width
“kiểu dáng” là giá trị của thuộc tính border-style (cần thiết)
“màu sắc” là giá trị của thuộc tính border-color

Lưu ý: Không nhất thiết thuộc tính border phải có đủ 3 giá trị. Tuy nhiên, các giá trị phải được sắp xếp theo đúng thứ tự đó.

Ngoài ra, ta cũng có thể định dạng cho đường viền ở từng vị trí cụ thể bằng cú pháp

border-vị trí: độ dày kiểu dáng màu sắc;

trong đó:

+ “vị trí” là các giá trị như top, right, bottom, left.

+ Đây là ví dụ cho border-left

+ Đây là ví dụ cho border-bottom

+ Tương tự cho thuộc tính border-top và border-right

6. Tạo góc bo tròn cho đường viền

Để tạo góc bo tròn cho đường viền ta dùng thuộc tính border-radius

7. Các bài tập

7.1 Bài tập 1

Thiết lập đường viền có độ dày “4px” và kiểu dáng “dotted” cho đoạn văn dưới

<!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 1

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border-style: dotted;
    border-width: 4px;
}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>

</body>
</html>

7.2 Bài tập 2

Cũng như câu trả lời của bài tập 1 nhưng tạo kiểu đường viền thành màu đỏ

Câu trả lời của bài tập 2

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border-style: dotted;
    border-width: 4px;
    border-color: red;
}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>

</body>
</html>

7.3 Bài tập 3

Cũng như câu trả lời của bài tập 2 nhưng chỉ hiển thị đường viền ở phía trên cùng

Câu trả lời của bài tập 3

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border-top-style: dotted;
    border-top-width: 4px;
    border-top-color: red;
}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>

</body>
</html>

7.4 Bài tập 4

Dùng thuộc tính border để thiết lập đường viền của đoạn văn thành “10px”, “solid” và “green”.

<!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 4

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 10px solid green;
}
</style>
</head>
<body>

<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>

</body>
</html>

8. Lời cuối bài

Đến đây chắc các bạn đã biết tạo đường viền theo ý của bạn. Ở bài sau tôi sẽ viết chủ đề về thuộc tính margin.

The post [CSS bài 8] Cách tạo kiểu đường viền (border) trong CSS appeared first on Học online.

from WordPress http://ift.tt/2xE5IgZ
via IFTTT