16-如何正确的使用类选择器及总结
一般情况下尽量不要去使用id选择器，因为id选择器有很大的限制性，id一般都是JS配合使用的，类选择器都是和CSS配合使用的，特殊性情况可以用id选择器。
类的使用想要用好首先要找共有的属性
一定要有“公共类”的概念，不要试图用一个类去写所有的属性，标签要携带多个类，共同设置标签的样式，每个类要尽可能的小，最好只有一个样式
17-高级选择器
|
名称
|
说明
|
|
并集选择器
|
多个选择器通过逗号连接而成，同时声明多个风格相同样式
|
|
交集选择器
|
由两个选择器连接而成，选中二者范围的交集，两个选择器之间不能有空格，第一个必须是标签选择器，第二个必须是类先择期或者ID选择器
|
|
后代选择器
|
外层的选择器写在前面，内层的选择器写在后面，之间空格分隔标签嵌套时，内层的标签称为外层标签的后代
|
|
子元素选择器
|
通过>连接在一起而构成，仅作用于子元素
|
|
属性选择器
|
选取带有指定属性的元素，或选取带有指定属性和值的元素
|
18-属性选择器
属性选择器是CSS3中的新的选择器，之前的选择器都是CSS2中的
属性选择器通常使用在表单控件中比较频繁
找到所有title属性等于hello的元素：
[title="hello"] {
color: red;
}
找到所有title属性以hello开头的元素：
[title^="hello"] {
color: red;
}
找到所有title属性以hello结尾的元素：
[title$="hello"] {
color: red;
}
找到所有title属性中包含（字符串包含）hello的元素：
[title*="hello"] {
color: red;
}
找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：
[title~="hello"] {
color: red;
}
19-伪类选择器(a标签的爱恨原则)
伪类选择器就是CSS3中的选择器，一般是用在a标签上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*没有被访问的a标签的样式*/
/*div ul li[class='item1'] a:link{*/
/*color: green;*/
/*}*/
/*访问过后的链接样式*/
/*div ul li[class='item2'] a:visited{*/
/*color: green;*/
/*}*/
/*鼠标悬浮的时候改变*/
/*div ul li[class='item3'] a:hover{*/
/*color: green;*/
/*}*/
/*鼠标选中后的样式*/
/*div ul li[class='item4'] a:active{*/
/*color: green;*/
/*}*/
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
<a href="
https://www.baidu.com">百度</a>
</li>
<li class="item2">
<a href="
https://www.processon.com">processon</a>
</li>
<li class="item3">
<a href="
https://www.luffycity.com">路飞学城</a>
</li>
<li class="item4">
<a href="#">路飞学城2</a>
</li>
</ul>
</div>
</body>
</html>
20-伪类选择器(nth-child用法)
没有访问的超链接a标签样式：
a:link {
color: blue;
}
访问过的超链接a标签样式：
a:visited {
color: gray;
}
鼠标悬浮在元素上应用样式：
a:hover {
background-color: #eee;
}
鼠标点击瞬间的样式：
a:active {
color: green;
}
input输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #eee;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*没有被访问的a标签的样式*/
/*div ul li[class='item1'] a:link{*/
/*color: green;*/
/*}*/
/*访问过后的链接样式*/
/*div ul li[class='item2'] a:visited{*/
/*color: green;*/
/*}*/
/*鼠标悬浮的时候改变*/
/*div ul li[class='item3'] a:hover{*/
/*color: green;*/
/*}*/
/*鼠标选中后的样式*/
/*div ul li[class='item4'] a:active{*/
/*color: green;*/
/*}*/
/*选择标签内的子类*/
/*div ul li:nth-child(1){*/
/*color: green;*/
/*}*/
div ul li:nth-child(2n-1){
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="
https://www.baidu.com">百度</a>
</li>
<li class="item2">
2
<a href="
https://www.processon.com">processon</a>
</li>
<li class="item3">
3
<a href="
https://www.luffycity.com">路飞学城</a>
</li>
<li class="item4">
4
<a href="#">路飞学城2</a>
</li>
</ul>
</div>
</body>
</html>
21-伪元素选择器
伪元素选择器中的before和after是经常用到的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
/*选中当前的第一个首字母,设置样式*/
/*p:first-letter{*/
/*color: red;*/
/*}*/
/*通常和content联合使用，使用不是很频繁*/
/*p:before{*/
/*content: 'panda';*/
/*color: red;*/
/*}*/
/*和content联合使用，使用很频繁*/
/*p:after{*/
/*content: '伪类选择器，在标签后加内容'和布局有很大关联（清除浮动）;*/
/*font-size: 28px;*/
/*}*/
</style>
</head>
<body>
<p>
这是一个段落
</p>
</body>
</html>
22-css的继承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS继承性</title>
<style type="text/css">
/*继承的属性有一些是可以继承的*/
div[class='father']{
color: red;
background-color: green;
}
</style>
</head>
<body>
<!--继承：给父级设置一些属性，子级继承了父级的该属性，这是CSS中的继承
有一些属性可以继承下来 color font text line 文本的元素
像一些盒子元素，定位的元素(浮动，绝对定位，固定定位)不能继承-->
<div class="father" id="egon">
<p>alex</p>
</div>
</body>
</html>
23-css的层叠性
层叠性：权重大的标签覆盖权重小的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS层叠性</title>
<style type="text/css">
#box{
color: green;
}
.container{
color: red;
}
p{
color: yellow;
}
</style>
</head>
<body>
<!--CSS是具有权重性的，谁的权重大就选择谁
如何判断谁的权重大？
id的数量，class的数量，标签的数量
-->
<p id="box" class="container">颜色的显示(层叠性)</p>
</body>
</html>
24-css权重比较
25-层叠性权重相同处理和继承的权重为0
总结：先看有没有被选中，如果选中了，就数数(id,class,标签数量)谁的权重大，就显示谁的属性
如果没有被选中，继承的属性权重为0
如果属性都是继承下来的，权重都是0，以就近原则，描述距离标签近的就显示，就近原则一样时选择权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性权重处理</title>
<style type="text/css">
/*权重111*/
#box1 .wrap2 p{
color: red;
}
/*权重111*/
#box2 .wrap3 p{
color: yellow;
}
</style>
</head>
<body>
<!--权重相同的时候，以后来者居上为主-->
<!--继承来的属性权重为0-->
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>颜色展示层叠性</p>
</div>
</div>
</div>
</body>
</html>
26-!important属性介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重深入</title>
<style type="text/css">
p{
color: red;
font-size: 30px;
}
.spe1{
color: yellow!important;
font-size: 40px;
}
.spe2{
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<!--!important表示的是最高的权限，强制执行，但是不能影响继承的权重的，只能影响选中的元素-->
<div>
<p class="spe1 spe2">1.多个类的选择顺序</p>
<p class="spe2 spe1">2.多个类的选择顺序</p>
</div>
</body>
</html>
27-盒模型介绍
浏览器里显示的所有的标签都被看做是一个盒子
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
28-盒模型五个属性介绍
在网页中都是用方框实现的
width：内容的宽度，而不是整个盒的宽度
height：内容的高度，而不是整个盒的高度
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
29-盒模型的计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
#space{
width: 200px;
height: 200px;
padding: 20px;
margin: 1px;
border: 5px solid red;
}
#box{
width: 400px;
height: 400px;
padding: 0;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="space">
</div>
<div id="box">
</div>
</body>
</html>
30-认识padding
padding就是内边距，padding的区域是有背景颜色的，并且背景颜色和内容区域颜色一样
也就是说background-color这个属性将填充所有的border以内的区域
padding是有四个方向的，能够分别描述四个方向的padding
描述padding方向的方法有两种
1.写小属性
2.写综合属性，用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
/*小属性限制*/
/*padding-left: 20px;*/
/*padding-right:10px ;*/
/*padding-top: 15px;*/
/*padding-bottom: 12px;*/
/*综合属性，用空格隔开，顺序是上右下左的顺时针方向*/
/*padding: 10px 20px 30px 40px;*/
/*综合属性，用空格隔开，顺序是上->左右->下*/
/*padding: 10px 20px 30px;*/
/*综合属性，用空格隔开，顺序是上下->左右*/
/*padding: 10px 40px;*/
border: 5px red solid;
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
31-清除某些标签默认的padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除默认padding标签</title>
<style type="text/css">
/*使用*清除所有的默认边距是有问题的，*的效率很低，底层是在遍历标签*/
/**{*/
/*padding: 0;*/
/*margin: 0;*/
/*}*/
/*最好的使用方法就是使用并集选择器的清除默认的样式表*/
/*百度搜索reset.css*/
/*引入reset.css文件去清除所有的默认标签*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
</style>
</head>
<body>
<!--ul标签是有默认的padding的边距的-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
32-认识border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border认识</title>
<style type="text/css">
/*如果边框的颜色不写，默认颜色就是黑色的*/
/*如果不写粗细，只有solid，就默认边框是3px，黑色*/
.box{
width: 200px;
height: 200px;
border: green 5px solid;
/*按照三要素拆分*/
/*border-width: 5px;*/
/*border-color: yellow;*/
/*border-style: dashed;*/
/*按照方向分*/
/*border-top-width: 10px;*/
/*border-left-width: 20px;*/
/*border-right-width: 30px;*/
/*border-left-style: dashed;*/
}
</style>
</head>
<body>
<!--border就是边框-->
<!--边框有3个要素-->
<!--1.粗细-->
<!--2.线型样式-->
<!--3.颜色-->
<div class="box">
</div>
</body>
</html>
33-使用border制作三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
.box{
width: 0;
height: 0;
border-top: 20px solid red ;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
34-简单认识一下margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border:1px solid red;
background-color: green;
margin: 20px;
}
</style>
</head>
<body>
<!--margin指的是距离，外边距-->
<div class="box">
</div>
</body>
</html>
35-标准文档流的介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准文档流</title>
</head>
<body>
<!--宏观上：web页面和PS设计软件是有本质的区别的-->
<!--web页面的制作是个"流"的概念，从上往下制作-->
<!--设计软件就是随意变更地方-->
</body>
</html>
36-标准文档流下的微观现象
<!--标准文档流下的微观现象-->
<!--1.空白折叠现象-->
<!--所有的换行只有一个空格显示，如果想要加多余的空格的情况需要加特殊符号-->
<!--<div>-->
<!--文字 文字-->
<!--</div>-->
<!--2.高矮不齐，底边对齐-->
<!--<div>-->
<!--文字文字文字文字<span>123</span>文字文字文字文字文字文字-->
<!--</div>-->
<!--3.一行铺不满，换行铺-->
37-行内元素和块级元素转换
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
常用的行内元素
<a> <span> <br> <i> <em> <strong> <label>
常用的行内块状元素：
<img> <input>
块级元素特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级元素和行内元素</title>
<style type="text/css">
/*display:inline 就是块级元素转换为行内元素*/
/*display:block 就是行内元素转换为块级元素*/
/*display:inline-block:就是将块级元素转换为行内块元素*/
/*display:none 隐藏当前的标签，不再占页面空间*/
/*visibility: hidden 隐藏当前的标签，仍然占页面空间*/
.box1{
display: inline;
width: 200px;
height: 50px;
border: 1px red solid;
}
.box2{
margin-top: 20px;
width: 200px;
height: 50px;
border: 1px green solid;
}
</style>
</head>
<body>
<div class="box1">div标签1</div>
<div class="box2">div标签2</div>
</body>
</html>
38-布局属性-浮动介绍
如果想制作网页就是要通过浮动实现并排的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 300px;
height: 300px;
background-color: #666666;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: #123456;
}
</style>
</head>
<body>
<!--浮动是CSS里布局最多的属性-->
<!--浮动显示让两个元素并排显示，并且两个元素都能设置宽度和高度-->
<!--浮动的四个特性-->
<!--1.浮动的元素脱标-->
<!--2.浮动的元素互相贴靠-->
<!--3.浮动的元素"字围"效果-->
<!--4.紧凑的效果-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
39-浮动元素脱标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素脱标</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: #666666;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: #123456;
}
span{
background-color: forestgreen;
float: left;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<!--脱标：脱离了标准文档流-->
<!--浮动的盒子就是脱离了标准文档流
不浮动的盒子就会渲染到原来不设置浮动盒子的位置
-->
<div class="box1">小红</div>
<div class="box2">小黄</div>
<!--设置浮动以后，span不需要转换为块级元素也可以设置宽高，-->
<!--所有的标签，一旦设置了浮动，都不区分行内元素和块状元素-->
<span>span标签</span>
<span>span标签</span>
</body>
</html>
40-浮动元素互相贴靠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素互相贴靠</title>
<style type="text/css">
/*span{*/
/*background-color: red;*/
/*float: left;*/
/*}*/
.box1{
width: 150px;
height: 400px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 200px;
background-color: green;
float: left;
}
.box3{
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<!--<span>文字</span>-->
<!--<span>文字</span>-->
<!--如果父元素有足够的空间，那么元素之间是互相贴靠的，
如果父元素没有足够的空间，就会一直贴着最靠近的边去变化-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
41-浮动元素字围效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字围效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
float: left;
}
</style>
</head>
<body>
<div>
<img src="bd_logo1.png">
</div>
<!--所谓字围效果，当div浮动的时候，p不浮动，div挡住了p，说明div的层级比p的层级高，p中的文字不会被遮盖-->
<!--浮动的时候，永远不是一个盒子在单独浮动，要浮动就要一起浮动-->
<p>
123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字
</p>
</body>
</html>
42-浮动元素紧凑效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素紧凑效果</title>
<style type="text/css">
.box{
float: left;
background-color: yellow;
}
</style>
</head>
<body>
<!--所谓收缩，就是一个浮动元素没有设置宽度，就自动以文字的宽度紧凑收缩，和行内元素一致-->
<div class="box">
panda
</div>
</body>
</html>