19：CSS详解 || 追求美是人之本性
CSS详解
前端三板斧：HTML+CSS+JavaScript
结构 + 表现 + 交互
- 什么是CSS
- CSS怎么使用
- CSS选择器（重点+难点）
- 美化网页
- 盒子模型
- 浮动
- 定位
- 网页动画特效（推荐W3CSchool、菜鸟教程）
一、什么是CSS
1. 什么是CSS
Cascading Style Sheet 层叠样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动...
F12 调出 开发人员工具
2. CSS发展史
CSS1.0
CSS2.0 ：DIV+CSS，提出HTML和CSS结构分离的思想，网页变得简单，SEO
CSS2.1：浮动、定位
CSS3.0：圆角、阴影、动画...浏览器兼容性
3. 快速入门
style
-
未分离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 规范 在head里编写css样式 这样的话css代码跟html是融为一体的 语法：每一个声明最好使用；结尾 选择器{ 声明1: ; 声明2: ; 声明3: ; } --> <style> h1{ color: red; } </style> </head> <body> <h1>我是标题</h1> </body> </html> -
分离
<!-- 如果使用css分离，需要在head标签中引入css文件,建议使用分离--> <link rel="stylesheet" href="css/style.css">
CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于HTML的CSS文件
- 利于SEO，容易被搜索引擎收录，Vue极其不容易被搜索引擎收录
4. CSS的三种导入方式
-
写在head标签中的style样式叫做 内部样式表
-
写在外边单独的CSS文件中的叫做 外部样式表
-
在标签元素中,编写一个style属性,编写样式即可叫做 行内样式
<h1 style="color:red"> 我是标题 </h1>
在前两种方式中，代码的注释使用 /* */
优先级：就近原则 行内样式 > 内部样式 > 外部样式。注意：内部样式和外部样式的优先级取决于其在head标签中的使用顺序，谁距离选择器的元素更近，使用谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: red;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color:red">
我是标题
</h1>
</body>
</html>
拓展：外部样式两种写法
-
链接式（推荐使用）：
上边使用的方法叫链接式<link>标签
HTML
-
导入式：
CSS2.1特有
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import "css/style.css"; </style> </head> <body> <h1>HTMLCSS</h1> </body> </html>
二、选择器
作用：选择页面上某一个或者某一类元素
1. 基本选择器
-
标签选择器
选择一类标签
语法：标签名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器 会选择到页面上所有的这个标签的元素*/ h1{ color: #ffffff; background-color: darkcyan; border-radius: 15px; } p{ font-size: 70px; } </style> </head> <body> <h1>刘英俊</h1> <h1>DearLiu</h1> <p>有风吹过</p> </body> </html>缺点：如果只想要改变第一个h1标签的样式，就无法做到了
-
类选择器
选择所有class属性一致的标签，跨标签
语法：.类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式： .class的名称{ } */ /* 优点：可以多个标签用同一个类名，可以复用 */ .liu{ color: red; } .dear{ color: purple; } </style> </head> <body> <h1 class="liu">标题1</h1> <h1 class="dear">标题2</h1> <h1>标题3</h1> </body> </html> -
id选择器
语法：#id名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* id选择器 #id名称{} */ /* id必须保证全局唯一 不唯一idea会报错 但是能够运行 最好唯一 */ /*不遵循就近原则 优先级：id选择器 > 类选择器 > 标签选择器*/ #dear{ color: red; } .style1{ color: purple; } </style> </head> <body> <h1 id="liu">标题1</h1> <h1 id="dear">标题2</h1> <h1 id="new">标题3</h1> <h1 class="style1">标题4</h1> <h1>标题5</h1> </body> </html>
优先级：不遵循就近原则 id选择器 > 类选择器 > 标签选择器
2. 层次选择器
-
后代选择器：在某个元素的后面
/*后代选择器 body后边的p标签样式改变*/ body p{ background-color: red; } -
子选择器：只有一代
/*子选择器 只有body的下一代p，比如p1、p2、p3样式改变*/ body>p{ background-color: green; } -
相邻兄弟选择器：同辈
/*相邻兄弟选择器 对下不对上 比如这里是类选择器的对象 的相邻的下一个对象 只有一个*/ .active + p{ background-color: yellow; } -
通用选择器
/*通用选择器 当前选择器选中元素 向下的所有兄弟元素 不唯一*/ .active~p{ background-color: aliceblue; }
所有选择器展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器 body后边的p标签样式改变*/
body p{
background-color: red;
}
/*子选择器 只有body的下一代p，比如p1、p2、p3样式改变*/
body>p{
background-color: green;
}
/*相邻兄弟选择器 对下不对上 比如这里是类选择器的对象 的相邻的下一个对象 只有一个*/
.active + p{
background-color: yellow;
}
/*通用选择器 当前选择器选中元素 向下的所有兄弟元素 不唯一*/
.active~p{
background-color: aliceblue;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li><p>p4</p></li>
<li><p>p4</p></li>
<li><p>p4</p></li>
</ul>
<p class="active">p5</p>
<p>p6</p>
</body>
</html>
3. 结构伪类选择器
伪类： 带冒号 进行条件判断的
<style>
/* 选中ul的第一个子元素 */
ul li:first-child{
background-color: purple;
}
/* 选中ul的最后一个子元素 */
ul li:last-child{
background-color: red;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 选中ul的第一个子元素 */
ul li:first-child{
background-color: purple;
}
/* 选中ul的最后一个子元素 */
ul li:last-child{
background-color: red;
}
/* 选中p1 定位到父元素 选择第一个元素*/
/*选择当前p元素的父级元素，选中父级元素的第一个 并且是当前元素才生效,如果父元素中有其他标签，会阻碍*/
/*结果为p2改变样式*/
p:nth-child(3){
background-color: green;
}
/*不会被阻碍 只会算同类型的*/
/*结果为p4改变样式*/
p:nth-of-type(4){
background-color: yellow;
}
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</body>
</html>
4. 属性选择器（常用）
<!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: 30px;
background: red;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px "Alibaba PuHuiTi M";
}
/*存在id属性的元素*/
/* a[]{} */
a[id]{
background: yellow;
}
/*选中id=first的元素*/
/*属性名 = 属性值（可以使用正则表达式）*/
a[id=first]{
background: green;
}
/*选中class中有links的元素*/
/* = 绝对匹配*/
/* *= 模糊匹配*/
a[class *= "links"]{
background: purple;
}
/*选中href中以http开头的元素*/
/* ^ 以这个开头 */
/* $ 以这个结尾 */
a[href^=http]{
background: aqua;
}
a[href$=pdf]{
background: #8192ff;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="imags/123.html" class="links item">3</a>
<a href="imags/123.png" class="links item">4</a>
<a href="imags/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>
三、美化网页元素
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">Java</span>
</body>
</html>
2. 字体样式
font-family:字体
font-size:字体大小 px / em(缩进)1em = 16px
font-weight:字体粗细
color:字体颜色
font: bold 20px/50px 字体 分别是 样式 大小/行高 字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family:字体
font-size:字体大小 px / em(缩进)1em = 16px
font-weight:字体粗细
color:字体颜色
font: bold 20px/50px 字体 分别是 样式 大小/行高 字体
-->
<style>
body{
font-family: "楷体",FlexoSoftW01-Demi;
color: brown;
}
h1{
font-size: 30px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">巍峨的长安城，数百年间屹立不倒。但长安的门户，守卫严密的朱雀门却镌刻着一道剑痕，那是一个青年醉后以长剑所书的诗句“欲上青天揽明月”，轰动整个长安城。当治安官狄仁杰欲以破坏长安的罪名逮捕他时，爱才的女帝拒绝了。女帝甚至下令保留朱雀门上饱含剑意的诗痕。数日之间，这名一人一剑，直入长安的青年“剑仙”之名传遍长安。他就是李白。</p>
<p>彼时的李白，年少轻狂，拒绝了女帝入朝为官的邀请后，开始试剑天下的旅途。当他初次见到滔滔黄河时，心中的剑意迸发而出，奔流到海不复回。从那时起，没有机关的师承，没有魔道的秘法，没有魔种的血脉的李白，仅仅依靠自己和手中的剑，成为帝国强者中的第一人，乃真正的天纵之才。他会给每个败于己的对手赋诗，因此，诗名和剑名也一同流传开来。后来，甚至有人视之为荣耀，为得诗篇而求一败，令人哭笑不得。
</p>
<p>就在李白的剑意到达巅峰之后不久，旅途也来到了云中漠地。很少有人知道，生活在长安的李白，出生于云中漠地的海市蜃楼之下。他怀着剑仙荣耀归来，却发现幼年记忆里充满异域风情的繁华城池已经不复存在。被贩为奴隶的公主，向他倾诉自己的遭遇：帝国的铁骑越过长城，踏平了整个云中漠地。荒废的城池很快被黄沙掩埋。李白想要救出她，少女却选择了从屈辱中自我了断。
</p>
<p>鲜血激起了李白的侠义之心。他第二次单剑闯入长安，质问女帝讨要征平云中漠地的说法。一夜长安风云变色，大明宫也在剑仙之剑下黯然无光。有史以来从未曾被外力攻破的长安城，第一次因为一个普通人而动摇。
</p>
<p>没有人知道最后发生了什么事。李白自长安城中全身而退。他和女帝的密谈，被视为禁忌，不见于史官的笔下。
</p>
<p>只有李白自己清楚，他的骄傲被挫败了，在最强的巅峰。从那之后，他开始自我放逐，从寂寞的旅途中寻求新的意义，陪伴他的，除了剑，还多了酒。
</p>
<p>人人都以为剑仙就此一蹶不振。但长安的府衙中，狄仁杰查看着关于李白的行踪报告，露出难以捉摸的冷笑。
</p>
<p>“元芳，你怎么看？”
</p>
<p>不等密探回答，他立刻自言自语：“再次出鞘的时候，会更加惊天动地吧。这家伙，太过骄傲，又太过寂寞了。”
</p>
<p>而狄仁杰所预言的这一天，在数年之后到来。
</p>
<p>这是长安城平常的一天。晨钟回响在上空，自云中漠地的旅人远途而来，正抬首打量朱雀门上的剑痕；热闹的长乐坊中，五陵少年们因前所未有的美妙琴声而骚动；感业寺的银杏树依旧枝繁叶茂。唯有狄仁杰手下的密探隐入黑暗，紧张注视着那个白衣潇洒，酒剑相伴的男子身影。
</p>
<p>剑仙李白，三入长安了。
</p>
<p>这次长安城又将怎样被动摇呢？
</p>
<p>“大河之剑天上来！”
</p>
<h1>英文情诗</h1>
<p> If you were a teardrop In my eye，</p>
<p> For fear of losing you，I would never cry</p>
<p> And if the golden sun，Should cease to shine its light，</p>
<p> Just one smile from you，Would make my whole world bright</p>
<p> 如果你是我眼里的一滴泪，为了不失去你，我将永不哭泣</p>
<p> 如果金色的阳光停止了它耀眼的光芒，你的一个微笑;将照亮我的整个世界</p>
</body>
</html>
3. 文本样式
-
文本颜色
单词
RGB 0~F ：#000000 黑色 #FFFFFF 白色
RGBA A为透明度（0~1）：（0,255,255，0.5） -
文本对齐方式
text-align: 文本对齐方式排版 center居中 right 居右 left 左
-
首行缩进
text-indent: 2em;
-
行高
background: gainsboro; 段落背景颜色
height: 100px;段落高度
line-height:30px;行高 当只有一行的时候，段落高度和行高一样的时候，实现垂直居中
-
装饰
a 标签默认有下划线 text-decoration:none 去掉下划线
text-decoration: underline;下划线 line-through 中划线 overline 上划线
同一段落，图片和文字水平对齐：有参照物，需要哪两个对齐，vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB 0~F ：#000000 黑色 #FFFFFF 白色
RGBA A为透明度（0~1）：（0,255,255，0.5）
text-align: 文本对齐方式排版 center居中 right 居右 left 左
text-indent: 2em; 首行缩进
background: gainsboro; 段落背景颜色
height: 100px;段落高度
line-height:30px;行高 当只有一行的时候，段落高度和行高一样的时候 实现垂直居中
text-decoration: underline;下划线 line-through 中划线 overline 上划线
-->
<style>
h1{
color: #961954;
text-align: center;
text-decoration: underline;
}
p{
text-indent: 2em;
background: gainsboro;
line-height:30px;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">巍峨的长安城，数百年间屹立不倒。但长安的门户，守卫严密的朱雀门却镌刻着一道剑痕，那是一个青年醉后以长剑所书的诗句“欲上青天揽明月”，轰动整个长安城。当治安官狄仁杰欲以破坏长安的罪名逮捕他时，爱才的女帝拒绝了。女帝甚至下令保留朱雀门上饱含剑意的诗痕。数日之间，这名一人一剑，直入长安的青年“剑仙”之名传遍长安。他就是李白。</p>
<p>彼时的李白，年少轻狂，拒绝了女帝入朝为官的邀请后，开始试剑天下的旅途。当他初次见到滔滔黄河时，心中的剑意迸发而出，奔流到海不复回。从那时起，没有机关的师承，没有魔道的秘法，没有魔种的血脉的李白，仅仅依靠自己和手中的剑，成为帝国强者中的第一人，乃真正的天纵之才。他会给每个败于己的对手赋诗，因此，诗名和剑名也一同流传开来。后来，甚至有人视之为荣耀，为得诗篇而求一败，令人哭笑不得。
</p>
<p>就在李白的剑意到达巅峰之后不久，旅途也来到了云中漠地。很少有人知道，生活在长安的李白，出生于云中漠地的海市蜃楼之下。他怀着剑仙荣耀归来，却发现幼年记忆里充满异域风情的繁华城池已经不复存在。被贩为奴隶的公主，向他倾诉自己的遭遇：帝国的铁骑越过长城，踏平了整个云中漠地。荒废的城池很快被黄沙掩埋。李白想要救出她，少女却选择了从屈辱中自我了断。
</p>
<p>鲜血激起了李白的侠义之心。他第二次单剑闯入长安，质问女帝讨要征平云中漠地的说法。一夜长安风云变色，大明宫也在剑仙之剑下黯然无光。有史以来从未曾被外力攻破的长安城，第一次因为一个普通人而动摇。
</p>
<p>没有人知道最后发生了什么事。李白自长安城中全身而退。他和女帝的密谈，被视为禁忌，不见于史官的笔下。
</p>
<p>只有李白自己清楚，他的骄傲被挫败了，在最强的巅峰。从那之后，他开始自我放逐，从寂寞的旅途中寻求新的意义，陪伴他的，除了剑，还多了酒。
</p>
<p>人人都以为剑仙就此一蹶不振。但长安的府衙中，狄仁杰查看着关于李白的行踪报告，露出难以捉摸的冷笑。
</p>
<p>“元芳，你怎么看？”
</p>
<p>不等密探回答，他立刻自言自语：“再次出鞘的时候，会更加惊天动地吧。这家伙，太过骄傲，又太过寂寞了。”
</p>
<p>而狄仁杰所预言的这一天，在数年之后到来。
</p>
<p>这是长安城平常的一天。晨钟回响在上空，自云中漠地的旅人远途而来，正抬首打量朱雀门上的剑痕；热闹的长乐坊中，五陵少年们因前所未有的美妙琴声而骚动；感业寺的银杏树依旧枝繁叶茂。唯有狄仁杰手下的密探隐入黑暗，紧张注视着那个白衣潇洒，酒剑相伴的男子身影。
</p>
<p>剑仙李白，三入长安了。
</p>
<p>这次长安城又将怎样被动摇呢？
</p>
<p>“大河之剑天上来！”
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
水平对齐 参照物 两个：vertical-align: middle;
-->
<style>
img,span{
vertical-align: middle;
}
p{
line-height: 40px;
text-align: center;
}
span{
color: #961954;
font: bold 40px FlexoSoftW01-Demi;
}
</style>
</head>
<body>
<p>
<span>英文</span>
<img src="image/img.png" alt="">
<span>情诗</span><br>
If you were a teardrop In my eye，<br>
For fear of losing you，I would never cry<br>
And if the golden sun，Should cease to shine its light，<br>
Just one smile from you，Would make my whole world bright<br>
如果你是我眼里的一滴泪，为了不失去你，我将永不哭泣<br>
如果金色的阳光停止了它耀眼的光芒，你的一个微笑;将照亮我的整个世界<br>
</p>
</body>
</html>
4. 阴影
#price{
color: #961954;
font-weight: bold;
/*水平偏移 垂直偏移 模糊程度 阴影颜色
水平偏移和用户偏移 允许负数 即左阴影和上阴影
*/
text-shadow:2px 2px 3px #5d5d83;
}
5. 超链接伪类
/*默认的状态*/
a{
text-decoration: none;
/*color: #000;*/
}
/*链接没点击过的颜色，要在hover之前，而且不能设置默认的颜色*/
a:link{
color: #8192ff;
}
/*鼠标悬浮的状态*/
a:hover{
color: rgba(243, 20, 20, 0.98);
font-size: 30px;
}
/*鼠标按住未释放的状态*/
a:active{
color: #179006;
}
/*点击完之后的颜色*/
a:visited{
color: gainsboro;
}
#price{
color: #961954;
font-weight: bold;
/*水平偏移 垂直偏移 模糊程度 阴影颜色
水平偏移和用户偏移 允许负数 即左阴影和上阴影
*/
text-shadow:2px 2px 3px #5d5d83;
}
6. 列表
<!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>
#nav{
width: 300px;
background: #e0e0e0;
}
.title{
font-size: 18px;
font-weight: bold;
/*text-indent: 1em;*/
line-height: 35px;
background: red;
text-align: center;
}
/*ul li*/
/*
list-style: none;
none是去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: #e0e0e0;
}
ul li{
height: 30px;
list-style: none;
/*text-indent: 1em;*/
text-align: left;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: #ff2f00;
text-decoration: underline;
}
7. 背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.divall{
width: 500px;
height: 300px;
border: 1px solid red;
/*默认是全部平铺的*/
background-image: url("images/1615167693154.jpg") ;
}
.div1{
/*水平方向平铺*/
background-repeat: repeat-x;
}
.div2{
/*垂直方向平铺*/
background-repeat: repeat-y;
}
.div3{
/*不平铺*/
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="div1 divall"></div>
<div class="div2 divall"></div>
<div class="div3 divall"></div>
</body>
</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>
#nav{
width: 300px;
background: #e0e0e0;
}
.title{
font-size: 18px;
font-weight: bold;
/*text-indent: 1em;*/
line-height: 35px;
text-align: center;
/*颜色 图片 图片定位 平铺方式*/
background: red url("../imags/sprite.png") 260px 8px no-repeat;
}
/*ul li*/
/*
list-style: none;
none是去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: #e0e0e0;
}
ul li{
height: 30px;
list-style: none;
/*text-indent: 1em;*/
text-align: left;
background-image: url("../imags/sprite.png");
background-repeat: no-repeat;
background-position: 161px 1px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: #ff2f00;
text-decoration: underline;
}
8. 渐变
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
body{
/*线性渐变
关于 css 不均匀渐变百分比的学习。百分比表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。
*/
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
/*径向渐变*/
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
}
四、盒子模型
1. 什么是盒子模型
margin：外边距
padding：内边距
border：边框
2. 边框
- 边框的粗细
- 边框的样式
- 边框的颜色
可以单独上下左右设置:
- border-right-color border-right-width border-right-style
- left
- top
- bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边距*/
/*body,h1,ul,li,a,body{ 或者直接使用通配符 * */
body{
margin:0px;
}
/*border:粗细 样式 颜色;*/
#box{
width: 300px;
border:2px solid lightgray;
}
h2{
font-size: 18px;
background-color: #8192ff;
line-height:50px ;
margin:0px;
text-align: center;
}
form{
background: #961954;
}
div:nth-of-type(1)>input{
border: 3px solid red;
}
div:nth-of-type(2)>input{
border: 3px dashed black;
}
div:nth-of-type(3)>input{
border: 3px solid yellow;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
3. 外边距和内边距以及盒子模型的水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边距*/
/*body,h1,ul,li,a,body{ 或者直接使用通配符 * */
body{
margin:0px;
background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}
/*border:粗细 样式 颜色;*/
/*外边距的妙用，元素的居中*/
#box{
width: 300px;
border:2px solid lightgray;
margin:0 auto;/*外边距的妙用 水平居中 前提：外边是个块元素。块元素有固定的宽度*/
margin-top: 250px;
background: #c0a4b1;
}
h2{
font-size: 18px;
background-color: #00bbff;
line-height:50px ;
margin:0px;
text-align: center;
}
input{
border: 3px solid #ff0000;
}
.form{
/*只写一个参数 为上下左右*/
/*只写两个参数 分别为上下 和 左右*/
/*写四个参数 分别为上 右 下 左 顺时针*/
/*margin: 10px 0;*/
margin: 10px 10px 0 0;
padding: 0 0 10px 10px;
}
.l2,.l1{
margin-left: 16px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#" class="form">
<div class="form l3" >
<span>用户名：</span>
<input type="text">
</div>
<div class="form l2">
<span>密码：</span>
<input type="text">
</div>
<div class="form l1">
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
盒子的计算方式：
margin + padding + border + 内容宽度
4. 圆角边框
四个角 ，推荐使用百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div{
background-color: red;
width: 50px;
height: 50px;
border: 1px solid red;
/*一个参数 上下左右*/
/*border-radius: 40px;*/
/*两个参数 左上 右下 和 右上 左下*/
/*border-radius: 40px 40px;*/
/* 四个参数 顺时针 左上角开始*/
/* 画圆：border-radius = 1/2（长或宽 + div边距）*/
/*border-radius: 60px 0px 0px 0px;*/
/* 还可以用百分比*/
border-radius: 100% 0% 0% 0%;
}
img{
border-radius: 25% 25% 25% 25%;
}
</style>
</head>
<body>
<div class="div"></div>
<img src="images/1615167693154.jpg" alt="">
</body>
</html>
5. 阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div{
margin: 0 auto;
text-align: center;
}
img{
border-radius: 100%;
/*box-shadow: 0 2px 2px 0 rgb(0 0 0/ 12%), 0 3px 1px -2px rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 12%);*/
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.12),2px 0px 5px 0 rgba(0,0,0,0.12),-2px 0px 5px 0 rgba(0,0,0,0.12),0 -2px 5px 0 rgba(0,0,0,0.12)
}
</style>
</head>
<body>
<div class="div">
<img src="images/1615167693154.jpg" alt="">
</div>
</body>
</html>
五、浮动
1. 标准文档流
标准文档流：自上而下，不受布局影响
块级元素：独占一行
行内元素：不独占一行（可以被包含在块级元素中，反之块级元素不能被包含在行内元素中）
2. display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
/*块元素 block*/
/*是块元素 但是可以内联 在一行 inline-block */
/*行内元素 inline*/
/*none 不显示*/
display: inline-block;
}
</style>
</head>
<body>
<div class="div">div块元素</div>
<span>span行内元素</span>
</body>
</html>
3. float 浮动
正常标准文档流：
浮动之后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
<div class="layer01"><img style="width: 300px" src="images/894afcd7d6ab1ce7d29b9558510f80a5(1).jpg" alt=""></div>
<div class="layer02"><img style="width: 300px" src="images/1615167693154.jpg" alt=""></div>
<div class="layer03"><img style="width: 300px" src="images/b71fdf6f33a312796f98c35a27fe85f2.jpg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的边缘碰到包含框或另外一个浮动盒子为止
</div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px black solid;
}
.layer01{
border: 1px red dashed;
display: inline-block;
float: left;
}
.layer02{
border: 1px #00F dashed;
display: inline-block;
float: left;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float: left;
}
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
}
4. 父级边框塌陷的问题
/*
clear:right 右侧不允许有浮动元素
clear:left 左侧不允许有浮动元素
clear:both 两侧都不允许有浮动元素，意思就是重新开一行来使自己单独浮动
clear:n
*/
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
clear: both;
}
但是这些浮动元素依然是不在父元素之内的，也就是说超出了父元素，解决方案：
-
增加父元素的高度：
即给父元素设置高度大于或等于所有浮动元素排列后的高度
-
在父元素最末端增加一个空的div标签，清楚浮动
<div class="clear"></div>.clear{ clear: both; margin: 0px; padding: 0px; }
-
overflow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #content{ width: 300px; height: 100px; /* overflow: scroll; 如果文本溢出的话，会出现滚动条*/ /*overflow: auto 文本超出 自动*/ /*overflow: hidden 文本超出隐藏超出文本*/ overflow: scroll; } </style> </head> <body> <div id="content"> <img style="width: 200px" src="images/1615167693154.jpg" alt=""> <p> 这是我随便复制的一段话,这是我随便复制的一段话，这是我随便复制的一段话，这是我随便复制的一段话，这是我随便复制的一段话这是我随便复制的一段话这是我随便复制的一段话 </p> </div> </body> </html>
#father{ border: 1px black solid; /*height: 600px;*/ overflow: auto; }
-
给父类添加一个伪类：after（推荐使用）
#father:after{ content: ''; display: block; clear: both; }跟第二种在父元素末尾添加空div的原理类似，但是这样不用在html中加空div，是目前最通用的解法。
5. 对比
-
display：
方向不可以控制
-
float：
浮动起来之后会脱离标准文档流，所以需要解决父级元素边框塌陷问题
六、定位
1. 相对定位
position: relative; 元素相对于原来位置移动，元素设置此属性之后，仍然处于文档流中，不影响其他元素的布局，边框不会塌陷，原来位置被保留，跟浮动完全不一样。
<!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{
border: 1px solid black;
padding: 0px;
}
#first{
background-color: #961954;
border: 1px dashed #ff0000;
position: relative;/*元素相对于原来位置移动，元素设置此属性之后，仍然处于文档流中，不影响其他元素的布局*/
/*上下左右 可以理解为距离 或者理解为 对于设定的方向 负号表示向设定的方向移动 */
top: -20px;
left: 20px;
}
#second{
background-color: #f90079;
border: 1px dashed #00ff54;
}
#third{
background-color: #9894ff;
border: 1px dashed #0048ff;
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>
一个小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
border: 2px solid red;
padding: 10px;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background-color: #FF9AFF;
line-height: 100px;
text-align: center;
display: block;
color: white;
}
a:hover{
background: #008FFF;
}
.a2,.a4{
position: relative;
top: -100px;
right: -200px;
}
.a5{
position: relative;
top: -300px;
right: -100px;
}
</style>
</head>
<body>
<div id="box">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
2. 绝对定位
定位：基于距离它最近的有定位的祖先元素定位，上下左右
可以超出浏览器窗口，也可以超出父元素的范围。
-
父级元素没有设置定位的前提下，相对于浏览器定位，设置的偏移距离其实是距离浏览器边框的距离。
#second{ background-color: #f90079; border: 1px dashed #00ff54; position: absolute; right: 20px; }
-
父级元素设置定位后，相对于父级元素定位
#father{ border: 1px solid black; padding: 0px; position: relative; }
3. 固定定位
<!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;
}
/*fixed 固定定位*/
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>
不论怎么滑动滚动条，div2永远是在右下角不动的。
4. z-index
图层的感觉！ z-index 0~无限
透明度：opacity: 0.5 或者 filter 过滤器：filter: opacity(0.5);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<ul>
<li><img style="width: 250px" src="images/b71fdf6f33a312796f98c35a27fe85f2.jpg" alt=""></li>
<li class="tipText">学习CSS</li>
<li class="tipBG"></li>
<li class="tipText1">时间：2099-01-01</li>
<li class="tipText2">地点：月球一号基地</li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app{
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid #000;
width: 240px;
}
/*父级元素相对定位*/
#app ul{
position: relative;
}
.tipText{
color: white;
z-index: 999;
position: absolute;
top: 80px;
}
.tipText1{
color: white;
z-index: 888;
position: absolute;
top: 100px;
}
.tipText2{
color: white;
z-index: 777;
position: absolute;
top: 120px;
}
.tipBG{
background: #000000 50%;
width: 300px;
height: 60px;
/*透明度*/
/*opacity: 0.5;*/
/*filter 过滤器*/
filter: opacity(0.5);
position: absolute;
top: 70px;
z-index: 100;
}
七、动画
参考菜鸟教程CSS3
点击跳转：菜鸟教程CSS3动画学习
例子1：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
from {background: red;}
to {background: yellow;}
}
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
- 规定动画的名称
- 规定动画的时长
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
例子2：
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
八、总结
浙公网安备 33010602011771号