Cấu trúc cơ bản của CSS
Tạo bởi Hoàng Vũ, chỉnh sửa cuối lúc 19 tháng 1, 2025
1. Cú pháp CSS
Cú pháp của CSS dùng để mô tả cách các phần tử HTML hiển thị trên trang web. Nó bao gồm ba thành phần chính:
a. Selector
- Xác định phần tử HTML cần áp dụng kiểu dáng.
- Ví dụ:
Trong ví dụ trên,p { color: red; }plà selector, áp dụng kiểu dáng cho tất cả các thẻ<p>trong trang web.
b. Declaration Block
- Là phần nằm trong dấu ngoặc nhọn
{}, chứa các khai báo kiểu dáng. - Mỗi khai báo gồm:
- Thuộc tính (Property): Mô tả tính năng cần định dạng (vd: màu chữ, kích thước phông chữ).
- Giá trị (Value): Định nghĩa cụ thể cho thuộc tính.
- Ví dụ:
{ color: blue; font-size: 16px; }
c. Properties và Values
-
Properties: Các thuộc tính của CSS, như
color,font-size,margin,padding. -
Values: Giá trị gán cho thuộc tính, như
blue,16px,10px.
Ví dụ:
h1 {
color: green; /* Thuộc tính 'color' với giá trị là 'green' */
font-size: 24px; /* Thuộc tính 'font-size' với giá trị là '24px' */
}
2. Ví dụ đầy đủ về cú pháp CSS
Dưới đây là ví dụ minh họa đầy đủ về cú pháp CSS:
File HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cấu trúc CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Tiêu đề chính</h1>
<p>Đoạn văn mô tả.</p>
</body>
</html>
File CSS (styles.css):
/* Selector cho thẻ h1 */
h1 {
color: blue; /* Màu chữ xanh */
font-size: 32px; /* Kích thước chữ 32px */
text-align: center; /* Căn giữa */
}
/* Selector cho thẻ p */
p {
color: gray; /* Màu chữ xám */
line-height: 1.5; /* Khoảng cách dòng 1.5 */
margin: 20px; /* Khoảng cách bên ngoài 20px */
}
3. Thực hành
Tạo một trang web đơn giản và thực hiện các bước sau:
-
Viết file HTML với nội dung:
- Một tiêu đề
<h1>. - Một đoạn văn
<p>.
- Một tiêu đề
-
Viết file CSS để:
- Định dạng tiêu đề
<h1>với màu sắc, kích thước chữ, và căn giữa. - Định dạng đoạn văn
<p>với màu sắc, khoảng cách dòng, và khoảng cách bên ngoài.
- Định dạng tiêu đề
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