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