CSS语法基础--网页美化_ul美化-CSDN博客

本文链接：https://blog.csdn.net/I_am_fine_/article/details/118758429

本文介绍了CSS语法在网页美化中的应用，包括字体样式、文本样式、超链接伪类、阴影渐变、列表样式与背景的设置。通过实例演示了如何使用CSS提升网页的视觉效果，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页美化

概述: 网页的美化主要是对网页的字体样式，文本样式以及背景图等等进行美化，能够有效的传递网页信息和提高用户体验

div标签: div标签是一个无属性标签，主要是起到切块作用，把一片区域单独分割开来进行美化

span标签: span 标签主要是对一些重要的字体进行标记，然后就可以在标签里面设置属性，根据属性来美化

1 字体样式

常用属性：

属性名	解释	常用值
font-family	字体样式，如：斜体等等	Arial(楷体)，bold(黑体)
font-size	字体大小	XXpx
font-weight	字体粗细	bolder，XXpx
color	字体颜色	red，RGB值

例子：

css代码：

body {
    font-family: 楷体;
    font-size: 20px;
    font-weight: bolder;
}
.first{
    color: aqua;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p>
    <h1>爱在秋天</h1>
<p class="first"> 最富有诗意的季节莫过于秋季了，
    多少文人墨客为秋季写了一曲曲的赞歌，
    他们极力渲染秋的美景，毫不吝惜笔墨，
    可见，秋是多么的迷人了。
</p>
<p class="second">
    秋最会分配自己的感情，
    无论走到那里，都会使人感受到它的爱抚。
    秋最会挑选礼物，它送给每一个人的礼物都各具特色，
    又用最美丽的爱装饰起来。
</p>
<p class="third">
    秋是那样可爱，使人无法不为之心动，
    我禁不住秋的召唤，去收集那无处不在的爱意。
</p>
</body>
</html>

运行结果：
在这里插入图片描述

2 文本样式

常用属性：

属性名	解释	常用值
text-align	文本对齐方式	left，center，right
text-indent	首行缩进	xxem
line-height	行高(和块的值相同可以实现居中)	xxpx
text-decoration	下划线装饰	underline，overline
vertical-align	文本图片水平对齐	middle

例子：

css代码：

body {
    font-family: 楷体;
    font-size: 20px;
    font-weight: bolder;
}
h1{
    text-decoration: underline;
    text-align: center;
}
.first{
    text-indent: 2em;
}
.second{
    text-indent: 2em;
}
.third{
    text-indent: 2em;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p>
    <h1>爱在秋天</h1>
<p class="first"> 最富有诗意的季节莫过于秋季了，
    多少文人墨客为秋季写了一曲曲的赞歌，
    他们极力渲染秋的美景，毫不吝惜笔墨，
    可见，秋是多么的迷人了。
</p>
<p class="second">
    秋最会分配自己的感情，
    无论走到那里，都会使人感受到它的爱抚。
    秋最会挑选礼物，它送给每一个人的礼物都各具特色，
    又用最美丽的爱装饰起来。
</p>
<p class="third">
    秋是那样可爱，使人无法不为之心动，
    我禁不住秋的召唤，去收集那无处不在的爱意。
</p>
</body>
</html>

运行结果：
在这里插入图片描述

3 超链接伪类与阴影渐变

3.1 超链接伪类

概述: 超链接伪类一般用来做简单的动态效果，如：点击字体变色等等

常用伪类：

属性名	解释
a:link(color:#000000)	未访问时显示的颜色
a:visited(color:#000000)	已访问时显示的颜色
a:hover(color:#000000)	当鼠标悬停时显示的颜色
a:active(color:#000000)	被选中时显示的颜色

css代码：

a{
    color: black;
    text-decoration: none;
}
a:hover{
    color: aqua;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<a href="#">
    <img src="images/1.jpg"/>
</a>
<p>
    <a href="#" class="name">意境：山水田园画</a>
</p>
<p>
    <a href="#">作者：百度</a>
</p>
<p>
    <a href="#">起拍价：n元</a>
</p>
</body>
</html>

运行结果：
在这里插入图片描述

3.2 阴影

概述: 使选定的属性的字体进行渐变

格式：

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
text-shadow: aqua 10px 20px 2px;

图示：
在这里插入图片描述

3.3 渐变

工具: https://www.grabient.com

用法： 在工具中调好样式，将css代码复制即可

4 列表样式与背景

列表样式: 列表样式主要是用来对ul标签进行美化的一种样式，现实中经常用来做商品的导航等等

背景: 主要包含背景色以及背景图，注意：在背景图的导入中，默认方式为平铺方式，即照片填满整个选中的区域

例子： 仿淘宝商品分类栏