css文本样式有,CSS---文本样式

CSS文本样式

CSS字体

font-family字体属性

定义元素内文字以什么字体来显示

语法：

font-family：[字体1][,字体2][,...]

当使用英文字体时，字体名称中间存在空格，字体名称需要用双引号括起来

说明：

含空格字体名和中文，用英文引号("")括起

多个字体，用英文","隔开

引号嵌套，外使用双引号，内使用单引号

使用多个字体属性时，他实际是告诉系统，搜素第一种字体，若第一种字体系统不存在，则使用第二种字体，以此类推，若都没有，则使用浏览器默认字体

font-family属性值：具体字体名，字体集

字体集：

Serif

Sans-serif

Monospace

Curisive

Fantasy

font-size文字大小

定义元素内文字大小

语法：

font-size：绝对单位|相对单位

绝对单位：在任何分辨率的情况下，字体大小不会改变

属性值

说明

in

Inch，英寸，1英寸=2.54厘米

cm

厘米，1厘米=0.394英寸

mm

毫米，1毫米=0.1厘米

pt

磅，印刷的点数，72磅=1英寸

pc

Pica，1pc=12pt

xx-small

9px

x-small

11px

small

13px

medium

16px

large

19px

x-large

23px

xx-large

28px

简单代码实现：

前五种：

后七种：

代码实现结果：

后七种在不同l浏览器下显示效果不一样，故不推荐使用

相对单位(相对于父元素进行字体大小的改变)：

1、px像素，受显示器分辨率影响，手机端一般不设置px

2、em/%

简单代码实现：

代码实现结果：

color字体颜色设置

定义元素内文字颜色

语法：

color：颜色名|十六进制|RGB

rgb代表：red，green，blue

通常用数字或百分比代表每个颜色的值，中间用逗号隔开，数字：0-255，百分比：0%-100%，大于或小于边界值，会自动修复为边界值

简单代码实现：

代码实现结果：

font-weight字体加粗

为元素内文字设置粗细

语法：

font-weight：normal | bold | bolder | lighter | 100-900

说明：

默认值：normal

400=normal，而700=bold

简单代码实现：

代码实现结果：

font-style 设置

normal：默认值

italic：斜体 (一般用来表示引用的内容)

oblique：倾斜

简单代码实现：

代码实现结果：

font-variant字体变形

设置元素中文本为小型大写字母(只针对英文内容)

语法：

font-variant：normal|small-caps

简单代码实现：

代码实现结果：

CSS文本样式

text-align 属性

设置元素内文本的水平对齐方式

语法：

text-align：left|right|center|justify

(margin：0 [上下边距设置]auto；[左右边距为自动的])

简单代码实现：

代码实现结果：

vertical-align属性

设置元素内容的垂直方式

语法：

vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom 长度 | 百分比

垂直对齐方式对行内样式才生效，对块级元素不生效(div，p等)

简单代码实现：

代码实现结果：

基线：

vertical-align垂直对齐属性

不同的属性值对应不同的基线位置

代码实现：

代码结果：

长度值与百分比

该属性还可应用于单元格中

多行内容垂直居中

简单代码实现：

代码实现结果：

line-height行高属性

设置元素中文本行高(可以继承，继承的是计算后的值)

语法：

line-height：长度值|百分比

text-indent：首行缩进(eg：2em)

用px定义行高时，当行高值大于字体大小时，字体会发生重叠，这说明，当字体大小改变时，行高并不随之改变，故可以使用em及百分比来设置行高

em及百分比

代码实现

实现结果：

其他属性

字体属性

说明

word-spacing

设置元素内单词之间的间距

letter-spacing

设置元素内字母之间的间距

text-transfrom

capitalize首字母大写、uppercase大写、lowercase小写、none无设置

text-decoration

underline下划线、overline上划线、line-through贯穿线、blink、none

系统以空格来评判英文单词和中文，若中文之间有空格则也会改变间距，属性值可以设置为正也可以设置为负，负值的结果字母重叠

代码应用：

代码实现结果：

同一个样式中，可以设置多个属性值，如果加了none，则全部清空

一般超链接中默认存在下划线，若想取消下划线，则将decoration属性设置为none

简单应用

代码：