Thuộc tính text-emphasis-style trong CSS
Bùi Tấn Lực - 882
- 02/10/2025
Chức năng của Thuộc tính text-emphasis-style trong CSS
Thuộc tính text-emphasis-style trong CSS dùng để thêm những biểu tượng trên mỗi chữ cái trong phần tử HTML, bạn có thể kết hợp text-emphasis-color để thêm màu sắc cho những biểu tượng đó.
Cú pháp của Thuộc tính text-emphasis-style trong CSS
text-emphasis-style: 'kytu';
kytu: Ký tự để thêm trên mỗi chữ cái (Ví dụ: #, a, b, c,.....)
text-emphasis-style: 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-style: 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.
Các giá trị của Thuộc tính text-emphasis-style 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-style trong CSS
Dùng ký tự
text-emphasis-style:"❤️";
text-emphasis-style:"https://webmoi.vn/thuoc-tinh-text-emphasis-style-trong-css/#";
Biểu tượng
text-emphasis-style: circle;
text-emphasis-style: dot;
text-emphasis-style: double-circle;
text-emphasis-style: sesame;
text-emphasis-style: triangle;
Biểu tượng kết hợp text-emphasis-color để tạo màu sắc
text-emphasis-style: circle; text-emphasis-color: red;
text-emphasis-style: triangle; text-emphasis-color: blue;
Biểu tượng kết hợp text-emphasis-position để canh vị trí
text-emphasis-style: circle; text-emphasis-position: under;
text-emphasis-style: triangle; 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-style: triangle open;
text-emphasis-style: double-circle open;
text-emphasis-style: sesame open;
text-emphasis-style: circle open;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-emphasis-style trong CSS</title>
<style>
</style>
</head>
<body>
<h1>Code Thuộc tính text-emphasis-style 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, bạn có thể kết hợp text-emphasis-color để thêm màu sắc cho biểu tượng và 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-style: '❤️'">text-emphasis-style:"❤️";</p>
<p style="text-emphasis-style: '#'">text-emphasis-style:"https://webmoi.vn/thuoc-tinh-text-emphasis-style-trong-css/#";</p>
<h2>Biểu tượng</h2>
<p style="text-emphasis-style: circle;">text-emphasis-style: circle;</p>
<p style="text-emphasis-style: dot;">text-emphasis-style: dot;</p>
<p style="text-emphasis-style: double-circle;">text-emphasis-style: double-circle;</p>
<p style="text-emphasis-style: sesame;">text-emphasis-style: sesame;</p>
<p style="text-emphasis-style: triangle;">text-emphasis-style: triangle;</p>
<h2>Biểu tượng kết hợp text-emphasis-color để tạo màu sắc</h2>
<p style="text-emphasis-style: circle; text-emphasis-color: red;">text-emphasis-style: circle; text-emphasis-color: red;</p>
<p style="text-emphasis-style: triangle; text-emphasis-color: blue;">text-emphasis-style: triangle; text-emphasis-color: blue;</p>
<h2>Biểu tượng kết hợp text-emphasis-position để canh vị trí</h2>
<p style="text-emphasis-style: circle; text-emphasis-position: under;">text-emphasis-style: circle; text-emphasis-position: under;</p>
<p style="text-emphasis-style: triangle; text-emphasis-position: under;">text-emphasis-style: triangle; 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-style: triangle open;">text-emphasis-style: triangle open;</p>
<p style="text-emphasis-style: double-circle open;">text-emphasis-style: double-circle open;</p>
<p style="text-emphasis-style: sesame open;">text-emphasis-style: sesame open;</p>
<p style="text-emphasis-style: circle open;">text-emphasis-style: circle open;</p>
</body>
</html>
Khi nào nên sử dụng thuộc tính text-emphasis-style trong CSS?
text-emphasis-style phù hợp khi cần tạo điểm nhấn trực quan cho một phần văn bản mà không muốn thay đổi nội dung hoặc cấu trúc HTML. Thuộc tính này đặc biệt hữu ích với các đoạn văn có từ khóa cần chú ý, nội dung hướng dẫn hoặc giao diện có nhiều thông tin liên tiếp.
Tạo điểm nhấn cho những nội dung quan trọng
Trong một đoạn văn dài, dấu nhấn có thể giúp người đọc nhanh chóng nhận ra từ hoặc cụm từ cần tập trung. Thay vì thay đổi màu chữ, kích thước hoặc thêm phần tử HTML mới, có thể dùng text-emphasis-style để đặt ký hiệu nhấn trực tiếp trên văn bản.
Cách này phù hợp với các nội dung như thuật ngữ, từ khóa, chú thích ngắn hoặc những câu cần người đọc đặc biệt lưu ý. Khi sử dụng, nên chọn kiểu dấu đơn giản để điểm nhấn hỗ trợ khả năng đọc thay vì khiến đoạn văn trở nên rối mắt.
Làm nổi bật văn bản trong giao diện website
text-emphasis-style có thể được áp dụng cho những khu vực cần tạo sự khác biệt về mặt thị giác, chẳng hạn phần giới thiệu, nội dung hướng dẫn hoặc các đoạn văn mang tính chú ý. Ưu điểm là hiệu ứng được tạo bằng CSS nên có thể kiểm soát tập trung từ stylesheet mà không cần chèn thêm ký hiệu vào nội dung.
Đối với website có nhiều loại nội dung, nên giới hạn phạm vi sử dụng vào những vị trí thật sự cần thiết. Một kiểu nhấn được dùng nhất quán sẽ giúp giao diện dễ nhận biết hơn và tránh làm mất tác dụng của điểm nhấn.
Những trường hợp không nên lạm dụng text-emphasis-style
Không nên áp dụng text-emphasis-style cho toàn bộ nội dung hoặc quá nhiều đoạn văn trên cùng một trang. Khi mọi câu đều có dấu nhấn, người đọc sẽ khó xác định đâu mới là thông tin quan trọng.
Cũng nên cân nhắc khi sử dụng với tiêu đề, nút bấm hoặc các thành phần vốn đã có cơ chế nhấn mạnh riêng. Trong những trường hợp này, các thuộc tính như font-weight, color hoặc cách trình bày phù hợp với ngữ cảnh có thể hiệu quả hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-emphasis-style 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 *
