Hướng dẫn Tìm hiểu cú pháp trong CSS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,694
Tìm hiểu cú pháp trong CSS

Dưới đây là một ví dụ rất đơn giản của CSS, nó được viết để định dạng thẻ h3 của tài liệu sẽ có màu xanh dương
Mã:
h3 {color: blue;}

Do vậy nếu bạn có code HTML như sau
Mã:
<h3>Đoạn văn bản này sẽ có màu xanh trong trình duyệt</h3>

Về cơ bản cú pháp của CSS bao gồm 2 phần chính: SelectorDeclaration. Selector dùng để xác định đối tượng nào sẽ chịu ảnh hưởng và Declaration sẽ quyết định đối tượng đó bị ảnh hưởng như thế nào. Ở ví dụ trên, thẻ h3Selector và phần {color: blue;}Declaration.

Trong Declaration cũng có 2 phần là: PropertyValue. Property quyết định cái gì sẽ chịu ảnh hưởng và Value quyết định nó sẽ bị ảnh hưởng như thế nào. Ở ví dụ trên color là Property nó quyết định sẽ tác động đến màu của h3 và blue là Value, nó quyết định màu sẽ là màu xanh.

1.png

Bạn có thể sử dụng những cách sau đây khi viết CSS

Nhóm nhiều Declaration vào một dòng
Mã:
p {color:blue; font-size:12px; line-height:15px;}

và nếu bạn có một đoạn văn bản như sau trong code html
Mã:
Đoạn văn bản này sẽ chịu ảnh hưởng của tất cả các Declaration ở trên

nó sẽ có màu xanh, cỡ chữ là 12px và độ cao giữa các dòng là 15px.

Lưu ý: Mỗi Declaration được ngăn cách bởi dấu chấm phẩy ; dấu chấm phẩy ở cuối cùng không bắt buộc, nhưng bạn nên cho vào để sau này nếu có thêm Declaration sẽ không bị quên

Nhóm nhiều Selector vào một dòng
Ví dụ nếu bạn muốn chữ từ h1 đến h6 có màu đỏ và được in nghiêng bạn có thể viết
Mã:
h1 {color:red; font-style:italic;}
h2 {color:red; font-style:italic;}
...
h6 {color:red; font-style:italic;}

Hoặc bạn có thể nhóm tất cả lại để đỡ tốn công hơn
Mã:
h1, h2, h3, h4, h5, h6 {color:red; font-style:italic;}

Chúc các bạn thành công.


Nguồn: izwebz.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile: 0906081284

Zalo: 0988488096

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom