Thuộc tính text-emphasis-style trong CSS
Bùi Tấn Lực - 254
- 02/10/2025
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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 *
