text-emphasis

Try it

text-emphasis: none;

text-emphasis: filled red;

text-emphasis: "x";

text-emphasis: filled double-circle #ffb703;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

Thuộc tính text-emphasis khá khác biệt so với text-decoration. Thuộc tính text-decoration không được kế thừa, và trang trí được chỉ định được áp dụng trên toàn bộ phần tử. Tuy nhiên, text-emphasis được kế thừa, có nghĩa là có thể thay đổi dấu nhấn mạnh cho các phần tử con.

Kích thước của ký hiệu nhấn mạnh, giống như ký hiệu ruby, khoảng 50% kích thước phông chữ, và text-emphasis có thể ảnh hưởng đến chiều cao dòng khi khoảng cách dòng hiện tại không đủ cho các dấu nhấn mạnh.

Thuộc tính thành phần

Thuộc tính này là viết tắt của các thuộc tính CSS sau:

• text-emphasis-color
• text-emphasis-style

Cú pháp

/* Giá trị ban đầu */
text-emphasis: none; /* Không có dấu nhấn mạnh */

/* Giá trị <string> */
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "*" #555555;
text-emphasis: "foo"; /* Không nên dùng. Có thể được tính toán hoặc hiển thị chỉ là 'f' */

/* Giá trị từ khóa */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/* Giá trị từ khóa kết hợp với màu sắc */
text-emphasis: filled sesame #555555;

/* Giá trị toàn cục */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: revert;
text-emphasis: revert-layer;
text-emphasis: unset;

Giá trị

none

Không có dấu nhấn mạnh.

filled

Hình dạng được tô đầy bằng màu đặc. Nếu không có filled hay open, đây là giá trị mặc định.

open

Hình dạng rỗng.

dot

Hiển thị các chấm tròn nhỏ làm dấu nhấn mạnh. Chấm đầy là '•' (U+2022), và chấm rỗng là '◦' (U+25E6).

circle

Hiển thị các vòng tròn lớn làm dấu nhấn mạnh. Vòng tròn đầy là '●' (U+25CF), và vòng tròn rỗng là '○' (U+25CB). Đây là hình dạng mặc định trong chế độ viết ngang khi không có hình dạng nào khác được chỉ định.

double-circle

Hiển thị các vòng tròn đôi làm dấu nhấn mạnh. Vòng tròn đôi đầy là '◉' (U+25C9), và vòng tròn đôi rỗng là '◎' (U+25CE).

triangle

Hiển thị các tam giác làm dấu nhấn mạnh. Tam giác đầy là '▲' (U+25B2), và tam giác rỗng là '△' (U+25B3).

sesame

Hiển thị các dấu vừng làm dấu nhấn mạnh. Dấu vừng đầy là '﹅' (U+FE45), và dấu vừng rỗng là '﹆' (U+FE46). Đây là hình dạng mặc định trong chế độ viết dọc khi không có hình dạng nào khác được chỉ định.

<string>

Hiển thị chuỗi đã cho làm dấu nhấn mạnh. Các tác giả không nên chỉ định nhiều hơn một ký tự trong <string>. UA có thể cắt bớt hoặc bỏ qua các chuỗi bao gồm nhiều hơn một cụm grapheme.

<color>

Xác định màu của dấu nhấn mạnh. Nếu không có màu nào được chỉ định, mặc định là currentColor.

Định nghĩa hình thức

Cú pháp hình thức

text-emphasis = 
  <'text-emphasis-style'>  ||
  <'text-emphasis-color'>  

<text-emphasis-style> = 
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>                                            

<text-emphasis-color> = 
  <color>  

Ví dụ

Tiêu đề với hình dạng và màu nhấn mạnh

Ví dụ này vẽ một tiêu đề với các tam giác được dùng để nhấn mạnh từng ký tự.

CSS

h2 {
  text-emphasis: triangle #dd5555;
}

HTML

<h2>This is important!</h2>

Kết quả

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Các thuộc tính dài hạn text-emphasis-style, text-emphasis-color.
• Thuộc tính text-emphasis-position cho phép xác định vị trí của các dấu nhấn mạnh.