《css权威指南》重点摘要

《css权威指南》 第三版

第一章 CSS和文档

1.CSS(Cascading style sheet)，层叠样式表。

2.CSS将html中的元素分为替换元素和非替换元素。

• 替换元素：用来替换元素内容的部分并非由文档内容直接表示，如img/input元素

• 非替换元素：内容由用户代理（浏览器）在元素本身生成的框中显示，如span/p等

3.CSS还将html中的元素分为块级元素和行内元素，对应于CSS中的display属性。

• 块级元素:生成一个元素框，填充器父元素的内容区，旁边不能有其他元素。如p和div。

• 行内元素：在一个文本行内生成元素框，不会打断这行文本，如strong和em。

4.link元素用于引用外部CSS；style元素用于包含内如样式，优先级高；还可以在style元素中调用@import。

第二章 选择器

1.CSS的规则结构:选择器 声明块。声明块由多个声明组成，声明是键值对。

2.选择器：

• 元素选择器：如html {color:black;}

  • 选择器分组：支持同时设置多个元素，如h2,p {color:gray;}

  • 声明分组：设置多个属性，如h1 {font:18px;colr:purle;}

• 通配选择器：匹配任何元素，如* {color: red;

• 类选择器：例如p.warning选在p元素中class为warning的元素，.warning选择素有class为warning的元素。

  • 多类选择器：例如<p class=" a b"></p>，选择该元素是写作.a.b或.b.a

• ID选择器：例如#test {...}选择id为test的元素，不允许结合使用，因为id属性不能以空格分隔

• 属性选择器：例如h1[class][style] {...}选择h1元素含有class和style属性的元素，其中可以设置class="abc"选取class等于abc的元素，如果class的值有多个，则使用class~="abc"选择部分含有属性值abc的元素，类似的还有foo^="bar"选择属性值以"bar"开头，foo$="bar"选择属性以"bar"结尾，foo*="bar"选择属性包含"bar"的所有元素。此外foo|="en"选择foo属性以en开头或者等于en的所有元素。

• 后代选择器：元素之间使用空格分割，会选择器所有后代元素。

  • 选择直接子元素：使用>，例如h1>strong{...}选择h1后面子标签为strong的元素

  • 相邻兄弟元素：使用+，例如h1+ul {...}选择h1相信的ul元素。

• 伪类和伪元素（详见https://blog.csdn.net/q1056843325/article/details/53560588）：

  • 伪类选择器：使用：。例如a:visited {...}

  • 伪元素：CSS2.1定义四个伪元素，首字母样式first-letter，第一行样式first-line，设置之前before和之后after元素的样式。

第三章 结构和层叠

1.选择器的特殊性决定浏览器最终的元素呈现样式。选择器的特殊性规则如下图，特殊性值最高的样式呈现的优先级高。

image

2.内联样式的特殊性最高。

3.如果特殊性相同，就需要比较重要性。重要性使用!import来标志。

4.继承性决定子元素会使用父元素的样式，一般的，大多数框模型属性，如边距、边框等不能继承，继承的值没有特殊性，连0都不是，小于特殊性是0的选择器。

5.特殊性和重要性都相同后，比较样式声明的顺序，靠前的权重大。

第四章 值和单位

1.CSS支持数字，百分数（相对于另一个元素或者是父元素继承的值），颜色支持英文简写，RGB。
2.长度单位：

• 绝对长度单位：

  • 英寸in：1in=2.54cm

  • 厘米cm：

  • 毫米mm：

  • 点pt：1in=72pt

  • 派卡pc:印刷术语，1pc=12pt

• 相对长度单位：

  • em：元素的字体高度，1em定义为给定字体的font-size值

  • ex：字母x的高度

  • px：像素长度

3.关键字inherit的意思是属性的值与其父元素的值相同。

第五章 字体

1.CSS定义五种通用字体：

• serif：成比例，有上下短线

• sans-serif：成比例，无上下短线

• monospace：不成比例，字符宽度完全相同

• cursive：模仿人的手写体。

• fantasy：

2.一些样式属性：

• font-family指定字体

• font-weight指定字体加粗，变细等

• font-size指定字体大小，可以设定绝对、相对大小

• font-style指定字体风格，例如倾斜

• font-variant指定字体变形，例如小型大写字母small-caps

• font-stretch拉伸字体

• font-size-adjust调整字体

• font合并上述所有属性

第六章 文本属性

1.一些文本样式属性：

• 缩进文本：text-indent

• 水平对齐：text-align

• 行高：line-height

• 垂直对齐:vertical-align

• 字间隔：word-spacing

• 字母间隔：letter-spacing

• 文本转换：text-transform，例如大小写

• 文本装饰：text-decoration，例如加下划线

• 文本阴影：text-shadow

• 处理空白符：white-space

• 文本方向：direction

第七章 基本视觉格式化 & 第八章 内边距、边框和外边距

1.块级元素框模型，如下图。

image

3D示意图如下：

image

第九章 颜色和背景

1.前景色：color

2.背景色：background-color，背景图：background-image，有方向的重复：background-repeat，背景定位：backround-position，滚动关联：background-attachment，汇总：background。

第十章 浮动和定位

1.浮动属性：float。

2.设置一个元素两边无浮动元素：clear属性。

3.定位:position

• static

• relative

• absolute

• fixed

• inherit

4.元素可见性：visibility

5.改变元素的覆盖顺序：z-index

未完待续...

作者：GunnerAha
链接：https://www.jianshu.com/p/c44d70d0475c