Thuộc tính text trong CSS3

Với mỗi nội dung dạng text luôn là thứ được thể hiện một cách đầy đủ và nhiều nhất. Nội dung dạng text cũng là thứ được Google xem xét và đánh giá chất lượng. Text trên web được định dạng dựa vào các thuộc tính text trong CSS. Trong CSS3 chúng ta có thuộc tính text trong css3 dùng để định dạng text rất dễ sử dụng. Bạn có thể dễ dàng tạo ra các dòng text với định dạng về màu sắc cũng như kiểu chữ. Trong bài chia sẻ này, viettamduc.net sẽ chia sẻ cho các bạn về các thuộc tính text trong CSS3. Hy vọng đây sẽ là bài viết hữu ích cho các bạn đang theo học lập trình thiết kế web.

Định nghĩa:

 

Thuộc tính giá trị Ví dụ Mô tả
text-justify auto text-justify: auto; Trình duyệt tự động sắp xếp text cho thành phần.
distribute text-justify: 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 text-justify: 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 text-justify: 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 text-justify: 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 text-justify: 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 text-justify: 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-outline: 10px 10px #cc0000; 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 text-overflow: clip; Xén bớt vùng text.
ellipsis text-overflow: ellipsis; Cắt một đoạn text và thay thế bằng dấu 3 chấm.
chuỗi text-overflow: 'còn tiếp'; Cắt một đoạn text và thay bằng một chuỗi khác.
text-shadow đơn vị
(chiều ngang)
text-shadow: 2px 2px 2px #cc0000; 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 text-wrap: none; Không sử dụng phá vỡ dòng.
normal text-wrap: normal; Trả về mặc định.
unrestricted text-wrap: unrestricted; Dòng có thể bị ngắt giữa 2 ký tự.
suppress text-wrap: 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 lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="2.css"/>
</head>
<body>
<p>Việt Tâm Đức</p>
</body>
</html>

 

CSS viết:

p{
color: red;
font-size: 86px;
font-weight: bold;
font-weight: bold;
}

Hiển thị trình duyệt khi chưa có text-shadow:

Thuộc tính text trong CSS3

Thêm thuộc tính text-shadow vào CSS:

p{
color: red;
font-size: 86px;
font-weight: bold;
font-weight: bold;
text-shadow: 2px 3px 5px blue;
}

Hiển thị trình duyệt khi có text-shadow:

Thuộc tính text trong CSS3

Với các thuộc tính được trình duyệt hỗ trợ các bạn có thể dễ dàng tạo ra các kiểu hiển thị text khác nhau cho trang web của mình. Chúc các bạn học lập trình HTML CSS vui vẻ!

binh luận