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>
分类:
前端
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理