CSS căn bản #1

Cú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần thuộc tính (property), phần nhãn (value).

tên {css: giá trị}

• Nếu nhãn của bạn có nhiều từ bạn nên đặt nhãn của bạn vào trong dấu nháy kép

html {font-family: "sans serif"}

• Trong trường hợp thẻ chọn của bạn nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi dấu (;).

p {text-align:center;color:#f00}

• Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt.

p {
text-align: center;
color: f00;
}

Cấu trúc CSS

• - Khai báo css cho id: #ten

Ví dụ: bạn có 1 thẻ <div id="tendiv">nội dung</div>.
Để khai báo css cho thẻ này bạn khai báo:
#tendiv {
thuộc tính css: giá trị;
}

• - Khai báo css cho class: .ten

Ví dụ bạn có 1 thẻ <div class="tenclass">nội dung</div>
Để khai báo cho thẻ này bạn khai báo
.tenclass {
thuộc tính css: giá trị;
}

• Ghi chú: Bạn có thể khai báo nhiều class cho mỗi thẻ.

Ví dụ: <div class="ten1 ten2 ten3">nội dung</div>
Mỗi ten1, ten2 bạn khai báo như khai báo thuộc tính class bình thường. Class đứng sau sẽ chiếm giá trị css cùng loại.
Ví dụ:
.ten1 {
width:400px;
}
.ten2 {
width:200px;
}
Thì thẻ trên sẽ nhận giá trị "width:200px";

• - Khai báo css cho html: thẻ html

Nếu bạn muốn khai báo tất cả hình ảnh trong 1 div hay 1 thẻ nào đó có chung 1 thuộc tính thì bạn có 2 cách:

• Cách 1: bạn khai báo thẻ class hay id rồi sau đó gắng vào tất cả những thẻ html có trong đó.

ví dụ:
Ở file css
.img {border:1px solid #ccc;padding:3px; background:#f00} /*Khai báo thẻ được bao ngoài với độ rộng đường viền 1px. Cách vào trong 3px; Màu nền đỏ - Vấn đề này chúng ta sẽ bàn kỹ hơn vào các bài sau*/
Ở file html
<div id="tendiv">
<img src="link ảnh" class="img" />
<img src="link ảnh" class="img" />
<img src="link ảnh" class="img" />
</div>
Ở đây rôi khai báo theo class có tên img (.img)

• Cách 2: Bạn khai báo:

Ở file css:
#tendiv img{border:1px solid #ccc;padding:3px; background:#f00}
Ở file html

<div id="tendiv">
<img src="link ảnh" />
<img src="link ảnh" />
<img src="link ảnh" />
</div>
Chúng ta hoàn toàn có 2 kết quả giống nhau nhưng bên html đỡ rườm rà và rắc rối hơn.
Ở cách 2 chúng ta đã khai báo cho thẻ html img ở dòng lệnh #tendiv img như vậy mọi hình ảnh ở trong thẻ tendiv sẽ có giá trị như ta khai báo.
- Khai báo css cho 1 thẻ html duy nhất:
Vấn đề đặt ra là bạn có 2 lệnh css có tên giống nhau là .mau{background:#f00} và .mau{background:#000 }
background: là câu lệnh css cho ta màu nền;
#f00: mã màu đỏ
#000: mã màu đen
Nhưng bạn muốn áp dụng cho thẻ p có nền màu đỏ, thẻ img có nền màu đen thì phải làm thế nào?
Nếu bạn gán css mau vào cho p và img như 3 cách trên thì hoàn toàn sai lầm vì cả 2 sẽ đưa ra 1 màu.Để giải quyết ván đề này bạn khai báo:
p.mau{background:#f00}
img.mau{background:#000}

Share this

Share on FacebookPlus on Google+