Cú pháp CSS3
Trong hướng dẫn này, bạn sẽ học cách định nghĩa các quy tắc CSS3 trong stylesheet CSS của mình.
Cú pháp CSS3
Stylesheet CSS bao gồm một tập hợp các quy tắc được trình duyệt web diễn giải và sau đó được áp dụng cho các phần tử tương ứng như đoạn văn, tiêu đề, v.v. trong tài liệu HTML.
Quy tắc CSS có hai phần chính, một bộ chọn và một hoặc nhiều khai báo:
Bộ chọn (selector) chỉ định phần tử hoặc các phần tử trong trang HTML mà quy tắc CSS áp dụng.
Trong khi đó, các khai báo trong khối xác định cách các phần tử được định dạng trên một trang web. Mỗi khai báo bao gồm một thuộc tính và một giá trị được phân tách bằng dấu hai chấm :
, kết thúc bằng dấu chấm phẩy ;
và các nhóm khai báo được bao quanh bởi cặp dấu ngoặc nhọn {}
.
Thuộc tính là style bạn muốn thay đổi; chúng có thể là phông chữ, màu sắc, màu nền, v.v. Mỗi thuộc tính có một hoặc nhiều giá trị, ví dụ: thuộc tính màu có thể có giá trị blue
hoặc #0000FF
v.v.
h1 {color:blue; text-align:center;}
Để làm cho CSS dễ đọc hơn, bạn có thể đặt mỗi khai báo trên mỗi dòng, như sau:
h1 {
color: blue;
text-align: center;
}
Trong ví dụ trên h1
là một bộ chọn, color
và text-align
là các thuộc tính CSS, và các giá trị đã cho blue
và center
là các giá trị tương ứng của các thuộc tính này.
Lưu ý: Khai báo CSS luôn kết thúc bằng dấu chấm phẩy
;
và các nhóm khai báo luôn được bao quanh bởi cặp dấu ngoặc nhọn{}
.
Viết ghi chú trong CSS3
Các chú thích thường được thêm vào với mục đích làm cho mã nguồn dễ hiểu hơn. Nó có thể giúp nhà phát triển khác (hoặc bạn trong tương lai khi bạn chỉnh sửa mã nguồn) hiểu những gì bạn đang cố gắng thực hiện với CSS. Ghi chú có ý nghĩa quan trọng đối với lập trình viên nhưng bị trình duyệt bỏ qua.
Một ghi chú CSS bắt đầu bằng /*
và kết thúc bằng */
, như được hiển thị trong ví dụ dưới đây:
/* This is a CSS comment */
h1 {
color: blue;
text-align: center;
}
/* This is a multi-line CSS comment
that spans across more than one line */
p {
font-size: 18px;
text-transform: uppercase;
}
Bạn cũng có thể ghi chú một phần mã CSS của mình cho mục đích gỡ lỗi, như được hiển thị ở đây:
h1 {
color: blue;
text-align: center;
}
/*
p {
font-size: 18px;
text-transform: uppercase;
}
*/
Phân biệt chữ hoa chữ thường trong CSS
Tên thuộc tính CSS và nhiều giá trị không phân biệt chữ hoa chữ thường. Trong khi, các bộ chọn CSS thường phân biệt chữ hoa chữ thường, ví dụ, bộ chọn class .maincontent
sẽ khác với class .mainContent
.
Do đó, để an toàn hơn, bạn nên giả định rằng tất cả các thành phần của quy tắc CSS đều phân biệt chữ hoa chữ thường.
Bạn sẽ tìm hiểu về các loại bộ chọn CSS khác nhau trong chương tiếp theo.