CSS-文本，超链接，列表，背景

0 前言

       CSS是一种用来为HTML文档添加样式和布局的语言，它可以让网页的外观更加美观和多样化。在本文中，我们将介绍CSS如何设置文本的字体、颜色、大小、对齐方式、装饰等属性，如何使用伪类来改变超链接的状态和效果，如何使用列表样式来定制列表的标志和位置，以及如何使用背景样式来设置背景的颜色、图像、重复、位置、尺寸等属性。通过学习这些内容，你可以让你的网页更加丰富和有趣。

1 编辑网页文本

1.1 span标签

<span></span>能让某几个文字或者某段话凸显出来。（利用CSS）

<span class="a" id="a">九万</span>

1.2 字体样式

1）字体类型font-family

.a{
    font-family:"宋体";
}

2）字体大小font-size

.a{
    font-size:"10px";
}

3）字体风格font-style

.a{
    font-style:italic;
}

4）字体粗细font-weight

.a{
    font-weight:bold;
}

5）字体属性 风格-粗细-大小-类型（style-weight-size-family）

.a{
    font:italic bold 10px "宋体";
}

1.3 文本样式

1）文本颜色color 取值rgb（255，255，255），rgba（255，255，255，1），#FFFFFF

.a{
    color:#FF0000;
}

2）排版文本段落：
text-align水平对齐
text-indent首行缩进
line-height行高

.a{
    text-align:center;
    text-indent:100px;
    line-height:50px;
}

1.4 文本装饰

text-decoration属性规定添加到文本的修饰
下划线 underline
上划线 overline
删除线 line-through

.a{
    text-decoration:underline;
}

1.5 垂直对齐

vertical-align
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 使元素及其后代元素的底部与整行的底部对齐

.a{
    vertical-align:top;
}

1.6 文本阴影

text-shadow
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色

.a{
    text-shadow:2px 2px 1px red;
}

2 超链接伪类

：hover
定义：鼠标移到链接上的样式。

a:hover{
    background-color:green;
}

3 列表样式

list-style
对列表样式进行设置，例如list-style:none去除有序列表的编号或无序列表的圆圈。

li{
    list-style:none;
}

4 背景样式

4.1 背景颜色

background-color
设置背景的颜色，值为①#ff0000，②rgb（255，0，0）③red

.a{
    background-color:#ff0000;
}

4.2 背景图像

background-image
设置背景的图像，值为url（“图片路径”）

body{
    background-image:url("图片路径");
}

4.3 背景重复

background-repeat
设置背景的平铺，值为repeat，no-repeat,repeat-x,repeat-y，分别为水平+垂直方向平铺，不平铺，水平平铺，垂直平铺。

body{
    background-repeat:no-repeat;
}

4.4 背景定位

background-position
设置背景的位置，值为方向1 方向2，或只写一个，另一个默认为center。（还需设置background-attachment:fixed）

body{
    background-attachment:fixed;
    background-position:right center;
}