🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

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.

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>

Copy and chạy code

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-space chỉ đị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>

Copy and chạy code

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!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM