CSS Note 使用笔记 by Emerald
/-*-----------------------------------------------------------------------------------------*-/
一. 关于 id 和 class 的标记法,
1.
定义id 在 CSS中 使用 # 字符.
例:
---------------------------------------------------
#demo{
width:100%;
background-color: #ffffff;
border: thin solid #000000;
padding:0px 0px 0px 5px;
display:table;
}
---------------------------------------------------
2.
定义 class 在CSS 中使用 . 字符.
例:
---------------------------------------------------
.demo{
width:100%;
background-color: #ffffff;
border: thin solid #000000;
padding:0px 0px 0px 5px;
display:table;
}
---------------------------------------------------
/-*-----------------------------------------------------------------------------------------*-/
二. 定义 id 和 class 的技巧.
最上层的目录采用 id 定义, 目录下没有下层目录采用 class 定义, 目录下有下层目录采用id 定义.
例:
---------------------------------------------------
<div id="headerWS">
<div class="logoWS"></div>
<div id="navigationCnWS">
<div class="navigationCnTopWS"></div>
<div class="navigationCnMenuWS"></div>
</div>
</div>
---------------------------------------------------
/-*-----------------------------------------------------------------------------------------*-/
三. 深入到 层的定义
XHTML 代码:
---------------------------------------------------
<div id="headerWS">
<div class="logoWS"></div>
<div id="navigationCnWS">
<div class="navigationCnTopWS"></div>
<div class="navigationCnMenuWS"></div>
</div>
</div>
---------------------------------------------------
对应的CSS 代码:
---------------------------------------------------
#headerWS {
}
#headerWS div.logoWS{
}
#headerWS div#navigationCnWS{
}
#headerWS div#navigationCnWS div.navigationCnTopWS{
}
#headerWS div#navigationCnWS div.navigationCnMenuWS{
}
---------------------------------------------------
也可以深入到开始标签, 例:
---------------------------------------------------
div#headerWS {
}
div#headerWS div.logoWS{
}
div#headerWS div#navigationCnWS{
}
div#headerWS div#navigationCnWS div.navigationCnTopWS{
}
div#headerWS div#navigationCnWS div.navigationCnMenuWS{
}
---------------------------------------------------
/-*-----------------------------------------------------------------------------------------*-/
四. 给 CSS 减胖.
