CSS学习总结（3）--- 使用CSS美化网页_css修饰网页图-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44823091/article/details/93137457

本文总结了使用CSS美化网页的各种技巧，包括span和div标签的应用，字体与文本样式的设定，文本阴影，超链接伪类的利用，列表样式的定制，网页背景、背景尺寸的调整以及渐变效果的创建。通过这些方法，可以提升网页的视觉吸引力，突出主题内容，提供优秀的用户体验。

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

CSS学习总结（3）— 使用CSS美化网页

使用CSS美化网页的原因？

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

span标签：

行内元素

作用：可以让某些文字或者某个词语凸显出来。

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

<body>
	<p><span id="future">未来已来</span>，每个人都要做好迎接 5G时代的准备</p>
	<p><span>5G</span>会让我们做出什么 <span  id="dream">改变？</span> </p>
  	<p>第一个改变，是手机的消失 </p>
   	<p>第二个改变，是<span class="abc">无人驾驶的普及。</span></p>
	<p>第三个改变，是AR社交（Augmented Reality，增强现实）的普及。</p>
	<p>第四个改变，是<span class="abc">人工智能</span>搜索的到来。</p>
	<p>第五个改变，是物联网的真正普及。</p>
</body>

效果如图：
在这里插入图片描述

div标签：

块级元素
作用：可以控制元素在网页上的位置

（此处不做详细说明和举例）

字体样式：

属性名	含义	举例
font-family	设置字体类型	font-family:“隶书”
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px “宋体”;

文本样式：

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对其方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;
vertical-align	设置文本对齐	vwetical-align:middle;

文本阴影：

语法：

 text-shadow:color x-offset y-offset blur-radius;

说明：

color: 阴影颜色，

x-offset：X轴位移，用来指定阴影水平位移量，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；

y-offset： Y轴位移，用来指定阴影垂直位移量，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；

blur-radius：阴影模糊半径，是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0。

举例：

<style>
	h1{
   	text-shadow: #86ff3c 5px 10px 5px;
	}

	.a{
   	text-shadow: aqua -5px -10px 20px;
    }
</style>

<body>
	<h1 >未来已来</h1>
	<p class="a">css:txet-shadow</p>
 </body>

效果图：
在这里插入图片描述

超链接伪类：

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited{color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active{color:#999;}

设置伪类的顺序为：

a:link -> a:visited -> a:hover -> a:active

举例：a:hover

<link rel="stylesheet" href="css/style3.css">

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

<style>
   /*style3.css文件*/
	a:hover{
   	 color: #ff623b;
	}
</style>

效果图：
鼠标未访问状态
鼠标未悬浮状态
鼠标悬浮状态

列表样式：

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

举例：list-style-type

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

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

效果图：
在这里插入图片描述

网页背景：

背景属性	含义
background-color	背景颜色
background-image	背景图片
background-position	背景定位
background-repeat	背景重复方式
background：color image position repeat	简写

背景尺寸：

background-size：

属性值	含义
auto	默认值，使用背景图片保持原样
percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素的宽度来计算的
cover	整个背景图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适合所定义背景的区域

渐变：

线性渐变：颜色沿着一条直线过度，从左到右，从上到下等。
- 语法：linear-gradient（position，color1，color2，...）
- 说明：position：渐变方向；color1：第一种颜色
径向渐变：圆形或椭圆形渐变，颜色不在沿着一条直线变化，而是从一个起点朝向所有方向混合。
Gradient：浏览器兼容性。
渐变的兼容：
- IE浏览器是Trident内核，加前缀-ms-。
- Chrome、Safari浏览器是Webkit内核，加前缀-webkit-。
- Opera浏览器是Blink内核，加前缀-o-。
- Firefox浏览器是Mozilla内核，加前缀-moz-。
如兼容Webkit内核的浏览器：-webkit-linear-gradent(position,color1,color2,…)

案例：

<style>
    body{
         height: 200px;
         width: 200px;
         background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
         background-repeat: no-repeat;
     }
</style>