Đây là bài mở đầu cho loạt bài viết tìm hiểu về các thuộc tính quan trọng trong CSS mà bạn cần nắm. Một trong các loại thuộc tính đơn giản nhất nhưng lại dùng nhiều nhất là các thuộc tính được dùng để thay đổi cách hiển thị của văn bản, được gọi là Text Styles.
Text Styles trong CSS hiện tại có khoảng 13 thuộc tính được sử dụng bao gồm căn lề văn bản, trang trí văn bản, định hướng văn bản,….Cụ thể là có các thuộc tính thường dùng sau:
text-align
: Căn lề văn bản.text-decoration
: Trang trí văn bản.text-indent
: Thêm khoảng trống trước văn bản theo chiều ngang từ trái sang phải.text-shadow
: Thêm bóng cho văn bản.text-transform
: Tùy chỉnh việc hiển thị chữ in hoa.
text-align
Thuộc tính
text-align
này sẽ giúp bạn tùy chỉnh canh lề cho các đoạn văn bản bên trong website. Thuộc tính này hỗ trợ cho bạn các giá trị sau:
01
02
03
04
05
06
07
| text-align : left ; // Căn lề văn bản từ bên trái text-align : right ; // Căn lề văn bản từ bên phải text-align : center ; // Căn lề văn bản từ chính giữa text-align : justify ; // Căn lề văn bản đều hai bên |
Xem ví dụ sự khác nhau của các giá trị
text-align
tại đây.text-decoration
Thuộc tính này sẽ giúp bạn trang trí lại văn bản hiển thị trên tài liệu theo một số kiểu nhất định.
01
| text-decoration : overline | underline | line-through | none |
overline
: gạch trên chữunderline
: gạch dưới chữline-through
: gạch ngang chữnone
: không có gạch gì cả
Ngoài ra thuộc tính này còn có thêm một số thuộc tính con của nó nhưng lại chưa được hỗ trợ bởi các trình duyệt thông dụng, đó là text-decoration-color, text-decoration-line và text-decoration-style.
text-indent
Thuộc tính này sẽ tạo ra một khoảng trắng bên trái của văn bản (hoặc bên phải của văn bản với các ngôn ngữ hiển thị từ phải sang trái), giá trị của nó là số kèm theo đơn vị đo lường.
Ví dụ:
01
02
03
04
05
| p { text-indent : 15px ; text-indent : 15% ; text-indent : 1.5pt ; }
|
Không có nhận xét nào:
Đăng nhận xét