本文介绍了CSS的基本概念和发展历程，包括选择器、优先级、层次选择器等内容，并详细讲解了如何使用CSS美化网页元素。
1、什么是CSS
如何学习？
- CSS是什么？
- 如何快速入门？
- CSS选择器（重点+难点）
- 美化网页（文字、阴影、超链接、列表、渐变……）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效）
1.1 什么是CSS
Cascading Style Sheet 层叠/级联样式表
CSS 表现层 美化网页
字体、颜色、边距、宽度、高度、背景图片、网页定位、网页浮动
1.2 发展史
CSS1.0
CSS2.0 DIV(块) +cSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动、定位
CSS3.0 圆角、阴影、动画 浏览器兼容性问题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WVausrTh-1628038594210)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210802091159238.png)]
1.3 快速入门
style
HTML与CSS结构合并与分离
h1{
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，可在style之内写css代码，每个声明最好以分号结尾
html和css合并
html和css分离+关联
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录
1.4 CSS的三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
/*在这里写css代码，注意和html代码区分*/
h1{
color:green;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--样式优先级：就近原则
（根据代码的位置和书写顺序）
1、首先是行内样式
2、再看内部样式和外部样式的link的书写顺序
-->
<!--行内样式，在标签元素中编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题</h1>
</body>
</html>
外部样式的导入的两种方式
-
link（html）
如上
-
import（CSS）
必须放在
<style></style>之内<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import url("css/style.css"); </style> </head> <body> <h1>我是标题2</h1> </body> </html>
2、基本选择器（重点）
用于定位和选择某一类或某一个元素
2.1 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，会选择所有带这个标签的元素*/
h1{
color: #ea0a33;
background: aquamarine;
border-radius: 5px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学习Java</h1>
<p>听狂神说</p>
</body>
</html>
2.2 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器 语法：.类名{}
优点：可以多个标签归类为同一个class，可以复用
*/
.title1{
color: red;
}
.title2{
color: green;
}
</style>
</head>
<body>
<h1 class="title1">标题1</h1>
<h1 class="title2">标题2</h1>
<h1 class="title2">标题3</h1>
<p class="title1">一句话</p>
</body>
</html>
2.3 id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
ID选择器 语法：#ID{}
1、ID必须保证全局唯一
2、不遵循就近原则
3、ID选择器>类选择器>标签选择器
*/
#t1{
color: red;
}
</style>
</head>
<body>
<h1 id="t1">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
2.4 优先级
ID选择器 > 类选择器 > 标签选择器
3、层次选择器
快速生成
ul>li*3>p*3
【思考】
层次选择器的使用重点，在于空格、大于号、加号、波浪线的选择使用。
是否可以和基本选择器混合使用？可以，先用基本选择器定位，再用层次选择器选择定位标签下面的一个或全部统计标签。
3.1 后代选择器
/*后代选择器*/
body p{
background: aqua;
}
3.2 子选择器
/*子选择器*/body>p{ background: antiquewhite;}
3.3 相邻兄弟选择器
/*相邻兄弟选择器：只选择一个 示例中p2背景变黑色*//*弟弟选择器？*/.active + p{ background: black;}
3.4 通用兄弟选择器
/*通用选择器：向下选择所有同级别p标签 示例中p2p3p7p8背景变色*/.active~p{ background: greenyellow;}
4、结构 伪类选择器
伪类 条件 过滤
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--避免使用class和id选择器--> <style> /*ul的第一个元素*/ ul li:first-child{ background: red; } /*ul的最后一个元素*/ ul li:last-child{ background: green; } /*下面语法没有效果*/ body p:first-child{ background: greenyellow; } /*p1 语法说明：指定标签的类型，在该标签的父标签下的所有子标签中按序号定位 类型和定位两者都满足，才会生效 */ p:nth-child(2){ background: greenyellow; } /*语法说明：指定标签类型，在该标签的父标签下的所有指定类型标签中按序号定位*/ p:nth-of-type(4){ background: yellow; } a:hover{ background: yellow; } </style></head><body><a href="">测试hover</a><h>h1</h><p>p1</p><p>p2</p><p>p3</p><h>h2</h><p>p4</p><ul> <li>li1</li> <li>li2</li> <li>li3</li></ul></body></html>
5、属性选择器（最常用 建议使用）
相当于 class 和 id 结合
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 5px; background: #0ac1ea; text-align: center; color: greenyellow; text-decoration: none; margin-right: 5px; font: bold 20px/50px Arial; } /*存在ID属性的元素 下面两种方法都可以实现，第一个是ID选择器，第二个是属性选择器 优先级：ID选择器 > 属性选择器，显示红色 属性选择器的语法： 标签名 [属性名 符号 属性值] {声明1；声明2；声明3} 不同符号的使用： =表示绝对等于 *=表示包含... ^=表示以...开头 $=表示以...结尾 */ /*#first{*/ /* background: red;*/ /*}*/ /*a[id]{*/ /* background: green;*/ /*}*/ /*a[class="links item last"]{*/ /* background: blue;*/ /*}*/ /*选中以http开头的href属性*/ /*a[href^=http]{*/ /* background: yellow;*/ /*}*/ a[href$=pdf]{ background: red; } </style></head><body><p class="demo"> <a href="https:www.baidu.com" class="links item first" id="first">1</a> <a href="https:www.blog.kuang.com" class="links item active" target="_blank" title="test">2</a> <a href="images/123.html" class="links item">3</a> <a href="images/123.png" class="links item">4</a> <a href="images/123.jpg" class="links item">5</a> <a href="abc" class="links item">6</a> <a href="/a.pdf" class="links item">7</a> <a href="/abc.pdf" class="links item">8</a> <a href="abc.doc" class="links item">9</a> <a href="abcd.doc" class="links item last">10</a></p></body></html>
6、美化网页元素
6.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或者其他什么都可以，约定俗成习惯了用span，都ok-->欢迎学习<span id="title1">Java</span></body></html>
6.2 字体样式
<!-- font-family：字体 font-size：字体大小 font-weight：字体加粗 color：字体颜色 --> <style> body{ font-family: 楷体; } h1{ font-size: 30px; } .p1{ font-weight: bolder; color: red; } </style>
6.3 文本样式
- 颜色
- 对齐方式
- 首行缩进
- 行高
- 下划线
- 文本图片水平对齐
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--颜色的表示 1、单词 2、RGB 3、RGBA（最后一个参数是透明度） 首行缩进两个字符 text-indent: 2em; 下划线、中划线、上划线 text-decoration: underline; text-decoration: line-through; text-decoration: overline; 超链接去下划线 text-decoration: none; --> <style> h1{ color: rgba(0,255,150,1.0); text-align: center; } .p1{ text-indent: 2em; } .p2{ background: green; /*行高和块或段落高设置为一个数值，就是在指定高度居中显示一行内容*/ height: 200px; line-height: 200px; } .ul1{ text-decoration: underline; } .ul2{ text-decoration: line-through; } .ul3{ text-decoration: overline; } img,span{ vertical-align: middle; } </style></head><body><p> <img src="images/001.png" alt=""> <span>swiqjpewejpwqhfdw</span></p><p class="ul1">123123</p><p class="ul2">123123</p><p class="ul3">123123</p><h1>故事介绍</h1><p class="p1"> 平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现</p><p class="p2"> 在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅</p></body></html>
6.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: 20px; } /*active激活——鼠标按住未释放的颜色*/ a:active{ color: green; } /*link和visited 一个是未访问的链接，一个是已访问的链接*/ /*text-shadow: #00ffbb 3px 3px 3px; 参数说明：阴影颜色 水平偏移 垂直偏移 阴影半径 */ #price{ text-shadow: #00ffbb 3px 3px 3px; } </style></head><body><a href="#"> <img src="images/a.jpg" alt=""></a><p><a href="#">码出高效 Java开发手册</a></p><p> <a href="">作者：孤尽老师</a></p><p id="price"> <a href="">￥99.0</a></p></body></html>
6.5 列表
为什么我的IDEA不提示呢？
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <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>
#nav{ width: 450px; background: #bebbbb;}.title{ font-size: 20px; font-weight: bold; text-indent: 2em; line-height: 70px; /*颜色 图片 图片位置x 图片位置y 展示方式*/ background: red url("images/001.jpg") 390px 10px no-repeat;}/*ul li*//*list-style:none 无样式circle 空心圆decimal 数字square 实心方块背景颜色的范围ul/li*/ul{ /*background: #bebbbb;*/}ul li{ line-height: 70px; list-style: none; text-indent: 1em; background-image: url("images/002.jpg"); background-repeat: no-repeat; background-position: 350px 10px;}a{ text-decoration: none; font-size: 14px; color: #000000;}a:hover{ color: green;}
6.6 背景
背景颜色
背景图片
div{ width: 500px; height: 300px; border: 1px solid red; /*默认是平铺*/ background-image: url("images/c.jpg");}.div1{ background-repeat: repeat-x;}.div2{ background-repeat: repeat-y;}.div3{ background-repeat: no-repeat;}
6.7 渐变
body{ background-color: #4158D0; background-image: linear-gradient(182deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);}
7、盒子模型
7.1 什么是盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAN2qdde-1628038594214)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210803103946641.png)]
margin、border、padding
7.2 外边距、边距、内边距
外边距用于元素的居中
7.3 圆角边框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zfedR6Qw-1628038594215)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210803141953054.png)]
- 一个参数时，代表四条边、四个角全部修改（1234）
- 两个参数时
- 第一个参数代表上下边距，第二个参数代表左右边距（13 24）
- 第一个参数代表左上角右下角，第二个参数代表左下角和右上角（13 24）
- 四个参数时，涉及四条边、四个角的定位都是按照顺时针顺序进行（1 2 3 4）
【小技巧】圆角半径 = 边长，正方形变成圆形
圆角在背景边框、图片边框等的应用
img{ border-radius: 500px;}
7.4 盒子阴影
box-shadow: 10px 10px 10px red;参数说明：偏移x 偏移y 模糊半径 颜色
margin: 0 auto 使用说明
【注意】
范围：整个页面居中，指定宽度内（指定宽度的导航栏）居中
抄来抄去的前端？
不要重复造轮子！
8、浮动
8.1 标准文档流
行内元素可以包含块级元素，反之不成立
8.2 display
列表展示在一行内：inline-block
<!--display使用说明block 块元素inline 行内元素inline-block 行—块（保持块元素的状态，但可以写到一行）none--><style> div{ width: 100px; height: 100px; border: 1px solid red; display: none; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; }</style>
8.3 float
两个关键字：float clear
<style> .img001{ border:1px #F00 dashed; display: inline-block; float:left; clear:both; } .img002{ border:1px #F00 dashed; display: inline-block; float:left; clear:both; } .imgc{ border:1px #F00 dashed; display: inline-block; float:left; clear:both; } .text1{ border:1px #F00 dashed; display: inline-block; float:left; clear:both; }</style>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R8rZZBM3-1628038594217)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210803154011630.png)]
8.4 父级边框塌陷问题
/*clear: left;左侧不允许有浮动元素clear: right;右侧不允许有浮动元素clear: both;两侧不允许有浮动元素clear: none;*/
【问题】如何让浮动元素全部显示在父级边框内？
【解决方法】
-
增加父级元素的高度
#father{ border:1px black solid; height: 800px;} -
增设一个空的专门用于清除浮动的div块
<div class="clear"></div>.clear{ clear: both; margin: 0; padding: 0; } -
在父级元素中增加一个
overflow：hidden;#father{ border:1px black solid; overflow: hidden;} -
在父级元素中添加一个伪类
after（推荐使用）#father{ border:1px black solid;}/*原理相当于第二种方法*/#father:after{ content: ''; display: block; clear: both;}#推荐使用的原因和好处：不改动原有结构的基础
【小结】
- 增加父级元素高度的方法——不灵活，内容很多可能会固定的高度
- 增加空的块元素——简单，但应尽量避免空的div块出现
- 在父级元素增加overflow——
- 在父级元素中添加伪类after——推荐使用，不改变原有结构，无副作用
overflow：scroll;
overflwo：hidden;
8.5 对比
-
display
方向不可以控制
-
float
浮动起来的话会脱离标准文档流，必须解决父级边框塌陷问题
9、定位
实线 solid
虚线 dashed
9.1 默认情况
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--先写好框架--> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ background: #b74646; border: 2px red solid; } #first{ background: #4787bb; border: 2px #0d95d0 dashed; } #second{ background: #68c5bb; border: 2px #13d298 dashed; } #third{ background: #51b959; border: 2px #7fec26 dashed; } </style></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>
9.2 相对定位
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FrKg5NCB-1628038594218)(C:\Users\cheny\AppData\Roaming\Typora\typora-user-images\image-20210803171752246.png)]
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--相对定位 相对于自己原来的位置进行偏移 --> <style> body{ padding: 20px; } div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ background: #b74646; border: 2px red solid; } #first{ background: #4787bb; border: 2px #0d95d0 dashed; position: relative;/*相对定位，相对于原来位置偏移；正偏移远离、负偏移朝向*/ top: -20px; left: 20px; } #second{ background: #68c5bb; border: 2px #13d298 dashed; position: relative; top: 10px; left: -20px; } #third{ background: #51b959; border: 2px #7fec26 dashed; position: relative; bottom: -20px; right: 20px; } </style></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>
相对定位：position：relative；top、bottom、left、right，仍然在标准文档流中，原来的位置被保留
【练习】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 300px; height: 300px; padding: 2px; border: 2px solid #d90a21; } a{ width: 100px; height: 100px; text-decoration: none; background: rgba(238, 115, 186, 0.98); line-height: 100px; text-align: center; color: white; display: block; } a:hover{ background: rgb(10, 193, 234); } .a2{ position: relative; left: 200px; top: -100px; } .a4{ position: relative; left: 200px; top: -100px; } .a5{ position: relative; top: -300px; left: 100px; } </style></head><body><div id="box"> <a class="a1"href="#">链接1</a> <a class="a2"href="#">链接2</a> <a class="a3"href="#">链接3</a> <a class="a4"href="#">链接4</a> <a class="a5"href="#">链接5</a></div></body></html>
9.3 绝对定位
- 在父级元素没有定位的前提下，当前元素的绝对定位是相对于浏览器
- 如果父级元素有相对定位，当前元素的绝对定位是相对于父级元素
- 由于不能脱离标准文档流，负偏移按0处理，既左又右的偏移会产生拉伸效果
- 原来的位置不会保留
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--先写好框架--> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ background: #b74646; border: 2px red solid; position: relative; } #first{ background: #4787bb; border: 2px #0d95d0 dashed; } #second{ background: #68c5bb; border: 2px #13d298 dashed; position: absolute; right: 30px; } #third{ background: #51b959; border: 2px #7fec26 dashed; } </style></head><body><div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div></div></body></html>
9.4 固定定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height: 1000px; } div:nth-of-type(1){ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style></head><body><div>div1</div><div>div2</div></body></html>
9.5 z-index
图层
z-index：默认是0
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"></head><body><div id="content"> <ul> <li><img src="images/bg.jpg" alt=""></li> <li class="tipText">学习微服务，找狂神</li> <li class="tipBg"></li> <li>时间：2099-1-1</li> <li>地点：火星一号基地</li> </ul></div></body></html>
#content{ width: 380px; padding: 0; margin: 0; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px #000 solid;}ul,li{ padding: 0; margin: 0; list-style: none;}/*父级元素相对定位*/#content ul{ position: relative;}.tipText,.tipBg{ position: absolute; width: 380px; height: 25px; top: 216px;}.tipText{ color: white; /*z-index: 0;*/}.tipBg{ background: #000; /*背景透明度*/ opacity: 0.5; filter: Alpha(opacity: 0.5);}
扫一扫
1738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
