Giống như bất kỳ ngôn ngữ nào, CSS cũng có cú pháp riêng của nó. Cú pháp của CSS không phức tạp, nó rõ ràng và khoa học.
Kiến thức trong bài này tuy cơ bản nhưng quan trọng, giúp chúng ta rất nhiều nếu muốn học sâu hơn.
Đây là một mẫu code CSS chuẩn:
p {
font-size: 18px;
color: red;
}- p chính là thẻ p – là thẻ được chọn để tác động bằng CSS còn được gọi là selector. Ngoài cách dùng tên thẻ trong HTML, bạn cũng có thể dùng id hoặc class của thẻ đó để tác động. Một cách tổng quát, người ta gọi cái này là selector, dịch là bộ chọn.
-
font-size: 18px– cả dòng này được gọi là một khai báo. Tương tự như vậy color: red cũng là một khai báo khác. - Trong một khai báo thì luôn bao gồm 2 phần, cái bên trái là thuộc tính, cái bên phải là giá trị, và ngăn cách nhau bằng dấu hai chấm. Trong ví dụ trên font-size là thuộc tính, 18px là giá trị. Tương tự như vậy color là thuộc tính, red là giá trị.
- Các khai báo ngăn cách nhau bằng dấu chấm phẩy ;
Ở trên các khai báo được đặt trên các dòng khác nhau cho rõ ràng, nếu muốn tích kiệm dung lượng file CSS (minify) bạn có thể để nó trên cùng một dòng như thế này:
p{font-size: 18px; color: red;}Dấu chấm phẩy ở khai báo cuối cùng là không bắt buộc nhưng nên có để lần sau bạn thêm các khai báo khác vào thì đỡ bị quên dấu ngăn cách này.
Nếu một thẻ được khai báo nhiều lần các giá trị khác nhau của cùng một thuộc tính, thì khai báo cuối cùng sẽ quyết định cách hiển thị của thẻ đó. Chẳng hạn đầu tiên bạn khai báo thế này:
p {
font-size: 18px; color: red;
} Rồi ở các dòng CSS phía sau bạn viết:
p {
font-size: 18px; color: blue;
} Thế thì kết quả tổng hợp của 2 đoạn CSS trên sẽ là:
p {
font-size: 18px; color: blue;
}Nói cách khác thuộc tính color với giá trị là red đã bị ghi đè bởi thuộc tính color với giá trị là blue.
Luôn nhớ quy tắc là khi trình duyệt đọc một file HTML, nó sẽ tổng hợp tất cả CSS mà nó nhận thấy trên trang HTML. Theo đó các giá trị được khai báo sau sẽ ghi đè lên giá trị được khai báo trước đấy.
Và style Liên Kết (link) thì yếu hơn style Nhúng (embbed), còn style Nhúng thì yếu hơn style Cục Bộ / Nội tuyến, điều đó không có nghĩa là style Liên Kết thì “kém tắm”, trong thực tế thì ngược lại, style Liên Kết mới là cách CSS chuyên nghiệp, từ yếu ở đây nó giống như kiểu phép Vua thua lệ làng mà thôi.
Dù bạn không khai báo style trong CSS thì các thẻ vẫn có style riêng được các trình duyệt mặc định thiết lập. Khi bạn khai báo, các style của bạn sẽ ghi đè lên style mặc định này.
Nếu nhiều thẻ có khai báo giống nhau bạn có thể tổng hợp lại để đỡ công viết code, chẳng hạn:
h1 {
margin: 10px;
font-size: 24px;
}
h2 {
margin: 10px;
font-size: 24px;
}Hai đoạn CSS trên có thể được viết gộp thành một như dưới đây mà vẫn cho kết quả tương đương:
h1, h2 {
margin: 10px;
font-size: 24px;
}Các thẻ sẽ được ngăn cách bằng dấu phẩy, cú pháp sau đó không có gì thay đổi so với thẻ đơn.