7.1 Thuộc tính text-decoration
CSS cung cấp nhiều thuộc tính để tạo kiểu và trang trí văn bản trên các trang web. Các thuộc tính như text-decoration,
text-transform và text-shadow cho phép bạn thêm gạch chân, thay đổi chữ hoa/thường và tạo bóng, giúp
văn bản trở nên sinh động và hấp dẫn hơn.
Thuộc tính text-decoration điều chỉnh các hiệu ứng trang trí văn bản như gạch chân, gạch giữa và
gạch ngang. Nó cũng cho phép bạn đặt màu và kiểu của các đường được sử dụng để trang trí văn bản.
Giá trị:
none: loại bỏ tất cả các trang trí văn bảnunderline: gạch chân văn bảnoverline: thêm đường trên văn bảnline-through: thêm đường qua văn bản (gạch ngang)blink: văn bản nhấp nháy (không phải trình duyệt nào cũng hỗ trợ)text-decoration-color: đặt màu của đường trang trítext-decoration-style: đặt kiểu của đường (solid, double, dotted, dashed, wavy)text-decoration-thickness: đặt độ dày của đường trang trí
Ví dụ sử dụng:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">Văn bản này được gạch chân.</p>
<p class="overline">Văn bản này được gạch trên.</p>
<p class="line-through">Văn bản này bị gạch ngang.</p>
<p class="custom-decoration">Văn bản này được gạch chân bằng một đường sóng màu đỏ.</p>
</body>
7.2 Thuộc tính text-transform
Thuộc tính text-transform điều chỉnh việc chuyển đổi chữ cái, thay đổi trạng thái chữ.
Điều này rất hữu ích cho việc tự động thay đổi văn bản thành tiêu đề, chữ thường, v.v.
Giá trị:
none: không chuyển đổi (giá trị mặc định)capitalize: chữ cái đầu của mỗi từ được chuyển thành chữ hoauppercase: tất cả các chữ cái được chuyển thành chữ hoalowercase: tất cả các chữ cái được chuyển thành chữ thườngfull-width: chuyển văn bản thành kích thước đầy đủ (kép) (không phải trình duyệt nào cũng hỗ trợ)
Ví dụ sử dụng:
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">văn bản này sẽ được viết hoa chữ đầu của mỗi từ.</p>
<p class="uppercase">văn bản này sẽ hoàn toàn là chữ hoa.</p>
<p class="lowercase">VĂN BẢN NÀY SẼ HOÀN TOÀN LÀ CHỮ THƯỜNG.</p>
</body>
7.3 Thuộc tính text-shadow
Thuộc tính text-shadow thêm bóng đổ cho văn bản, cho phép tạo các hiệu ứng trực quan
và cải thiện khả năng đọc văn bản trên trang web.
Giá trị:
<offset-x>: độ lệch bóng theo trục X (ngang)<offset-y>: độ lệch bóng theo trục Y (dọc)<blur-radius>: bán kính mờ của bóng (không bắt buộc)<color>: màu của bóng (không bắt buộc)
Ví dụ sử dụng:
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">Văn bản này có bóng đổ.</p>
<p class="multiple-shadows">Văn bản này có nhiều bóng đổ.</p>
</body>
Giải thích mã:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: thêm bóng với độ lệch ngang 2px, độ lệch dọc 3px, bán kính mờ 4px và màu đen trong suốttext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: thêm hai bóng với các thông số khác nhau, tạo hiệu ứng hình ảnh phức tạp hơn
GO TO FULL VERSION