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