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
*
\****************************************************************/