1.什么是CSS
如何学习
- css是什么
- css怎么用(快速入门)
- css选择器(重点+难点)
- 美化网页(文字，阴影，超链接，列表渐变)
- 盒子模型
- 浮点
- 定位
- 网页动画(特效效果)
1.1什么是CSS
Cascading Style Sheet层叠级联样式表
CSS:表现 (美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wDlrz7UB-1620839767965)(C:\Users\M丶楚心\AppData\Roaming\Typora\typora-user-images\image-20210507172138435.png)]
1.2发展史
CSS1.0
CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画…浏览器兼容性~
1.3快速入门
style
基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<!--规范. <style>可以编写css的代码，没一个声明，最好使用分号结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: azure;
}
</style>
</head>
<body>
<h1>我是标签h1</h1>
</body>
</html>
建议使用这种规范
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o6FgaI5M-1620839767966)([外链图片转存失败,源站可能有防盗C:\Users\M丶楚心\AppData\Roa链机制,建议(i\Typora\typoranuser-Mmages\hmageii5r-202105071746100502)(C:%5CUsers%5CM%E4%B8%B6%E6%A5%9A%E5%BF%83%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210507174610050.png#pic_center)]
)]
css的优势:
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分的丰富
- 建议使用独立于html的Css文件
- 利于SEO，容易被搜索引擎收录!
1.4CSS的3中导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
<!--内部样式-->
<style>
h1{
color:gainsboro;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="style/Demo01.css">
</head>
<body>
<!--优先级:就近原则-->
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red;">h1标签</h1>
</body>
</html>
拓展:外部样式两种写法
1.链接式:
html
<link rel="stylesheet" href="style/Demo01.css">
2.导入式:
@import是css2.1特有的
<style>
@import url("style/Demo01.css");
</style>
2.选择器
作用:选择页面上的某一个或者某一类元素
2.1基本选择器
- 标签选择器 选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
<style>
/* 标签选择器，会选择到页面上所有的这个标签的元素 */
h1{
color: greenyellow;
background: hotpink;
border-radius: 24px;
}
p{
font-size: 90px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学html</h1>
<p>学css</p>
</body>
</html>
- 类选择器 class :选择所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
<style>
/* 选择器的格式 .class的名称{}
好处，可以多个标签归类，是同一个class，可以复用
*/
.java{
color: hotpink;
}
.html{
color: indianred;
}
</style>
</head>
<body>
<h1 class="java">学Java</h1>
<h1 class="html">学html</h1>
<p class="java">学css</p>
</body>
</html>
- id选择器：全局唯一 #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
<style>
/* id选择器: id必须保证全局唯一！
#id名称()
优先级:
不遵循就近原则，固定的
id选择器>class选择器>标签选择器
*/
.java{
color: hotpink;
}
.html{
color: indianred;
}
#h1{
color: mediumorchid;
}
</style>
</head>
<body>
<h1 class="java">学Java</h1>
<h1 class="html">学html</h1>
<p class="java">学css</p>
<h1 id="h1">标题1</h1>
</body>
</html>
优先级
id选择器>class选择器>标签选择器
2.2层次选择器
- 后代选择器:在某给元素的后面 祖爷爷 爷爷 爸爸 你
/* 后代选择器 */
body p{
background: navy;
}
2.子选择器,一代，儿子
/* 子选择器 */ body>p{ background: olive; }
3.相邻兄弟选择器 同辈
/* 相邻弟选择器: 只有一个，相邻(向下) */ .active +p{ background: slategrey; }
4.通用选择器
/* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素 */ .active~p{ background: tomato; }
5.总结
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> <style> /* p{ background: mediumvioletred; } */ /* 后代选择器 */ body p{ background: navy; } /* 子选择器 */ body>p{ background: olive; } /* 相邻弟选择器 */ .active +p{ background: slategrey; } /* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素 */ .active~p{ background: tomato; } </style> </head> <body> <p>1</p> <p class="active">2</p> <p>3</p> <ul> <li> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li> </ul> </body></html>
2.3结构伪类选择器
伪类:条件
<style> /* ul的第一个子元素 */ ul li:first-child{ background: tomato; } /* ul的最后一个子元素 */ ul li:last-child{ background: turquoise; } /* 选中p1 :定位到父元素，选择当前的第一个元素 选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！顺序 */ p:nth-child(1){ background: blue; } /* 选中父元素，下的p元素的第二个，类型 */ p:nth-of-type(2){ background: yellow; } </style><p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul>
2.4属性选择器(常用)
id+class结合~
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> <style> .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: lightseagreen; text-align: center; text-decoration: none; color: mediumspringgreen; margin-right: 5px; font: bold 20px/50px Arial; } /* 属性名: 属性名=属性值(正则) */ /* =绝对等于 */ /* *=包含这个元素 */ /* ^=以这个开头 */ /* $=以这个结尾 */ /* 存在id属性的元素 a[]{} */ /* a[id]{ background: yellow; } */ /* id=first的元素 */ /* a[id=first]{ background: burlywood; } */ /* class中有links的元素 */ /* a[class*="links"]{ background: burlywood; } */ /* 选择href中以http开头的元素 */ /* a[href^=http]{ background: yellow; } */ a[href$=jpg]{ background: yellow; } </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="images/123.html" class="links tiem">3</a> <a href="images/123.png" class="links tiem">4</a> <a href="images/123.jpg" class="links tiem">5</a> <a href="abc" class="links tiem">6</a> <a href="/a.pdf" class="links tiem">7</a> <a href="/abc.pdf" class="links tiem">8</a> <a href="abc.doc" class="links tiem">9</a> <a href="abcd.doc" class="links tiem last">10</a> </p> </body></html>
=*=^=$=
CSS，js,JQuery，vue
3.美化网页元素
3.1为什么要美化页面
- 有效的传递页面信息
- 美化网页，页面漂亮，才能吸引用户
- 凹显页面的主题
- 提高用户的体验
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> <style> #title1{ font-size: 50px; } </style> </head> <body> 欢迎学习<samp id="title1">java</samp> </body></html>
3.2字体样式
<style> /* font-family:字体 font-size:字体大小 font-weight:字体大小 color:字体颜色 */ body{ font-family: 楷体; color:orange; } h1{ font-size: 50px; } .p1{ font-weight: bold; }</style>
3.3文本样式
1.颜色 color rgb rgba
2.文本对齐的方式 text-align: center;
3.首行缩进 text-indent: 2em;
4.行高 line-height: 300px; 单行文字上下居中! line-height=height
5.装饰 text-decoration
6.文本图片水平对齐 vertical-align: middle;
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> <!--颜色: 单词 RGB 0-F RGBA A:0-1 text-align:排版,居中 text-indent 段落首行缩进 height: 300px; line-height: 300px; 行高和块的高度一致,就可以上下居中 --> <style> h1{ color: #000; text-align: center; } .p1{ text-indent: 2em; } .p2{ background: #2700FF; height: 300px; line-height: 300px; } /* 下划线 */ .l1{ text-decoration: underline; } /* 中划线 */ .li2{ text-decoration: line-through; } /* 上划线 */ .li3{ text-decoration: overline; } /* 超链接下划线 */ img,span{ text-decoration: none; } 水平对齐，参照物 a,b img,samp{ vertical-align: middle; } </style> </head> <body> <p class="l1">123123</p> <p class="l2">123133123</p> <p class="l3">12312312455</p> <h1>故事介绍</h1> <p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p> <p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。</p> <p class="p2">asdbqweqwkjehaslkdwqjequwioeuaslewq</p> </body></html>
3.4阴影
/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */ #prive{ text-shadow: #3cc7f5 10px 10px 10px; }
3.5超链接伪类
正常情况下,a,a:hover
/* 默认颜色 */ a{ text-decoration: none; color:red; } /* 鼠标悬浮的状态 (只需要记住:hover)*/ a:hover{ color: orange; font-size: 50px; } /* 鼠标按住未释放的状态 */ a:active{ color: green; } a:link{ color: hotpink; } a:visited{ color: indianred; }
3.6列表
<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>
#nav{ width: 300px; background: red;}.title{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 35px;}/* ul li *//* list-style:none 去掉原点circle 空心圆decimal 数字square 正方形 */ul{ background: rgb(92, 56, 24);}ul li{ height: 30px; list-style: none; text-indent: 1em;}a{ text-decoration: none; font-size: 14px; color: #000;}a:hover{ color: orange; text-decoration: underline;}
3.7背景
背景图片
背景颜色
<style> div{ width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/a.jpg"); } .div1{ background-repeat: repeat-x; } .div2{ background-repeat: repeat-y; } .div3{ background-repeat: no-repeat; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body>
3.8渐变
渐变CSS:网址https://www.grabient.com/
background-color: #4158D0;background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
4.盒子模型
4.1什么是盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l99QLoHa-1620839767967)(C:\Users\M丶楚心\AppData\Roaming\Typora\typora-user-images\image-20210509024357715.png)]
margin:外边距
padding:内边距
border:边框
4.2边框
1.边框的粗细
2.边框的样式
3.边框的颜色
<style> /* body总有一个默认的外边距margin:0 常见操作 */ /* h1,ul,li,a,body */ /* h1 ul li a body{ margin: 0px; padding: 0px; text-decoration:none; border:粗细,样式,颜色 } */ #app{ width: 300px; border: 1px solid red; margin: 0px; padding: 0px; } h2{ font-size: 16px; background-color: #3cbda6; line-height: 30px; color: white; } form{ background: #3cbda6; } div:nth-of-type(1){ border: 3px solid black; } div:nth-of-type(2){ border: 3px dashed black; } div:nth-of-type(3){ border: 2px dashed black; } </style><div id="app"> <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>
4.3内外边距
<style> #app{ width: 300px; border: 1px solid red; margin: 0px auto; } /* 顺时针旋转 margin:0; margin:0 1px; margin:0 1px 2px 3px; */ h2{ font-size: 16px; background-color: #3c3c3c; line-height: 30px; color: white; margin: 0 1px; } form{ background: #3cbda6; } input{ border:1px solid black } div:nth-of-type(1){ padding: 10px; } </style></head><body> <div id="app"> <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>
盒子的计算方式:你这个元素到底多大?
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NzFI6PVT-1620839767968)(C:\Users\M丶楚心\AppData\Roaming\Typora\typora-user-images\image-20210509024357715.png)]
margin+border+padding+内容宽度
4.4圆角边框
4个角
<style> /* 左上 右上 右下 左下 顺时针方向 */ /* 圆圈: 圆角=半径 */ div{ margin: auto; width: 100px; height: 100px; border: 10px solid red; border-radius: 100px; } </style>
4.5阴影
<style> /* 左上 右上 右下 左下 顺时针方向 */ /* 圆圈: 圆角=半径 */ img{ margin: 0 auto; border-radius: 50px; box-shadow: 10px 10px 100px yellow; } </style></head><body> <div> <img src="CSS\images\a.jpg" alt=""> </div>
5.浮动
5.1标准文档流
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lYDBDePa-1620839767969)(C:\Users\M丶楚心\AppData\Roaming\Typora\typora-user-images\image-20210509035650876.png)]
块级元素:独占一行
h1~h6 p div 列表...
行内元素:不独占一行
span a img strong...
行内元素 可以被包含在块级元素中，反之，则不可以
5.2display
<style> /* block块元素 inline行内元素 inline-block 是块元素，但是可以内联，在一行 none */ div{ width: 100px; height: 100px; border: 1px solid seagreen; display: none; } span{ width: 100xp; height: 100px; border: 1px solid red; display: inline-block; }
1.这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
5.3float
1.左右浮动float
div{ margin: 10px; padding: 5px;}#father{ border: 1px #000 solid;}.layer01{ border: 1px #f00 dashed; display: inline-block; float: right;}.layer02{ border: 1px #f00 dashed; display: inline-block; float: left; }.layer03{ border: 1px #060 dashed; display: inline-block; float: right; clear: both;}.layer04{ border: 1px #666 dashed; font-size: 12px; line-height: 23px; display: inline-block; float: right;} <div id="father"> <div class="layer01"> <img src=".//images/a.jpg" alt=""> </div> <div class="layer01"> <img src=".//images/b.jpg" alt=""> </div> <div class="layer01"> <img src=".//images/logo.webp" alt=""> </div> <div class="layer04"> 浮动的盒子可以向左浮动，也可以向右浮动 </div> </div>
5.4父级边框塌陷问题
clear
/* clear:right 右侧不允许有浮动元素clear:left 左侧不允许有浮动元素clear:both 两侧不允许有浮动元素clear:none */
解决方案:
1.增加父级元素的高度~
#father{ border: 1px #000 solid; height: 800px;}
2.增加一个空的div标签，清除浮动
<div class="clear"></div>.clear{ clear: both; margin: 0; padding: 0;}
3.overflow
在父级元素中增加一个 overflow:hidden;
4.父类添加一个伪类：after
#father::after{ content: ''; display: block; clear: both;}
小结:
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设没有了固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类:after(推荐)
写法稍微发杂一点，但是没有副作用，推荐使用
5.5对比
display
方向不可以控制
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~
6.定位
6.1相对定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=di, initial-scale=1.0"> <title>Document</title> <!-- 相对定位 相对于自己原来的位置进行偏移 --> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0px; } #first{ border: 1px dashed rgb(148, 80, 80); background-color: #a13d30; position: relative;/*相对定位，上下左右 */ top: -20px; left: 20px; } #second{ border: 1px dashed rgb(235, 227, 227); background-color: #30a15f; } #third{ border: 1px dashed rgb(26, 5, 5); background-color: #5730a1; position: relative; bottom: -10px; 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: -20px;left: 20px;bottom: -10px;right: 20px;
6.2绝对定位
定位:基于xxx定位，上下左右~
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移~
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移,绝对定位的话，它任然在标准文档流中，原来的位置不会被保留
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=di, initial-scale=1.0"> <title>Document</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0px; position: relative; } #first{ background-color: #a13d30; border: 1px dashed #275302; } #second{ background-color: #255099; border: 1px dashed #255066; position: absolute; } #third{ border: 1px dashed rgb(26, 5, 5); background-color: #5730a1; } </style></head><body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">弟三个盒子</div> </div></body></html>
6.3固定定位fixed
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=di, initial-scale=1.0"> <title>Document</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){ /*fixed,固定定位 */ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style></head><body> <div>div1</div> <div>div2</div></body></html>
6.4 z-index
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o2mEbCNK-1620839767969)(C:\Users\M丶楚心\AppData\Roaming\Typora\typora-user-images\image-20210509152902683.png)]
图层~
z-index:默认是0，最高无限~999
opacity: 0.5;/背景透明度/
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=di, initial-scale=1.0"> <title>Document</title> <style> #content{ width: 380px; padding: 0px; margin: 0px; overflow: hidden; line-height: 25px; border: 1px #000 solid; } ul,li{ padding: 0px; margin: 0px; list-style: none; } /* 父级元素相对定位 */ #content ul{ position: relative; } .tipText, .tipBg{ position: absolute; width: 380px; top: 100px; top: 216px; } .tipText{ color: white; z-index: 0; } .tipBg{ background: #000; opacity: 0.5;/*背景透明度*/ } </style></head><body> <div id="content"> <ul> <li><img src=".//images/a.jpg" alt=""></li> <li class="tipText">学习css</li> <li class="tipBg"></li> <li>时间:2099-01-01</li> <li>地点:月球一号基地</li> </ul> </div></body></html>
6.5练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=di, initial-scale=1.0"> <title>Document</title> <style> #box{ width: 300px; height: 300px; padding: 10px; border: 2px solid red; } a{ width: 100px; height: 100px; text-decoration: none; background: #ff24cf; line-height: 100px; text-align: center; color: white; display: block; } a:hover{ background: #47a4ff; } .a2,.a4{ position: relative; left: 200px; top: -100px; } .a5{ position: relative; left: 100px; top: -300px; } </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>
6.6动画
canvas动画
卡巴斯基监控
扫一扫
510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
