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 减胖.
通常一个站点的 CSS 文档随着站点的改变将会变得越来越庞大, 这时你应该为 CSS 文档瘦一下身.
把文档中 相同作用的CSS 文档归类到一起.
例:
---------------------------------------------------
#sys-login-2 {
padding-top:5px;
}
#x-pbb-s-l{
padding-top:5px;
}
---------------------------------------------------
可以把这两个定义归类到一起, 例:
---------------------------------------------------
#sys-login-2, #x-pbb-s-l {
padding-top:5px;
}
---------------------------------------------------
注: 在CSS 中定义多个 标签为同一属性可以使用 "," 分隔.
/-*-----------------------------------------------------------------------------------------*-/
五. 应该有良好的命名方法, 尽管会多几个字节, 但为了日后 方便查找和修改, 应该恰当的命名定义的属性.
不同的属性应该使用容易分辩的标隔符分开, 例如偶习惯使用
/*************************************************************************************************************************\
*
* Green Institute Navigation Menu By Emerald 绿色学院 - Green Institute http://gi.2288.org:88/
*
\*************************************************************************************************************************/
分隔一个大的类别,
使用
/*************************************************************************************************************************/
分隔一个小的类别
使用
/* Xoops Banner */
命名小类别中的定义.
/-*-----------------------------------------------------------------------------------------*-/
/****************************************************************\
*
* author : Emerald<btbtd@yahoo.com.cn>
*
* homepage : http://gi.2288.org:88/
*
* Seo-Gi : http://seo.2288.org:99
*
* sitename : 绿色学院 - Green Institute
*
* date : 2005-3-8 23:52:16
*
\****************************************************************/
