PDA

View Full Version : Ý nghĩa khai báo CSS



webphp
14-10-2010, 22:33
Mình chưa hiểu rõ ý nghĩa và sử dụng của các CSS này khi khai báo.
Các bác nào biết hướng dẫn giúp
Thanks
1:
body.about #header {...}
2:
html>
hoặc
#tabs > ul a

3.
* html .content

vietdragons.com
15-10-2010, 10:36
viết dính liền và viết cách ra khác nhau à nha

thường thì body ko cần khai báo trước các thằng khác đâu

.about{color:red} <-- chữ trong thẻ có class là about sẽ có màu đỏ

#header{color:green} <-- chữ trong thẻ có id là header sẽ có màu xanh

.about #header{color:green} <-- chữ trong thẻ có id là header mà thẻ này nằm trong thẻ có class là .about sẽ có chữ màu xanh. Nếu khai báo như vầy thì khi ta đặt thẻ có id là header nằm ngoài thẻ có class là about thì chữ nó sẽ ko có màu xanh.

ký tự ">" trong css có nghĩa là con trực tiếp


<ul class="list">
<li>
<ul>
<li></li>
</ul>
</li>
</ul>

li{color:white}
ul.list > li{color:yellow}
khai báo như vầy thì chỉ có thẻ li ngoài cùng có chữ màu vàng, vì nó là con trực tiếp của ul có class là li, các thẻ li nằm trong thẻ li này sẽ có chữ màu trắng.

*html chứ ko phải * html
đây là cú pháp khai báo để hack ie6
ví dụ :

.box{margin-left:10px;float:left}

trong các trình duyệt tự hiểu là thẻ có class là box cách bên trái 10px. ie6 sẽ hiểu là thẻ này cách bên trái 20px (đừng hỏi mình tại sao nha, hỏi thằng MS ấy), như vậy muốn ie6 hiểu là thẻ này cách bên trái 10px giống các trình duyệt khác ta khai báo thêm như sau :
*html .box{margin-left:5px}

webphp
15-10-2010, 20:14
viết dính liền và viết cách ra khác nhau à nha

thường thì body ko cần khai báo trước các thằng khác đâu

.about{color:red} <-- chữ trong thẻ có class là about sẽ có màu đỏ

#header{color:green} <-- chữ trong thẻ có id là header sẽ có màu xanh

.about #header{color:green} <-- chữ trong thẻ có id là header mà thẻ này nằm trong thẻ có class là .about sẽ có chữ màu xanh. Nếu khai báo như vầy thì khi ta đặt thẻ có id là header nằm ngoài thẻ có class là about thì chữ nó sẽ ko có màu xanh.

ký tự ">" trong css có nghĩa là con trực tiếp


<ul class="list">
<li>
<ul>
<li></li>
</ul>
</li>
</ul>

li{color:white}
ul.list > li{color:yellow}
khai báo như vầy thì chỉ có thẻ li ngoài cùng có chữ màu vàng, vì nó là con trực tiếp của ul có class là li, các thẻ li nằm trong thẻ li này sẽ có chữ màu trắng.

*html chứ ko phải * html
đây là cú pháp khai báo để hack ie6
ví dụ :

.box{margin-left:10px;float:left}

trong các trình duyệt tự hiểu là thẻ có class là box cách bên trái 10px. ie6 sẽ hiểu là thẻ này cách bên trái 20px (đừng hỏi mình tại sao nha, hỏi thằng MS ấy), như vậy muốn ie6 hiểu là thẻ này cách bên trái 10px giống các trình duyệt khác ta khai báo thêm như sau :
*html .box{margin-left:5px}

Chân thành cám ơn bạn rất nhiều.