|
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./TR/html4/strict.dtd"> //用于XHTML 4.0 的过渡型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> //用于XHTML 1.0 的严格型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> //用于XHTML 1.0 的过渡型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd"> 按照W3C的标准，我们需要在HTML的最开始声明文件的DTD类型。如果漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中（包括IE6，IE7,IE8）就会出发怪异模式。在table布局时代，盒模型和CSS我们都接触得比较少，所以DTD声明并不是很重要，被我们忽视了。到了CSS布局时代，DTD的声明就变得非常重要了。为了避免怪异模式给我们带来不必要的麻烦，我们要养成书写DTD声明的好习惯。 9.推荐的一种组织CSS的方法：base.css+common.css+page.css。将网站内的所有样式，按照职能分成三大类：base、common和page。在一般情况下，任何一个网页的最终表现都是由这三者共同完成的。这三者并不是并列结构，而是层叠结构。 page ↓ common ↓ base 1.base层 这一层位于三者的最底层，提供CSS reset功能和粒度最小的通用类---原子类。 这一层会被所有页面引用，是页面样式所需以来的最底层。这一层与具体UI无关，无论何种风格的设计都可以引用它，素以base层要力求精简和通用。这一层的核心职能犹如房子的地基一样重要，亦扮演着网页中最基础的同样重要的角色。 2.common层 这一层位于中间，提供组件级的CSS类。与common层相关的是样式的模块化，模块化可以从样式和行为两个层面来考虑。我们可以将页面内的元素拆分成一小块一小块功能和样式相对独立的小模块，这些模块有些是很少重复的，有些是会大量重复的，我们可以将大量重复的模块视为一个组件。我们从页面尽可能多地将组件提取出来，放在common层里。common层就相当于MVC模式中的M（Model模型）。为了保证重用性和灵活性，M需要尽可能将内部实现封装，对可能会经常变化的部分提供灵活的接口。不同的房子选用不同的门窗，common层就像建房时用到的门窗，房子选用的门窗就好比这个网站选用的UI组件。门窗最好与整个房子的风格保持一致。同样，网站最好让UI组件的风格保持相同。UI组件是网站中的单位，在网站内部可以高度重用，但不用的网站可能会用不同的UI组件。 所以，comman层的网站级的，不同的网站有不同的common层，同一个网站只有一个common层。common层是放在一个common.css文件里，还是按照功能划分放在诸如common_form.css、common_imagelist.css的多个文件里，需要根据网站规模来决定。在团队合作中，common层最好由一个人负责，统一管理。 3.page层 网站中高度重用的模块，我们把它们视为组件，放在common层；非高度重用的模块，可以把它们放在page层。page层位于最高层，提供页面级的样式。page层就好比是房间内的装饰画，不同房间的装饰画各不相同。 page层是页面级的，每个页面都可能有自己的page层CSS.page层的文件可以分离出来写，也可以放在一个page.css文件里，根据页面配上注释，分块书写，便于维护。实例： /*首页*/ .test{} .test2{} /*关于我们*/ .test3{} .test4{} /*联系我们*/ .test5{} .test6{} 这样做可能会带来些冗余，比如，首页的css文件里带有“关于我们”、“联系我们”页的page层CSS文件，而这些对首页的样式毫无影响。但是，对于文件过于分散和集中的问题并没有完美的解决方法，我们需要根据实际情况做些适当的折中。比起让page层的CSS文件过于繁多和零散，把它们集中在一个文件中更便于维护，且便于浏览器缓存，浏览网站时只有首页的下载时间较长，浏览其他页面时反而较快。当然，page.css还是应当越精简越好，能用base层和common层的CSS解决的，就尽量不要用到page层。 base层基本上不需要维护，common层修改的幅度不会很大，通常只由一个人负责维护，但到了page层，代码可能由多人开发，如何避免冲突是个需要注意的问题。通常我们通过命名规则来避免这种冲突。 10.拆分模块的技巧： ①模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将它们提取出来，拆分成一个独立的模块 ②模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性 在面向对象编程中也有类似的思想，设计类的时候，为了保证重用性需遵守“单一职责”原则，一般情况下，类的功能应该相对简单稳定，一个类只具有一个职责。一个功能超复杂的拥有多个职责的大类，远不如一群职责单一的简单小类。 11.多用组合，少用继承 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /*常用类样式以组合的方式呈现*/ .fs-12{font-size:12px} .fs-14{font-size:14px} .pd-10{padding:10px} .pd-20{padding:20px} .box{ border:1px solid #ccc; } /*下面以继承的方式实现样式*/ .box.gray{background:#f1f1f1} .box.green{background:#66ff66} </style> </head> <body> <div class="box gray fs-12 pd-20">this a gray fontsize12px padding20px box</div> <div class="box green fs-14 pd-10">this a gray fontsize14px padding10px box</div> </body> </html> 我们看一些虽然在class上引用了几个，但是代码和逻辑都非常清晰，而且非常容易维护，随意组合随意扩展。从上面可以看到“组合”的方式是不言而喻的，但是也不是十全十美的，再拆分组合的时候一定不要过度，不然效果可能适得其反，只有把组合+继承运用的恰到好处才能让我们的代码更加优雅和艺术。 |
|
|
