CSS声明：文本
2016-11-29 本文已影响73人
筱南独舞
- 文本样式的font属性
-
文本大小：font-size
示例：{fount-size:value;}
说明：属性值为数字型，必须给属性值加单位，属性值为0时除外。
单位可以是pt、px、em （9pt=12px）
em是相对文字单位，当前文字的字符大小；
pt是绝对长度单位，表示多少个点；
px是相对长度单位，使用比较广泛。 -
文本字体：font-family
示例：{font-family:"Times New Roman",Serif}
浏览器首先会寻找字体1，如果存在就使用该字体来显示内容，如果字体1不存在就会寻找字体2，如果字体2不存在就会显示默认字体；
当字体是中文时需加双引号；
当英文字体中有空格时需加双引号；
当英文字体只有一个单词组成是不加双引号； - ** 文本粗细**：font-weight
示例：{font-weight:bolder(更粗)/bold(加粗)/normal(常规)/lighter(更细)/100-900;}
在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形；
400等同于normal；
600-900加粗字体。 - ** 文本倾斜**：font-style
示例：{font-style:italic(倾斜度小)/oblique(倾斜度大)/normal(取消倾斜，常规显示);}
italic和oblique都表示倾斜，不过oblique的幅度要大一些，区分不明显 -
文本颜色：color
示例：{color:颜色值}
用十六进制表示颜色值：0123456789ABCDEF;
颜色模式：光色模式：
R G B
FF 00 00
颜色值的缩写：当表示三原色的三组数字同时相同，可以缩写为三位；当用十六进制表示颜色值时，需要在颜色值前面加上#。 -
文本行高：line-height
示例：{line-height: normal/value;}
当单行文本的行高等于容器高时，可实现单行文字在容器中垂直方向居中对齐；
当单行文本的行高小于容易高时，可实现单行文字在容器中垂直对齐以上任意位置定位；
当单行文本的行高大于容器高时，可实现单行文本在容器中垂直对齐以下任意位置的定位；
line-height与font-size的计算值之差（在CSS中成为“行间距”）分为两半，分别加在一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。 -
文字属性font简写
示例：{font:12px "宋体"}；
font的属性值应该按照以下顺序书写（各个属性之间用空格隔开）
顺序：font-style font-weight font-size/line-height font-family
简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开。
顺序不能改变。
- 文本样式的text属性
- text-align：水平对齐方式
{text-align: left/right/center/justify(“两端对齐对中文不起作用”);} - vertical-align:垂直对齐方式
{vertical-align: top/bottom/middle;}
指定图片垂直对齐方式，相对于其他文字，该属性只对inline-block类型的元素起作用，他设置的是元素左右两边的元素对于自己的对齐方式。
- 文字样式的运用规范
- 文本修饰：text-decoration
{text-decoration: none/underline/overline/line-through/blink;}
none：没有修饰；underline：添加下划线；overline：添加上划线；line-through：添加删除；blink：闪烁。 - 文字缩进：text-indent
{text-indent: value;}
text-indent可以取负值，如果使用负值，那么首行会被缩进到左边；
text-indent只对第一行起作用。 - 字符间距：letter-spacing
{letter-spacing:value;}
控制英文字母和汉子的间距。 - 字间距：word-spacing
{word-spacing: value;}
控制英文单词词句 - 元素空白的处理方式：white-space
{whtie-space: normal | pre | nowrap | pre-wrap | pre-line};}
normal：默认处理方式，空白会被浏览器忽略；
pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行；
nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象；
pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行；
pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。 - 控制元素中的字母：text-transform
{text-transform: capitalize | uppercase | lowercase;}
capitalize：首字母转大写；
uppercase ：所有字母转大写；
lowercase：所有字母转小写。
- 文字添加阴影和自动换行
- text-shadow：规定添加到文本的阴影效果
{text-shadow: h-shadow v-shadow blur color;}
h-shadow ：必须写，水平阴影的位置，允许负值；
v-shadow：必须写，垂直阴影的位置，允许负值；
blur：可选，模糊的距离；
color：阴影的颜色。 - word-wrap：自动换行
{word-wrap: normal/break-word;}
normal：默认，只在允许的断字点换行；
break-word：在长单词或者URL地址内部进行换行。
