CSS 美化网页元素

文章目录

1.为什么要美化网页元素
2.span标签
3.字体样式
4.文本样式
- 4.1、颜色
- 4.2、文本对齐的方式
- 4.3、首行缩进
- 4.4、行高
- 4.5、装饰
5.超链接伪类以及文本阴影
6.列表
7.背景

1.为什么要美化网页元素

1.有效的传递页面信息

2.美化网页，页面漂亮才能吸引客户

3.凸显页面的主题

4.提高用户的体验

2.span标签

重点要突出的文字，用span标签括起来

<span id="first">标题</span>

3.字体样式

font-family:字体种类
font-size:字体大小
font-weight:字体粗细
color:字体颜色
font-weight:bolder;也可以填px，但不能超过900,相当于bloder
常用写法：

 font:oblique bloder 12px "楷体"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#first{color: darkorange;font-size: 100px;}body{font-family: 楷体;font-size: larger;font-weight: bolder;}</style>
</head>
<body>
百度<span id="first">标题</span>
<p>百度（Baidu）是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。
</p>
<p class="first">
“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，
抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。
</p>
</body>
</html>

4.文本样式

4.1、颜色

color：颜色
rgb red,green,blue 0~f
rgba (0-255,0-255,0-255,0~100%)

 <style>.second {color: #00ff00;}.first {color: rgba(255,0,0,50%);}</style>

4.2、文本对齐的方式

text-align: center;文本对齐方式居中

4.3、首行缩进

text-indent: 2em;首行缩进两个字符

4.4、行高

line-height:行高
注意：行高和块的高度一致就可以文字上下居中

         /*图片和文字相水平需要参照物*/<style>img,span{vertical-align: middle;}</style><p id="c4"><img src="1.png" alt=""><span>sadsadsa</span>
</p>

4.5、装饰

下划线
text-decoration: underline;
中划线
text-decoration: line-through;
上划线
text-decoration: overline;
去下划线
text-decoration: none;

5.超链接伪类以及文本阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*超链接有默认的颜色以及去掉下划线*/a{text-decoration: none;color: #000000;}/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/#l1{text-shadow: aqua 10px 10px 1px;}/*鼠标悬浮的状态*/a:hover{color: lime;font-size: 30px;}/*鼠标按住未释放的状态*/a:active{color: red;}</style>
</head>
<body>
<a href="#"><img src="1.png" alt="">
</a>
<p><a href="#">出一个滑稽</a>
</p>
<p><a href="#">作者：无</a>
</p>
<p id="l1">价格：99
</p>
</body>
</html>

6.列表

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a><a href="#">音像</a><a href="#">数字商品</a></li><li><a href="#">家用电器</a><a href="#">手机</a><a href="#">数码</a></li><li><a href="#">电脑</a><a href="#">办公</a></li><li><a href="#">家居</a><a href="#">家装</a><a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a><a href="#">个性化妆</a></li><li><a href="#">礼品箱包</a><a href="#">钟表</a><a href="#">珠宝</a></li><li><a href="#">食品饮料</a><a href="#">保健食品</a></li><li><a href="#">彩票</a><a href="#">旅行</a><a href="#">充值</a><a href="#">票务</a></li></ul>
</div>
</body>
</html>

style.css

#nav{background: #ffdd00;width: 300px;
}
.title{font-size: 30px;font-weight: bold;line-height: 30px;text-indent: 1em;background: #ff4d00;
}
/*
list-style:none 去掉实心圆circle 空心圆square 正方形decimal 数字
*/
ul li{height: 30px;list-style: none;text-indent: 1em;}
a{text-decoration: none;font-size: 20px;color: black;
}
a:hover{color: aqua;text-decoration: underline;
}

网页展示

7.背景

背景颜色
背景图像

background-image: url("1.png");
/*默认是全部平铺的*/
background-repeat: repeat-x ;
background-repeat: repeat-y ;background-repeat: no-repeat;

渐变背景网址：https://www.grabient.com

body{background-color: #4158D0;background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);}