Thuộc tính text
Định nghĩa và sử dụng Thuộc tính text trong css3 dùng để định dạng các dạng text ngoài dạng đã được định nghĩa ở css2. Cấu trúc tag { thuộc tính: giá trị; } Thuộc tính: Thuộc tính giá trị Mô tả text-justify auto Trình duyệt tự động sắp xếp text cho thành phần. distribute Tăng […]
Định nghĩa và sử dụng
Thuộc tính text trong css3 dùng để định dạng các dạng text ngoài dạng đã được định nghĩa ở css2.
Cấu trúc
tag {
thuộc tính: giá trị;
}
Thuộc tính:
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| text-justify | auto | Trình duyệt tự động sắp xếp text cho thành phần. |
| distribute | Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự, giá trị này thường được sử dụng cho các ngôn ngữ như tiếng Nhật. | |
| inter-cluster | Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự, giá trị này thường được sử dụng cho các ngôn ngữ Đông Nam Á, như Thái. | |
| inter-ideograph | Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự, giá trị này thường được sử dụng cho các ngôn ngữ CJK. | |
| inter-word | Tăng hoặc giảm khoảng cách giữa các từ, được sử dụng cho ngôn ngữ có từ cách biệt như tiếng Anh hoặc tiếng Hàn. | |
| kashida | Tăng hoặc giảm khoảng cách giữa các từ, thường được sử dụng trong các ký tự thư pháp, giá trị này phù hợp với tiêu đề trong CSS3. | |
| none | Không hiển thị dạng của Justify, được dùng để reset lại các giá trị của text-justify | |
| text-outline (Chưa được trình duyệt hỗ trợ) |
độ mờ | Text có vùng biên góc mờ. |
| mã màu | Màu cho vùng biên. | |
| bề dày | Tạo bề dày cho vùng biên, với đơn vị là px, em, … | |
| text-overflow | clip | Xén bớt vùng text. |
| ellipsis | Cắt một đoạn text và thay thế bằng dấu 3 chấm. | |
| chuỗi | Cắt một đoạn text và thay bằng một chuỗi khác. | |
| text-shadow | đơn vị (chiều ngang) |
Xác định vị trí của bóng theo chiều ngang, có thể dùng giá trị âm. |
| đơn vị (chiều dọc) |
Vị trí của bóng thẳng đứng, có thể dùng giá trị âm. | |
| đơn vị (Độ nhòe – blur) |
Khoảng cách nhòe của bóng. | |
| mã màu | Màu sắc của bóng | |
| text-wrap (Chưa được trình duyệt hỗ trợ) |
none | Không sử dụng phá vỡ dòng. |
| normal | Trả về mặc định. | |
| unrestricted | Dòng có thể bị ngắt giữa 2 ký tự. | |
| suppress | Việc ngắt dòng bị ngăn chặn bên trong thành phần, trình duyệt chỉ ngắt dòng bên trong thành phần khi thành phần không có điểm ngắt khác trong dòng. |
Ví dụ
Html viết:
<html> <head></head> <body> <p>HỌC HTML - CSS</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
HỌC HTML – CSS
CSS viết:
p {
color: #cc0000;
font-size: 120%;
font-weight: bold;
text-shadow: 0 0 3px blue;
}
Hiển thị trình duyệt:
HỌC HTML – CSS
Trình duyệt hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ:
| Trình duyệt PC | Smartphone – Tablets | |
| text-justify | Internet Explorer 6 | IOS 3.2 |
| Firefox 3 | Android 2.1 | |
| Opera 5 | Window Phone 7.5 | |
| Google Chrome 4 | ||
| Safari 3 | ||
| text-overflow | Internet Explorer 6 | IOS 3.2 |
| Firefox 7 | Android 2.1 | |
| Opera 10 | Window Phone 7.5 | |
| Google Chrome 4 | ||
| Safari 4 | ||
| text-shadow | Internet Explorer – Không hỗ trợ | IOS 3.2 |
| Firefox 3 | Android 2.1 | |
| Opera 10 | Window Phone – Không hỗ trợ | |
| Google Chrome 4 | ||
| Safari 4 |
