html5 中常用的文本标签![在这里插入图片描述]()
css的字体样式属性用于定义文本的字体系列、大小、风格等、***css常用自体样式属性***如下表：
font 属性用于对字体样式进行综合设置，字体合写语法如下：
css3@font-face规则
—font-face是css3 的新特性，用于定义服务器字体。通过@font-face规则，开发者便可以使用用户计算机未安装的字体。
—@font-face 规则的语法格式如下：
**YourWebFontName:**自定义的字体名称，最好使用下载的默认字体（x我爱在回来的字体叫什么字体，这里就填什么字体名）
source：此值指的是自定义的字体的存放路径，可以是相对路径，也可以是绝对路径。
**format:**此值指的是自定义的字体格式，主要用来帮助浏览器识别，其值中要有一下几种类型：truetype、opentype、truetype-aat、embedded-opentype、svg等；
css文本外观属性
—css的文本外观属性用于设计颜色、字间距、字母间距、水平对齐、文本装饰、阴影等。
1.color (文本颜色）：
- red,green ,blue :预定义的颜色值
- ff0000,#ff6600,@29d672:十六进制颜色值，也是最常用定义颜色的方式
- rgba(255,0,0,0.5): r:红色值 ；g :绿色值; b:蓝色值, rgb的取值可以试试正整数也可以是百分数：a:透明度，取值0~1之间。
2.letter-spacing：字间距用于定义字符与字符间的空白
- normal:normal为默认值
- 0.5em
- 30px
-注：其属性值可为不同单位的数值，允许使用负值
3.word-spacing（单词间距） 用于增加或减少单词见得空白（即字间隔）
- normal:normal为默认值
- 0.5em
- 30px
-注：其属性值可为不同单位的数值，允许使用负值
4.line-height（行间距） 用于定义行与行之间的距离
- 5px
- 3em
- 150%
- 属性值的单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素
5.text-transform(英文文本转换)
- none:不转换（默认值）
- capitalize:首字母大写
- uppercase：全部字符转换为大写
- lowercase:全部字符转换为小写
6.text-decoration(文本装饰)
- none:没有装饰（默认值）
- underline:设置文本下划线
- overline：设置文本上划线
- line-through:设置文本删除线
7.text-align（水平对齐方式）
- left：左对齐（默认值）
- right：右对齐
- center：居中对齐
8.text-indent(首行缩进)
- 2em
- 50px
- 30%
- 用于设置首行文本缩进，其属性值可谓不同单位的数值、em字符宽度的倍数、或相对于浏览器宽口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
9.white-space(空白符处理）
- normal:常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行
- pre 预格式化，按文档的书写格式保留空格、空行原样显示。
- nowrap:合并所有空白符为一个空白符，强制文本不能换行，除非遇到换行标记
.内容超出元素的边界也不换行。若超出浏览器的页面则会自动增加滚动条。
10.text-overflow(标示对象溢出文本）
- clip:修剪溢出文本，不显示省略标记“…”
- ellipsis：用省略标记"…"标示被修剪文本，省略标记插入的位置是最后一个字符。需要结合overflow:hidden使用
text-shadow为文本添加阴影效果
css层叠性、继承性和重要性
CSS层叠性
就是在HTML文件中对于同一个标签元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用，示例代码如下:
css的继承性
其实CSS中的某些样式是具有继承性的，它允许样式不仅应用于某个特定HTML标签，而且应用于其后代。CSS继承性的示例代码如下所示:
<style>
p{color:pink;}
</style>
<p>小红是一个<span>胆小如 鼠</span>的女孩。</p>
p标签设置为粉色，“胆小如鼠”四个字也为粉色的原因是
标签的颜色设置被它的后代标签继承了。
css重要性
在某个样式设置后面添加！important 代表该样式具有最高权值，！imortant 要写在分号“；”的前面。
示例代码：
<style>
p{color:red !important;}
p{color:green;}
</style>
<p>小红是一个胆小如虎的女孩</p>
注：“小红是一个胆小如虎的女孩”应显示为红色
css优先级
1.样式优先级
-
CSS优先级即是指CSS样式在浏览器中被解析的权重不同。
-
多重样式( Multiple Styles) :如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级如下所示:
-
![在这里插入图片描述]()
2.选择器的优先级 -
css选择器的优先级如下所示。
-
![在这里插入图片描述]()
web字体图标
应用步骤：
1.在页面引入font-awesome.min.css文件
2.为页面元素添加相应的class，例如“”,会在页面显示如下图所示的图标
3.每个图标都有对应的class，可到 https://fontawesome.dashgame.com/ 查看相关的图标
链接属性
- 在实际开发中连接有四种状态，具体如下：
- 1.a: link:超链接的初始状态。
- 2.a:hover：把鼠标放上去时悬停的状态。
- 3.a:active：鼠标点击时
- 4.a:visited：是访问过后的状态
改变超链接的示例代码如下：
/*对全站有链接的文字颜色样式为color:#33;并无下划线*/
a{color:#333;text-decoration:none; }
/*对鼠标放到超链接上文字颜色样式变为color:#CC3300 并文字链接加下划线text decoration:underline;*/
a:hover {color:#CC3300;text-decoration:underline;}