《精通CSS 高级Web标准解决方案》读书总结

CodeingBoy 8月 15, 2017

第一章 基础知识

  • DOCTYPE 声明是HTML文档开头处的一两行代码,它描述使用哪个 DTD。一般 DOCTYPE 包含指定 DTD 文件的 URL,但浏览器不读取,只识别常见的DOCTYPE 声明。
  • 根据 DOCTYPE,浏览器可以在三种渲染模式中切换:标准模式、怪异模式、几乎标准的模式(Mozilla)。建议选择严格的 DTD。
  • IE6不支持属性选择器,可以使用诸如 [class=”intro”] 的选择器来为现代浏览器提供样式。

第二章 可视化格式模型

  • 框模型(也称为盒模型)指示元素如何显示以及如何相互交互。每个元素被看作一个矩形框,由内容、填充、边框、空白边组成。
  • 标准的框模型宽度或高度指的是内容区的宽度或高度,而 IE 6 的宽度或高度为内容、填充、边框的总和。
  • 当两个垂直空白边相遇时,将发生空白边叠加,形成一个空白边,其高度为较大空白边的高度。一个元素包含于另一元素时,其上下空白边会与父元素的空白边发生叠加。甚至于一个没有边框或填充的元素,其上下的空白边也能叠加。空白边叠加的意义在于,在元素之间维护了一致的距离。
  • 元素可以分为块元素和行内元素两类,可以使用 display 属性改变其类型。
  • CSS 有三种基本定位机制:普通流、浮动、绝对定位。
  • 行内元素可以通过水平填充、边框、空白边来调整水平间距,但垂直填充、边框、空白边不影响高度。
  • 行内元素的高度总是足以容纳它包含的所有行内框。
  • Windows 下的 IE5.5 和 IE 6 中,若视图相对于相对定位的右边或底边设置绝对定位,需要确保相对定位元素设置了尺寸。否则会相对于画布来定位。
  • 由于浮动元素脱离了文档流,所以这些元素不会占据空间,造成在视觉上容器无法包围浮动元素。可以通过使用 clear 属性进行清理解决。或者对容器进行浮动。

第三章 背景图像与图像替换

  • 背景位置使用百分数时,会将图像中距离左边/上边指定百分比的位置对齐到到距离元素左边/上边指定百分比的位置。50% 50% 可以使图像垂直居中。
  • 不要将像素或百分数等单位与关键字混合使用。
  • 固定宽度的圆角框技术,为元素设置了背景色,然后使用两个钩子(一个位是该元素,一个位于子元素)来设置两个背景图像。这两个背景图像一个是圆角框的上部,一个是圆角框的下部,非圆角框的区域涂成白色,盖在背景色上就形成了圆角框。
  • 如果想要使用边框向内部渐变的圆角框,可以在上面技术的基础下,在容器设置重复显示的背景图像,其它两个图像下放到子元素。
  • 灵活的圆角框技术(滑动门技术)可使圆角框的宽度可以拓展,原理是将上边或下边使用两张背景图像实现。左边的图像为较宽的圆角图像,右边则为单个的圆角图像并盖在左边的图像上。使用四张图像来使得圆角框可拓展。
  • 山顶角技术则是使用蒙板技术(因此需要浏览器支持透明图像),将圆角框的边角区域盖在元素的背景上。为此需要四个元素来设置背景图像。
  • 简单的阴影技术使用 Photoshop 制作了一个巨大的阴影图像,然后将图像设置为背景图像并对齐到右下角,使用负值的空白边来偏移图像露出阴影。可以加入边框和填充来获得相框效果。
  • 块元素会水平伸展占据所有可用空间,可以通过显式设置宽度来包围图像,但有损灵活性。也可以使用浮动进行收缩。Mac 上的 IE 5.x 不支持,可以通过同时浮动父元素和子元素实现。
  • Clagnut 的阴影方法原理欲简单阴影相同,但使用相对定位偏移图像。
  • 模糊阴影技术使用 PNG 和蒙板,加上一个 div 元素来使用背景图像盖住阴影图像的边缘。蒙板图像是一张非常大的,在左边和上边填有渐变的图像。通过在加入的 div 元素将其设置为背景图像,可以盖住阴影图像生硬的边缘。
  • 洋葱皮阴影技术通过添加两个 div 元素设置两个阴影末尾图像(一个为左下,一个为右上),盖住主阴影图像来显示柔和的阴影。
  • 图像替换可以将文本像往常一样添加到文档中,然后使用 CSS 隐藏文本并在它的位置上显示背景图像。
  • Fahrner 图像替换(FIR)是最早最流行的图像替换技术,但是有严重的可访问性问题,应该避免使用。原理是将文本放在 span 子元素中然后设置 display 为 none。但屏幕阅读器会忽略此元素。
  • Phark 图像替换技术不需要子元素,只需要将 text-indent 设置一个非常大的负值即可。但在关闭图像打开 CSS 情况下将无法阅读文字。
  • Gilder/Levin 图像替换技术是最可靠的方法。其需要一个 span 子元素,将父元素设置为与图像尺寸相同,position 为 relative,然后将 span 元素宽度高度设置为父元素的 100%,要替换的图像设置为背景图像。以此来盖住底下的文本。
  • IFR 与 sIFR 使用 Flash 而不是图像来进行替换,sIFR 相比于 IFR 允许多行文本替换和改变文本字号。但这种技术只能在页面装载完毕后才能开始替换,因此会有闪烁现象出现。

第四章 对链接应用样式

  • 可以使用伪类指定 a 元素在某种特定状态下的样式,应该按照 link visited hover active 应用链接样式。
  • 将 text-drcoration 设为 none 可以去掉下划线。
  • 可以设置自定义的链接下划线,只需要给元素设置对齐底端的背景图像即可。
  • 给外部链接设置样式可以通过给元素添加对齐右上角的背景图像实现(别忘了右边的填充)。可以通过属性选择器设置 href 以 http:// 开头的 a 元素实现。如果不想对站内的元素应用样式,可以再创建一个 href 为站点地址的选择器并覆盖掉样式。对于其它协议或地址也可以应用此办法。
  • IE 6 不支持属性选择器,可以通过 JavaScript 实现相似的效果。
  • 图像翻转可以使链接(或元素)在不同的状态下显示不同的背景图像。最好将元素 display 属性设置为 block 以增大点击区域。建议设置宽度,因为块元素会占据所有的宽度。
  • Windows 的 IE 5.x 下,如果没有定义 width 和 height,即使 display 设置为 block,也只有链接文本会激活。
  • 使用 line-height 可以模拟垂直居中的效果,从而避免使用 height 加上垂直填充来实现垂直居中。
  • 简单的翻转通过在对应状态设置不同的背景颜色和文字颜色实现翻转。
  • 图像的翻转通过在对应状态设置不同的背景图像实现翻转。
  • Pixy 翻转使用包含两个状态背景图像的一张图像,在不同状态下改变背景图像的对齐方式来实现翻转。但是在 IE 下,改变对齐方式会向服务器请求新的图像,从而引起闪烁。可以通过在父元素设置同样的背景图片来规避。
  • 可以使用图像翻转在列表中标记出已经访问过的站点(类似 checklist 的样式)。
  • 纯 CSS 的工具提示的原理是:在链接元素中包含 span 元素,设置链接元素 position 为 relative,然后在 span 元素填写工具提示的内容,在不悬浮于链接元素时将其隐藏,在悬浮时设置绝对定位并显示。

第五章 对列表应用样式和创建导航条

  • 可以使用背景图像自定义列表符号,只需要将列表符号作为背景图像定位后,设置左填充即可。
  • 使用 Pixy 图像翻转技术可以设计出漂亮的垂直导航。
  • 通过在 body 元素设置 id 属性,然后使用选择器,可以在导航条突出显示当前页面。
  • 创建水平导航条有两种办法:设置行内显示或浮动。行内显示方法可能有缺陷,所以一般采用浮动方法。
  • 使用浮动创建水平导航条,会使得父元素没有内容从而收缩隐藏列表背景。使用第二章提到的方法可以解决此问题。
  • 可以将分隔线图像设置为做对齐、垂直平铺的背景图像,并在第一个元素不设置背景图像,来获得分隔线效果。
  • 滑动门导航技术通过使用两张背景图片:一张是左边角图片,一张是略宽的右边角图片,来获得拓展伸缩效果。在 li 元素设置右边角图片,在 li 内部的 a 元素设置左边角图片。
  • CSS 图像映射通过在一个 div 中包含图像和列表,使列表包含链接元素(可以加入 title 属性以显示工具提示),对 div 设置宽高(匹配图像的尺寸)和 relative 的布局方式,使得链接元素相对于 div 绝对定位,达到图像特定区域映射到链接的方法。链接元素的宽高应该设置为区域方框的宽高,并且使用大的负值文本缩进隐藏文本、在悬浮时显示边框。
  • flickr 样式的图像映射在 li 元素中添加三个额外的 span,两个用于显示边框,一个用于显示提示。不悬浮时,两个 span 显示边框,链接的边框为透明色。悬浮时,链接的边框显示颜色,说明文字的 span 应该绝对定位到链接元素的底部(通过使用负值的底部位置),最好相对于链接元素居中(将 span 的左边缘定位到宽度的一半,然后应用一个宽度一半的左空白边)。可以使用隐藏或者文本缩进的方法隐藏 span 文本。
  • 远距离翻转提供了在页面其他地方显示方式的改变。通过在链接元素中嵌套多个元素,再使用绝对定位对这些元素进行定位。因此可以通过选择器设置不同状态下的样式。这种映射方式的列表文本需要写在 span 中并且使用绝对定位进行设置(因为图像会作为父元素的背景图像显示,使得列表左上角与图像左上角重叠)。另外也需要在边框 span 或链接元素悬浮时显示边框。

第六章 对表单和数据表格应用样式

  • 表格特有的元素是:summary(描述表格的概述)、caption(表格的标题)、thead、tbody、tfoot、colgroup、col,最后两个元素 colgroup、col 用于对整列应用样式。
  • 可以对 th 元素设置 scope 属性,通过设置值为 row 或 col 表明是行标题或列标题。或者设置值为 rowgroup 或 colgroup 表示与多行、多列相关。
  • CSS 有两个表格边框模型:单独或叠加。单独模型中在各个单元格周围有边框,而叠加模型中则共享边框。通过设置表格的 border-collapse 为 collapse 可以使用叠加模型。
  • 可以使用 border-spacing 属性控制单元格的距离,但 IE 6 及以下版本不理解这个属性。作为替代,可以使用 HTML 中的 cellspacing 属性。
  • 通过使用奇偶选择器(nth-child)设置不同行的颜色,和悬浮状态改变行颜色,可以改善表格可读性。
  • fieldset 元素可以将表单元素分组,legend 元素则可以给这些组设置标题。
  • label 可以帮助添加结构和增强可访问性,可以使用隐式方式(将 input 元素放置在 label 元素里)或显式方式(在 labei 元素中指定 input 等元素的 id)来使用。
  • 可以使用 div 或 p 元素分割每个表单标签和元素组。
  • 对于一行多个表单输入元素的情况下(比如三个日期选择的选择框),可以通过为每个表单元素添加 label 元素,然后用大的负值文本缩进隐藏文本来增强可访问性。
  • 多列复选框可以使用多个包含复选框的浮动 div,放置到一个 fieldset 中,再调整样式实现。
  • 可以将反馈文本放在 span 中来实现表单反馈,将这个 span 放在表单输入元素的前面,然后使用 CSS 进行定位。如果将 span 元素放在后面,屏幕阅读器可能会忽略表单元素之间的文本。

第七章 布局

  • 设计居中有多种办法,可以使用自动空白边进行居中。IE 5.x 和 IE 6 在怪异模式中不支持自动空白边,但可以通过设置 text-align 为 center 然后还原子元素的 text-align 为 left 来实现。建议同时设置最小宽度。
  • 也可以使用定位和负值空白边进行居中:定义容器的宽度,设置其 position 属性为relative,left 属性为 50%,然后将左空白边设置为容器宽度的一半。
  • 基于浮动可以实现两列布局,但最好将主内容放在导航的前面以提高可访问性。一般将两列都向左浮动,再使用空白边或者填充留出隔离带。但如果是不那么现代的浏览器,可以将左列向左浮动,右列向右浮动,两列都设置想要的宽度。
  • 也可以基于浮动实现三列布局,只需要在两列布局中右列的 div 中再分为两列即可。
  • 流体布局的尺寸使用百分数进行设置,这使得流体布局可以相对于浏览器窗口伸缩。但是宽度小的时候行变得很窄,宽度大的时候行变得很宽,建议使用 min-width 和 max-width 设置宽度上下限。
  • 弹性布局则是相对于字号来设置宽度,这样可以确保在字号增加时整个布局随之扩大。将行长保持在可阅读的范围内。但是增加字号时布局会加大,所以建议设置 max-width 为100%。
  • 弹性-流体混合布局使用 em 设置宽度,用百分比设置最大宽度。
  • 弹性图像通过使用背景图像属性来显示图像,随着元素的伸缩,背景图像露出来的部分会随之变化。
  • 如果一定要使用 img 元素,为了在页面上显示,将该元素的容器元素的宽度设置为 100%,将 overflow 属性设置为 hidden。
  • 为了防止过度放大,可以在设置相对宽度的同时将图片本身的大小设置为 max-width。
  • faux 列是为了解决列内容高度不一的背景问题而产生的技术。通过在容器元素上使用背景图像,营造出“伪列”的效果。这个背景图像的宽度应该和导航区域相同。
  • 对于三列布局,可以使用整个容器宽度的图像,在流体布局下,创建水平比例与布局相同的背景,然后使用百分比对背景图像进行定位。

第八章 招数和过滤器

  • CSS 过滤器是一种对特定的浏览器显示或隐藏规则或声明的方法。CSS 招数可以使用过滤器将一个规则应用于一种浏览器,将另一个规则应用于另一种浏览器,“哄骗”浏览器表现得符合自己的期望。CSS 招数之一就是 CSS 过滤器。
  • 使用招数之前,确认是否必须要使用招数——可能只是代码的错误或是对 CSS 规范的理解不充分。
  • 可以将浏览器特定的 CSS 放在单独的样式表中,然后使用 IE 的有条件注释来根据浏览器版本显示代码块。其它浏览器会将其作为注释处理。 
  • 也可以使用带通过滤器将 CSS 文件传递给 Windows/Mac 上的 IE 5 和 IE 5.5,这个过滤器是利用 IE 5.x 不理解转义字符的缺陷构造的。
  • 如果使用的特定 CSS 比较少,可以直接将它们写在公共 CSS 文件中,然后使用子选择器招数为现代浏览器提供样式(IE 6 以下不支持子选择器)。
  • IE 6 以下也不支持属性选择器,所以也可以使用属性选择器招数。
  • 由于 IE 的低版本有一个匿名的根元素包围着 HTML 元素,可以使用类似 * html 的选择器为低版本 IE 提供样式。
  • 注释反斜线招数也是利用了前面带通过滤器一样的转义缺陷,将指定样式对 Mac 上的 IE 5 隐藏起来,结合星号 HTML 招数使用可以为 Windows 上的 IE 6 及更低版本提供样式,也被称为“Holly 招数”。
  • 转移属性招数也是利用了转义缺陷,在属性名中加入 “\”(例如 w\idth)。用这个招数可以对 IE 5.x 隐藏样式。
  • Tantek 的框模型招数是使用转义缺陷,针对 IE 的专有框模型传递特别的宽度,但 Opera 5 也有一样的 bug,所以要使用子选择器为 Opera 提供正确的宽度。
  • 简化框模型招数将转移属性招数和星号 HTML 招数相结合,向 IE 5.x 提供一个长度值,向其它浏览器提供一个长度值。
  • !important 招数将带有 !important 的样式放置于普通样式前面,现代浏览器会优先选用第一条规则,而低版本 IE 会使用第二条规则。
  • 下划线招数利用了低版本 IE 忽略属性中的下划线的 bug,为低版本 IE 提供样式。
  • Owen 招数可以用来对 Opera 6 和 IE 低版本提供样式,它利用了这些浏览器没有实现第一子选择器的缺陷。

第九章 bug 和 bug 修复

  • 常见的 CSS 问题有:代码打字和语法错误、特殊性和分类次序问题、空白边叠加问题。
  • 空白边叠加在嵌套 div 的情况下可能产生与预期不符的样式,这是因为具有块元素的元素计算其高度时,是使用它包含的子元素的顶部和底部边框边缘之间的距离决定的。因此空白边突出到了 div 的顶部和底边的外部。要解决这个问题,只需要在父 div 周围添加填充或边框。
  • 某些显示错误是由于浏览器以怪异模式显示页面造成的,可以检查浏览器的渲染模式是否为标准模式。
  • IE 使用布局概念来控制元素的尺寸和定位,“拥有布局”的元素负责本身及其子元素的尺寸和定位。如果一个元素没有拥有布局,那么它的尺寸和位置由最近的拥有布局的祖先元素控制。
  • IE 低版本中,如果段落拥有布局,它将会被限制为矩形,阻止文本围绕浮动元素。另外如果元素的内容比元素本身大,IE 低版本会拓展元素以适应尺寸。这意味着 IE 低版本中的 width 实际上更像是 min-width。
  • 其他问题包括:拥有布局的元素不进行收缩、布局元素对浮动进行自动清理、相对定位的元素不获得布局、在拥有布局的元素之间空白边不叠加、在不拥有布局的块链接上,单击区域只覆盖文本。
  • IE 低版本的双空白边浮动 bug 使任何浮动元素上的空白边加倍,将元素的 display 属性设置为 inline 即可解决。
  • IE 低版本的 3 像素文本偏移 bug 表现为,当文本与一个浮动元素相邻时,在文本和浮动元素之间会出现一个 3 像素的间隙。修复这个问题需要给包含文本的元素设置任意的高度,为了解决拥有布局的元素为矩形从而阻止文本围绕浮动元素的问题,将空白边重新设置为 0。此时文本偏移被修复,但另一个 3 像素间隙会出现在浮动元素上,设置一个负值的 3 像素右空白边即可。如果浮动元素是图像,还需要在左右空白边设置为 -3 px,因为 IE 5.x 在图像左右都添加 3 像素的间隙。
  • IE 6 的重复字符 bug 表现为在一系列浮动元素的最后一个元素的最后几个字符会在浮动元素下面重复出现,这是因为这些浮动元素之间有多个注释,删除这些注释即可。
  • IE 6 的躲猫猫 bug 表现为某些条件下文本消失了,只有重新载入页面后才重新出现。避免清理元素和浮动元素解除、给容器指定行高、将浮动元素和容器元素的 position 属性设置为 relative 都可以解决该问题。
  • 低版本 IE 在绝对定位时可能会相对于 body 进行定位,这是因为相对定位的元素不拥有布局,解决方法是提供一个任意的高度。

案例研究 1 & 2

  • 无论列数是多少,可以给页面都定义一样的结构,随后再用 CSS 将无用的结构隐藏起来。
  • 两列布局或三列布局时,为了提供可访问性,可以将所有 div 浮动,将内容区放置在前面,使用左空白边放置在右边。后面的导航区使用右空白边放置在左边。
  • 显示多张图片时,可以对这些图片都进行浮动,这样就可以让它们在空间不足的情况下创建新的一行放置。
  • 堆放次序 z-index 可以使用整数或 auto 值,z-index 高的元素会出现在低的元素上面。
  • 对文本首字母进行图像替换的时候,可以将首字母使用 strong 元素包裹,然后使用绝对定位隐藏文本。同时将图像设置在文本元素的背景图像上。不要使用大的负值文本缩进来隐藏文本,否则余下的文本会换行。、
  • 如果想要给列表应用类似于书本目录的样式,可以将点图案设置为 li 元素的水平重复的背景图像,再将文字用 span 包裹并设置背景色以覆盖点图案的背景。
  • 格式干净的 HTML 标记和美观的设计同样重要。要让使用高级浏览器的用户可以享受丰富的视觉体验,使用功能有限的浏览器的用户可以看到简洁的原始内容。

本文采用 CC BY-NC-SA 3.0 协议进行许可,在您遵循此协议的情况下,可以自由共享与演绎本文章。
本文链接:https://blog.codeingboy.me/reflection-of-cssmastery/

发表评论

电子邮件地址不会被公开。 必填项已用*标注