day02 css高级选择器 继承性和层叠性 盒模型 浮动
一.高级选择器
1.共性选择器, 和特性选择器的对比: '共性'简化代码
需求:
八戒1 30px green
八戒2 green text-decoration: underline;
八戒3 30px text-decoration:underline;
用id没问题: 但是style的代码重复的多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1{
font-size: 30px;
color: green;
}
#p2{
text-decoration: underline;
color: green;
}
#p3{
font-size: 30px;
text-decoration: underline;
}
</style>
</head>
<body>
<p id="p1">八戒1</p>
<p id="p2">八戒2</p>
<p id="p3">八戒3</p>
</body>
</html>
用class类名: 可以比id少一些代码(公共属性class的使用, 比特性id的优点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fs{
font-size: 30px;
}
.cl{
color: green;
}
.ud{
text-decoration: underline;
}
</style>
</head>
<body>
<p id="p1", class="fs cl">八戒1</p>
<p id="p2", class="cl ud">八戒2</p>
<p id="p3", class="fs ud" >八戒3</p>
</body>
</html>
2.后代选择器: 父子标签中间用空格分隔(子子孙孙)
div p{ }
.faster p{}
.faster ul li p{}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div p{
color: green;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<div class="faster">
<p>
bajie
</p>
<ul>
<li>
<p>
wukong
</p>
</li>
</ul>
</div>
</body>
</html>
3.子代选择器: 用>号, 只代表选中>后紧邻的一层
div>p{ }
特例: father>ul>li 设置颜色时,这个li下面的ul下面的li也变red了, 是因为inherited from li. (inherited 继承)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father>p{
color: green;
}
.father>ul>li{
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>bajie</p>
<p>bajie</p>
<div class="content">
<p>wukong</p>
</div>
<ul>
<li>
datang
<ul>
<li>
tangtang
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
4.组合选择器: 用,逗号分隔多个选择器
多个选择器, 组合到一起共同设置样式
div,p,a,li,span{ }
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size: 30px;
}
*{
padding: 0;
margin: 0;
}
div,p,a,span{
color: red;
}
</style>
</head>
<body>
<div>
bajie
</div>
<p>
wukong
</p>
<a href="javascript:void(0)">大唐</a>
<span>糖糖</span>
</body>
</html>
5.交集选择器: 用.点连接两个同级选择器形成交集
dev.active{ }
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
font-size: 30px;
}
.active{
color: green;
}
div.active{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="active">
八戒
</div>
<div class="wu">
悟空
</div>
</body>
</html>
6.属性选择器
专门用做选择属性的, 基本不用, 因为id和class已足够进行选择
input[type='text']
input[type='password']
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form input[type='text']{
background-color: red;
}
form input[type='password']{
background-color: green;
}
form #user{
background-color: yellow;
}
</style>
</head>
<body>
<form action="">
<input type="text" id="user">
<input type="password">
</form>
</body>
</html>
7.伪类选择器
从a标签演变而来, "爱恨准则" LoVe HAte
a:link: 链接没被访问时的样式
a:visited: 访问过后的样式
a:hover: 鼠标悬停时的样式
a:active: 按住鼠标时的样式
span:hover
标签的显示与隐藏: display:block; display:none; (起初不在网页上占位置,显示后才占位置)
hover小技巧: 在父标签上悬浮,让字体标签变色
.abc:hover .bcd{
color: red;
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a:link{
color: green;
}
a:visited{
color: yellow;
}
a:hover{
color: red;
}
a:active{
color: black;
}
span:hover{
color: blue;
font-size: 40px;
}
.bcd{
display: none;
}
.abc:hover .bcd{
color: red;
display: block;
}
</style>
</head>
<body>
<a href="#">八戒爱谁谁</a>
<span>悟空</span>
<div class="abc">
bajie
<p class="bcd">wukong</p>
</div>
</body>
</html>
8.伪元素选择器
li:first-child{ }
li:last-child{ }
li:nth-child(3){ } #选中指定: 数值从1开始, 0的时候表示没有选中
li:nth-child(n){ } #选中所有: 这里面必须是n
li:nth-child(2n){ } #偶数
li:nth-child(2n-1){ } #奇数
伪元素, 如果需要添加内容属性一定是content,如果是content='<h3>八戒</h3>'不会被渲染出来
p:first-letter #(letter 字母)
p:before
p:after
小技巧: 这个标签是块级标签, 并且不再页面中占位置; 这个东西和布局有关系
.box2{
display: block; #转成块,块级另起一行
height: 0; #高度变成0
visibility: hidden; #(visibility 可见度),隐藏掉,因为display:none不能用,上面转成block用过了, 有冲突,而且这个不占位置
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:first-letter{
color: red;
}
p:before{
content: '$';
}
p:after{
content: '.';
}
.box2{
display: block;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<p class="box">
<span>bajie</span>
</p>
<span class="box2">wukong</span>
</body>
</html>
二.css的继承性(inherited from):
只有:
color,
font-xxx,
line-xxx,
text-xxx 这几个可以继承
盒模型的属性是不可以继承的
特殊的: a标签有爱恨准则, 所以不继承: 如果要改a标签的颜色一定要选中a,不能用继承性来设置
text-align: center; #文本在盒子里左右居中 (align 排列)
bgc不能继承,为什么span也绿了? 是因为span的bgc默认是"透明"色, 所以span的表现也是green
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box p{
color: red;
font-size: 30px;
line-height: 40px;
text-align: center;
background-color: green;
}
span{
background-color: transparent; /*(transparent 透明的)*/
}
.box{
color: red;
}
</style>
</head>
<body>
<div class="box">
bajie
<a href="#">百度一下</a>
<p>
wukong
<apan>
datang
</apan>
</p>
</div>
</body>
</html>
三.css的层叠性:
就是覆盖: 看权重, 谁的权重大,就按谁的样式进行显示(分为选中的标签属性 和 继承来的标签属性)
1.1.选中的标签: 如何看权重? 数选择器的数量: id class 标签
#box{ } /*1 0 0 */
.box{ } /*0 1 0*/
div{ } /*0 0 1*/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
color: yellow;}
.box{
color: red;}
div{
color: green;}
</style>
</head>
<body>
<div class="box" id="box">
bajie
</div>
</body>
</html>
1.2.选中的标签: 数权重, 如果权重一样的,怎么办? 后写的优先级高, 生效
#father1 #father2 .box3 .box4{ } /*2 2 0*/
.box1 .box2 #father3 #father4{ } /*2 2 0*/
上面这两权重一样,谁写后面谁生效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 .box2 .box3 .box4{
color: red;}
#father1 #father2 .box3 .box4{
color: green;}
.box1 .box2 #father3 #father4{
color: yellow;}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="father4">
八戒爱谁谁
</p>
</li>
</ul>
</div>
</body>
</html>
2.继承而来的标签的属性的权重为0, 它和"完全"选中的标签没有可比性
#father1 #father2 #father3 color:red
.box1 .box2 .box3 .box4 color:yellow
300 > 040 ? 不是的,文字的颜色第一个选择器是继承作用的,第二个是选中,所以根本不用数权重,直接是完全选中的生效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#father1 #father2 #father3{
color: red;}
.box1 .box2 .box3 .box4{
color: yellow;}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="father4">
八戒爱谁谁
</p>
</li>
</ul>
</div>
</body>
</html>
3.1.都是继承来的时候: 权重都为0,这时候哪个生效? 哪个层级更接近, 哪个就生效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#father1 #father2 #father3{
color: red;}
.box1 .box2{
color: yellow;}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="father4">
八戒爱谁谁
</p>
</li>
</ul>
</div>
</body>
</html>
3.2.都是继承来的时候: 权重都为0,这时候哪个生效? 哪个层级更接近, 哪个就生效; 若是两个层级一样呢? 再去数选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*3 0 0*/
#father1 #father2 #father3{
color: red;}
/*0 3 0*/
.box1 .box2 .box3{
color: yellow;}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="father4">
八戒爱谁谁
</p>
</li>
</ul>
</div>
</body>
</html>
总结:
层叠性的权重比较:
行内 > id > class > 标签
四.初识盒模型
width: 内容区域的宽度
height:内容区域的高度
padding: 内边距,和内容区域共同构成了盒子的大小
border: 边框,和padding,内容区域共同构成了盒子的总大小
margin: 外边距.坐标轴圆点在左上角
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
padding: 100px;
border: 20px solid green;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1.盒模型的计算
计算: 如果要保证盒模型的大小不变,加padding,就一定要减width, 减height
前提: 在标准文档流下
padding: 调整父子盒子之间的位置
margin: 调整兄弟盒子之间的位置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
padding-left: 20px;
padding-top: 20px;
border: solid 10px green;
}
span{
background-color: red;
margin: 30px;
}
</style>
</head>
<body>
<div class="box">
<span>八戒</span>
<span>八戒</span>
</div>
<div class="box">八戒</div>
</body>
</html>
四.初识浮动
是布局的一种方式
作用: 浮动能实现元素左右并排
盒子一浮动就脱离了标准文档流, 就没有了标准下的属性(比如块, 和行内), 脱离了就不占位置了
第一个盒子浮动, 就去找父亲的边, 第二个盒子浮动,就去找前面浮动盒子的边
float: left;
float: right;
子盒子在父盒子里面居中:
margin-left: auto;
margin-right: auto;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;}
.top-Bar{
width: 100%;
height: 40px;
background-color: #333;}
.container{
width: 1226px;
background-color: red;
height: 40px;
margin-left: auto;
margin-right: auto;}
.top-Bar .top-content{
width: 550px;
height: 40px;
background-color: green;
float: left;}
.top-Bar .top-shop{
width: 120px;
height: 40px;
float: right;
background-color: yellow;}
.top-Bar .top-info{
width: 180px;
height: 40px;
float: right;
background-color: purple;}
</style>
</head>
<body>
<div class="top-Bar">
<div class="container">
<div class="top-content"></div>
<div class="top-shop"></div>
<div class="top-info"></div>
</div>
</div>
</body>
</html>
内容总结
1.高级选择器
组合选择器
dev,a,p{ }
后代选择器
dev p{ }
子代选择器
dev>p{ }
交集选择器
dev.active{ }
属性选择器
input[type='text']{ }
伪类选择器
a:LoVe HAte
a:link{ }
a:visited{ }
a:hover{ }
a:active{ }
对a进行样式设置, 要选中a, 不能用继承设置
伪元素选择器(其实是有两个冒号的,写一个就行了, 一定是结合content)
p:first-letter{ }
p:before{ } p:after{ }
2.css的继承性和层叠性
继承性: color text-xxx line-xxx font-xxx 这几个属性是可以被继承下来的
层叠性: 数权重(数选择器的个数): id class 标签; 谁的权重大就按谁的样式显示
权重比较: 行内>id>class>标签
继承来的权重为0, 与选中的标签没有可比性
如果都是继承, 权重为0, 这时候看就近原则, 如果一样近,再去数权重
权重一样,后面的权重大
3.盒模型
标准盒模型:
width 内容的宽度
height 内容的高度
padding 内边距, 内容到边框的距离
border 边框
margin 外边距, 边到边的距离
4.计算盒模型
盒子的大小 = width + 2*padding + 2*border
如果保证盒子的大小不变, 那么加padding就要减内容的width或height
5.浮动
能实现元素并排, 只要盒子浮动了, 就脱离了标准文档流, 就不在文档流上占位置