CSS文本
CSS文本属性可以定义文本外观，通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进等等。
常用的文本属性
| 属性 | 描述 |
| color | 文本颜色 |
| direction | 文本方向 |
| line-height | 行高 |
| letter-spacing | 字符间距 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素文本的首行 |
| text-transform | 元素中的字母大小写 |
| white-space | 规定段落中的文本不进行换行 |
| word-spacing | 字间距 |
color
用来改变颜色的CSS样式
p {
color: #6777E2;
}
direction
用来改变文字方向，可以改成想古代一样，从右往左读。
body{
/*修改文本方向*/
/*rtl是从右到做，r是right，t是to，l是left*/
direction: rtl;
}
line-height
用来改变段落的行距
p {
/*修改行距*/
line-height: 100px
}
text-align
这个是对齐方式
p{
/*文本对齐*/
/*text-align: left; 是左对齐*/
/*text-align: right; 是右对齐*/
/*居中对齐*/
text-align: center;
}
text-decoration
这个可以修饰元素，主要是加横线，其中比较有用的是可以去掉<a>标签下方的横线
h2 {
/*在文字上方加横线*/
text-decoration: overline;
}
h3{
/*在文字上加横线*/
text-decoration: line-through;
}
h5{
/*在文字下加横线*/
text-decoration: underline;
}
a {
/*去掉a属性的横线*/
text-decoration: none;
}
text-indent
可以定义文字缩进多少像素，通常用来首行缩进
p {
/*<p>标签缩进50像素*/
text-indent: 50px;
}
text-transform
文字大小写
/*所有英文大写*/
h2 {
text-transform:uppercase
} /*所有英文小写*/
h3 {
text-transform:capitalize
} /*所有英文首字母大写*/
p {
text-transform:lowercase
}
white-space
这个可以是标签中的文本不换行
/*p标签中的文本不进行换行*/
p{
white-space: nowrap
}
word-spacing
这个属性与text-indent不同，text-decoration是将每个字符的间距调整，而word-spacing却是针对每个单词的间距
/*英文单词间距*/
p {
word-spacing: 100px;
}
CSS字体
CSS字体属性定义文本的字体系列、大小、加粗、风格和变形
| 属性 | 描述 |
| font-family | 设置字体系列 |
| font-size | 设置字体的尺寸 |
| font-style | 设置字体的风格 |
| font-variant | 以小型大写字体或正常字体显示文本 |
| font-weight | 设置字体的粗细 |
font-size
设置文本的字体大小
p {
/*将字体大小设置为20像素*/
font-size: 20px;
}
font-family
p {
/*设置字体*/
font-family: consolas;
}
自定义字体
以前设置字体是需要使用“安全字体”，“安全字体”就是为了保证用户所在的环境中，使用的浏览器一定会支持一些字体，那些就是“安全字体”，但是现在CSS3中，可以将自己设置的字体保存起来，在用户访问了你的网页，它会加载CSS样式，同时就把你设置的字体下载到缓存里面了。然后可以直接调用那些字体，显示到网页上。非常方便。
@font-face{
/*设置自己定义字体的名字*/
font-family: myfont;
src: url(/*这里是字体的路径*/);
}
div{
/*调用自己定义的字体名字*/
font-family: myfont;
}
CSS链接
CSS的链接就是<a>标签了。其实<a>标签页可以设置很多样式的。
下面就是CSS链接的四种状态：
| 属性 | 描述 |
| a:link | 普通的、未被访问的链接 |
| a:visited | 用户已访问的连接 |
| a:hover | 鼠标指针位于连接的上方 |
| a:active | 连接被点击的时刻 |
/*在未访问链接的情况下，修改链接为棕色*/
a:link{
color: #804040;
/*将链接的下划线去掉*/
text-decoration: none; /*设置字体为50px，方便查看*/
font-size: 50px;
} /*在用户已经访问链接的情况下，修改链接为橙色*/
a:visited{
color: #FF8000;
} /*在鼠标悬停在链接上时，修改链接为绿色*/
a:hover{
color: green;
} /*在鼠标点击链接时，链接为蓝色*/
a:active{
color: #0080FF
}
总结：
这次学了文本格式，字体样式和自定义字体，还有链接的4种状态。
在使用自定义字体时需要使用@font-face函数来创建自己字体的名字，和调用自己字体的路径