Sử dụng Text trong CSS

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người cách sử dụng text là như thế nào?

1. Set màu cho chữ

Chúng ta sử dụng thuộc tính color để thiết lập màu cho chữ

1
2
3
4
5
6
7
8
9
10
<html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

text1

2. Text Direction

Chúng ta sử dụng thuộc tính direction viết các đoạn văn từ trái qua phải hoặc người lại từ phải qua trái. Các giá trị của direction là rtl và ltr

1
2
3
4
5
6
7
8
9
10
<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

text2

3. Khoảng cách các ký tự

Chúng ta sử dụng thuộc tính letter-spacing để thiết lập khoảng các giữa các từ trong một chữ

1
2
3
4
5
6
7
8
9
10
<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

text3

4. Khoảng cách các từ

Chúng ta sử dụng thuộc tính word-spacing để thiết lập khoảng các giữa các chữ trong đoạn văn

1
2
3
4
5
6
7
8
9
10
<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html> 

text4

5. Thụt vào đầu dòng

Chúng ta sử dụng thuộc tính text-indent để thụt vào đầu dòng khi bắt đầu 1 đoạn văn bản.

1
2
3
4
5
6
7
8
9
10
11
<html>
   <head>
   </head>

   <body>
      <p style = "text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at 
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>

text5

6. Canh chỉnh đoạn văn

Chúng ta sử dụng thuộc tính text-align để canh trái, phải hoặc giữa cho một đoạn văn.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>
      
      <p style = "text-align:center;">
         This will be center aligned.
      </p>
      
      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html> 

text6

7. Trang trí đoạn văn

Chúng ta sử dụng thuộc tính text-decoration để thêm vào các dấu gạch cho đoạn văn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
   <head>
   </head>

   <body>
      <p style = "text-decoration:underline;">
         This will be underlined
      </p>
      
      <p style = "text-decoration:line-through;">
         This will be striked through.
      </p>
      
      <p style = "text-decoration:overline;">
         This will have a over line.
      </p>
      
      <p style = "text-decoration:blink;">
         This text will have blinking effect
      </p>
   </body>
</html>

text7

  • Hoặc chúng ta có thể dùng thuộc tính text-transform
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
   <head>
   </head>

   <body>
      <p style = "text-transform:capitalize;">
         This will be capitalized
      </p>
      
      <p style = "text-transform:uppercase;">
         This will be in uppercase
      </p>
      
      <p style = "text-transform:lowercase;">
         This will be in lowercase
      </p>
   </body>
</html> 

text8

8. Làm hiệu ứng bóng đỗ cho chữ

Chúng ta sử dụng thuộc tính text-shadow để làm hiệu ứng bóng đỗ

1
2
3
4
5
6
7
8
9
10
11
<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px blue;">
         If your browser supports the CSS text-shadow property, 
         this text will have a  blue shadow.
      </p>
   </body>
</html>

text9

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments