第6章 文本格式化
1、 使用字体
字体font-family:
通用的字体样式：
- serif字体最适用于冗长的文字信息。这种字体使字母主笔画的结尾处会有一些细小的“足”。
- sans-serif字体经常用在标题上。
- monospaced（等宽）字体经常用于显示计算机代码。
2、 使用Web字体
Web字体的CSS部分很简单，只需要两个CSS命令
- @font-face指令负责告诉Web浏览器字体的名称以及到哪里去下载这种字体。
- font-family属性定义Web字体的方式。一旦@font-face指令指示浏览器去下载字体，你就可以利用font-family属性在任何CSS样式中设置该字体了。
@font-face {
font-family: " PTSansRegular "; 给字体进行命名
src: url('fonts/PTSansRegular.eot');
url('fonts/ PTSansRegular.eot?#iefix') format('embedded-opentype') ;
url('fonts/ PTSansRegular t.woff') format('woff'),
url('fonts/ PTSansRegular.ttf') format('ttf'),
url('fonts/ PTSansRegular.svg') format('svg'),
font-weight: bold;
font-family: italy;
}
3、 给文本添加颜色color
4、 修改字号font-size
5、 格式化词语和字母
- 斜体化font-style
- 粗体化font-weight
- 大写化text-transform
- 小型大写字母font-variant: small-caps;
- 文本的修饰text-decoration
- 字母间距letter-spacing
- 字词间距word-spacing
6、 给文本添加阴影text-shadow
7、 格式化整个段落
- 调整行间距line-height
- 对齐文本text-align
- 首行缩进text-indent
- 可以利用margin-top和margin-bottom属性控制段落间的距离
- 格式化段落的首字母和首行，可以利用伪元素:first-letter和:first-line
8、 给列表定义样式
- 列表的类型list-style-type
- 利用list-style-position属性控制项目符号的位置，也可以让项目符号显示在文本之外或文本之内。
- 图形项目符号list-style-image
第7章 margin、padding和border
1、 理解盒模型
对于Web浏览器而言，任何标签都是里面装有东西的盒子，包括文本、图片或者包含别的东西的其他标签。
内容的周围通常环绕着装饰盒子的不同属性：
- padding是指内容与其边框线之间的空间。
- border是指盒子周围的直线。
- background-color是用来填充边框内部空间的，包括padding区域。
- margin是指一个标签和另一个标签之间的间隔。
2、 用margin和padding控制空间
当元素的bottom margin碰到另一个元素的top margin时，此时浏览器不是把这两个边距相加，而是应用它们中较大的一个。这种现象称为“collapsing margin（边距折叠）”。
CSS有两种不同的盒子类型：block box（块级盒子）和inline box（行内盒子）。它们分别对应于两个标签类型：块级标签和行内标签。
display: inline可以使块级元素像行内元素一样，反之display: block可以使行内元素像块级元素一样。
3、 添加边框border
每个border都通过这3个不同的属性进行控制：color（颜色）、width（宽度）和style（样式）。
4、 设置背景色background-color
在使用border-radius和border时要切记，Web浏览器实际上把背景色显示在边框的下方。
5、 创建圆角border-radius
通过提供单个值，或者两个以/隔开的值，可以创建出圆角或者椭圆角。
只接受一个值，它就会将这个值应用给一个元素的所有4个角。
也可以接受四个值，按顺序：左上角、右上角、右下角、左下角设置四个不同的角。
IE8及其更早的版本不支持border-radius属性，因此将显示为方形角。此外，iOS的Safari 3.2和Android Browser 2.1需要用供应商前缀-webkit-
6、 给元素的边界框添加阴影box-shadow
box-shadow属性的基本语法，包括4个参数，分别为：
- 水平偏移量（正值是将阴影移动到右边，负值是将阴影移到左边）；
- 垂直偏移量（正值是将阴影放在方框的底边下方，负值则是将阴影移到方框顶边的上方）；
- 阴影的半径，它决定阴影的模糊度和宽度。值为0时，完全不模糊，因此阴影的边沿十分清晰。这个值越大，阴影就会越模糊，并且更宽；
- 阴影的颜色。
box-shadow属性还包括两个可选的值：inset关键字和阴影的尺寸（spead）:
- 关键字inset告诉浏览器要将阴影画在方框内部。如果将inset作为box-shadow的第一个值，将会创建一个嵌入式阴影。
- 还可以添加一个阴影尺寸作为第4个值（在阴影半径和阴影颜色之间）。阴影的尺寸会将阴影扩展指定的值，这个值还表示什么时候要应用模糊半径。
7、 确定高度和宽度
height和width属性是构成部分CSS盒模型的另外两个属性。
计算相关元素盒子的实际宽度时，要把margin、border、padding和width属性值全部加起来。计算元素在屏幕中占据的高度也一样。
CSS3还提供了一个属性，可以让你修改浏览器计算元素的屏幕宽度（和高度）的方法。box-sizing属性提供了以下3个选项：
- content-box选项：浏览器会将border宽度和padding厚度与width和height属性值相加，来确定该标签的屏幕宽度和高度。
- padding-box选项：是告诉浏览器，当你在一个样式中设置了width或者height属性时，它就应该包含padding作为该值的一部分。
- border-box值中包含了padding厚度和border厚度，将它作为width和height值的一部分。
Firefox不支持标准的属性名称，因此需要使用供应商前缀版本；对于iSO的旧版Safari以及Android（版本3及其更早）也是如此。
box-sizing属性甚至适用于IE 8及其更新的版本，但IE 7不支持这个属性。
用overflow属性控制溢出文本。用4个关键字来控制溢出盒子边沿的那部分内容该如何显示：visible、scroll、auto、hidden。
高度和宽度的最大化和最小化：
- max-width属性用于设置元素的最大宽度。这个元素可以比设定值小，但它决不能大于设定值。
- max-height
- min-width属性用于设置元素的最小宽度。元素可以扩展宽度到超过最小宽度值，但是永远不会小于这个宽度值。
- min-height
8、 用浮动元素包围内容
float属性可以把元素移动到左边或者右边。它的选项有3种：left、right或none。
background和border不能像其他网页元素一样浮动。因此，可以给设置了浮动下方跑动的背景图片或边框的样式添加一条规则overflow:hidden; ，可以让任何延伸到浮动下方的背景和边框消失。
clear（清除）属性会指示元素不要包围浮动项目。清除元素时，本质上是迫使它落到浮动项目的下方。有以下选项：left、right、both和none。
第8章 给网页添加图片
1、 以下是一些经常用来处理图片的CSS属性：border（边框）、padding（填充）、float（浮动）、margin（边距）。
2、 添加背景图片background-image
3、 控制重复
如果单独使用background属性，图片将总是平铺，填满网页的整个背景。可以利用background-repeat属性指定图片要如何平铺（或者根本不平铺），该属性接受这4个值：repeat、no-repeat、repeat-x、repeat-y。
4、 定位背景图片
background-position属性允许你以很多种方式来精准控制图片的位置。你可以通过3种不同的方法来设定图片在水平方向和垂直方向的起点，它们分别是keyword（关键字）、精准值和percentage（百分比）。
固定图片background-attachment。它有两个选项：
- scroll是Web浏览器的默认做法，即背景图片会随着文本和其他网页内容一起滚动。
- fixed是把图片保持在背景中的某个固定位置上。
可以利用background-origin属性调整图片的起点，它告诉浏览器应该在相对某个元素的边框、边距或内容的什么位置开始显示北京图片。它的值有3个选项：
- border-box是将图片放在border区域的左上角
- padding-box是将图片放在padding区域的左上角
- content-box是将图片放在内容区域的左上角
当然，这个设置与元素周围是否有border或padding无关。
一般来说，背景图片会铺满某个元素的整个区域，包括border和padding区域的背面。通过background-clip属性可以限制背景图片的显示区域。有3个选项：
- border-box是让图片显示在内容区域的背后，包括border区域的背面。（默认）
- padding-box是所有背景图片都只能显示到元素的padding区域和内容区域。
- content-box限制背景图片只显示在内容区域。
background-origin或background-clip属性在IE 8及其更早的版本中均不起作用。
CSS3中增加了一个background-size属性，它可以让你控制背景图片的尺寸。
5、 利用background快捷属性
实际上可以将所有的background属性合并成一行background：
background-color background-image background-position background-repeat background-attachment
可以不用全部设定这些属性值，而只利用其中一个或任意几个属性的组合。
6、 使用多个背景图片
CSS3允许在一个元素的背景中添加多张图片。
对于多张背景图片，只需要使用background-image属性，并带有一个用逗号隔开的图片列表即可。
你还可以添加其他背景属性（如background-repeat属性），同样以逗号隔开各个值即可。
也可以采用快捷方法来指定多张图片。
7、 使用渐变色背景
可以用普通的background-image属性创建渐变效果。渐变的类型有以下几种可以选择：
- 线性渐变linear-gradient()
- 重复线性渐变repeating-linear-gradient()
- 径向渐变radial-gradient()
- 重复径向渐变repeating-radial-gradient()
对于渐变，需要在属性名称前面再添加一个供应商前缀。令人遗憾的是，必须针对每一款浏览器都编写一个声明。
IE 9及其更早的版本不支持渐变，因此最好要添加一种备用的背景色。