在花样替补摆烂的第二天 居然过上了啃教材的日子

目录

1. 字体

1.1 字体族（font-family）

字体栈

1.2 字体大小（font-size）

特点

绝对单位

相对单位 

rem元素 

1.3 字体样式（font-style） 

 1.4 字体粗细（font-weight）

1.5 字体变化 （font-variant）

1.6 简写

2. 文本

2.1 文本缩进（text-indent） 

2.2 字符间距（letter-spacing）

2.3 单词间距（word-spacing）

2.4 文本装饰（text-decoration） 

2.5 文本对齐（text-align） 

2.6 行高（line-height） 

运用复合值的形式把font-size和line-height写在一起

2.7 文本转换（text-transform） 

2.8 垂直对齐（vertical-align） 

3. Web字体 

3.1 公共字体库   

步骤

3.2 @font-face包  

Font Squirrel（http://www.fontsquirrel.com）

4 网页排版

一个简单又基础的步骤

html实体标点符号 

排版上一些特殊的行内元素

1) q

2) span

首字下沉

1. 字体

1.1 字体族（font-family）

用于设定元素中的文本使用什么字体。

一般流程

1. 给整个页面设定一种主字体
2. 对需要不同字体的元素应用font-family

注意

• 不可以修改在线字体库生成的字体名 

设定body元素的该属性：为整个页面指定字体

特点

• 为可继承属性
• 不区分大小写

字体栈

以防指定的字体无效而多列出几种后备字体的列表

注意

• 多于一个单词或有空格的字体名，应加上引号
• 字体栈的最后一项要指定一个通用字体类 

通用的字体类

• serif 衬线字体
• sans-serif 无衬线字体
• monospace 等宽字体
• cursive 草书体或手写体
• fantasy 其他

字体栈1（Verdana）

Verdana的后备用Tahoma最好，因它们的x高度相同：

verdana, tahoma, sans-serif

字体栈2（无衬线）

helvetica, arial, sans-serif

1.2 字体大小（font-size）

设定font-size时其实是在修改默认值。

特点

• 有默认值
•  可继承（相对单位）

绝对单位

• 像素
• 点
• 派卡
• 英寸

注意：使用绝对单位不会继承祖先元素的字体大小！ 

缺点 

• 在调整页面所有元素的字体大小时需要一个一个修改

优点

• 祖先元素的字体大小变化时不会出现意外的“连锁反应” 

相对单位 

• 百分比
• em
• rem（根元素的字体大小）

在默认情况下，1em为16像素。

用相对单位设置元素的font-size的情况下，该元素的字体大小要相对于最近的“被设定过字体大小”的祖先元素来确定。

优点

• 能成比例地改变所有元素的字体大小
• 在反复修改布局设计的时候，能节省时间

由于今天设备的屏幕尺寸千差万别，相对大小应是首选。

rem元素 

集相对大小和绝对大小的优点于一身的单位。

• 可以只修改根元素就成比例地调整所有字体大小
• 避免字体大小逐层复合的连锁反应

1.3 字体样式（font-style） 

• italic：斜体
• normal：正体 

 1.4 字体粗细（font-weight）

• bold：粗体
• normal：正体 

1.5 字体变化 （font-variant）

• small-caps：使所有小写英文字母变成小型大写字母
• normal：正体 

1.6 简写

1. font-weight、font-style、font-variant

2. font-size

3. font-family 

2. 文本

2.1 文本缩进（text-indent） 

该属性设定行内盒子相对于包含元素的起点，一般来说就是左上角。

• 正号：往右移
• 负号：往左移

 能够得到首行缩进的效果。

具有可继承性。然而，被继承的缩进值并不是祖先元素中设定的值，而是计算的值。

CSS会把文本放在一个只有开头和末尾是封闭着的不可见的盒子里。这个盒子会因为折行而断开。所以我们缩进的其实是这个文本盒子的起点位置。也就是说，文本属性只能应用于这个文本盒子，而不是包含元素的盒子。

2.2 字符间距（letter-spacing）

• 正号：增大
• 负号：减小

一定要用相对单位，以便字符间距能随大小同比例变化。

• 控制字距（letter-spacing）：控制文本块中所有字符之间的间距
• 紧排（keming）：只调整两个字符的间距

2.3 单词间距（word-spacing）

调整的只是单词的间距，不影响字符间距。

CSS把任何两边有空白的字符和字符串都视作“单词”。

2.4 文本装饰（text-decoration） 

• underline 下划线
• overline 上划线
• line-through 划掉
• blink 布灵布灵（很讨厌！）
• none 无

2.5 文本对齐（text-align） 

• left 左对齐
• right 右对齐
• center 居中
• justify 两端对齐

2.6 行高（line-height） 

特点

• 不用指定单位

对于类似标题的一行文本来说，line-height增加的空白就像外边距一样，标题往往有默认行高。

运用复合值的形式把font-size和line-height写在一起

div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

行高是字体大小1.2em的1.4倍。

注意：设定行高时如果使用了绝对单位，将来增大字体有可能导致行与行之间的重叠。

2.7 文本转换（text-transform） 

• uppercase 大写
• lowercase 小写
• capitalize 首字母大写
• none 无

2.8 垂直对齐（vertical-align） 

特点

• 只影响行内元素 

对于块级元素，必须把其display属性设置为inline。 

该属性最常用于公式或化学分子式的上标和下标。

• 正值：向上
• 负值：向下 

3. Web字体 

3.1 公共字体库   

一行代码可以链接多款字体。

3.2 @font-face包  

以这种方式提供的字体，会在使用该字体的页面第一次加载时被浏览器下载并缓存起来，以后就不用下载了。

但是，除了显示网页之外，用户不能将这种字体用于其他用途。

把代码添加到网页中之后，就可以使用font-family以常规方式引用该字体了。引用字体时要使用@font-face规则中font-family属性的值作为字体族的名字。 

4 网页排版

html实体标点符号 

• &ldquo 左双引号“
• &rdquo 右双引号”
• &hellip 省略号……
• &mdash 破折号——
• &amp 和号&
• &lt 小于号 

排版上一些特殊的行内元素

1) q

默认样式是在文本开头和末尾加上引号

2) span

为构造首字下沉效果，首字母都会被包含在该元素里。然而，这种做法对于从内容管理系统中动态取文本的网页并不适用。

首字下沉

• 紧邻同胞选择符+
• ::first-letter伪元素

注意：

使用::before和::after的伪元素给引用内容添加引号时使用的是十六进制，在这里不能给content属性设定常规的Html实体，只能使用改写后的十六进制实体值。