CSS3网页美化技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/yalu_123456/article/details/92801177

本文介绍了如何使用CSS来美化网页，包括为何使用CSS、span和div的区别、字体及文本样式设置、文本阴影、超链接伪类的应用、列表样式的定制、网页背景的控制以及CSS3的线性渐变。通过案例展示各种CSS属性的使用，提升网页的视觉效果和用户体验。

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

CSS美化网页

为什么使用CSS

有效的传递页面信息
使用CSS美化过的页面文本，漂亮，美观，可以吸引用户
可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
具有良好的用户体验

span 和 div

span标签的作用
能让某几个文字或者某个词语凸显出来
行内元素
udiv标签
u块级元素
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>

    <style>
        #dream{
            font-size: 30px;
            color: red;
            font-weight: bold;
        }
        span[class="abc"]{
            font-size: 24px;
            color: blue;
            font-weight: bold;
        }



    </style>


</head>
<body>


<p>享受西开教学服务</p>
<p>在<span>西开</span>学习 , <span id="dream">成就IT梦想</span></p>
<p>请选择 <span class="abc">西开</span>吧</p>



</body>
</html>

字体样式

在这里插入图片描述

文本样式

在这里插入图片描述
案例：
css代码：

#author{
    font-family: 楷体;
}

#time{
    font-style: italic;
}

/* text-indent文本首行缩进 */
.sj{
    text-indent: 2em;
}

h1{
    text-shadow: aqua -1px 1px 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="resources/css/Style2.css">

</head>
<body>


<!--
px  ->像素
em  ->字符
-->



<h1>公司简介</h1>

<p>发布人: <span id="author">阿里</span>  &nbsp; &nbsp; &nbsp; &nbsp;  时间: <span id="time">20119-01-01</span></p>

<p>阿里技术中心是一家集教育培训、人才服务、服务外包、企业定制为一体的综合性软件技术服务机构。</p>

<p class="sj">公司成立十年以来，全心全意致力于“Linux&C、C++开发工程师”、“Linux系统运维工程师及运维研发工程师”、“Web前端开发工程师”、“Java开发工程师”的培训，以及C++开发、云计算、虚拟化、python自动化运维等综合性企业级职业技能培训。公司持续深耕主校区，并在各个大学开设分校区与咨询网点，借助高校区位优势，专注于Linux技术的培训，为大学毕业生开辟更为广泛的就业途径。
</p>　　

<p class="sj">公司拥有一支专业进取的教学师资团队，具有丰富的行业经验，参加过众多政府重大电子信息工程项目的研发。公司还具备体系完整并不断更新的独家课程体系和配套的题库考试系统，为学员学习保驾护航。经过十年的教育培训历程，公司已为腾讯、阿里、百度、京东、搜狐、新浪等一线互联网企业输送技术精英2000余人，得到用人单位和结业学员的一致好评。
</p>
　　

</body>
</html>

文本阴影

text-shadow属性在CSS2.0中出现，但迟迟未被各大浏览器所支持，因此在CSS2.1中被废弃，如今在CSS3中得到了各大浏览器的支持

超链接伪类

在这里插入图片描述
案例：
CSS代码：


a:visited{
    color: #ff5f5d;
}


/*产生事件的伪类在同一个元素只能绑定一个*/
a:active{
    color: cyan;
}

/*:hover鼠标悬停样式*/
a:hover{
    color: yellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="resources/css/Style3.css">
</head>
<body>


<a href="https://www.baidu.com" target="_blank">点击进入...</a>


</body>
</html>

列表样式

list-style-type
list-style-image
list-style-position
list-style

案例：
CSS代码：

ul li{
    /*none为空*/
    list-style-type: circle;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="resources/css/Style4.css">

</head>
<body>

<ul>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
    <li>Linux</li>
    <li>Bash</li>
</ul>



</body>
</html>

网页背景

背景颜色
background-color
背景图片
background-image
背景定位
background-position属性
背景重复方式
background-repeat
简写
background
background:#C00 url(…/image/kuangshen.jpg) 205px 10px no-repeat;
案例：
Css代码：

body{
    background-image: url("../../resources/image/1.png");
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="resources/css/Style5.css">
</head>
<body>




</body>
</html>

背景尺寸

设计师如何对背景图片的大小进行控制呢？
背景尺寸： background-size

CSS3渐变

线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

线性渐变

语法
u兼容Webkit内核的浏览器

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            /*  https://webgradients.com/  */
            height: 1000px;
            background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
            background-repeat: no-repeat;
        }
    </style>

</head>
<body>



</body>
</html>