现在的位置: 首页网站设计>正文
CSS布局只是Web标准的一部分
2014年03月24日 网站设计 暂无评论

CSS布局也就是俗称的 Div + CSS 布局,或者是 (X)HTML + CSS 布局。其核心思想就是用 CSS 来控制网页中元素的样式,包括位置、大小、颜色等;

1.事实上,CSS布局只是Web标准的一部分,在HTML、CSS、Javascript这三大元素中,HTML才是最重要的,结构才是重点,样式是用来修饰结构的。正确的做法是,先确定HTML,确定语义的标签,再来选用合适的CSS。

2.默认情况下,浏览器会根据标签的语义给定一个默认的样式,CSS则是用来控制样式和重置样式的。判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。

3.h标签的含义是“标题”,搜索引擎对这个标签比较敏感,尤其是h1和h2。一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要按照h1,h2,h3,h4这样一次排序下来,不要出现类似h1,h3,h4,漏掉h2的情况。

4.当页面内标签无法满足设计需要时,才会适当添加div和span等无语义标签来辅助实现。

5.一般来说,表单域要用fieldset标签包起来,并用legend标签说明表单的用途。因为fieldset默认有边框,而legend也有默认的样式,为满足设计需要,我们可以将fieldset的“border”设为“none”,把legend的“display”设为“none”,以此来兼顾语义和设计两方面的要求。每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在label标签中设置“for=someld”来让说明文本和对应的input关联起来。实例:

<form action="" method="post">
<fieldset>
<legend>登录表单</legend>
<p><label for="username">用户名:</label><input type="text" value=""??id="username" name="username" /></p>
<p><label for="userpwd">密码:</label><input type="password" value="" id="userpwd" name="userpwd" /></p>
<input type="submit" value="提交" />
</fieldset>
</form>

6.table布局在二维数据显示有它的语义和用途,是最好的选择。在用table布局时,常常只使用table、tr、td标签。事实上,table常用的标签还包括caption、thead、tbody、tfoot和th。我们在使用表格的时候,应该注意选用合适的标签,表格标题要用caption,表头要用thead包围,主体部分用tbody包围,尾部要用tfoot包围,表头和一般单元格分开,表头用th,一般单元格用td。实例:

<table border="1">
<colgroup>
<col width="25%"/>
<col width="25%"/>
<col width="25%"/>
<col width="25%"/>
</colgroup>
<caption>几个页面实现的比较</caption>
<thead>
<tr><th>实现方式</th><th>代码量</th><th>搜索引擎友好</th><th>特殊终端兼容</th></tr>
</thead>
<tbody>
<tr><td>table布局</td><td>多</td><td>差</td><td>一般</td></tr>
<tr><td>乱用标签的布局</td>少<td></td>差<td></td><td>一般</td></tr>
<tr><td>乱用标签的布局</td><td>少</td><td>好</td><td>好</td></tr>
</tbody>
</table>

实现表格边框细线:css:

table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}

7.语义化标签应注意的一些问题

为了保证网页去样式后的可读性,并且有符合Web标准,我们应注意以下几点:

①尽可能少地使用无语义标签div和span;

②在语义不明显,既可以用p也可以用div的地方,尽量用p,因为p默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利;

③不要使用纯样式标签,例如b、font和u等,改用css设置。语义上需要强调的文本可以包在strong或em标签里,strong和em有“强调”的语意,其中strong的默认样式是加粗,而em的默认样式是斜体。

8.怪异模式和标准模式

为了确保向后兼容,浏览器厂商发明了标准模式和怪异模式这两种方法来解析网页。在标准模式中,浏览器根据规范表现页面;而怪异模式通常模拟老式浏览器(比如Microsoft IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。这两种模式的差异比较大,比较典型的就是IE 对盒模式的解析:在标准模式中,网页元素的宽度是由padding、border、width三者的宽度相加决定的;而在怪异模式中,width本身就包括了padding和border的宽度。此外,标准模式下块级元素的经典居中方法---设定width,然后margin-left:auto,margin-right:auto---在怪异模式下也无法正常工作。
同样的代码,在怪异模式和标准模式下的表现很可能相差甚远。因为发明怪异模式的目的就是为了兼容老式浏览器下的代码,它的很多解析方式是不符合标准的。所以,一般情况下,我们应该避免出发怪异模式,应选用标准模式。

HTML中常见的四种DTD类型:

//用于XHTML 4.0 的严格型
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

//用于XHTML 4.0 的过渡型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

//用于XHTML 1.0 的严格型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//用于XHTML 1.0 的过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

按照W3C的标准,我们需要在HTML的最开始声明文件的DTD类型。如果漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中(包括IE6,IE7,IE8)就会出发怪异模式。在table布局时代,盒模型和CSS我们都接触得比较少,所以DTD声明并不是很重要,被我们忽视了。到了CSS布局时代,DTD的声明就变得非常重要了。为了避免怪异模式给我们带来不必要的麻烦,我们要养成书写DTD声明的好习惯。

文章来源:合肥网站建设公司?转载请注明。

给我留言

留言无头像?