Tìm hiểu về cấu trúc cú pháp CSS

Thứ ba - 28/06/2016 05:15

Cú pháp của một CSS gồm 2 phần chính:

1. Selector: Thành phần này dùng để xác định đối tượng ta muốn tác động tới
2. Declaration: Thành phần này là các thuộc tính trong CSS như màu sắc, kích thước, canh chỉnh.....
cau truc cu phap css


Sau đây tôi lấy 1 ví dụ để ta hiểu rõ hơn về 2 thành nhần này nhé!

Chúng ta có một file HTML như sau
<h1>Nội dung cần áp dụng CSS</h1>
Và một file CSS như sau
h1 {color: blue;}

- Ở đây h1 là chính là Selector giúp hướng tới đối tượng nằm trong thẻ <h1></h1>
- Phần thuộc tính nằm trong dấu {color: blue;} là Declaration giúp đối tượng thẻ h3 của mình chuyển sang màu xanh

Như bạn thấy phần Declaration gồm có 2 phần là : colorblue  và được ngăn cách bởi dấu chấm phẩy (:), ở đây "color" quyết định cái gì sẽ chịu ảnh hưởng và "blue" là giá trị quyết định nó sẽ bị ảnh hưởng như thế nào. Như ví dụ trên thì "color" quyết định sẽ tác động đến màu sắc của thẻ h1 và "blue" nó quyết định h1 sẽ là màu xanh.

Một số cách viết CSS

Nếu như bạn đang thiết kế trang web và bạn sử dụng rất nhiều CSS và theo cách viết thông thường thì code của bạn sẽ rất rối và phức tạp, vậy sau đây tôi xin giới thiệu đến các bạn một số cách viết CSS cách ngắn gọn nhất có thể.

1. Nhóm nhiều Selector vào một dòng

Theo cách thông thường

h1 {color:red; font-style:italic;}
h2 {color:red; font-style:italic;}
...
h6 {color:red; font-style:italic;}

Theo cách nhóm các Selector

h1, h2, h3, h4, h5, h6 {color:red; font-style:italic;}

Ngoài ra bạn có thể thêm một thuộc tính khác cho một thẻ bất kỳ bằng cách

h1, h2, h3, h4, h5, h6 {color:red; font-style:italic;}
h2 {font-style:bold;}

2. Nhóm nhiều Declaration vào một dòng

Theo cách thông thường

p {color:blue;}
p {font-size:12px;} 
p (line-height:15px;}

Theo cách nhóm các Declaration

p {color:blue; font-size:12px; line-height:15px;}

Nếu bạn áp dụng tốt các cách viết trên ngoài các ưu điểm như nhìn code rất ngăn nắm, rõ ràng thì việc bạp áp dụng cách nhóm này sẽ giúp trang web của bạn có dung lương nhỏ gọn hơn bình thường --> web bạn sẽ load nhanh hơn

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây

Chat với WEBPHANG