Thuộc tính text-emphasis-color trong CSS
Bùi Tấn Lực - 822
- 02/10/2025
Chức năng của Thuộc tính text-emphasis-color trong CSS
Thuộc tính text-emphasis-color trong CSS dùng để tô màu cho các biểu tượng do thuộc tính text-emphasis-style tạo ra.
Cú pháp của Thuộc tính text-emphasis-color trong CSS
text-emphasis-color: giatri;
giatri: Giá trị để tô màu cho các biểu tượng do thuộc tính text-emphasis-style tạo ra (Ví dụ: red, #0000FF,.....)
Code Thuộc tính text-emphasis-color trong CSS
text-emphasis-color: red;
text-emphasis-color: #0000FF;
text-emphasis-color: rgb(201, 76, 76);
text-emphasis-color: rgba(201, 76, 76, 0.3);
text-emphasis-color: hsla(89, 43%, 51%, 0.3);
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-emphasis-color trong CSS</title>
<style>
p{text-emphasis-style: double-circle;}
span {width:100%;float:left;height:auto;margin-bottom:20px}
</style>
</head>
<body>
<h1>Code Thuộc tính text-emphasis-color trong CSS</h1>
<span>Dùng để tô màu cho các biểu tượng do thuộc tính text-emphasis-style tạo ra:</span>
<p style="text-emphasis-color: red;">text-emphasis-color: red;</p>
<p style="text-emphasis-color: #0000FF;">text-emphasis-color: #0000FF;</p>
<p style="text-emphasis-color: rgb(201, 76, 76);">text-emphasis-color: rgb(201, 76, 76);</p>
<p style="text-emphasis-color: rgba(201, 76, 76, 0.3);">text-emphasis-color: rgba(201, 76, 76, 0.3);</p>
<p style="text-emphasis-color: hsla(89, 43%, 51%, 0.3);">text-emphasis-color: hsla(89, 43%, 51%, 0.3);</p>
</body>
</html>
Cách sử dụng text-emphasis-color hiệu quả trong CSS
text-emphasis-color phát huy tác dụng tốt nhất khi được kết hợp với các thuộc tính khác trong nhóm text-emphasis. Cách này giúp tùy chỉnh đồng bộ màu sắc, hình dạng và vị trí của dấu nhấn trên văn bản thay vì chỉ thay đổi riêng màu.
Kết hợp text-emphasis-color với text-emphasis-style và text-emphasis-position
Trong thực tế, có thể kết hợp text-emphasis-color với text-emphasis-style để xác định màu và kiểu dấu nhấn, đồng thời dùng text-emphasis-position để kiểm soát vị trí hiển thị. Sự kết hợp này đặc biệt hữu ích khi muốn làm nổi bật một phần nội dung mà vẫn giữ bố cục rõ ràng.
<p class="highlight">Nội dung cần được nhấn mạnh</p>
<style>
.highlight {
text-emphasis-style: filled circle;
text-emphasis-color: #e63946;
text-emphasis-position: over right;
}
</style>
Trong ví dụ trên, text-emphasis-style tạo dấu nhấn hình tròn đặc, text-emphasis-color thiết lập màu đỏ và text-emphasis-position xác định vị trí của dấu nhấn. Khi phối hợp các thuộc tính này, hiệu ứng nhấn mạnh có thể được kiểm soát cụ thể hơn theo thiết kế của trang.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-emphasis-color 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 *
