Hướng dẫn transform underline css

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

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'>

...

      text-decoration: underline dotted red;


      text-decoration: underline solid blue;


      text-decoration: line-through solid green;

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: overline;



    text-decoration: underline blue;



    text-decoration: line-through dashed;



    text-decoration: overline wavy green;

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

   
      
      
      
   
   
      

        {

          text-decoration-line: underline; 

          text-decoration-style: wavy; 

          text-decoration-color: red; 

        }
      
       

           Some thing Error!
       
   

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

   text-decoration-line: none;


   text-decoration-line: line-through


   text-decoration-line: underline


   text-decoration-line: overline

CSS text-decoration-line chấp nhận một hoặc nhiều giá trị:

   text-decoration-line: line-through underline


   text-decoration-line: underline overline
 

   text-decoration-line: overline line-through underline

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

   text-decoration-style: solid;


   text-decoration-style: double;


   text-decoration-style: dotted;


   text-decoration-style: dashed;
 

   text-decoration-style: wavy;

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

   
      
      
      
   
   
     
CSS text-decoration-style
      

         text-decoration-line:underline overline;
         text-decoration-style: wavy;
      
   

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.

/*  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ụ:

   text-decoration-color: red;


   text-decoration-color: blue;


   text-decoration-color: currentColor;

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.

   
      
      
      
   
   
     
CSS text-decoration-color
      

         text-decoration-line:underline overline;
         text-decoration-color: blue;