css学习笔记

阅读<<高质量代码 web前端开发修炼之道>> 曹刘阳 著

1:web标准---结构.样式和行为分离

web标准分为3大部分:

结构标准:xml标准,xhtml标准,html标准;

样式标准:css标准;

行为标准:dom标准,ECMAScript标准;

一个合格标准的网页,标签中的标签名称全部都是小写,属性要加上引号,样式和行为不要夹杂在标签中,而应该别存放在样式文件和脚本文件中,推荐使用链接式引用文件,达到结构,样式和行为分离;

<link  rel="stylesheet" type="text/css" href="xxx.css" />

<script type="text/javascript" src="xxx.js"></script>

网页源代码由3部分组成:.html文件,.css文件和.js文件;

2:实现高质量的代码,在实现结构,样式和行为分离的基础上,还要做到3点:精简:精简的代码可以让文件变小,有利于客户端快速加载;

重用:重用可以让代码更精简,有助于开发速度;有序:有序可以更清晰的组织代码,使代码易于维护,有效应对变化;

3:标签的语义化

在web的3大元素中,html才是最重要的.结构才是重点,样式是用来修饰结构的,正确的做法是:先确定html,确定语义的标签,再来选择合适的css;

判断网页标签语义是否良好的方法是:去掉样式,看网页结构是否组织有序,是否仍然有很好的可读性;语义良好的网页去掉样式后结构依然很清晰;css裸体日

h标签:标签的含义是"标题",搜索引擎对这个标题比较敏感,尤其是h1和h2,一个语义良好的页面,h标签应该是完整有序的没有断层的;

4:表单

一般来说,表单域要用fieldest标签包起来,并用legent标签说明表单的用途,因为fieldest默认有边框,而legent也有默认的样式,为了满足设计需要,可以将fieldest的"border"设为"none";把legent的"display"设置为"none",以此来兼顾语义和设计两方面的需要,每个Input标签对应的文本说明都需要使用lable标签,并且通过为input设置id属性,在lable中设置"for=id"来让说明文本和相应的input关联起来;

5:表格

在使用表格的时候要选用合适的标签:表格的标题要用caption,表头要用thead包围,主体部分用tbody包围,尾部要用tfoot包围,表头和一般单元格要区分开,表头要用th,一般单元格要用td;

语义化表单应注意的一些问题:为了保证网页去样式后的可读性,并且有符合web标准,应注意:

--尽可能少的使用无语义标签div和span;

--在语义不明显,既可以使用p又可以使用div的情况下.尽量用p,因为p默认情况下有上下边距,去掉样式后的可读性更好,对兼容特殊终端有利;

--不要使用纯样式标签,例如b,font,u等,给用css设置;语义上需要强调的文本可以包含在strong和em标签里,strong和em有"强调"的语义,strong的默认样式是加粗,em是斜体;

6:浏览器兼容

为了确保向后兼容,浏览器厂商发明了标准模式和怪异模式两种方式来解析网页,在标准模式下浏览器根据规范表现页面,怪异模式下模拟老式浏览器(比如mocrosoft ie 4和netscape  navigaotr 4)的行为来防止老式站点无法工作,两种模式差异比较大;经典案例:IE对盒子模型的解析:在标准模式下,网页元素的宽度是由padding,border,width3者的宽度相加决定的;而在怪异模式下,width本身就包扩了padding和border的宽度,此外在标准模式下得块级元素的经典居中方法--设定width,然后margin-left:auto,margin-right:auto----在怪异模式下无法运行;一般情况下.我们应该避免触发怪异模式,应选用标准模式;

怪异模式的触发:与DTD有关;DTD全称Docoument  Type Definition及文档类型定义;DTD是一种保护html文档格式正确的有效方法,可以通过比较html和dtd文件来看文档是否符合规范.以及元素和标签是否正确;一个DTD文档包含元素的定义规则,元素间关系的定义规则,元素可使用的属性,可使用的实体或符合规则;在网页中使用的dtd的版本声明在页面头部<!doctype>中;按照w3c标准,我们需要在html的最开始声明文件的dtd类型,如果漏写dtd声明,firefox仍然会按照标准模式来解析页面,但在IE中(6,7,8)就会触发怪异模式;

7:如何组织css

如何组织css有多种角度:例如按照功能划分,将控制字体的css集中在font.css中,将控制颜色的集中在color.css中将控制布局的集中在layout.css中,按区块划分,将头部放在hend.css中,底部放在foot.css中,侧边栏放在sidebar.css中,主体放在main.css中;

一种组织方式:base.css+common.css+page.css;将网站内的所有样式按照职能划分,这3者不是并列结构,而是层叠结构;

(1)base层,

这一层位于最底层,提供css  reset功能和粒度最小的通用类---原子类,这一层会被所有页面引用,是页面样式所需依赖的最底层;这一层与ui无关,无论何种风格的设计都要引用他,具有高度的可移植性,不同设计风格的网站可以使用同一个base.css,它所定义的是基本样式,内容很少,base层相对稳定,基本上不需要维护;

(2)common层

这一层位于中间.提供组件及的css类;"模块化"可以从样式和行为两个层面考虑,与common层有关的是样式的模块化,模块化是将页面中的元素拆分成一小块一小块的功能和样式相对独立的"模块",这些"模块"有些是少量重复的.有些是大量重复的,我们将大量重复的"模块"视为一个组件.,把它放在common层中.common层相当于mvc模式中的m;common是网站及的,不同的网站有不同的common层,在团队中common层最好由一个人负责,统一管理;

(3)page层

高度重用的模块把它视为组件放在common层中,非高度重用的模块可以把它放在page层;page层位于最高层,提供页面及的样式;

8:处理上下相邻margin

混用margin-top和maigin-tottom,这种做法会出现上下margin重合;margin-left和maigin-right是不会重合的;解决方法统一使用margin-top或者margin-bottom;

9:低权重原则

css样式是可以重叠的,由于css的选择符是有权重的,当不同选择符的样式设置有冲突的时候,会采用权重高的选择符设置的样式;

权重规则:html权重是1,class的权重是10,id的权重是100,如果css选择符权重相同,那么样式会采用就近原则,那个选择符最后定义(指在css文件中声明的先后),就采用那个选择符;

为了保证样式容易被覆盖.提高可维护性,css选择符需保证权重近可能的低,多用标签,次之class;

10:css sprite

图片翻转技术是将多张图片合并为一张,利用background-position属性来展示我们需要的部分,按照这种思路.后来衍生的另一种技术将这种思路发挥到极致---将网站的多张背景图片合并到一张大图片上,这便是css sprite;图片的加载会发送http请求,一张图片需要一条http请求,http请求越多,访问服务器的次数越多,服务器的压力就越,css sprite 会大大减少网页的http请求,减小服务器压力;

css sprite 难点:

(1)它能合并的只能是用于背景的图片,对于<img src=""/>设置的图片,是不能合并到css sprite大图中的,如果合成这些图片会影响页面的可读性;

(2)对于横向和纵向都平铺的图片,不能使用css sprite;如果是横向平铺的只能将所有横向平铺的合并成一张大图片.只能竖直排列,不能水平排列;纵向也是,不能竖直排列,只能水平排列;

(3)css sprite 通过background-position进行定位.对精度要求很高;

css sprite好处是减少http请求,减轻服务器压力,但却降低开发效率和增大了维护难度,对于流量不大的网站来说.css sprite的效果并不明显,所以是否使用sprite主要取决于网站流量;