CSS权威指南重点要点摘录

万能螺丝刀1

已于 2022-04-29 10:34:58 修改

阅读量368

点赞数

分类专栏： CSS 文章标签： css

于 2022-04-27 18:20:06 首次发布

本文链接：https://blog.csdn.net/hnyanzijun1/article/details/124457376

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1. css和文档

web的衰落
1. 一片混乱
css作救星
1. 丰富的样式
2. 易于使用
3. 在多个页面上使用样式
4. 层叠
5. 缩减文件大小
6. 为将来做准备
元素
1. 替换和非替换元素
2. 元素显示角色
结合CSS和XHTML
1. link标记
2. 候选样式表
3. style元素
4. @import指令
5. 具体的样式规则
6. CSS注释
7. 内联样式
小结

利用CSS，可能会完全改变用户代理表现元素的方式。可以使用display属性采用基本方式来显示，也可以将样式表与文档关联，以另外一种不同的方式表现。用户不会知道这是通过外部样式表还是嵌套样式表完成的（甚至有可能是利用一个内联样式做到的）。外部样式表真正的意义在于，它允许创作人员将网站的所有表现信息都放在一个位置，将所有文档指向这个位置。这不仅使网络的更新和维护相当容易，还有助于节省带宽，因为文档中祛除了所有表现信息。

为了充分利用CSS的强大功能，创作人员需要了解如何将一组样式与文档中的元素相关联。要全面的理解CSS如何做到这些，创作人员则需要深入的掌握CSS以何种方式选择文档中要应用样式的部分，这正是下一章要讨论的主题。

2. 选择器

基本规则
1. 规则结构
2. 元素选择器
3. 声明和关键字
分组
1. 选择器分组
  1. 通配选择器
2. 声明分组
3. 结合选择器和声明的分组
类选择器和ID选择器
1. 类选择器
2. 多类选择器
3. ID选择器
4. 类选择器还是ID选择器？
属性选择器
1. 简单属性选择
2. 根据具体属性值选择
3. 根据部分属性值选择
4. 特定属性选择类型
使用文档结构
1. 理解父子关系
2. 后代选择器
3. 选择子元素
4. 选择相邻兄弟元素
伪类和伪元素
1. 伪类选择器
  1. 链接伪类
  2. 动态伪类
  3. 动态样式的实际问题
  4. 选择第一个子元素
  5. 根据语言选择
  6. 结合伪类
2. 伪元素选择器
  1. 按首字母样式
  2. 设置第一行的样式
  3. 设置之前和之后元素的样式
小结

通过根据文档的语言来使用选择器，创作人员可以创建丰富的CSS规则。我们可以构建只应用于少数元素的简单规则，对大量类似元素应用样式也同样简单。由于可以对选择器和规则分组，这样使得样式表相当简洁，而且非常灵活，相应的可以缩小文件的大小，缩短下载时间。

用户代理通常必须慎用选择器，因为如果不能正确的解释选择器，会导致用户代理根本无法使用CSS。另一方面，创作人员要正确的编写选择器，这很关键，因为一旦有错误，用户代理将不能按预想的那样应用样式。要想正确的理解选择器以及如何组合选择器，需要深入的掌握选择器与文档结构的关系，并了解继承和层叠等机制在确定如何为元素设置样式时有怎样的作用。这正是下一章要讨论的内容。

3. 结构和层叠

特殊性
1. 声明和特殊性
2. 通配选择器特殊性
3. ID和属性选择器的特殊性
4. 内联样式特殊性
5. 重要性
继承
层叠
1. 按权重和来源排序
2. 按特殊性排序
3. 按顺序排序
4. 非CSS表现提示
小结

层叠样式表中最基本的一个方面可能就是层叠了——冲突的声明要通过这个层叠过程排序，并由此确定最终的文档表示。这个过程的核心是选择器及其相关声明的特殊性，以及继承机制。

在下一章中，我们将介绍多种用于为属性值提供含义的单位。讨论完下一章后，你就能清除的了解全部基础知识，并做好进一步学习指定文档样式的属性的准备工作。
值和单位
1. 数字
2. 百分数
3. 颜色
  1. 命名颜色
  2. 用RGB指定颜色
    1. 函数式RGB颜色
    2. 十六进制RGB颜色
    3. 颜色汇总
    4. Web安全颜色
4. 长度单位
  1. 绝对长度单位
    1. 处理绝对长度
  2. 相对长度单位
    1. em和ex单位
    2. em和ex的实际问题
    3. 像素长度
    4. 像素理论
    5. 如何取舍
5. URL
  1. 关键字
    1. inherit
6. CSS2单位
7. 小结
  
  单位和值的覆盖面很广，从长度单位到描述效果（如underline）的特殊关键字，再到颜色单位，还包括文件（如图像）的位置。大多数情况下，在单位面前，用户代理几乎能做到完全正确，不过也存在少量bug和奇怪问题会来烦你。例如，Navigator 4.x不能正确的解释相对url，这被许多创作人员过分夸大，以至于过分的依赖于绝对url。用户代理在颜色领域也几乎完全胜任，但同样不乏一些小问题。不过，由于存在太多不同的长度单位，尽管这绝对不是bug，但实际上这才是所有创作人员需要解决的一个有意思的问题。
  
  这些单位都各有优缺点，这取决于它们在什么情况下使用。我们已经了解了这样的一些环境，本书余下的内容将重点讨论这些场合，首先从CSS属性开始，CSS属性描述了如何改变文本的显示方式。

5. 字体

字体系列
1. 使用通用字体系列
2. 指定字体系列
字体加粗
1. 加粗如何起作用
2. 让字体更粗
3. 让字体变细
字体大小
1. 绝对大小
2. 相对大小
3. 百分数和大小
4. 字体大小和继承
5. 使用长度单位
风格和变形
1. 有风格的字体
2. 字体变形
拉伸和调整字体
font属性
1. 增加行高
2. 适当的使用简写
3. 使用系统字体
字体匹配
1. font-face规则
2. 字体名匹配
3. 智能字体匹配
4. 字体合成
5. 字体下载
小结

尽管创作人员不能指望文档中一定使用某个特定的字体，不过可以很容易的指定通用字体系列。这种特殊行为得到了很好的支持，因为如果用户代理不允许创作人员（甚至读者）指定字体，会很快发现这种用户代理不受欢迎。

对于字体管理的其他方面，相应的支持成都则有所不同，往往能很好的改变字体大小，不过在这方面20世纪的用户代理实现差别很大，有些及其简化，有些则非常正确。对创作人员来说，让人困惑的往往不是以何种方式支持字体大小的调整，而是他们想用的单位（点）在不同媒体上得到的结果可能差异很大，甚至在不同操作系统和用户代理上也可能得到不同的结果。使用点作为单位有很多危险，为Web设计中使用长度单位通常不是一个好主意。百分数、em单位和ex单位往往更适合修改字体大小，因为这些单位在所有常用显示环境中能很好的缩放。

另一个让人困惑的方面可能是一直缺少一种机制来指定要下载并在文档中使用的字体。这意味着创作人员仍依赖于用户可用的字体，因此，他们无法预计文本会有怎样的外观。

说到文本指定样式，还有很多不涉及字体的方法，这是下一章要讨论的内容。

6. 文本属性

缩进和水平对齐
1. 缩进文本
2. 水平对齐
垂直对齐
1. 行高
2. 构造文本行
3. 指定line-height值
4. 行高和继承
5. 垂直对齐文本
  1. 基线对齐
  2. 上标和下标
  3. 底端对齐
  4. 顶端对齐
  5. 百分数
  6. 长度对齐
字间隔和字母间隔
1. 字间隔
2. 字母间隔
3. 间隔和对齐
文本转换
文本装饰
1. 怪异的装饰
文本阴影
1. 处理空白符
2. 文本方向
小结

即使不改变所有的字体，还是有很多方法来改变文本的外观。除了一些经典的效果（如加下划线）外，CSS还允许在文本上面划线；改变单词和字母间的间隔大小；将段落（或其他块级元素）的首行缩进；将文本左对齐或右对齐，等等。甚至可以修改文本行间的间隔大小，不过这个操作太过复杂，在第7章再详细说明。

这些行为有些得到了很好的支持，有些则根本不被支持。文本两端对齐就是一个没有得到充分支持的行为，20世纪发布的大多数用户代理在文本装饰和垂直对齐方面都存在bug，另外在行高计算上也存在问题。另一方面如果用户代理支持单词和字母间隔，则总能正常工作，另外文本缩进也只是有很少的一些小bug。改变大小写也是如此，用户代理总能正确的支持这个方面。

在本章中我提到过，行布局比我们谈到的还要复杂，下一章将介绍这个过程的详细内容，同时还将介绍很多其他知识。

7. 基本视觉格式化

基本框
1. 包含块
2. 快速复习
块级元素
1. 水平格式化
  1. 水平属性
  2. 使用auto
  3. 负外边距
  4. 百分数
  5. 替换元素
2. 垂直格式化
  1. 垂直属性
  2. 百分数高度
  3. auto高度
  4. 合并垂直外边距
  5. 负外边距
3. 列表项
行内元素
1. 行布局
2. 基本术语和概念
3. 行内格式化
4. 行内非替换元素
  1. 建立框
  2. 垂直对齐
  3. 管理line-height
  4. 缩放行高
  5. 增加框属性
5. 行内替换元素
  1. 增加框属性
  2. 替换元素和基线
改变元素显示
1. 改变角色
2. 行内块元素
3. run-in元素
4. 计算值
小结

尽管CSS格式化模型的某些方面乍看起来有些不太直观，不过等你多熟悉一些就会发现这是有道理的。很多情况下，最初看上去没道理甚至荒谬的规则最后看来确实是合理的，它们会防止一些奇怪的或我们不期望的文档显示结果。在很多方面，块级元素都很容易理解，调整其布局通常是一个简单的任务。另一方面，行内元素则可能很难管理，因为有很多影响因素，其中也包括元素是替换元素还是非替换元素。既然我们已经对文档布局的基础知识有所了解，下面再来关注如何使用各种布局属性。后面的几章都在讨论这个方面，首先来看最常用的框属性：内边距、边框和外边距。

8. 内边距、边框和外边距

基本元素框
1. 宽度和高度
2. 外边距和内边距
外边距
1. 长度值和外边距
2. 百分数和外边距
3. 值复制
4. 单外边距属性
5. 负外边距和合并外边距
6. 外边距和行内元素
边框
1. 边框和背景
2. 有样式的边框
  1. 多种样式
  2. 单边样式
3. 边框宽度
  1. 根本没有边框
4. 边框颜色
  1. 透明边框
5. 简写边框属性
6. 全局边框
7. 边框和行内元素
内边距
1. 百分数和内边距
2. 单边内边距
3. 内边距和行内元素
4. 内边距和替换元素
小结

能够向所有元素应用外边距、边框和内边距，是CSS超越传统Web标记语言的要素之一。过去，如果要把一个标题放在一个有边框的有色方框中，就意味着要把这个标题包围在一个表中，只是为了创建如此简单的效果，这么做确实是一种很笨拙的办法。正是这种强大的功能使得CSS如此流行。

9. 颜色和背景

颜色
前景色
1. 替换属性
2. 影响边框
3. 影响表单元素
4. 继承颜色
背景
1. 背景色
  1. 历史问题
  2. 特殊效果
2. 背景图像
  1. 使用图像
  2. 为什么背景不能继承
  3. 关于背景的良好实践
3. 有方向的重复
4. 背景定位
  1. 关键字
  2. 百分数值
  3. 长度值
5. 有方向的重复（深入）
6. 关联
  1. 有意思的效果
7. 汇总
小结

通过设置元素的颜色和背景，可以大大增强创作人员的能力。CSS超越传统方法的优点就在于可以向文档中的任何元素应用颜色和背景，而不只是表单元格或FONT标记中包含的内容。尽管某些实现中存在一些bug（如Navigator 4不能向元素的整个内容区应用背景），不过背景属性确实使用非常广泛。不难理解它们为什么这么流行，因为利用颜色可以很容易的区分不同的页面。

不过，对于如何为元素应用样式，CSS还提供了更多可能性：可以在任何元素上放置边框，可以设置额外的外边距和内边距，甚至可以“浮动”元素（不只是图像）。下一章将介绍这些概念。

10. 浮动和定位

浮动
1. 浮动元素
  1. 不浮动
2. 浮动的详细内幕
3. 实用行为
4. 浮动元素、内容和重叠
5. 清除
6. 定位
7. 基本概念
  1. 定位的类型
  2. 包含块
  3. 偏移属性
8. 宽度和高度
  1. 设置宽度和高度
  2. 限制宽度和高度
9. 内容溢出和剪裁
  1. 溢出
  2. 内容剪裁
10. 元素可见性
11. 绝对定位
  1. 绝对定位元素的放置和大小
  2. 自动边偏移
  3. 非替换元素的放置和大小
  4. 替换元素的放置和大小
  5. Z轴上的放置
12. 相对定位
13. 小结

浮动和定位是CSS的两个很吸引人的特性。不过，如果使用时不小心，也会让人很迷惑。对元素定位时，元素重叠、叠放顺序、大小和放置等都需要仔细考虑，另外还必须考虑浮动元素与正常流的关系，因此，使用浮动和定位创建布局需要有所顾忌，不过还是利大于弊。
       
   利用这些特性，很多布局中确实已经不需要使用表了，不过出于某些原因，Web中还是要使用表，如表示股票行情和运动成绩等。下一章我们将介绍CSS做了哪些改进来处理表布局的问题。

11. 表布局

表格式化
1. 表的视觉编排
  1. 表编排规则
2. 表显示值
  1. 以行为主
  2. 列
3. 匿名表对象
  1. 对象插入规则
4. 表层
5. 表标题
6. 表单元格边框
7. 分隔单元格边框
  1. 边框间隔
  2. 处理空单元格
8. 合并单元格边框
  1. 合并边框布局
  2. 边框合并
9. 表大小
10. 宽度
  1. 固定布局
  2. 自动布局
11. 高度
12. 对齐
13. 小结

可能你使用表和间隔设计已经有很多年，对表布局非常熟悉，但要知道这种布局的基本机制相当复杂，而且不是完全确定的。由于HTML表构造的历史渊源，CSS表模型也是以行为中心，不过好在它确实能提供列布局，还能应用有限的列样式。由于CSS提供了一些新特性来控制单元格对齐和表宽度，现在已经有了更多的工具能以更漂亮的方式表示表。
       
   由于更够向任意元素应用与表有关的display值，这就打开了方便之门，可以使用div等HTML元素创建类似于表的布局（或者在XML语言中，任何元素都可以用来描述布局组件）。在写作本书时，大多数浏览器（除Internet Explorer）都支持向任意元素应用与表有关的display值。甚至在最新版本中，CSS还支持更复杂的表示，这正是下一章主题：生成内容。

12. 列表与生成内容

列表
1. 列表类型
2. 列表项图像
3. 列表标志位置
4. 简写列表样式
5. 列表布局
6. 生成内容
7. 插入生成内容
8. 指定内容
  1. 插入属性值
  2. 生成引号
9. 计数器
  1. 重置和递增
  2. 使用计数器
  3. 计数器和作用域
10. 小结

尽管列表样式没有我们希望的那么复杂，而且浏览器对生成内容的支持还有些欠缺（至少在写作本书的时候是这样），不过能够对列表应用样式还是很有用的。一个常见的用途是取一个链接列表，去除其标志和缩进来创建一个导航边栏。一方面要保证简单的标记，另一方面要得到灵活的布局，这很难做到。CSS3在列表样式方面预期有一些改进，基于此，我们期待列表将来变得越来越有用。
       
至于目前，如果一个标记语言本身没有固有的列表元素，生成内容会有很大帮助，例如，可以插入图标之类的内容指向某种类型的链接（PDF文件、Word文档，甚至另一个网站的链接）。利用生成内容，还能很容易的打印链接URL，由于生成内容能插入引号并完成格式化，这对于排版非常有利，可以得到很好的效果。完全可以这么说：生成内容的用途只受你想象力的限制，只要想得到，生成内容就能做得到。更好的一点是，利用计数器现在还可以向任何元素（而不止是列表）关联序数信息，如标题或代码块。如果你还希望利用设计支持用户界面方面的一些新特性，模仿用户操作系统的外观，那么请继续读下去。下一章将讨论在CSS设计中如何使用系统颜色和字体。

用户界面样式
1. 系统字体和颜色
  1. 系统字体
  2. 系统颜色
2. 光标
  1. 改变光标
  2. 指示和选择光标
  3. 移动光标
  4. 提供帮助
  5. 图形光标
3. 轮廓
  1. 设置轮廓样式
  2. 设置轮廓颜色
  3. 汇总
4. 小结
  
  利用用户界面样式，特别是通过创造性的使用系统颜色和字体，创作人员可以让文档看上去更像是用户的计算环境。通过重用用户已经习以为常的东西，可以让文档看上去更熟悉，从一开始就做到对用户友好。
  
  还有一种办法能让用户的日子更好过一些，这就是针对显示器以外的其他媒体创建样式表。这包括专门面向打印的样式、通过声音（语音）访问网页的样式，甚至面向投影屏幕环境的样式。这些内容都在下一章讨论。

14. 非屏幕媒体

设计特定于媒体的样式表
1. 分页媒体
2. 打印样式
  1. 屏幕与打印的区别
  2. 定义页面大小
  3. 选择页面类型
  4. 分页
  5. 分页行为
  6. 重复元素
  7. 页面外的元素
3. 投影样式
  1. 建立幻灯片
  2. 定位元素
  3. 关于投影的考虑
4. 声音样式
5. 语音
  1. 标点符号和数字
  2. 表标题的声音表现
  3. 语速
6. 音量
7. 指定声音
8. 改变声音
  1. 改变音高
  2. 重音与音色
9. 停顿和提示
  1. 停顿
  2. 提示
  3. 停顿、提示和生成内容
10. 背景声音
11. 声音定位
  1. 结合azimuth和elevation
12. 小结

尽管Web开发的第一阶段主要关注于视觉领域，不过随后还需要用其他媒体提供Web内容，正因如此，CSS中引入了特定于媒体的样式。对于同一个文档，可以采用最适合不同输出媒体的方式定制文档的表现，这种能力确实非常强大。尽管最强大的应用是为文档创建“打印友好”的样式，不过我们已经看到，还可以利用投影样式使用Opera创建幻灯片。
       
   尽管声音样式对盲人用户非常有用，但写作本书时只有两个程序员对此提供支持（而且还只是CSS中有关声音样式的一部分），另外CSS2.x中定义的媒体类型aural不会继续在CSS的将来版本中沿用。相反，在文档的声音表现方面，将来可能会采用speech媒体类型。

15. 属性参考

  1. 视觉媒体
     1. background
     2. background-attachment
     3. background-color
     4. background-image
     5. background-position
     6. background-repeat
     7. border
     8. border-bottom
     9. border-bottom-color
     10. border-bottom-style
     11. border-bottom-width
     12. border-color
     13. border-left
     14. border-left-color
     15. border-left-style
     16. border-left-width
     17. border-right
     18. border-right-color
     19. border-right-style
     20. border-right-width
     21. border-style
     22. border-top
     23. border-top-color
     24. border-top-style
     25. border-top-width
     26. border-width
     27. bottom
     28. clear
     29. clip
     30. color
     31. content
     32. counter-increment
     33. counter-reset
     34. cursor
     35. direction
     36. display
     37. float
     38. font
     39. font-family
     40. font-size
     41. font-style
     42. font-variant
     43. font-weight
     44. height
     45. left
     46. letter-spacing
     47. line-height
     48. list-style
     49. list-style-image
     50. list-style-position
     51. list-style-type
     52. margin
     53. margin-bottom
     54. margin-left
     55. margin-right
     56. margin-top
     57. max-height
     58. max-width
     59. min-height
     60. min-width
     61. outline
     62. outline-color
     63. outline-style
     64. outline-width
     65. over-flow
     66. padding
     67. padding-bottom
     68. padding-left
     69. padding-right
     70. padding-top
     71. position
     72. quotes
     73. right
     74. text-align
     75. text-decoration
     76. text-indent
     77. text-transform
     78. unicode-bidi
     79. vertical-align
     80. visibility
     81. white-space
     82. width
     83. word-spacing
     84. z-index
     85. border-collapse
     86. border-spacing
     87. caption-side
     88. empty-cells
     89. table-layout
      90. 分页媒体
     91. orphans
     92. page-break-after
     93. page-break-before
     94. page-break-inside
     95. widows
      96. 从CSS2.1去除的属性
      97. 声音样式

16. 选择器、伪类选择器和伪元素参考

选择器

通配选择器
```
* {color: red;}
div * p {color: blue}
```

类型选择器

body {background: #FFF;}
p {font-size: 1em;}

后代选择器

body h1 {font-size: 200%;}
table tr td div ul li {color: purple;}

子选择器

div > p {color: cyan;}
ul > li {font-weight: bold;}

相邻兄弟选择器

table + p {margin-top: 2.5em;}
h1 + * {margin-top: 0;}

类选择器

p.urgent {color: red;}
a.external {font-style: italic;}
.example {background: olive;}

ID选择器

h1#page-title {font-size: 250%;}
body#home {background: silver;}
#example {background: lime;}

简单属性选择器

a[rel] {border-bottom: 3px double gray;}
p[class] {border: 1px dotted silver;}

具体属性值选择器

a[rel="Home"] {font-weight: bold;}
p[class="urgent"] {color: red;}

部分属性值选择器

a[rel~="friend"] {text-transform: uppercase;}
p[class~="warning"] {background: yellow;}

开始子串属性值选择器

a[href^="/blog"] {text-transform: uppercase;}
p[class^="test-"] {background: yellow;}

结束子串属性值选择器
```
a[href$=".pdf"] {font-style: italic;}
```

任意子串属性值选择器

a[href*="oreilly.com"] {font-weight: bold;}
div [class*="port"] {border: 1px solid red;}

语言属性选择器
```
html[lang|="en"] {color: gray;}
```

伪类和伪元素

:active
```
a:active {color: red;}
```

:after

a.external:after {content: " " url(/icons/globe.gif);}
p:after {content: " | ";}

:before

a[href]:before {content:"[LINK] ";}
p:before {content: attr(class);}

:first-child

body *:first-child {font-weight: bold};
p:first-child {font-size: 125%;}

:first-letter

h1:first-letter {font-size: 166%;}
a:first-letter {text-decoration: underline;}

:first-line
```
p.lead:first-line {font-weight: bold;}
```

:focus

a:focus {outline: 1px dotted red;}
input:focus {background: yellow;}

:hover

a[href]:hover {text-decoration: underline;}
p:hover {background: yellow;}

:lang

html:lang(en) {background: silver;}
*:lang(fr) {quotes: '?' ' ?';}

:link

a:link {color: blue;}
*:link {text-decoration: underline;}

:visited

a:visited {color: purple;}
*:visited {color: gray;}

17. 示例HTML 4样式表

address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol,p, ul, center, dir, hr, menu, pre {
  display: block;
}
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { padding: 8px; line-height: 1.12em }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu {
  margin: 1.12em 0
}
h5 { font-size: .83em; margin: 1.5em 0; }
h6 { font-size: .75em; margin: 1.67em 0; }
h1, h2, h3, h4, h5, h6, b, strong {
  font-weight: bolder
}
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em, var, address { font-style: italic }
pre, tt, code, kbd, samp {
  font-family: monospace
}
pre { white-space: pre }
button, textarea, input, object, select, img {
  display: inline-block
}
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir, menu, dd {
  margin-left: 40px
}
ol { list-style-type: decimal }
ol, ul, ul ol, ul ul, ol ol {
  margin-top: 0;
  margin-bottom: 0;
}
u, ins { text-decoration: underline }
br:before { content: "\A" }
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link,:visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR='ltr'] {direction: ltr; unicode-bidi: bidi-override}
BDO[DIR='rtl'] {direction: rtl; unicode-bidi: bidi-override}
*[DIR="ltr"] {direction: ltr; unicode-bidi: embed}
*[DIR="rtl"] {direction: rtl; unicode-bidi: embed}
@media print {
  h1 {page-break-before: always}
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid
  }
  ul, ol, dl {
    page-break-before: avoid
  }
}
@media aural { /* changed from 'speech' which was not defined in CSS2 */
  h1, h2, h3, h4, h5, h6 {
    voice-family: paul, male;
    stress: 20;
    richness: 90
  }
  h1 {pitch: x-low; pitch-range: 90}
  h2 {pitch: x-low; pitch-range: 80}
  h3 {pitch: low; pitch-range: 70}
  h4 {pitch: medium; pitch-range: 60}
  h5 {pitch: medium; pitch-range: 50}
  h6 {pitch: medium; pitch-range: 40}
  li, dt, dd {pitch: medium; richness: 60}
  dt {stress: 80}
  pre, code, tt {pitch: medium; pitch-range: 0; stress: 0; richness: 80}
  em {pitch: medium; pitch-range: 60; stress: 60; richness: 50}
  strong {pitch: medium; pitch-range: 60; stress: 90; richness: 90}
  dfn {pitch: high; pitch-range: 60; stress: 60}
  s, strike {richness: 0}
  i {pitch: medium; pitch-range: 60; stress: 60; richness: 50}
  b {pitch: medium; pitch-range: 60; stress: 90; richness: 90}
  u {richness: 0}
  a:link {voice-family: harry, male}
  a:visited {voice-family: betty, female}
  a:active {voice-family: betty, female; pitch-range: 80; pitch: x-high}
}

万能螺丝刀1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS权威指南重点要点摘录

css和文档web的衰落一片混乱css作救星丰富的样式易于使用在多个页面上使用样式层叠缩减文件大小为将来做准备元素替换和非替换元素元素显示角色结合CSS和XHTMLlink标记候选样式表style元素@import指令具体的样式规则CSS注释内联样式小结利用CSS，可能会完全改变用户代理表现元素的方式。可以使用display属性采用基本方式来显示，也可以将样式表与文档关联，以另外一种不同的方式表现。用户不会知道这是通过外部样..
复制链接

扫一扫