本篇开始将会对于CSS的样式中的各种属性进行讲解：
其中涉及到了字体属性，文本属性各种标签以及标签自带的属性值。
目录
其中涉及到了字体属性，文本属性和背景属性的各种标签以及标签自带的属性值。
一、字体属性（font）：定义字体种类，加粗，大小，文字样式等
4、font-family：设置字体的系列，一整套网页中只推荐出现一种字体
5、font-variant：设置小型大写字母（只针对英文）
5、text-transform：文本转换，转换为大小写（针对英文）
8、letter-spacing：设置字符间距（中文一字一间隔，英文一字母一间隔）
9、word-spacing：设置单词间距（根据空格判断单词）
一、字体属性（font）：定义字体种类，加粗，大小，文字样式等
1、font-size：设置字体的大小
| px | 通过设置数值来定义字体大小，默认大小为16px（绝对单位） |
| % | 相对于父级元素宽度的百分比（相对单位） |
| rem | 相对于根元素（html）的字体大小的倍数（相对单位） |
| em | 相对于父元素的字体大小的倍数（相对单位） |
| 英文提示 | larger smaller xx-small x-small small medium large x-large xx-large （较少使用） |
{
font-size：100px；
font-size：50%；
font-size：2rem；
font-size：3em；
font-size：larger / smaller/ xx-small /x-small /small/ medium /large/ x-large /xx-large；
}通过上述代码可以得知：
px属性：作为绝对单位，在定义完成后即显示固定大小；
%属性：在没有父级窗口和div盒模型的情况下，即浏览器的默认字体大小的百分比倍数，浏览器的默认字体大小为16px；
rem属性：在html中，<html>标签作为根标签，而其根元素即html，该属性是相对于html的字体大小的倍数；（可以在样式中设置html的默认字体大小来改变1rem的值，默认为16px）
em属性：相对于父级元素的字体大小，和 %属性 相似；
2、font-weight：设置字体的粗细
| normal | 默认值（400） |
| bold | （<b>标签的全称）定义粗体字符（700） |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100-900 | 数字定义粗细 |
3、font-style：设置字体的样式
| normal | 默认，标准样式 |
| italic | 浏览器会显示一个在所含有的字体库中可查询到的字体的斜体样式（斜体字） |
| oblique | 浏览器会显示一个倾斜的字体样式，针对没有斜体样式的文字做倾斜处理 |
在font-style中，当需要定义一个字符的倾斜，但在编译器的字符库中无法找到该字符对应的斜体字符时，使用oblique即可做到和italic的显示效果。
4、font-family：设置字体的系列，一整套网页中只推荐出现一种字体
famil-name：字体名称
在该标签内可以使用拼音来输入部分中文字体格式。
（注：“回退系统” 当浏览器不支持第一种字体时，会尝试下一种字体）
5、font-variant：设置小型大写字母（只针对英文）
normal:默认，标准字符；
small-caps：在浏览器显示小型大写字母；
（注：该标签用于将小写字母转换为大写的小型字母，对于原本的大写字母无意义）
6、font的简便样式
{
font：font-style font-variant font-weight font-size/line-heignt font-family；
}在font标签中按照 ：斜体 > 小型大写 > 字体粗细 > 字体大小/字体行高 > 字体类别 的顺序进行编写，其中的 font-size 和 font-family 必须有，其他的当属于默认值时可以省略。
二、文本属性（text）
1、color属性：设置文本颜色
颜色名：red，yellow，blue....
十六进制：#000000 ， #ffffff ，通过十六进制来表示256色
rgb（）：rgb（红色，绿色，蓝色），在括号中填入0-255,
rgba（）：rgb（红色，绿色，蓝色，不透明度），a代表不透明度，1为100%不透明，0为全透明。
2、text-align：定义文本的水平对齐方式
left：默认，左对齐
center：水平居中
right：右对齐
justify：两端对齐（该对齐方式适用于多行文本内容，将平均分配每个字符之间的空白间距，单行文本不生效）
3、text-indent：定义文本的首行缩进
px：在浏览器中默认字符宽度为16px，可直接定义缩进的长度。
%：基于父级元素的宽的百分比，即在没有子窗口和div盒模型的情况下，相对于该浏览器的默认宽度的百分比长度作为缩进长度。
rem：默认浏览器字符宽度为16px，该元素则根据根元素的宽度的倍数来进行缩进，可以在style中设置默认字符宽度。
em：相对于父元素的字符大小的倍数来进行缩进
4、text-decoration：文本修饰
| none | 默认，没有修饰 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 穿过文本的一条线 |
| blink | 定义闪烁的文本 |
以下部分理解即可
text-decoration-line
text-decoration-color
text-decoration-style：
solid：默认值，单实线
double：双实线
dotted：点状线
dashed：虚线
wavy：波浪线
5、text-transform：文本转换，转换为大小写（针对英文）
none：默认，不转换
uppercase：转换为大写字母
lowercase：转换为小写字母
capitalize：首字母大写
6、direction：设置文本方向
ltr：left to right 从左向右（默认值）
rtl：right to left 从右向左
7、unicode-bidi：返回的文本是否重写
bidi-override：创建一个附加的嵌入层面，重新排序取决于direction的属性
{
direction: rtl;
unicode-bidi: bidi-override;
}
8、letter-spacing：设置字符间距（中文一字一间隔，英文一字母一间隔）
normal：默认，没有额外的间距
也可以使用px，rem，em进行设置
9、word-spacing：设置单词间距（根据空格判断单词）
normal：默认
也可以使用px，rem，em进行设置
10、line-height：设置文本的行高，行间距
px：设置固定的行间距
使用%，rem，em也可以进行设置
同时该文本可以使用数字进行设置，大小为当前字体大小的倍数
11、vertical-align：设置元素的垂直对齐方式
| baseline | （默认） 放在父元素的基线上 |
| top | 与行内最高元素的顶端对齐 |
| middle | 父元素的中部对齐 |
| bottom | 与整行的底部对齐 |
| sub | 对齐文本的下标 |
| super | 对齐文本的上标 |
| text-top | 父元素字体的顶端 |
| text-bottom | 父元素字体的底端 |
| px | 将当前元素升高或降低，可以有负数 |
12、white-space：设置元素中空白的处理方式
normal：（默认值）空白部分被浏览器忽略
pre：空白会被浏览器保留
nowrap：文本不换行 遇到br会换行
pre-wrap：保留空白字符，但是正常进行换行
pre-line：合并空白字符，但是保留换行符
13、text-shadow：设置文本阴影（该内容为css3）
h-shadow：水平阴影的位置，使用px来定义属性值，允许负值（必须设定）
v-shadow：垂直阴影的位置，使用px来定义属性值，允许负值（必须设定）
blur：模糊范围
color：阴影的颜色
扫一扫
69万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
