openplanning

Hướng dẫn và ví dụ CSS text-decoration

  1. CSS text-decoration
  2. CSS text-decoration-line
  3. CSS text-decoration-style
  4. CSS text-decoration-color

1. CSS text-decoration

CSS text-decoration được sử dụng để trang trí cho nội dung văn bản của một phần tử. Cú pháp chính thức (formal syntax) của CSS text-decoration đòi hỏi bạn cung cấp 3 giá trị cho nó.
Formal Syntax
/* Formal Syntax: */
text-decoration:  <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

/* Example: */
text-decoration: underline dotted red;
text-decoration: underline solid blue;
text-decoration: line-through solid green;
Chú ý: Thứ tự của (text-decoration-line, text-decoration-style, text-decoration-color) có thể thay đổi tùy ý.
Formal Syntax
/* Formal Syntax: */
text-decoration:  <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
text-decoration:  <'text-decoration-line'> || <'text-decoration-color'> || <'text-decoration-style'>
text-decoration:  <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-line'>

...
<h2 style="text-decoration: underline dotted red;">
      text-decoration: underline dotted red;
</h2>
<h2 style="text-decoration: underline solid blue;">
      text-decoration: underline solid blue;
</h2>
<h2 style="text-decoration: line-through solid green;">
      text-decoration: line-through solid green;
</h2>
CSS property
Values
text-decoration-line
  • none (Default)
  • underline
  • overline
  • line-through
text-decoration-style
  • solid (Default)
  • double
  • dotted
  • dashed
  • wavy
text-decoration-color
  • HTML Color
Bạn cũng có thể cung cấp 1 hoặc 2 giá trị cho CSS text-decoration:
<!-- text-decoration-line -->
<h2 style="text-decoration: overline;">
    text-decoration: overline;
</h2>
<!-- text-decoration-line || text-decoration-color -->
<h2 style="text-decoration: underline blue;">
    text-decoration: underline blue;
</h2>
<!-- text-decoration-line || text-decoration-style -->
<h2 style="text-decoration: line-through dashed;">
    text-decoration: line-through dashed;
</h2>
<!-- text-decoration-line || text-decoration-style || text-decoration-color -->
<h2 style="text-decoration: overline wavy green;">
    text-decoration: overline wavy green;
</h2>
Thay vì sử dụng CSS text-decoration bạn có thể sử dụng kết hợp 3 thuộc tính (property) sau:
  • CSS text-decoration-line
  • CSS text-decoration-style
  • CSS text-decoration-color
text-decoration-example2.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS text-decoration</title>
      <meta charset="UTF-8"/>
      <style>
        div {
          text-decoration-line: underline;
          text-decoration-style: wavy;
          text-decoration-color: red;
        }
      </style>
   </head>
   <body>
      <p style="font-style:italic;">
        {<br/>
          text-decoration-line: underline; <br/>
          text-decoration-style: wavy; <br/>
          text-decoration-color: red; <br/>
        }
      </p>
       <div>
           Some thing Error!
       </div>
   </body>
</html>

2. CSS text-decoration-line

CSS text-decoration-line được sử dụng để thiết lập ví trí của đường thẳng trang trí cho nội dung văn bản của một phần tử. Nó có thể nhận một trong các giá trị sau:
  • none (Default)
  • underline
  • overline
  • line-through
<p style="text-decoration-line: none;">
   text-decoration-line: none;
</p>
<p style="text-decoration-line: line-through">
   text-decoration-line: line-through
</p>
<p style="text-decoration-line: underline">
   text-decoration-line: underline
</p>
<p style="text-decoration-line: overline">
   text-decoration-line: overline
</p>
CSS text-decoration-line chấp nhận một hoặc nhiều giá trị:
<p style="text-decoration-line: line-through underline">
   text-decoration-line: line-through underline
</p>
<p style="text-decoration-line: underline overline">
   text-decoration-line: underline overline
</p> 
<p style="text-decoration-line: overline line-through underline">
   text-decoration-line: overline line-through underline
</p>

3. CSS text-decoration-style

CSS text-decoration-style được sử dụng để thiết lập kiểu dáng cho các đường thẳng được tạo ra bởi CSS text-decoration-line.
Các giá trị có thể của CSS text-decoration-style:
  • solid
  • double
  • dotted
  • dashed
  • wavy
<p style="text-decoration-line:underline; text-decoration-style: solid;">
   text-decoration-style: solid;
</p>
<p style="text-decoration-line:underline; text-decoration-style: double;">
   text-decoration-style: double;
</p>
<p style="text-decoration-line:underline; text-decoration-style: dotted;">
   text-decoration-style: dotted;
</p>
<p style="text-decoration-line:underline; text-decoration-style: dashed;">
   text-decoration-style: dashed;
</p> 
<p style="text-decoration-line:underline; text-decoration-style: wavy;">
   text-decoration-style: wavy;
</p>
Chú ý: Mặc dù bạn có thể gán một hoặc nhiều giá trị cho CSS text-decoration-line, nhưng bạn chỉ có thể gán một giá trị cho CSS text-decoration-style. Điều này có nghĩa là tất cả các đường thẳng đang được trang trí cho nội dung của một phần tử cụ thể sẽ có cùng một kiểu dáng.
text-decoration-style-example2.html
<!DOCTYPE html>
<html>
   <head>
      <title>CSS text-decoration-style</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           font-size: 120%;
           text-decoration-line:underline overline;
           text-decoration-style: wavy;
         }
      </style>
   </head>
   <body>
     <h2>CSS text-decoration-style</h2>
      <p>
         text-decoration-line:underline overline;
         text-decoration-style: wavy;
      </p>
   </body>
</html>

4. CSS text-decoration-color

CSS text-decoration-color được sử dụng để thiết lập mầu sắc cho các đường thẳng được tạo ra bởi CSS text-decoration-line.
Giá trị của CSS text-decoration-color có thể là:
  • Tên của mầu sắc, chẳng hạn: red, blue, yellow, ...
  • Một giá trị GRB, chẳng hạn GRB(255,255,0),..
  • Một giá trị HEX, chẳng hạn #FF00FF.
  • currentColor: Mầu sắc của đường thẳng sẽ giống với mầu chữ (Text color) của phần tử.
  • transparent: Thiết lập mầu sắc trong suốt (transparent) cho đường thẳng.
/* <color> values */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

/* Global values */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: unset;
Ví dụ:
<p style="text-decoration-line:underline; text-decoration-color: red;">
   text-decoration-color: red;
</p>
<p style="text-decoration-line:underline; text-decoration-color: blue;">
   text-decoration-color: blue;
</p>
<p style="text-decoration-line:underline; text-decoration-color: currentColor;">
   text-decoration-color: currentColor;
</p>
Chú ý: Mặc dù bạn có thể gán một hoặc nhiều giá trị cho CSS text-decoration-line, nhưng bạn chỉ có thể gán một giá trị cho CSS text-decoration-color. Điều này có nghĩa là tất cả các đường thẳng đang được trang trí cho một phần tử cụ thể sẽ có cùng một mầu sắc.
<!DOCTYPE html>
<html>
   <head>
      <title>CSS text-decoration-color</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           font-size: 120%;
           text-decoration-line:underline overline;
           text-decoration-color: blue;
         }
      </style>
   </head>
   <body>
     <h2>CSS text-decoration-color</h2>
      <p>
         text-decoration-line:underline overline;
         text-decoration-color: blue;
      </p>
   </body>
</html>

Các hướng dẫn CSS

Show More

Các bài viết mới nhất

Show More