Thuộc tính định dạng văn bản trong CSS
Thuộc tính CSS cơ bản giúp bạn định dạng văn bản trên trang web. Bạn sẽ học cách sử dụng các thuộc tính như color, font-size, font-family, text-align, và line-height để tạo ra một giao diện đẹp mắt và dễ đọc.
Thuộc tính CSS cơ bản
1. Thuộc tính color
- Mô tả: Dùng để thay đổi màu chữ của phần tử.
-
Cú pháp:
p { color: blue; } -
Các giá trị có thể sử dụng:
- Tên màu:
red,blue,green, ... - Mã màu HEX:
#ff5733,#000000(đen). - Mã màu RGB:
rgb(255, 0, 0)(đỏ). - Mã màu RGBA (bao gồm độ trong suốt):
rgba(255, 0, 0, 0.5).
- Tên màu:
2. Thuộc tính font-size
- Mô tả: Điều chỉnh kích thước chữ.
-
Cú pháp:
p { font-size: 18px; } -
Các giá trị có thể sử dụng:
- Đơn vị px (pixel):
16px,18px, ... - Đơn vị em:
1em,1.5em(1em tương đương với kích thước chữ gốc). - Đơn vị rem:
1rem,2rem(rem tính theo kích thước gốc của thẻ<html>).
- Đơn vị px (pixel):
3. Thuộc tính font-family
- Mô tả: Chỉ định font chữ cho phần tử.
-
Cú pháp:
p { font-family: 'Arial', sans-serif; } -
Các giá trị có thể sử dụng:
- Tên font chữ:
'Arial','Times New Roman','Courier New', ... - Font fallback (thứ tự ưu tiên):
'Arial', sans-serif. - Các font hệ thống:
serif,sans-serif,monospace.
- Tên font chữ:
4. Thuộc tính text-align
- Mô tả: Căn chỉnh văn bản theo chiều ngang.
-
Cú pháp:
p { text-align: center; } -
Các giá trị có thể sử dụng:
-
left: Căn trái. -
right: Căn phải. -
center: Căn giữa. -
justify: Căn đều.
-
5. Thuộc tính line-height
- Mô tả: Điều chỉnh khoảng cách giữa các dòng văn bản, giúp cải thiện khả năng đọc.
-
Cú pháp:
p { line-height: 1.5; } -
Các giá trị có thể sử dụng:
- Đơn vị số:
1.5,2, ... - Đơn vị px:
24px,30px, ...
- Đơn vị số:
Thực hành
1. Yêu cầu
Tạo một trang HTML với các đoạn văn chứa nội dung sau:
- Sử dụng các thuộc tính để định dạng màu sắc, kích thước, font chữ và căn chỉnh văn bản.
- Áp dụng các thuộc tính này vào các thẻ HTML như
<h1>,<p>, và<div>.
2. Hướng dẫn
File HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thuộc tính định dạng văn bản</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Tiêu đề lớn</h1>
<p class="highlight">Đây là một đoạn văn được định dạng bằng các thuộc tính CSS cơ bản.</p>
<p>Đoạn văn này sẽ có một khoảng cách dòng lớn hơn để dễ đọc hơn.</p>
</body>
</html>
File CSS (styles.css):
/* Định dạng văn bản */
h1 {
font-family: 'Arial', sans-serif;
font-size: 24px;
color: #333;
text-align: center;
}
p {
font-family: 'Times New Roman', serif;
font-size: 18px;
line-height: 1.5;
}
.highlight {
color: green;
font-size: 20px;
text-align: left;
}
Kết luận
Bài học giúp bạn hiểu cách sử dụng các thuộc tính cơ bản để định dạng văn bản trên trang web. Việc nắm vững các thuộc tính này sẽ giúp bạn tạo ra một giao diện người dùng dễ nhìn và thân thiện.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com