Văn Bản
CSS cung cấp đa dạng các thuộc tính giúp chúng ta định kiểu hiển thị cho văn bản của phần tử HTML. Trong bài học này chúng ta sẽ tìm hiểu các thuộc tính sau đây:
- Thuộc tính
color: Quy định màu sắc của văn bản. - Thuộc tính
text-alignment: Quy định kiểu canh ngang cho văn bản. - Thuộc tính
text-decoration: Quy định kiểu trang trí như gạch dưới, gạch trên hay gạch ngang cho văn bản. - Thuộc tính
text-transform: Quy định kiểu chữ in hoa hay in thường cho văn bản. - Thuộc tính
text-indent: Quy định thụt đầu dòng cho văn bản. - Thuộc tính
line-height: Quy định độ cao của ký tự trong văn bản. - Thuộc tính
letter-spacing: Quy định khoảng cách hay độ giãn nở cách giữa các ký tự trong văn bản. - Thuộc tính
word-spacing: Quy định khoảng cách hay độ giãn nở cách giữa các từ trong văn bản.
Màu Văn Bản
Để quy định màu sắc cho văn bản của phần tử HTML trên trang, chúng ta sử dụng thuộc tính color trong CSS. Giá trị của thuộc tính này có thể là màu theo tên hoặc màu theo giá trị như đề cập ở bài học về màu sắc trong CSS.
Ví dụ:
body {
color: #000;
}
.red {
color: rgb(255, 0, 0);
}
.green {
color: #00ff00;
}
.yellow {
color: yellow;
}
Canh Ngang Văn Bản
Để canh ngang văn bản của phần tử HTML trên trang, chúng ta sử dụng thuộc tính text-align trong CSS. Thuộc tính này có thể nhận 1 trong bốn giá trị là left, right, center hoặc justify.
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
Thuộc Tính text-align trong CSS
Trang Trí Văn Bản
Để trang trí cho văn bản của phần tử HTML trên trang chúng ta sử dụng thuộc tính text-decoration trong CSS. Thuộc tính này có thể nhận một trong các giá trị underline, line-through, overline và none.
.none {
text-decoration: none;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.underline {
text-decoration: underline;
}
Thuộc Tính "text-decoration" trong CSS
Giá trị mặc định của thuộc tính text-decoration là none.
Chuyển Đổi Văn Bản
Để chuyển đổi hiển thị cho các ký tự trong văn bản sang của phần tử HTML trên trang sang dạng in hoa hoặc in thường chúng ta sử dụng thuộc tính text-transform.
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
Thuộc Tính "text-transform" trong CSS
Giá trị mặc định của thuộc tính text-decoration là none.
Lùi Đầu Dòng
Để lùi đầu dòng cho văn bản của phần tử HTML trên trang, chúng ta sử dụng thuộc tính text-indent trong CSS.
p.text-indent-50 {
text-indent: 50px;
}
Thuộc Tính "text-indent" trong CSS
Giá trị mặc định của thuộc tính text-indent là 0 hay 0px.
Lưu ý: Khi áp dụng thuộc tính text-indent cho một phần tử nào đó thì chỉ dòng đầu tiên trong văn bản của phần tử này được lùi đầu dòng, các dòng tiếp theo nếu có sẽ hiển thị như mặc định.
Chiều Cao Văn Bản
Để quy định chiều cao cho văn bản của phần tử HTML trên trang, chúng ta sử dụng thuộc tính line-height.
body {
font-size: 14px;
}
.text-short {
line-height: 10px;
}
.text-tall {
line-height: 20px;
}
Thuộc Tính "line-height" trong CSS
Khi không quy định đơn vị cho giá trị của thuộc tính này, CSS sẽ sử dụng đơn vị tương đối là em:
body {
font-size: 14px;
}
.text-short {
line-height: 0.5;
}
.text-tall {
line-height: 2;
}
Thuộc Tính "line-height" Không Sử Dụng Đơn Vị
Giá trị mặc định của thuộc tính line-height là normal.
Khoảng Cách Giữa Các Ký Tự
Để quy định khoảng cách giữa các ký tự với nhau trong văn bả của phần tử HTML trên trang, chúng ta sử dụng thuộc tính letter-space.
.normal-letter-spacing {
letter-spacing: normal;
}
.narrow-letter-spacing {
letter-spacing: -1px;
}
.wide-letter-spacing {
letter-spacing: 3px;
}
Giá trị mặc định của thuộc tính line-spacing là normal.
Khoảng Cách Giữa Các Từ
Để quy định khoảng cách giữa các từ trong văn bản của phần tử HTML trên trang, chúng ta sử dụng thuộc tính word-spacing.
.normal-word-spacing {
word-spacing: normal;
}
.narrow-word-spacing {
word-spacing: -5px;
}
.wide-word-spacing {
word-spacing: 5px;
}
Giá trị mặc định của thuộc tính word-spacing là normal.