编辑“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;">[[CSS]]定义除了常规应用外，系统中部分内置的CSS定义有着特殊的应用和用途，本节将对一些特殊CSS定义进行详细说明。</p>
<h4>控制主布局的定义</h4>
<p style="text-indent:2em;">在CSS定义中，布局定义主要控制[[DIV]]区块的相对或绝对定位位置、宽度等（如float、width等定义）。默认模板的布局主要有二处，在前面小实验中我们也涉及到了这二处的定义：</p>
<p style="text-indent:2em;">“/* ==整体布局定义开始== */”：定义网页头部（head）、网页头部导航菜单（menu）、网页中部主要内容（main_bg）和网页底部（foot）的宽度为980像素或 982像素（因为部分[[浏览器]]将border的宽度也算在宽度内，所以增加2个像素），顶部（top_all）、中部（center_all）和底部（bottom_all）不定义宽度（无固定宽度定义时，DIV区块的宽度则自动延伸为100%）。</p>
<p style="text-indent:2em;">“/* ==center_all(中部)定义开始== */”：定义了网页中部（main_bg）的背景，网页中部左侧（main_left）、网页中部右侧（main_right、 main_right_box）、中部右侧（r_main）、中部（main_box）和中部中间（c_main、c_main_box）的定位与宽度。</p>
<p style="text-indent:2em;">温馨提示：在默认模板中以，采用了正（main_right_box）、负（main_right）边距定位的方法，以实现左宽度固定、右宽度不固定的页面布局效果。详细请参阅上节模板版式布局说明中的相关说明。</p>
<h4>控制兼容的定义</h4>
<p style="text-indent:2em;">由于各浏览器对CSS规范的支持性与解析标准目前尚未统一，在同样的CSS样式定义有时在各浏览器中显示效果不相同。在默认的CSS定义中，为了实现最大化兼容各浏览器（本文主要考虑兼容[[FireFox]]、[[IE]]7和 IE6三种浏览器）及其显示效果，需要针对其各自不同的解析差异分别进行定义，如：</p>
<pre style="width:388px; border:1px solid #000; background:white;">
.childclass_main
{
margin-left: -5px;
}

*+ html .childclass_main
{
margin-left: -5px;
}

* html .childclass_main
{
margin-left: -10px;
}
</pre>
<p style="text-indent:2em;">在上述定义中，“.childclass_main{***}”的定义FireFox、IE7和IE6这三个浏览器都能解析， “*+html . childclass_main {***}”的定义只有IE7解析（即在样式名前加“*+html空格”），“* html .childclass_main {***}”的定义只有IE6解析（即在样式名前加“*html空格”）。根据根据CSS优先级规则，则各浏览器分别解析其指定的CSS定义。</p>
<p style="text-indent:2em;">温馨提示：根据CSS优先级规则，若同一CSS文件中存在同名的样式定义，浏览器将优先解析显示最后面的样式定义。</p>
<h6>a元素的链接图片</h6>
<p style="text-indent:2em;">通过对a元素和a元素伪类动态链接hover状态不同背景定义，以实现动态链接文字动态背景效果。如在网页头部导航菜单中对menubox a和menubox a:hover定义不同的背景图片：</p>
<div style="width:790px; border:1px solid #000;">
[[{{ns:image}}:sf602.jpg]]</div>
<pre style="width:588px; border:1px solid #000; background:white;">
#menubox a {
……
background: url(images/menubox.gif) no-repeat 5px 7px;
}

#menubox a:hover {
……
background: url(images/menubox_hover.gif) no-repeat 5px 7px;
} 
</pre>
<h4>缩略图按比例缩放的定义</h4>
<p style="text-indent:2em;">利用对缩略图外框和其包含图片的定义，以实现缩略图按比例缩放。</p>
<p style="text-indent:2em;">在以下定义中，先定义缩略图外框（pe_u_thumb）的高度为120像素，并定义超出高度即隐藏内容（overflow: hidden;）。再定义缩略图外框和其包含图片（pe_u_thumb img）的宽度为160像素，不定义图片的高度（即以宽度为准按比例缩放）。</p>
<pre style="width:588px; border:1px solid #000; background:white;">
/* 定义缩略图外框大小，控制隐藏超出的图片内容 */

.pe_u_thumb, .p_thumb_l_pic {
height: 120px;
overflow: hidden;
text-align: center;
border: 1px solid #ccc;
}

/* 定义缩略图宽度，按比例缩放 */

.pe_u_thumb, .pe_u_thumb img {
width: 160px;
} 
</pre>
<div style="width:522px; border:1px solid #000;">
[[{{ns:image}}:sf603.jpg]]</div>
<p style="text-indent:2em;">这样，缩略图外框内的图片会以定义宽160px按比例缩放，如果超过缩略图外框定义的高度，则不显示超出部分的图片。这个方法一是可以统一整体缩略图外框的尺寸，同时缩略图能按比缩放不变形。</p>
<h4>包含选择符定义的应用</h4>
<p style="text-indent:2em;">在CSS定义中，可以使用“包含选择符”以单独对某种元素包含关系定义的样式表，即元素A里包含样式名B，在元素C中也包含样式名B，可以用包含选择符的方式定义元素A和元素C中的样式名B。如：</p>
<pre style="width:688px; border:1px solid #000; background:white;">
.information_new li {***}、.p_list_r{***} li、.product_new li{***}……
.left_box dd{***}、.user_box dd{***}、.r_announce dd{***}……
.c_friendsite img{***}、.imgtitle img{***}、.pe_u_thumb img{***}……
.c_title .more{***}、.class_title .more{***}……
</pre>
<p style="text-indent:2em;">在上述定义中，分别对li、dd、img和.more在各CSS元素范围内进行了定义。这种方法可以不需要在 CSS元素范围内重新新建不同的样式名，即使是同一个样式名也可以在不同CSS元素中以包含选择方式进行定义，以减少样式名的定义。请仔细查阅默认CSS 中的相关定义，关于CSS定义规范请参阅相关书籍。</p>
<h4>正负边距实现循环间距的定义</h4>
<p style="text-indent:2em;">在二列式左右循环的定义中，我们会出现这样一个困惑，因为程序是显示左右循环栏目列表，而左右二个列表间我们希望空些间距（如5px）。但是无论我们如何定义列表的间距，在循环显示时左右二个列表都会有此间距，而我们只要左列表的右侧有空距就行了。查看父栏目二列式左右循环定义：</p>
<pre style="width:688px; border:1px solid #000; background:white;">
.childclass_main /* 定义二列式左右循环的样式、宽度与左负边距*/
{
margin-left: -5px;
}

.childclass_main_box /* 定义二列式左右循环的样式、宽度与左负边距 */
{
float: left;
border: 1px solid #9bbde6;
width: 379px;
margin: 5px 0px 0px 5px;
} 
</pre>
<div style="width:772px; border:1px solid #000;">
[[{{ns:image}}:sf604.jpg]]</div>
<p style="text-indent:2em;">这里我们使用了正负边距的方法解决这个问题：首先定义单个栏目列表区块（childclass_main_box）的左边距为5px，此时左右二个列表间距均向左缩进了5个像素；然后再定义整体循环栏目列表外围的区块的左边距为-5px，这样在视觉上抵消了左列表左侧的间距，实现了所要实现的效果。</p>
<h4>信息列表自动回行的定义</h4>
<p style="text-indent:2em;">在表格式（table）布局中，多列式布局取决于元素的位置。在DIV+CSS布局中，多列式布局取决于区块的宽度定义，通常用固定值或百分比来控制列数循环。在CSS格式化代码中，通常会将一些html元素用于格式排列（如ul、li、dl、dt、dd等）。通过对特定区块中的li定义宽度，则可以实现信息列表自动回行。以下定义即定义了li的宽度为50%，以实现二列式信息排列。</p> 
<div style="width:470px; border:1px solid #000;">
[[{{ns:image}}:sf605.jpg]]</div>
<pre style="width:388px; border:1px solid #000; background:white;">
.information_new li
{
width: 50%;
float: left;
border-bottom: 1px dotted #ccc;
}
</pre>
<p style="text-indent:2em;">其他在栏目循环等样式中都采用了宽度定义的循环方法。如一列式上下循环样式列表：</p>
<div style="width:566px; border:1px solid #000;">
[[{{ns:image}}:sf606.jpg]]</div>


[[category:SiteFactoryCMS模板管理]]