3.1、为什么要美化网页
- 有效的传递页面信息
- 吸引用户
- 凸显主题
- 提高用户体验
span标签：重点突出的文字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="title1">CSS</span>
</body>
</html>
3.2、字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family:字体
font-size:大小
font-weight:字体的粗细
color:字体颜色
-->
<style>
body{
font-family: 楷体;
color: deepskyblue;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
.p2{
font: oblique 100 16px "仿宋";
}
</style>
</head>
<body>
<h1>故事介绍编辑</h1>
<p class="p1">
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p class="p2">
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
</body>
</html>
3.3、文本样式
测试页面index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p class="l1">111111</p>
<p class="l2">222222</p>
<p class="l3">333333</p>
<h1>故事介绍编辑</h1>
<p class="p1">
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p class="p2">
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p class="p3">你好</p>
<p>
<img src="images/1.jpg">
<span>蜡笔小新</span>
</p>
</body>
</html>
- 颜色
<!--
颜色
单词 color: red
RGB color: #ff0000 0~f
rgb(0,255,255)
RGBA A:0~1 透明度
color: rgba(0,255,255,0.2);
-->
<style>
h1{
color: rgba(0,255,255,0.2);
}
</style>
- 文本对齐的方式
<!--
text-align :排版 center 居中;
-->
<style>
h1{
color: rgba(0,255,255,0.2);
text-align: center;
}
</style>
- 首行缩进
<!--
text-indent: 2em:段落首行缩进两个字符
-->
<style>
.p1{
text-indent: 2em;
}
</style>
- 行高
<!--
line-height:行高和块的高度一致，就可以上下居中
-->
<style>
.p3{
background: blue;
height: 300px;
line-height: 300px;
}
</style>
- 装饰
<style>
/*下划线*/
.l1{
text-decoration:underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
</style>
- 文本图片水平对齐
<style>
img,span{
vertical-align: middle;
}
</style>
3.4、文本阴影和超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的状态（重点）*/
a:hover{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
color: #12aa17;
}
/*未访问的链接*/
a:link{
color: yellow;
}
/**已访问的链接**/
a:visited{
color: red;
}
#price{
/*text-shadow:水平偏移 垂直偏移 阴影半斤 阴影颜色*/
text-shadow: 10px 10px 10px deepskyblue ;
}
</style>
</head>
<body>
<a href="#">
<img src="images/1.jpg">
</a>
<p>
<a href="#">Java开发手册</a>
</p>
<p>
<a href="#">作者：张三</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
3.5、列表样式练习
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</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{
width: 300px;
background: gray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red;
}
/*ul li*/
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: gray;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
- 效果
3.6、背景
1.背景颜色
2.背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/1.jpg");
/*默认是全部平铺的*/
}
/*水平平铺*/
.div1{
background-repeat: repeat-x;
}
/*竖直平铺*/
.div2{
background-repeat: repeat-y;
}
/*不平铺*/
.div3{
background-repeat: no-repeat;
}
</style>
<!-- 修改图标 -->
<link rel="shortcut icon" href="images/favicon.ico"/>
<link rel="bookmark" href="images/favicon.ico"/>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
/*颜色，图片，图片位置，平铺方式*/
background: red url("../images/3.gif") 200px 10px no-repeat;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/2.gif");
background-repeat: no-repeat;
background-position: 200px 2px;
}
3.7、渐变
一个好看的渐变网站：https://www.grabient.com/
<style>
body{
/*background-color: #4158D0;*/
background-image: linear-gradient(324deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
扫一扫
2057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
