Text - Văn bản trong CSS
Ví dụ về căn lề văn bản
Khi đặc tính text-align được chọn là justify thì mỗi dòng sẽ có độ rộng bằng nhau, văn bản được căn thẳng theo cả 2 lề trái và phải.
Một đoạn văn bản được căn đều lề 2 bên
Định dạng khác cho văn bản
Đặc tính text-decoration được dùng để thêm hoặc bỏ một vài định dạng khác cho văn bản. Giá trị text-decoration: none thường được dùng để xóa bỏ đoạn gạch chân trong đường dẫn.
a {text-decoration: none;
}
Các giá trị text-decoration khác còn có gạch trên, gạch ngang và gạch dưới.
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Lưu ý: Thông thường không nên gạch chân văn bản không phải đường dẫn vì dễ gây nhầm lẫn cho người đọc.
Đặc tính text-decoration cho các kiểu định dạng đặc biệt khác
Thiết lập kí tự thường và viết hoa cho văn bản
Đặc tính text-transformation được dùng để xác định chữ viết thường và viết hoa trong văn bản. Nó có thể biến cả văn bản thành chữ thường, chữ hoa hoặc chỉ viết hoa chữ cái đầu của từng từ.
p.uppercase {text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Lùi đầu dòng văn bản
Đặc tính text-indent được dùng để xác định đoạn lùi đầu dòng của dòng đầu tiên trong văn bản.
text-indent: 50px;
}
Khoảng cách giữa các chữ cái
Đặc tính letter-spacing dùng để xác định khoảng cách giữa các chữ cái. Ví dụ dưới đây cho thấy khoảng cách tăng/giảm như thế nào.
Xác định khoảng cách giữa các chữ cái bằng letter-spacing
Chiều cao của dòng
Đặc tính line-height xác định chiều cao của dòng, hay chính là khoảng cách giữa các dòng. Chiều cao dòng mặc định trên hầu hết các trình duyệt thường là khoảng 110% đến 120%.
p.small {line-height: 0.8;
}
p.big {
line-height: 1.8;
}
Ví dụ về khoảng cách giữa các dòng trong CSS
Hướng văn bản
Đặc tính direction được dùng để thay đổi hướng của văn bản trong phần tử. Văn bản có thể được viết từ trái sang phải [mặc định] hoặc từ phải sang trái rtl.
p {direction: rtl;
}
Khoảng cách giữa các từ
Đặc tính word-spacing dùng để xác định khoảng cách giữa các từ trong văn bản.
h2 {word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
Đổ bóng văn bản
Đặc tính text-shadow giúp thêm bóng cho văn bản. Ví dụ dưới đây đổ bóng theo chiều ngang 3px, bóng theo chiều dọc 2px và màu của bóng là đỏ.
h2 {text-shadow: 3px 2px red;
}
Bài trước: Outline trong CSS
Bài sau: Font trong CSS
- Typography Bootstrap 4
- Một số thuộc tính xử lý Text trong CSS
- Trắc nghiệm CSS có đáp án P4
- Margin - Lề trong CSS
- Trắc nghiệm kiến thức CSS - Phần 9
- 5tính năng HTML và CSS thú vị đáng mong chờ trong năm 2018
- Thuộc tính FLOAT và CLEAR trong CSS
- Border Image - Tạo đường viền bằng hình trong CSS
- Trắc nghiệm kiến thức CSS - Phần 8
- Cách tạo logo RSS Feed bằng CSS3
- Bảng mã màu CSS, code color chuẩn trong thiết kế website
- Thư viện hình ảnh trong CSS
- Học SQL
- Python
- PHP
- JavaScript
- Lập trình C
- HTML
- Cơ sở dữ liệu
- SQL Server
- CSS và CSS3
- C#
- jQuery
- AngularJS
- Học HTTP
- Lập trình C++
- NodeJS
- Cấu trúc dữ liệu và giải thuật
- Học MongoDB
- Tìm hiểu Unix và Linux
- Học Git
- Bootstrap 4