文章目录
- 字体样式
- 文本样式
- 颜色和背景样式
- 对齐方式
- 下划线、上划线、删除线
- 设置行高
- 列表样式
- 背景样式
- 背景颜色
- 背景图片
- 背景重复
- 背景大小
- 鼠标样式
- 伪类样式
- 设置透明度
字体样式
所有样式都写在<style>标签内，里面加选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p{
font-family: "华文行楷";
font-size: 50px;
font-style: oblique;
font-weight: bolder;
font:italic bold 30px "宋体";
}
</style>
</head>
<body>
<p>字体样式</p>
</body>
</html>
- font-family：字体类型，建议用双引号括起来
- font-size：字体大小，常用单位：px像素，默认大小：18px
- font-style：字体风格，italic、oblique斜体
- font-weight：字体粗细，在100-900取值，400默认正常，bold加粗、bolder更粗
- font：四合一，（风格、粗细、大小、类型）顺序不能变
文本样式
以下是一些常见的文本样式，可以在网页上使用 CSS 实现：
所有样式都写在<style>标签内，里面加选择器
颜色和背景样式
color:文本颜色
background-color背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p{
color: aqua;
background-color: greenyellow;
font-size: 38px;
}
</style>
</head>
<body>
<p>这是一个文本样式的示例</p>
</body>
</html>
对齐方式
text-alogn:文本的水平方向的对齐方式。
left左默认，center居中，right右，只针对独占一行显示的标记有效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.align-style {
text-align: center;
}
</style>
</head>
<body>
<div class="align-style">
<p>这是一个文本样式的示例</p>
<p>这是一个文本样式的示例</p>
</div>
</body>
</html>
解释：在以上 HTML 代码中，使用了一个类名为 align-style 的 <div> 元素来包含两个 <p> 元素。在 CSS 中，对该类名使用了属性 text-align: center; 来使 <div> 中的文本元素居中对齐。
下划线、上划线、删除线
text-decoration：文本装饰。underline下划线，overline上划线，line-through删除线
下面结合具体的 HTML 和 CSS 代码（style）来说明。
underline下划线
<p class="underline-style">这是一个带有下划线的段落</p>
.underline-style {
text-decoration: underline;
}
解释：以上 HTML 代码中，使用了一个类名为 underline-style 的 <p> 元素来展示文本样式的下划线效果。而在 CSS 中，对该类名使用了属性 text-decoration: underline; 来为文本元素添加下划线。
overline上划线
<p class="overline-style">这是一个带有上划线的段落</p>
.overline-style {
text-decoration: overline;
}
解释：以上 HTML 代码中，使用了一个类名为 overline-style 的 <p> 元素来展示文本样式的上划线效果。而在 CSS 中，对该类名使用了属性 text-decoration: overline; 来为文本元素添加上划线。
line-through删除线
<p class="line-through-style">这是一个带有删除线的段落</p>
.line-through-style {
text-decoration: line-through;
}
解释：以上 HTML 代码中，使用了一个类名为 line-through-style 的 <p> 元素来展示文本样式的删除线效果。而在 CSS 中，对该类名使用了属性 text-decoration: line-through; 来为文本元素添加删除线。
注意：
underline和overline只有单一的线条，而line-through具有两条线。- 可以使用
text-decoration-color属性来为文本样式下划线、上划线、删除线添加颜色。
示例代码：
<p class="text-style" style="color: red">
这是一段红色的文本，同时有着下划线、上划线和删除线。
</p>
<p class="text-style" style="text-decoration-line: underline overline line-through; text-decoration-color: blue;">
这是一段蓝色的文本，同时有着下划线、上划线和删除线。
</p>
.text-style {
text-decoration-thickness: 3px;
text-decoration-style: solid;
}
以上代码中，使用了内敛样式的方式来定义文本样式。在 CSS 中，使用了属性 text-decoration-thickness: 3px; 来使三种样式均为 3 像素粗的线条；同时使用 text-decoration-style: solid; 属性使线条效果为实心。可以通过更改属性值来调整线条的粗细和样式。
设置行高
①、line-height ：设置文本的行高
line-height 属性用于设置行高，即每行文本元素的高度，默认20px
下面结合具体的 CSS 和 HTML 代码来说明。
常用的 line-height 属性值有：
- 数字值：表示行高与当前元素字号的倍数，如
line-height: 1.5;表示行高为字号的 1.5 倍。 - 长度值：如
line-height: 30px;表示行高为 30 像素。 - 百分比值：如
line-height: 150%;表示行高为字号的 150%，即 1.5 倍。
除了上述常用的属性值外，还可以使用 normal、initial、inherit、unset 等值。
下面是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p{
line-height: 40px;
}
</style>
</head>
<body>
<p>这是一段文本<br>二段文本</p>
</body>
</html>
输出效果：
②、vertical-align：设置在图片标记上，使设置在图片两侧文本内容的垂直对齐方式
top：顶部
middle：中间
bottom：底部（默认）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
img{
width: 150px;
height: 150px;
vertical-align: top;
}
</style>
</head>
<body>
微信图标<img src="../图片/微信.jpg">
<!-- 上级目录 -->
</body>
</html>
输出效果：
列表样式
list-style: none;：去掉无序和有序列表的默认样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
ul{
/* list-style: none; */
/* 去掉无序和有序列表的默认样式 */
list-style-type: square;
/* 方块符号 */
}
ol {
list-style-type: lower-roman; /* 小写罗马数字 */
}
</style>
</head>
<body>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
</body>
</html>
输出效果：
背景样式
background-color：背景颜色
background-image：背景图片
background-repeat：背景重复
background-size：背景尺寸
其实背景样式在前面有提到过，这里详细说一下
CSS 提供了多种背景样式，可以为 HTML 元素设置背景颜色、背景图片、背景位置、重复方式等。
背景颜色
可以使用 background-color 属性为元素设置背景颜色，如下例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
background-color: yellow;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<p>HELLO WORLD!</p>
</div>
</body>
</html>
背景图片
可以使用 background-image 属性为元素设置背景图片，如下例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
background-image: url(./th.jpg);
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div>
<p>HELLO WORLD!</p>
</div>
</body>
</html>
背景重复
默认情况下，背景图片将水平和垂直重复以填充整个元素区域。可以使用 background-repeat 属性来设置背景的重复方式
repeat-x：水平方向重复
repeat-y：垂直方向重复
no-repeat：不重复
div {
background-repeat: no-repeat;
}
背景大小
可以使用 background-size 属性为元素设置背景图片的大小
div {
background-size: cover;
/* background-size: 100% 100%; */
}
cover 值表示背景图片会被缩放以填充整个元素区域，可能会被裁剪。还可以使用像素值或百分比值来设置背景大小
div {
background-size: 50% 50%;
}
这将使背景图片的大小为元素宽度和高度的 50%。
鼠标样式
通常用在按钮上，鼠标样式：cursor
pointer手型，not-allowed禁用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
button{
cursor: pointer;
}
</style>
</head>
<body>
<button>你好世界！</button>
</body>
</html>
伪类样式
CSS 伪类是在选择器后面添加的关键字，用于选择元素的某个特定状态或行为。常见的伪类有 :hover、:active、:focus、:checked 等。
下面以 :hover 这个伪类为例，结合 CSS 和 HTML 代码说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
a:link{
/* 超链接未被访问时生效的样式 */
color: red;
}
a:visited{
/* 超链接访问过生效的样式 */
color: darkgray;
}
a:hover{
/* 鼠标悬停在超链接时生效的样式 */
color: powderblue;
font-size: 25px;
}
a:active{
/* 超链接被激活时生效的样式，鼠标单击时未释放 */
color:aqua;
}
span:hover{
background-color: red;
}
button:hover {
background-color: #ccc;
color: white;
}
</style>
</head>
<body>
<a href="https://rej177.blog.csdn.net/article/details/131258745">二哈喇子</a><br>
<span>我的背景色变红</span><br>
<button>悬停在我身上</button>
</body>
</html>
设置透明度
可以实现遮盖层效果
opactiy：透明度，值是0-1之间的小数，值越小越透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
background-color: gray;
/* opactiy：透明度，值是0-1之间的小数，值越小越透明*/
opacity: 0.2;
}
</style>
</head>
<body>
<div>
<p>葫芦娃救爷爷</p>
<p>一个比一个能送</p>
</div>
</body>
</html>
