CSS Text Decoration

Trang trí đoạn văn bản

Trong chương này chúng ta sẽ tìm hiểu về các thuộc tính sau:

1. text-decoration-line
2. text-decoration-color
3. text-decoration-style
4. text-decoration-thickness
5. text-decoration

Thêm một đường kẻ trang trí vào đoạn văn bản

Thuộc tính text-decoration-line được sử dụng để thêm một đường kẻ trang trí vào đoạn văn bản.

Lưu ý: Chúng ta có thể kết hợp nhiều hơn một giá trị, như overline và underline để hiển thị các đường kẻ trang trí cả bên trên và bên dưới một đoạn văn bản.

Ví dụ:

h1 {
    text-decoration-line: overline;
}

h2 {
    text-decoration-line: line-through;
}

h3 {
    text-decoration-line: underline;
}

p {
    text-decoration-line: overline underline;
}

Ghi chú: Không nên gạch chân đoạn văn bản không phải là đường link, vì điều này thường làm cho người đọc lúng túng.

Chỉ định một màu sắc cho đường kẻ trang trí

Thuộc tính text-decoration-color được sử dụng để thiết lập màu sắc của đường kẻ trang trí.

Ví dụ:

h1 {
    text-decoration-line: overline;
    text-decoration-color: red;
}

h2 {
    text-decoration-line: line-through;
    text-decoration-color: blue;
}

h3 {
    text-decoration-line: underline;
    text-decoration-color: green;
}

p {
    text-decoration-line: overline underline;
    text-decoration-color: purple;
}

Chỉ định một kiểu cho đường kẻ trang trí

Thuộc tính text-decoration-style được sử dụng để thiết lập kiểu của đường kẻ trang trí.

Ví dụ:

h1 {
    text-decoration-line: underline;
    text-decoration-style: solid;
}

h2 {
    text-decoration-line: underline;
    text-decoration-style: double;
}

h3 {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

p.ex1 {
    text-decoration-line: underline;
    text-decoration-style: dashed;
}

p.ex2 {
    text-decoration-line: underline;
    text-decoration-style: wavy;
}

p.ex3 {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
}

Chỉ định độ dày cho đường kẻ trang trí

Thuộc tính text-decoration-thickness được sử dụng để thiết lập độ dày của đường kẻ trang trí.

Ví dụ:

h1 {
    text-decoration-line: underline;
    text-decoration-thickness: auto;
}

h2 {
    text-decoration-line: underline;
    text-decoration-thickness: 5px;
}

h3 {
    text-decoration-line: underline;
    text-decoration-thickness: 25%;
}

p {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-style: double;
    text-decoration-thickness: 5px;
}

Shorthand Property

Thuộc tính text-decoration là một shorthand property cho các thuộc tính sau:

1. text-decoration-line (bắt buộc)
2. text-decoration-color (tùy chọn)
3. text-decoration-style (tùy chọn)
4. text-decoration-thickness (tùy chọn)

Ví dụ:

h1 {
    text-decoration: underline;
}

h2 {
    text-decoration: underline red;
}

h3 {
    text-decoration: underline red double;
}

p {
    text-decoration: underline red double 5px;
}

Một lưu ý nhỏ

Tất cả các đường link trong HTML đều được gạch chân theo mặc định. Thỉnh thoảng chúng ta sẽ thấy rằng các đường link được tạo kiểu không có gạch chân. Khai báo text-decoration: none; được sử dụng để loại bỏ gạch chân khỏi các đường link, như sau:

a {
    text-decoration: none;
}

Tất cả các thuộc tính text-decoration

1. text-decoration: Thiết lập tất cả các thuộc tính text-decoration trong một khai báo duy nhất.
2. text-decoration-color: Chỉ định màu sắc của đường kẻ trang trí.
3. text-decoration-line: Chỉ định loại đường kẻ trang trí được sử dụng (underline, overline,...).
4. text-decoration-style: Chỉ định kiểu của đường kẻ trang trí (solid, dotted,...).
5. text-decoration-thickness: Chỉ định độ dày của đường kẻ trang trí.