1、解析网页模式和DTD
(1)解析网页模式主要有标准模式和怪异模式。怪异模式是为了兼容老式浏览器下的代码,应该避免触发怪异模式,选用标准模式。
(2)DTD(Document Type Definition),即文档类型定义,是一种保证 HTML 文档格式正确的有效方法,可以通过比较 HTML 文档和 DTD 文件来看文档是否符合规范,以及元素和标签使用是否正确。
(3)按照 W3C 的标准,需要在 HTML 的最开始声明文件的 DTD 类型。如果漏写 DTD 声明,Firefox 会按照标准模式来解析网页,但在 IE 中就会触发怪异模式。
2、如何组织 CSS
(1)应用
CSS 的能力分为两部分:一是 CSS 的 API,重点是如何用 CSS 控制页面内元素的样式;二是 CSS 框架,重点是如何对 CSS 进行组织。其中,如何更好地组织 CSS 是编写高质量 CSS 的关键。
(2)推荐的组织 CSS 的方法:base.css common.css page.css
(3)base 层:位于三者的最底层,提供 CSS reset 功能和力度最小的通用类—原子类。
• base 层相对稳定,基本上不需要维护。
• CSS reset:一开始就将浏览器的默认样式全部去掉,通过重新定义标签的样式,覆盖浏览器提供的默认样式。
• 通用原子类是一系列常用的基本类,包括:文字、定位、长度和宽度。
• “通用性”表现在它们是网站最常用的类,任何页面都可以随意使用。
• “原子性”表现在它们是最基础的样式,一个类只设置一个样式,不可再分。
(4)common 层:位于中间层,提供组件级的 CSS 类。
• common 层是网站级的,不同的网站有不同的 common 层,同一个网站只有一个 common 层。
• 在团队合作中,common 层最好由一个人负责,统一管理。
(5)page 层:位于最高层,提供页面级的样式。
• page 层是页面级的,每个页面都有自己的 CSS
3、模块化 CSS——在 CSS 中引入面向对象编程思想
(1)如何划分模块——单一职责
• 模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆分成一个独立的模块。
• 模块应在保证数量尽可能少的原则下,坐到尽可能简单,以提高重用性。
(2)
CSS 的命名——使用命名空间
• 命名结合骆驼命名法和划线命名法来进行命名,其中骆驼命名法用于区别不用单词,划线用于表明从属关系。
(3)挂多个 class 还是新建 class——多用组合,少用继承
4、低权重原则——避免滥用子选择器
(1)CSS 的选择符都是有权重的,当不同的选择符的样式设置有冲突时,会采用权重高的选择符作为设置的样式。权重的规则:HTML 标签的权重为 1,class 的权重为 10,id 的权重为 100。
(2)如果 CSS 的选择符权重相同,那么样式会遵循就近原则,那个选择符最后定义,就采用哪个选择符的样式。
(3)使用子选择器,会增加 CSS 选择符的权重,从而对其他选择符产生影响,所以应该尽量使用子选择器。为了保证样式容易被覆盖,提高可维护性,CSS 选择符需要保证权重尽可能低。
5、CSS sprite
(1)CSS sprite 技术是将网站的多张背景图片合并为一张,然后利用 background-position 属性来展示所需要的部分。
(2)CSS sprite 主要能解决试用多张图片加载时出现空白的问题,以及减少 HTTP 请求次数,从而降低服务器的压力。
(3)CSS sprite 技术的使用范围:
• 只能合并用于背景的图片,对于\设置的图片,不能合并到 CSS sprite 中。
• 对于横向和纵向都平铺的图片,也不能使用 CSS sprite。对于需要横向平铺的图片,合并的图片只能垂直排列;对于需要纵向平铺的图片,合并的图片只能水平排列。
6、CSS 常见问题
(1)id 和 class:同一个网页中,相同的 id 只能出现一次,不可重复,而 class 可以任意出现多次,因此,应尽量使用 class,少用 id。
(2)超链接标签样式问题:a 标签的四种状态需要排序才能发挥作用,顺序是 link -> visited -> hover -> active,也叫做 love hate 原则,即 l(link)ov(visited)e h(hover)a(active)te。
(3)块级元素和行内元素的区别:
• 块级元素会独占一行;行内元素不会独占一行
• 块级元素可以设置 width、height 属性;行内元素设置 width、height 属性无效
• 块级元素可以设置 margin 和 padding 属性;行内元素设置 margin 和 padding 属性,水平方向(margin-left、margin-right、padding-left、padding-right)有效,垂直方向(margin-top、margin-bottom、padding-top、padiding-bottom)无效
• 块级元素的 display 属性对应 display: block;行内元素的 display 属性对应 display: inline。可以通过修改 display 属性来切换块级元素和行内元素
(4)png图片:IE 6 下对 png 的透明支持不好,可以利用滤镜功能来解决问题,格式:progid: DXImageTransform.Microsoft.AlphaImageLoader(src='png图片路径', sizingMethod='crop')
(5)多版本 IE 并存方案:CSS 的调试利器 IETester