Một trong các loại thuộc tính đơn giản nhất nhưng lại được 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(text).
Hiện tại có rất nhiều thuộc tính được sử dụng như căn lề văn bản, trang trí văn bản, định hướng văn bản,… Chúng ta cùng tìm hiểu một số thuộc tính thường được dùng:
text-align: canh lề văn bản trong website với các giá trị như sau:
- 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
text-decoration: thêm các kiểu gạch cho văn bản với các giá trị:
- 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ả
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ụ:
[css]
p {
text-indent: 15px;
text-indent: 15%;
text-indent: 1.5pt;
}
[/css]
text-shadow: đổ bóng cho văn bản trên website
Cú pháp:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
- h-shadow: vị trí của các bóng ngang. Giá trị âm được phép
- v-shadow: vị trí của các bóng dọc. Giá trị âm được phép
- blur-radius: giá trị độ mờ, không bắt buộc mặc định là 0
- color: không bắt buộc giá trị màu của bóng
- none: giá trị mặc định, không đổ bóng
- initial: lấy giá trị mặc định của nó
- inherit: kế thừa từ thuộc tính cha
ví dụ:
[css]
.text {
text-shadow: 2px 3px 4px blue;
}
[/css]
Đoạn trên nghĩa là văn bản mang class text sẽ có bóng đổ màu xanh, tọa độh-shadow là 2px, tọa độ v-shadow là 3px và blur-radius là 4px.
Ngoài ra, bạn cũng có thể tạo ra nhiều bóng đổ cho một văn bản bằng cách viết nhiều đoạn cú pháp và mỗi đoạn sẽ được cách nhau bằng dấu phẩy, ví dụ:
[css]
text-shadow: 2px -1px 3px red, -2px 1px 2px blue;
[/css]
Với IE9 và các IE trở về trước không hỗ trợ thuộc tính này
text-transform:
Tùy chỉnh việc hiển thị chữ in hoa hay in thường trong đoạn văn bản mà không cần viết thủ công cả đoạn văn bản. Thuộc tính này có 4 giá trị chính là capitalize (in hoa chữ cái đầu tiên của mỗi từ), uppercase (in hoa cả đoạn văn bản), lowercase (viết thường cả đoạn văn bản) và none (không có gì cả).
[css]
.text { text-transform: uppercase; }
[/css]
[thongbao]
- Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
- Cảm ơn các bạn đã đọc.
[/thongbao]