Text trong CSS

Trong chương này, mình sẽ trình bày cách để định dạng text bởi sử dụng các thuộc tính CSS đa dạng liên quan tới định dạng văn bản. Với một phần tử bất kỳ, bạn có thể thiết lập các thuộc tính text sau:

Thuộc tính color được sử dụng để thiết lập màu cho văn bản.
Thuộc tính direction được sử dụng để thiết lập hướng cho văn bản.
Thuộc tính letter-spacing được sử dụng để thêm hoặc bớt khoảng cách giữa các chữ cái trong một từ.
Thuộc tính word-spacing được sử dụng để tăng hoặc giảm khoảng cách giữa các từ trong một câu.
Thuộc tính text-indent được sử dụng để tạo độ thụt của văn bản trong một đoạn văn.
Thuộc tính text-align được sử dụng để căn chỉnh văn bản trong một tài liệu.
Thuộc tính text-decoration được sử dụng để tạo cách dấu gạch ở chân, ở trên, ở giữa văn bản.
Thuộc tính text-transform được sử dụng để chuyển văn bản thành chữ hoa hoặc chữ thường.
Thuộc tính white-space được sử dụng để định dạng và điều khiển phần khoảng trắng của văn bản.
Thuộc tính text-shadow được sử dụng để thiết lập hình bóng (shadow như trong word) xung quanh văn bản.

Thiết lập màu trong CSS

Để thiết lập màu cho văn bản trong CSS, bạn sử dụng thuộc tính color. Giá trị của thuộc tính này là bất kỳ tên màu hoặc định dạng màu hợp lệ nào (Tham khảo chương Color trong CSS). Ví dụ:

<html>
   <head>
   </head>
   <body>
      <p style="color:red;">
      Phan van ban nay duoc viet bang mau do.
      </p>
   </body>
</html>

Kết quả là:

Xác định hướng văn bản với thuộc tính direction trong CSS

Để xác định hướng cho văn bản trong CSS (từ trái sang phải hay từ phải sang trái), bạn sử dụng thuộc tính direction. Thuộc tính này nhận một trong hai giá trị: ltr (trái sang phải) hoặc rtl (phải sang trái). Ví dụ:

<html>
   <head>
   </head>
   <body>
      <p style="direction:rtl;">
      Van ban se duoc hien thi theo huong tu phai qua trai.
      </p>
   </body>
</html>

Kết quả là:

Quảng cáo

Thiết lập khoảng cách giữa các chữ cái với thuộc tính letter-spacing trong CSS

Giữa các chữ cái trong một từ nên có khoảng cách bằng bao nhiêu là hợp lý nhất. Để thiết lập khoảng cách này, bạn sử dụng thuộc tính letter-spacing trong CSS. Thuộc tính này có thể nhận giá trị: normal hoặc một số cụ thể. Ví dụ:

<html>
   <head>
   </head>
   <body>
      <p style="letter-spacing:5px;">
      Cac chu cai trong mot tu se co khoang cach la 5 pixel.
      </p>
   </body>
</html>

Kết quả là:

Thiết lập khoảng cách giữa các từ với thuộc tính word-spacing trong CSS

Thiết lập khoảng cách giữa các từ trong một tài liệu một cách hợp lý sẽ giúp cho Webpage của bạn dễ đọc hơn. Để thiết lập khoảng cách này, bạn sử dụng thuộc tính word-spacing trong CSS. Thuộc tính này có thể nhận giá trị: normal hoặc một số cụ thể. Ví dụ:

<html>
   <head>
   </head>
   <body>
      <p style="word-spacing:5px;">
      Khoang cach giua hai tu lien ke nhau la 5 pixel.
      </p>
   </body>
</html>

Kết quả là:

Thiết lập độ thụt văn bản với thuộc tính text-indent trong CSS

Trong một Website chất lượng, trong một đoạn văn hay một khối, từ đầu tiên của dòng đầu tiên nên được thiết lập độ thụt dòng hợp lý. Điều này sẽ khiến Website của bạn đẹp và chuyên nghiệp hơn. Để thiết lập độ thụt dòng này, bạn nên sử dụng thuộc tính text-indent trong CSS. Thuộc tính này có thể nhận các giá trị: % hoặc một số cụ thể. Ví dụ:

<html>
   <head>
   </head>
   <body>
      <p style="text-indent:1cm;">
         Dong nay se bi thut le 1 cm. Viec thut dong nay se chi dien ra tren dong dau tien cua doan van. Do 
         thut dong duoc xac dinh boi thuoc tinh text-indent trong CSS.
      </p>
   </body>
</html>

Kết quả là:

Quảng cáo

Căn chỉnh văn bản với thuộc tính text-align trong CSS

Giống như trong Word, CSS có thuộc tính text-align để giúp bạn trong việc căn chỉnh văn bản. Thuộc tính này có thể nhận một trong các giá trị :left, right, center, justify.

<html>
   <head>
   </head>
   <body>
      <p style="text-align:right;">
      Can chinh ben phai (gia tri right).
      </p>
      
      <p style="text-align:center;">
      Can chinh o giua (gia tri center).
      </p>
      
      <p style="text-align:left;">
      Can chinh ben trai (gia tri left).
      </p>
      
   </body>
</html>

Kết quả là:

Trang trí văn bản với thuộc tính text-decoration trong CSS

Để tạo các dấu gạch ngang ở chân, ở trên hoặc ở giữa một đoạn văn bản, bạn sử dụng thuộc tính text-direction trong CSS. Thuộc tính này có thể nhận giá trị: none, overline (dấu gạch ở trên), underline (gạch chân), line-through (gạch ngang) hoặc blink. Ví dụ:

<html>
   <head>
   </head>
   <body>
      <p style="text-decoration:underline;">
      Doan van nay se co duong gach ngang duoi chan.
      </p>
      
      <p style="text-decoration:line-through;">
      Doan van nay se bi gach ngang.
      </p>
      
      <p style="text-decoration:overline;">
      Doan van nay se co duong gach ngang tren dau.
      </p>
      
      <p style="text-decoration:blink;">
      Doan van nay se co hieu ung blink. Tuy nhien, gia tri blink khong duoc ho tro boi nhieu trinh duyet.
      </p>
   </body>
</html>

Kết quả là: &minnus;

Thiết lập chữ hoa, chữ thường trong CSS

Để thiết lập chữ hoa hoặc chữ thường cho một đoạn văn bản, bạn sử dụng thuộc tính text-transform trong CSS. Thuộc tính này có thể nhận giá trị: none, capitalize (viết hoa chữ cái đầu tiên của một từ), uppercase (chuyển toàn bộ văn bản thành chữ hoa), hoặc lowercase (chuyển toàn bộ văn bản thành chữ thường). Ví dụ:

<html>
   <head>
   </head>
   <body>
      <p style="text-transform:capitalize;">
      Viet hoa chu cai dau tien.
      </p>
      
      <p style="text-transform:uppercase;">
      Viet hoa toan bo chu cai.
      </p>
      
      <p style="text-transform:lowercase;">
      Viet thuong toan bo chu cai.
      </p>
      </body>

</html>

Kết quả là:

Thiết lập khoảng cách của khoảng trắng trong CSS

Giả sử bạn có một dòng văn bản mà truyền tải thông tin quan trọng, và bạn muốn tăng khoảng cách giữa các từ trong đoạn văn này, bạn có thể sử dụng thuộc tính white-space trong CSS. Thuộc tính này có thể nhận giá trị: normal, pre hoặc nowrap. Ví dụ:

<html>
   <head>
   </head>
   <body>
      <p style="white-space:pre;">
      Phan van ban nay co mot doan xuong dong (line break) va duoc xac duoc voi gia tri pre cua thuoc tinh white-space  
      de noi cho trinh duyet xu ly no giong nhu the PRE trong HTML.</p> 
   </body>
</html>

Kết quả là:

Tạo shadow trong CSS

Để tạo shadow cho văn bản, bạn sử dụng thuộc tính text-shadow trong CSS. Tuy nhiên thuộc tính này có thể không được hỗ trợ trong một số trình duyệt. Cú pháp:

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Ví dụ

<html>
   <head>
   </head>
   <body>
      <p style="text-shadow:4px 4px 8px blue;">
      Neu trinh duyet cua ban khong ho tro thuoc tinh text-shadow trong CSS, thi phan van ban se co Blue Shadow.
      </p>
   </body>
</html>

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: