编写高质量css代码.pptVIP

编写高质量CSS代码 肖兴 目 录 一、高质量的HTML 二、高质量的CSS 一、 高质量的HTML 1 标签的语义 2 为什么使用语义标签 3 如何确定你的标签语义良好 4 语义标签化应注意的一些其他问题 1 标签的语义 2 为什么使用语义化标签 传统的table布局网页的特点 ： 1 代码量大，机构混乱； 2 标签语义不明确，对搜索引擎不友好 div+css布局网页特点： 代码减少、结构精简、语义清晰 2 为什么使用语义化标签 因为css很强大,所以我们无论有没有按照语义选择标签，我们都可以通过CSS实现设计。所以，如果我们使用不当，容易陷入CSS布局的一个误区只要不尺table布局，只要通过css布局就是对的，就是符合web标准的。 CSS布局只是web标准的一部分。在，HTML、CSS、javascript这三大元素中，HTML才是最重要的，结构才是重点，样式是用来修饰结构的。正确的做法是，先确定HTML，确定语义的标签，再来选择使用合适的CSS。 3 如何确定你的标签是否语义良好 浏览器会默认的根据标签的语义给定一个默认的样式。 判断标签语义是否良好的一个简单方法就是：去掉样式，看网页结构的组织是否有序，是否仍然有很好的可读性。 3 如何确定你的标签是否语义良好 4 语义标签化应注意的一些其他问题 a 尽可能少的使用无意义的div和span； b 在语义不明显，既可以用p也可以用div的地方，尽可能用p，因为p默认上下有间距，去掉样式后的可读性更好，对兼容特殊终端有利； c 不用使用纯样式的标签，例如b、font 和u等，改变css设置。语义上需要强调的文本可以包在strong或者em标签里，strong和em有强调的语义，其中strong的默认样式是加粗，而em的默认样式是斜体。 二、 高质量的CSS 1 如何组织CSS 2 推荐的base.css 3 低权重原则 4 模块化CSS 5 CSS的常见问题 1 如何组织CSS CSS的能力分为两部分： 1 CSS的API ： 重点是如何用CSS控制页面内元素的样式； 2 CSS的框架： 重点是如何对CSS进行组织 1 如何组织CSS 作者推荐一种css的组织方法： 1 如何组织CSS 1 base层：这一层是三者的最底层，会被所有页面引用，是页面样式所依赖的最底层。 2 common层：提供组件级的CSS类。我们可以把页面内的元素拆分成一个小块一个小块的功能和样式相对独立的模块，这些模块中有一部分是要大量重复使用的可以视为一个模块。一个网站只有一个common层，但是可以根据功能划分放在诸如：common_form.css、common_imagelist.css的多个文件中根据网站规模决定。 2 page层：非高度重用的模块放在page层。page层位于最高层，提供页面级的样式。 2 推荐的base.css base.css文件可以分为两大部分： 1 CSS reset ：更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。 2 通用原子类:通用原子类是一系列常用的基本类，包括：文字，定位，长款和边距。表现为通用性和原子性。通用性顾名思义就是网站最常用的类。原子性表现为最基础的类，一个类只设置一个样式，可不再分。 3 低权重原则避免滥用子选择器 CSS的选择符是有权重的，当不同选择符的样式设置有, 突的时候，会采用权重高的选择符设置的样式。 权重规则：HTML的标签权重是1，class的权重是10，id的 权重是100.例如：p的权重是1，”div em”权重是1+1=2， 如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式 3 低权重原则避免滥用子选择器 为了保证样式容易被覆盖，提高可维护性，CSS选择符需要保证权重尽可能低。 4 模块化CSS在CSS中引入面向对象编程思想 A 划分模块单一职责 B CSS的命名命名空间的概念化 C 挂多个class还是新建class多用组合，少用继承 4 常见问题（一） 解决超级链接访问后hover样式不出现的问题： 同时设置了a:visited和a: