一、复合选择器
后代选择器、并列选择器；
1.后代选择器：
语法：祖先元素 后代元素1 后代元素2….｛具体的css样式；中间使用空格隔开｝
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 后代选择器使用空格来实现，后代指的是儿子、孙子。。。。 */
/* div span{color: red;} */
/* .bz span{color: #7FFF00;} */
/* 同一个标签设置id和class不会有冲突，id的值和class的值一样也不会有问题 */
#bz span{color: #8A2BE2;}
</style>
</head>
<body>
<!-- div可以嵌套p，反过来不可以 -->
<div class="bz" id="bz">
<p>
<span>呵呵</span>
</p>
<span>haha</span>
</div>
</body>
2.并列选择器：
语法：选择器1，选择器2…
用英文 ，隔开
代码示例:
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* div,p,h1{color: #8A2BE2;} */
/* 并列、并集选择器使用逗号来进行连接，可以使用任意一种普通选择器来进行书写，如id选择器、类选择器、标签选择器 */
#div1,#div2,.p1,.p2,h2{color: aqua;}
</style>
</head>
<body>
<div id="div1">呵呵</div>
<div id="div2">呵呵</div>
<p class="p1">好人榜</p>
<p class="p2">氛围感</p>
<h1>不符合吧</h1>
<h2>代数方程</h2>
</body>
二、选择器权重总结：
1.简单选择器权重：
同一个标签中，id选择器权重>class（类名）选择器权重>标签选择器 ；我们人为的设置id选择器权重=100，class选择器权重=10，标签选择器=1
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 同一个标签中，id选择器权重>class（类名）选择器权重>标签选择器 ；我们人为的设置id选择器权重=100，class选择器权重=10，标签选择器=1 */
/* div{color: #00FFFF;}
.div1{color: #8A2BE2;}
#div1{color: antiquewhite;} */
/* 不同的标签中，继承的权重最低，自己有的大于继承的 */
span{color: #00FFFF;}
.div1{color: #8A2BE2;}
</style>
</head>
<body>
<!-- <div class="div1" id="div1">呵呵呵</div> -->
<div class="div1">
<span>和别的</span>
</div>
</body>
2.复合选择器权重规则：
其实就是简单选择器的组合，id选择器权重=100，class选择器权重=10，标签选择器=1；同一个标签中，设置css属性，最终计算权重最大的才会生效；不同标签中，继承的权重最低。
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* p{color: #8A2BE2;} */
/* 针对同一个标签设置css属性，最终计算权重最大的才会生效 */
span{color: #00FFFF;}/* 一个标签选择器，权重是1 */
p span{color: brown;}/* 两个标签选择器，权重是2 */
.p1 span{color: blue;}/* 一个class选择器+一个标签选择器，权重是11 */
#p1 span{color: coral;}/* 一个id选择器+一个标签选择器，权重是101 */
/* 和 span{color: #00FFFF;}相比，继承的权重最低，应该显示span自己的css属性*/
#div1{color: cadetblue;}
</style>
</head>
<body>
<div id="div1">
<p class="p1" id="p1">
<span>隔阂</span>
</p>
</div>
</body>
三、css存放位置
书写网页的追求的就是将结构、样式、行为三者相分离，定义css时就有不同的写法。基于常见的存放形式我们分为三种：内嵌css、外链css、行内css。
1.内嵌css：
Css代码放在style标签中，一般放在head里；
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<!-- css内嵌式 -->
<style type="text/css">
#div1,#div2,.p1,.p2,h2{color: aqua;}
</style>
</head>2.外链css
用link 把外部的的css文件引入到 HTML中，单独建一个css
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<!-- 外链式css：用link把外部的css文件引入到html中 -->
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div>呵呵</div>
</body>
3.行内css
代码直接写在标签里
代码示例：
<body>
<!-- 行内式css -->
<div style="color: red; font-size: 100px;">呵呵</div>
</body>4.内嵌css、外链css、行内css三者之间的对比：
（1）对比内嵌式，外链式可以实现css代码和html代码的分离效果，方便代码的修改，除了电商网站的首页都用外链式；
（2）内嵌式css不用加载外部的css文件，网页的加载速度更快一点，电商网站的首页对网页的打开速度有更高的要求；
（3）行内式css一定不要写，因为修改十分不方便，还会导致页面混乱，并且加载速度会变慢；
四、不同位置css写法的权重描述：
内嵌式和外链式的权重一样，都比行内式权重小 。
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<!-- 内嵌式和外链式的权重一样，都比行内式权重小 -->
<style type="text/css">
div{color: red;}
</style>
<link rel="stylesheet" type="text/css" href="css2.css"/>
</head>
<body>
<div style="color: pink;">哈哈</div>
</body>
五、Google案例练习：
设置Google这个logo，css语法比较多，只要能实现效果，并且代码量比较少就可以；
代码示例：
第一种命名方式：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{font-size: 100px;}
.logo-g{color: blue;}
.logo-o,.logo-e{color: darkred;}
.logo-o2{color: orange;}
.logo-l{color: green;}
</style>
</head>
<body>
<!-- Google字母要在同一行展示，我们要使用合适标签才可以，div、h标签会折行，标签要放文章段落，只有span标签可以一行放多个，保持文字原样 -->
<span class="logo-g">G</span>
<span class="logo-o">o</span>
<span class="logo-o2">o</span>
<span class="logo-g">g</span>
<span class="logo-l">l</span>
<span class="logo-e">e</span>
</body>
第二种命名方式：
<span class="logo-blue">G</span>
<span class="logo-darkred">o</span>
<span class="logo-orange">o</span>
<span class="logo-blue">g</span>
<span class="logo-green">l</span>
<span class="logo-darkred">e</span> .logo-blue{color: blue;}
.logo-darkred{color: darkred;}
.logo-green{color: green;}
.logo-orange{color: orange;}
六、盒子模型：
1.认识css盒子模型：
代码示例：
solid代表实线，dashed代表虚线
1、边框代码写法：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;height: 100px;background: pink;
/* 这是最基本的边框写法，solid代表实线
border: 1px solid red;
*/
border-top: 1px solid red;
border-bottom: 2px dashed green;
border-left: 5px solid orange;
border-right: 10px dashed blue;
}
</style>
</head>
<body>
<div>哈哈</div>
</body>
2.内边距代码：
/* 这是最基本的内边距、内填充写法，padding写法的四个方向间距一致*/
padding: 10px;
/* 下面是单独设置内边距各个方向的语法 */
padding-top:10px ;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 30px;
/* 如果写两个值，值1代表上下内边距，值2代表左右内边距 */
padding: 10px 20px;
/* 如果写三个值，分别代表上、左右、下 */
padding: 10px 20px 30px;
/* 如果写四个值，分别代表上、右、下、左这样的顺时针方向的内边距 */
padding: 10px 20px 30px 40px;
3.外边距代码：
/* 一个值代表四个方向的外边距、外填充、margin一样 */
margin: 20px;
/* 外边距也可以单独设置四个方向 */
margin-top: 10px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 40px;
/* margin写两个值，第一个值代表上下，第二个代表左右 */
margin: 10px 20px;
/* 写三个值分别代表上、左右、下 */
margin: 10px 20px 30px;
/* 如果写四个值，分别代表上、右、下、左这样的顺时针方向的内边距 */
margin: 10px 20px 30px 40px;
七、音频+视频标签：
1.html5基本介绍：
h5是html5+css+JavaScript或其他脚本集合
2.html5最新标签：
（1）结构标签：
<body>
<!-- 在html5中，这些结构标签都可以增加网站的语义化，从而提升搜索引擎对网站的排名 -->
<header>头部标签</header>
<nav>导航标签</nav>
<aside>侧边栏标签</aside>
<article>文章块标签</article>
<footer>底部标签</footer>
</body>
（2）数据列表标签：
<body>
<!-- 数据列表标签：input中要设置list属性，里面值要等于想要对应的数据datalist的id值，他们两个才能对应起来 -->
请填写您的座驾：<input type="text" list="zj">
<!-- option中的value值要删除，否则无法实现效果 -->
<datalist id="zj">
<option>奔驰</option>
<option>大众</option>
<option>宝马</option>
<option>奥迪</option>
</datalist>
请输入您的化妆品：<input type="text" list="hzp">
<datalist id="hzp">
<option>大宝</option>
<option>阿玛尼</option>
<option>纪梵希</option>
<option>圣罗兰</option>
</datalist>
</body>
3.新增表单验证相关属性：
<body>
<form action="xx.php" method="get">
<!-- required属性就是来设置空判断 ，autofocus属性是来自动获取焦点-->
<input type="text" required="required" autofocus="autofocus">
<br>
<!--autocomplete要设置为on，默认值是off，name里的值对应的是我们提交的数据所保存的文件夹一样的地方 -->
<input type="text" autocomplete="on" name="cz">
<input type="submit" value="提交"/>
</form>
</body>
4.html5新增表单类型：
<body>
<form action="xx.php" method="get">
<!--type="email"就可以实现邮箱地址的验证 -->
邮箱：<input type="email"><br>
<!-- type="url"就可以实现验证是否为网址，必须包含http：//协议 -->
网址：<input type="url"><br>
<!-- type="number"可以实现输入框只能输入数字 -->
数字：<input type="number"><br>
<!--type="search"可以实现在文本框中的最后位置出现一个x，点击后可以把内容清空 -->
搜索：<input type="search"><br>
<!-- type="datetime-local“让用户可以直接通过此文本框弹出的时间日期来进行选择 -->
详细日期时间：<input type="datetime-local"><br>
<!-- type="month"可以直接选择月份 -->
月份：<input type="month"><br>
<!-- type="week"可以显示星期 -->
星期：<input type="week"><br>
<!-- type="time"可以显示时间 -->
时间：<input type="time"><br>
<!-- type="date"只显示日期 -->
日期：<input type="date"><br>
<!--type="range"可以实现滑块，比如音量大小 -->
滑块：<input type="range"><br>
<input type="submit" value="提交">
</form>
</body>
5.html5音频标签：
<body>
<!-- 音频标签价值很高，浏览器都想以自己为标准，所以w3c联盟组织就规定了浏览器对音频标签的兼容性要求，如果想要主流的浏览器都能很好的播放音频，就需要把这首音频设置为不同的格式，都加载到页面中，这样就可以保证浏览器的兼容性 -->
<!-- <audio src="yi.m4a" controls="controls" autoplay="autoplay" loop="loop"></audio> -->
<!-- 以下这种写法可以保证兼容性更好，建议用这种写法，其中 controls="controls"必须写实现播放，autoplay="autoplay"为自动播放，loop="loop"为循环播放-->
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="yi.m4a"></source>
<source src="yi.mov"></source>
</audio>
</body>6.html5视频标签：
<body>
<video width="800" height="" controls="controls" loop="loop" autoplay="autoplay">
<!-- 执行顺序和刚刚的音频标签是一样的，由上至下运行，能识别哪一个直接播放 -->
<source src="movie.mp4" type="video/mp4"></source>
<source src="movie.mov" type="video/mov"></source>
<source src="movie.webm" type="video/webm"></source>
<!-- 下面的提示文字只有在浏览器无法识别以上视频的时候才会显示给用户看，用户可以点击你写好的链接地址，下载视频使用自己本地的播放器来查看 -->
当前浏览器不支持 video直接播放，点击这里下载视频: <a href="myvideo.webm">下载视频</a>
</video>
</body>
八、css3属性：
1、css3圆角属性：
border-radius代表圆角属性；代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* border-radius代表圆角属性 */
div{width: 100px; height: 50px; border: 3px solid black; margin: 20px;background: pink; }
/* border-radius中一个值代表四个方向都一致 */
.div1{border-radius: 10px;}
/* border-radius四个值代表左上、右上、右下、左下这样一个顺时针 */
.div2{border-radius:10px 0 0 0 ;}
/* border-radius如果设置两个值，前面的值代表左上和右下，后面的值代表右上和左下 */
.div3{border-radius: 10px 0;}
/* .div3{border-radius: 10px 0 10px 0;} */
.div4{border-radius: 10px 10px 0 0;}
.div5{border-radius: 0 0 10px 10px;}
.div6{border-radius: 10px 20px 30px 40px;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</body>
代码运行结果：
2、css3渐变色背景：
linear-gradient(渐变方向，色值，色值....)
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 500px; height: 50px; border-radius:0px 0px 10px 10px ;/* background: red; */
/* linear-gradient(渐变方向，色值，色值....)渐变方向是指从哪去哪，可以是right、bottom、top、left ,也可以是具体的角度值，比如180deg，从上开始是0deg沿着顺时针方向数，每个直角方向间隔90deg，如上和右差90deg*/
/* background: linear-gradient(to right,red,blue,yellow); */
/* background: linear-gradient(180deg,red,blue,yellow); */
/* 颜色值后面添加百分比，从0%开始到100%设置颜色渐变的区域，这里0%到70%是红色到蓝色的渐变区域，70%-100%总共30%是蓝色到黄色的渐变区域 */
background: linear-gradient(to top,red 0%,blue 70%,yellow 100%);
}
</style>
</head>
<body>
<div></div>
</body>
代码实现效果：
3、css3盒子阴影：
box-shadow: 水平方向 垂直方向 阴影大小 阴影颜色；
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 200px; height: 100px; background: gold; margin: 50px; border: 3px solid black; border-radius: 20px;}
/* box-shadow: 水平方向 垂直方向 阴影大小 阴影颜色；其中，前两个值代表阴影的位置变化*/
/* 下面是实现外放光、外阴影效果的代码 */
.div1{box-shadow: 0px 0px 20px red;}
/*下面是实现内放光、内阴影效果的代码，只需要在颜色后面加inset就行 */
.div2{box-shadow: 0px 0px 20px red inset;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
代码实现效果：
4、css3透明背景：
设置背景图：background: url(./bg.jpg);
设置透明背景： background: rgba(红，绿，蓝，透明度值)；
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{background: url(./bg.jpg);}
/* background: rgba(红，绿，蓝，透明度值)； */
/* 红绿蓝都是色值号设置的，可以使用浏览器调试工具来设置想要的色值 ；透明度的值是0-1之间，0代表全透明，1代表全不透明，我们可以设置0-1之间的小数来代表透明度的百分比*/
div{width: 300px; height: 300px;border-radius: 10px; background: rgba(0,188,212,0.5); box-shadow: 3px 3px 20px black;}
</style>
</head>
<body>
<div></div>
</body>
代码实现效果：
5、css3文字阴影属性：
文字阴影属性：text-shadow:x轴 y轴 阴影大小 色值；
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{background: url(bg.jpg);}
/* 文字阴影：text-shadow:x轴 y轴 阴影大小 色值； */
div{text-shadow: 1px 1px 0px white; font-size: 30px;}
</style>
</head>
<body>
<div>
海浪无声将夜幕深深淹没<br>
漫过天空尽头的角落<br>
大鱼在梦境的缝隙里游过<br>
凝望你沉睡的轮廓<br>
看海天一色 听风起雨落<br>
执子手 吹散苍茫茫烟波<br>
大鱼的翅膀 已经太辽阔<br>
我松开时间的绳索<br>
</div>
</body>
代码实现效果：
6、css3旋转、缩放、位移：
旋转：transform: rotate(角度值);
缩放：transform: scale(缩放比例);
位移：transform: translate(x轴位移,轴位移);
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{background: url(xsw.jpg);}
div{width: 200px; height: 100px; background: rgba(255,152,0,0.5); border-radius: 15px; border: 2px solid black; margin: 100px;}
/* 旋转：transform: rotate(角度值); */
.div1{transform: rotate(90deg);}
/* 缩放：transform: scale(缩放比例); */
.div2{transform: scale(0.5);}
/* 位移：transform: translate(x轴位移,轴位移);x轴位移为正向右移动，y轴位移为正向下移动 */
.div3{transform: translate(60px,60px);}
</style>
</head>
<body>
<div class="div1">周深大鱼</div>
<div class="div2">周深大鱼</div>
<div class="div3">周深大鱼</div>
</body>
代码实现效果：
7、css3过渡属性：
过渡属性用一个动画来表示，例如transition: all 1s;
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{background: url(xz.jpg);}
div{width: 200px; height: 50px; background: rgba(3,169,244,0.5);margin: 50px; transition: all 1s;}
/* transition：想要过渡的属性，我们一般都写all代表所有的属性，只要变化了都以过渡动画的形式展示 时间：代表动画的执行时间 */
/* hover叫css伪类，作用是设置鼠标悬停时候的样式 */
.div1:hover{transform: scale(1.5); background: rgba(122,169,24,0.5);}
</style>
</head>
<body>
<div class="div1">周深</div>
<div class="div2">周深</div>
</body>
过渡属性练习代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{background: url(gd.jpg);}
div{width: 100px; height: 50px; border: 2px solid black; border-radius: 10px; margin: 100px; background: rgba(122,34,23,0.5); transition: all 1s;}
/* 这样写会被覆盖 */
/* div:hover{transform: scale(1.3); transform: rotate(360deg);} */
/* 同一个属性名，值使用空格分隔即可实现多个值的书写 */
div:hover{transform:scale(1.3) rotate(360deg);}
</style>
</head>
<body>
<div>周深</div>
</body>
8、css3会旋转的头像：
transition: all 1s 2s ease-in;
第一个时间代表动画的运行时间，第二个时间代表延迟多长时间执行动画，ease-in是变加速，ease-out是变减速，ease-in-out是先变加速后变减速。
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*border-radius:50%代表正圆 ，前提是原图是正方形 */
img{width: 50px; height: 50px; border: 5px solid gray; border-radius:50% ; margin: 50px; transition: all 1s 2s ease-in;}
/* transition: all 1s 2s ease-in;第一个时间代表动画的运行时间，第二个时间代表延迟多长时间执行动画，ease-in是变加速，ease-out是变减速，ease-in-out是先变加速后变减速*/
img:hover{transform: rotate(360deg);}
</style>
</head>
<body>
<img src="tx1.jpg" >
<img src="tx2.jpg" >
<img src="tx3.jpg" >
</body>
9、css3图片放大并旋转：
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{margin: 50px; border:2px solid red ; transition: all 1s 0.5s;}
/* 时间如果是零点几，0可以省略 */
img:hover{transform: scale(1.2) rotate(10deg);}
</style>
</head>
<body>、
<img src="tx3.jpg" >
</body>
10、x轴y轴旋转：
rotateY沿着y轴旋转，rotateX沿着x轴旋转，默认是沿着中心点旋转
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{border:2px solid red ;margin: 50px; transition: all 1s;}
/* rotateY沿着y轴旋转，rotateX沿着x轴旋转，默认是沿着中心点旋转 */
img:hover{transform: rotateY(180deg);}
/* img:hover{transform: rotateX(180deg);} */
</style>
</head>
<body>
<img src="tx3.jpg" >
</body>
11、css3自定义动画基础：
设置从左到右边变色边滑动
animation: 动画名字 时间;来调用动画;infinite作用是无限次循环，alternate作用是逆向动画
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 100px; height: 50px; border: 1px solid pink;
border-radius: 10px; animation: go 1s infinite alternate;}
/* animation: 动画名字 时间;来调用动画，infinite作用是无限次循环，alternate作用是逆向动画 */
/* 先使用@keyframes定义动画 */
@keyframes go{
/* 开始时候的状态 */
from{background: red; transform: translate(0px,0px);}
/* 结束时候的状态 */
to{background: blue; transform: translate(100px,0px);}
}
</style>
</head>
<body>
<div>周深</div>
</body>
12、css3自定义动画练习：
设置图像一直左右抖动
代码示例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img:hover{animation: cd .1s 1s infinite alternate;}
/* 可以使用百分比替代默认的from和to */
/* animation如果出现两个时间，第一个时间代表动画的运动时间，第二个时间代表延迟时间，也可以设置ease变速运动效果 */
@keyframes cd{
0%{transform: rotate(-5deg);}
50%{transform: rotate(0deg);}
100%{transform: rotate(5deg);}
}
</style>
</head>
<body>
<img src="tx3.jpg" >
</body>
1307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
