Các thuộc tính định dạng Text trong HTML

Posted on by adminChuyên mục:Kiến thức Internet

Định dạng Text

Trình duyệt của bạn không tương hỗ nghe audio .

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


   
   
   
      Phan van ban nay duoc viet bang mau do .
   

Kết quả là :Phan van ban nay duoc viet bang mau do .

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

Để xác lập 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ụ :


   
   
   
      Van ban se duoc hien thi theo huong tu phai qua trai .
   

Kết quả là :Van ban se duoc hien thi theo huong tu phai qua trai

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 những vần âm trong một từ nên có khoảng cách bằng bao nhiêu là hài hòa và 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 hoàn toàn có thể nhận giá trị : normal hoặc một số ít đơn cử. Ví dụ :


   
   
   
      Cac chu cai trong mot tu se co khoang cach la 5 px .
   

Kết quả là :Cac chu cai trong mot tu se co khoang cach la 5 px .

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 những từ trong một tài liệu một cách hài hòa và 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 hoàn toàn có thể nhận giá trị : normal hoặc 1 số ít đơn cử. Ví dụ :


   
   
   
      Khoang cach giua hai tu lien ke nhau la 5 px .
   

Kết quả là :Khoang cach giua hai tu lien ke nhau la 5 px .

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ừ tiên phong của dòng tiên phong nên được thiết lập độ thụt dòng hài hòa và 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 hoàn toàn có thể nhận những giá trị : % hoặc một số ít đơn cử. Ví dụ :


   
   
   
      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.
   

Kết quả là :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 .

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 chỉnh sửa văn bản. Thuộc tính này hoàn toàn có thể nhận một trong những giá trị : left, right, center, justify .


   
   
   
      Can chinh ben phai ( gia tri right ) .
      Can chinh o giua ( gia tri center ) .
      Can chinh ben trai ( gia tri left ) .
   

Kết quả là :

Can chinh ben phai (gia tri right).

Can chinh o giua ( gia tri center ) .Can chinh ben trai ( gia tri left ) .

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

Để tạo những 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 hoàn toàn 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ụ :


   
   
   
      Doan van nay se co duong gach ngang duoi chan .
      Doan van nay se bi gach ngang .
      Doan van nay se co duong gach ngang tren dau .
      Doan van nay se co hieu ung blink. Tuy nhien, gia tri blink khong duoc ho tro boi nhieu trinh duyet .
   

Kết quả là : và minnusDoan van nay se co duong gach ngang duoi chan .Doan van nay se bi gach ngang .Doan van nay se co duong gach ngang tren dau .Doan van nay se co hieu ung blink. Tuy nhien, gia tri blink khong duoc ho tro boi nhieu trinh duyet .

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 hoàn toàn có thể nhận giá trị : none, capitalize ( viết hoa vần âm tiên phong của một từ ), uppercase ( chuyển hàng loạt văn bản thành chữ hoa ), hoặc lowercase ( chuyển hàng loạt văn bản thành chữ thường ). Ví dụ :


   
   
   
      Viet hoa chu cai dau tien .
      Viet hoa toan bo chu cai .
      Viet thuong toan bo chu cai .
     

Kết quả là :Viet hoa chu cai dau tien .Viet hoa toan bo chu cai .Viet thuong toan bo chu cai .

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 những từ trong đoạn văn này, bạn hoàn toàn có thể sử dụng thuộc tính white-space trong CSS. Thuộc tính này hoàn toàn có thể nhận giá trị : normal, pre hoặc nowrap. Ví dụ :


    
    
    
        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. 
   

Kết quả là :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 .

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 hoàn toàn có thể không được tương hỗ trong 1 số ít trình duyệt. Cú pháp :

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

Ví dụ


   
   
   
      Neu trinh duyet cua ban khong ho tro thuoc tinh text-shadow trong CSS, thi phan van ban se co Blue Shadow .
   

Kết quả là :Neu trinh duyet cua ban khong ho tro thuoc tinh text-shadow trong CSS, thi phan van ban se co Blue Shadow .

admin