Cafedev chia sẻ cho ace về Text(Văn bản) với đặt màu, căn chỉnh, trang trí, space, shadow nó trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.
Nội dung chính
1. Đặt màu cho văn bản
Thuộc tính color được sử dụng để đặt màu của văn bản. Màu sắc được chỉ định bởi:
- tên màu – như “red”
- giá trị HEX – như “# ff0000”
- một giá trị RGB – như “rgb (255,0,0)”
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>
<p>Another paragraph.</p>
</body>
</html>
2. Text Alignment – Căn chỉnh
Thuộc tính text-align được sử dụng để đặt căn lề ngang của văn bản.
Văn bản có thể được căn trái hoặc phải, căn giữa hoặc căn đều.
Ví dụ sau cho thấy căn giữa và văn bản được căn trái và phải (căn trái là mặc định nếu hướng văn bản là trái sang phải và căn phải là mặc định nếu hướng văn bản từ phải sang trái):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>3. Trang trí văn bản – Text Decoration
Thuộc tính. trang trí văn bản được sử dụng để đặt hoặc xóa trang trí khỏi văn bản.
Giá trị. text-decoration: none; thường được sử dụng để xóa gạch chân khỏi các liên kết:
Ví dụ trang trí:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>Lưu ý: Không nên gạch chân đoạn văn bản không phải là liên kết, vì điều này thường gây nhầm lẫn cho người đọc.
4. Thụt lề văn bản – Text Indentation
Thuộc tính text-indent được sử dụng để chỉ định thụt lề của dòng đầu tiên của văn bản:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>- Thuộc tính letter-spacing được sử dụng để chỉ định khoảng cách giữa các ký tự trong văn bản.
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}- Thuộc tính line-height được sử dụng để chỉ định khoảng cách giữa các dòng:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}- Thuộc tính word-spacing được sử dụng để chỉ định khoảng cách giữa các từ trong văn bản.
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}- Thuộc tính
white-spacechỉ định cách xử lý khoảng trắng bên trong một phần tử.
p {
white-space: nowrap;
}5. Text Shadow – Hiểu ứng đổ bóng
Thuộc tính text-shadow thêm bóng vào văn bản.
Trong cách sử dụng đơn giản nhất, bạn chỉ xác định bóng ngang (2px) và bóng dọc (2px):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>Full series tự học CSS từ cơ bản tới nâng cao.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
 với đặt màu, căn chỉnh, trang trí, space, shadow nó trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.){kind=link}