Thuộc tính text-emphasis trong CSS
Bùi Tấn Lực - 869
- 02/10/2025
Chức năng của Thuộc tính text-emphasis trong CSS
Thuộc tính text-emphasis trong CSS dùng để thêm những biểu tượng trên mỗi chữ cái trong phần tử HTML, những biểu tượng đó có thể chọn màu sắc, có thể kết hợp với text-emphasis-position để cho biểu tượng nằm trên, dưới, trái, phải văn bản.
Cú pháp của Thuộc tính text-emphasis trong CSS
text-emphasis: 'kytu';
kytu: Ký tự để thêm trên mỗi chữ cái (Ví dụ: #, a, b, c,.....)
text-emphasis: giatri;
giatri: Giá trị để thêm những biểu tượng trên mỗi chữ cái trong phần tử HTML (Ví dụ: circle, dot, double-circle, sesame, triangle,....)
text-emphasis: giatri mausac;
giatri: Giá trị để thêm những biểu tượng trên mỗi chữ cái trong phần tử HTML (Ví dụ: circle, dot, double-circle, sesame, triangle,....)
mausac: Thêm màu sắc cho biểu tượng (Ví dụ: red, blue,....)
text-emphasis: giatri open;
giatri: Giá trị để thêm những biểu tượng trên mỗi chữ cái trong phần tử HTML (Ví dụ: circle, dot, double-circle, sesame, triangle,....)
Giá trị kết hợp với open dùng để xóa phần ở trong của biểu tượng, chỉ để lại đường viền ngoài.
Giá trị của Thuộc tính text-emphasis trong CSS
circle: Dấu chấm tròn đậm.
dot: Dấu chấm tròn nhỏ.
double-circle: Dấu chấm tròn đậm ở trong và viền tròn ngoài.
triangle: Hình tam giác.
Code Thuộc tính text-emphasis trong CSS
Dùng ký tự
text-emphasis:"❤️";
text-emphasis:"https://webmoi.vn/thuoc-tinh-text-emphasis-trong-css/#";
Biểu tượng
text-emphasis: circle;
text-emphasis: dot;
text-emphasis: double-circle;
text-emphasis: sesame;
text-emphasis: triangle;
Biểu tượng kết hợp màu sắc
text-emphasis: circle red;
text-emphasis: triangle blue;
Biểu tượng kết hợp text-emphasis-position để canh vị trí
text-emphasis: circle red; text-emphasis-position: under;
text-emphasis: triangle blue; text-emphasis-position: under;
Biểu tượng kết hợp với open để xóa phần ở trong, chỉ để lại đường viền ngoài
text-emphasis: triangle open;
text-emphasis: double-circle open;
text-emphasis: sesame open;
text-emphasis: circle open;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-emphasis trong CSS</title>
<style>
</style>
</head>
<body>
<h1>Code Thuộc tính text-emphasis trong CSS</h1>
<p>Dùng để thêm những biểu tượng trên mỗi chữ cái trong phần tử HTML, những biểu tượng đó có thể chọn màu sắc, có thể kết hợp với text-emphasis-position để cho biểu tượng nằm trên, dưới, trái, phải văn bản:</p>
<h2>Dùng ký tự</h2>
<p style="text-emphasis: '❤️'">text-emphasis:"❤️";</p>
<p style="text-emphasis: '#'">text-emphasis:"https://webmoi.vn/thuoc-tinh-text-emphasis-trong-css/#";</p>
<h2>Biểu tượng</h2>
<p style="text-emphasis: circle;">text-emphasis: circle;</p>
<p style="text-emphasis: dot;">text-emphasis: dot;</p>
<p style="text-emphasis: double-circle;">text-emphasis: double-circle;</p>
<p style="text-emphasis: sesame;">text-emphasis: sesame;</p>
<p style="text-emphasis: triangle;">text-emphasis: triangle;</p>
<h2>Biểu tượng kết hợp màu sắc</h2>
<p style="text-emphasis: circle red;">text-emphasis: circle red;</p>
<p style="text-emphasis: triangle blue;">text-emphasis: triangle blue;</p>
<h2>Biểu tượng kết hợp text-emphasis-position để canh vị trí</h2>
<p style="text-emphasis: circle red; text-emphasis-position: under;">text-emphasis: circle red; text-emphasis-position: under;</p>
<p style="text-emphasis: triangle blue; text-emphasis-position: under;">text-emphasis: triangle blue; text-emphasis-position: under;</p>
<h2>Biểu tượng kết hợp với open để xóa phần ở trong, chỉ để lại đường viền ngoài</h2>
<p style="text-emphasis: triangle open;">text-emphasis: triangle open;</p>
<p style="text-emphasis: double-circle open;">text-emphasis: double-circle open;</p>
<p style="text-emphasis: sesame open;">text-emphasis: sesame open;</p>
<p style="text-emphasis: circle open;">text-emphasis: circle open;</p>
</body>
</html>
Ứng dụng text-emphasis trong thiết kế nội dung CSS
text-emphasis phù hợp khi cần tạo điểm nhấn trực quan cho từng ký tự hoặc một đoạn chữ mà không muốn thay đổi cấu trúc HTML. Khi kết hợp kiểu dấu, màu sắc và vị trí phù hợp, hiệu ứng có thể làm nổi bật nội dung mà vẫn giữ được bố cục văn bản gọn gàng.
Làm nổi bật từ khóa và nội dung quan trọng
Trong các nội dung cần nhấn mạnh như tiêu đề phụ, chú thích hoặc những cụm từ đáng chú ý, có thể sử dụng dấu nhấn để người đọc nhận biết nhanh hơn. Nên áp dụng có chọn lọc cho những phần thực sự quan trọng, bởi việc đặt dấu trên quá nhiều chữ có thể khiến văn bản trở nên rối mắt và giảm khả năng đọc.
Kết hợp text-emphasis với text-emphasis-position
text-emphasis-position giúp kiểm soát vị trí hiển thị của dấu nhấn so với văn bản. Việc kết hợp hai thuộc tính này đặc biệt hữu ích khi cần đưa dấu lên phía trên hoặc xuống phía dưới chữ, từ đó tạo cách trình bày phù hợp với từng kiểu nội dung và hướng viết.
p {
text-emphasis: circle;
text-emphasis-position: under;
}
Cách kết hợp này giúp tách dấu nhấn khỏi phần chữ theo một vị trí nhất quán, đồng thời hạn chế việc hiệu ứng làm ảnh hưởng đến cách trình bày của nội dung xung quanh.
Những lưu ý khi sử dụng text-emphasis trên website
Không nên xem dấu nhấn là cách thay thế cho mọi hình thức định dạng văn bản. Hãy chọn kiểu dấu có độ tương phản phù hợp với nền, tránh sử dụng hiệu ứng dày đặc và kiểm tra cách hiển thị trên các trình duyệt khác nhau trước khi đưa vào giao diện chính thức.
Đối với nội dung dài, ưu tiên sự dễ đọc thay vì tạo hiệu ứng cho toàn bộ đoạn văn. Nếu dấu nhấn chỉ phục vụ mục đích trang trí, nên cân nhắc mức độ cần thiết để giao diện vẫn rõ ràng trên cả màn hình lớn và thiết bị di động.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-emphasis trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
