CSS（二）字体样式、文本样式、点击样式
CSS（二）字体样式、文本样式、点击样式
字体样式
约定俗成的标签
-
一般在span里面写文字（通过css修改字体样式）
-
<span>在里面写文字</span>
字体设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字</title>
<!--
font-family:字体
font-family:"在里面的英文字体",在里面的中文字体（可以同时设置中文和英文字体）
color:字体颜色
font-weight:字体粗细
font-size:字体大小
-->
<style>
span[class="01"]{
font-family: 楷体;
color: blue;
font-weight: bold;
font-size: 50px;
}
</style>
</head>
<body>
<span class="01">
史小鹏
</span>
</body>
</html>
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字</title>
<!--
text-align:文本位置
text-align: center;文本居中
line-height:行高(和块的高度一致就可以上下居中)
margin-方向:内边距
下划线：text-decoration: underline
中划线：text-decoration: line-through
上划线：text-decoration: overline
-->
<style>
span[class="01"]{
text-align: center;
line-height:10px ;
margin: 10px;
margin-top:2px ;
}
span[class="02"]{
text-decoration: underline;
}
span[class="03"]{
text-decoration: line-through;
}
span[class="04"]{
text-decoration: overline;
}
</style>
</head>
<body>
<div>
<span class="01">
史小鹏
</span>
<span class="02">张三</span>
<span class="03">张三</span>
<span class="04">张三</span>
</div>
</body>
</html>
点击状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击</title>
<style>
a[class="a01"]{
color: black;
/*去掉下划线*/
text-decoration: none;
}
/*鼠标悬浮的状态*/
a:hover{
color: blue;
}
/*鼠标按住未释放的状态*/
a:active{
color: yellow;
}
</style>
</head>
<body>
<a href="#" class="a01">
<span class="s01">史小鹏11111</span>
</a>
</body>
</html>
