Bài 05 – Định dạng Chữ CSS

Posted on by mtoplistChuyên mục:Top List

Bài 05 – Định dạng Chữ CSS

Chữ

Định dạng và sắp xếp chữ luôn là vấn đề quan tâm hàng đầu đối với các nhà thiết kế web lẫn đồ họa. Trong bài học này chúng ta sẽ được học cách sử dụng CSS để chữ trên trang web được trình bày hấp dẫn và mạch lạc hơn. Những thuộc tính CSS được đề cập trong bài này bao gồm:

Thụt lề đầu dòng cho chữ  [text-indent]

Thuộc tính text-indent  điều chỉnh khối chữ trong một đoạn văn bản nhìn lịch thiệp hơn bằng cách thụt đoạn text đầu dòng trong một đoạn văn bản. Ví dụ bên dưới là cách viết  CSS để buộc đoạn văn bản có dòng đầu tiên thụt lề trái 30px được áp dụng cho phần tử <p>:

p { text-indent: 30px; }

Xem kết quả

Căn lề chữ văn bản [text-align]

Thuộc tính CSS text-align tương đương với thuộc tính HTML cũ trước kia. Chữ có thể căn theo lề trái – left, hay phải – right hoặc giữa – centred. Ngoài ra còn có căn đều – justify giúp đoạn văn bản có có lề  trái phải đều nhau. Kiểu sắp xếp văn bản này tương tự cách thức dàn trang trong các tạp chí.

Dưới đây là ví dụ các cách căn lề được áp dụng, lề phải cho chữ trong thẻ th, lề giữa cho chữ trong thẻ td và căn đều cho chữ thuộc thẻ p:

th {
    text-align: right;
   }

td {
   text-align: center;
   }

p {
   text-align: justify;
  }

Xem kết quả

Trang trí chữ [text-decoration]

Thuộc tính text-decoration có thể tạo kiểu trang trí hoặc hiệu ứng cho chữ.Bạn có thể tạo các chữ có gạch dưới, gạch ngang hoặc gạch trên chữ, Ví dụ thẻ tiêu đề <h1> sẽ được gạch dưới, thẻ tiêu đề <h2> sẽ được gạch trên và thẻ tiêu đề <h3> sẽ được gạch ngang chữ.

h1 {text-decoration: underline;}

h2 {text-decoration: overline;}

h3 {text-decoration: line-through;}

Xem kết quả

Khoảng cách chữ [letter-spacing]

Khoảng cách giữa các chữ có thể xác định thông qua thuộc tính letter-spacing. Giá trị của thuộc tính chính là khoảng cách của 2 chữ. Ví dụ, nếu bạn muốn các chữ cách nhau 3px trong các đoạn văn bản của thẻ <p> và 6px tđối với thẻ tiêu đề <h1> bạn sẽ phải việt đoạn code css như sau:

h1 {letter-spacing: 6px;}
p {letter-spacing: 3px;}

Xem kết quả

Chuyển đổi chữ  [text-transform]

Thuộc tính text-transform có thể chuyển đổi một từ thành in hoa chữ đầu tiên của một từ, in hoa tất cả chữ và ngược lại. Bạn có thể chọn kiểu chữ là capitalize, uppercase hay lowercase mà không cần quan tâm chữ gốc ở code HTML như thế nào.

Ví dụ chữ “website” có thể chuyển đổi thành “WEBSITE” hoặc  “Website”. Có tất cả 4 kiểu chuyển đổi:

capitalize
In hoa chữ đầu tiên của một từ. Ví dụ: “john doe”  sẽ trở thành “John Doe”.
uppercase
Chuyển tất cả các chữ một từ thành in hoa. Ví dụ: “john doe” sẽ trờ thành “JOHN DOE”.
lowercase
Chuyển đổi các chữ một từ bất kể có in hoa hay không trở thành bình thường. Ví dụ: “JOHN DOE” sẽ trở thành “john doe”.
none
không chuyển đổi, từ chối bất kỳ thuộc tính chuyển đổi khác – các từ sẽ trở về nguyên gốc như trong code HTML.
h1 {text-transform: uppercase;}
li {text-transform: capitalize;}

Xem kết quả

Tổng kết

Bạn đã biết tương đối các thuộc tính của CSS, trong bài kế tiếp chúng ta sẽ học về thuộc tính CSS áp dụng cho các liên kết link

mtoplist