编辑“SiteFactoryCMS:CSS定义的分类与注释”

__NOTOC__
<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[SiteFactoryCMS:动易模板体系揭秘|上一页]] | {{Template:PowerEasy导航}}</span>
<div style="clear:both;"></div>
<p style="text-indent:2em;">先以记事本打开default.css，一起研究一下[[CSS]]定义的注释。为方便其他设计者或用户理解定义的CSS 的作用、用途与范围，默认的CSS以一定的规范提供了简要的注释，了解了注释规范比较容易明白其使用范围及含义。设计师在新定义了特殊用途的CSS样式后，也应养成良好的注释习惯及时添加相应的注释，以方便他人理解与再次运用。</p>
<div style="width:790px; border:1px solid #000;">
[[{{ns:image}}:sf600.jpg]]</div>
<p style="text-indent:2em;">温馨提示：CSS样式的注释以“/* ××× */”标注，前后加“/*”和“*/”开始和结束注释，在“*”和内容相结处空半个空格（注意：“*”和“/”不能加空格）。</p>
<h4>default.css注释分布</h4>
<pre style="border:1px solid #000; background:white; width:488px;">
/* ==全局样式定义== */

……

/* ==整体布局定义== */

……

/* ==top_all(顶部)定义== */

/*--网页头部-- */

……

/* ==top_all(顶部)定义结束== */

/* ==center_all(中部)定义开始== */

/* 本站新闻.r_news */

……

/*--网页中部左侧内容-- */

……

/* --网页中部右侧内容-- */

……

/* ==center_all(中部)定义结束== */

/* ==bottom_all(底部)定义开始== */

/* --网页底部-- */

……

/* ==bottom_all(底部)使用定义结束== */


/* ==通用定义== */

/* 定义ul、li项目预设标记 */

……

/* ==通用结束== */

/* ==网站首页内容显示定义开始== */

/* --网站公告-- */

……

/* ==网站首页内容显示定义结束== */

/* ==书签面板文章定义开始== */

/* 二列式信息列表 */

……

/* ==书签面板文章定义结束== */
</pre>
<p style="text-indent:2em;">从以上注释分布可以看出，CSS定义以[[网页]]顶部、中部、底部三个大区块位置及其内部位置进行划分，同时对全局使用、整体布局、通用定义和特殊范围使用（如首页内容、书签面板等）都进行了区分。对于大区块位置的CSS使用范围，以“***开始”与“***结束”注释字样将所定义的CSS包含标识，如：</p>
<p>/* ==top_all(顶部)定义开始== */<br>
……<br>
/* ==top_all(顶部)定义结束== */</p>
<h4>分类标注的格式</h4>
<p style="text-indent:2em;">在注释中，内置三种CSS分类标注格式：</p>
<p style="text-indent:3em;">“/* ==center_all(中部)定义开始== */”：内置“==”表示某一大类CSS定义的范围及注释。</p>
<p style="text-indent:3em;">“/* --网页中部左侧内容-- */”：内置“--”表示属于本大类中某一小类CSS定义的范围及注释。</p>
<p style="text-indent:3em;">“/* 本站新闻.r_news */”：无内置符号表示单独CSS定义的注释。</p>
<h4>注释的位置</h4>
<p style="text-indent:3em;">注释一般放在本类CSS定义之前，如：</p>
<pre style="border:1px solid #000; background:white; width:688px;">
/* ==整体布局定义开始== */

/*--head(网页头部)、menu(网页头部导航菜单)、main_bg(网页中部主要内容)、foot(网页底部)--*/

#head, #menu, #foot, #main_bg, .c_padding

{

padding: 0px;

margin: 0px auto;

width: 980px;

}

单个的注释放在CSS定义名后面，如：

#main_left /* 网页中部左侧整体定义 */

{

float: left;

width: 210px;

}
</pre>



[[category:SiteFactoryCMS模板管理]]