文章目录
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;
}