css挖坑、填坑、跳进坑......
1.css的三种引入方式：
1.行内样式：优先级是最高的
2.外接样式
3.内接样式
2.css的基本选择器：选择器是选中标签，设置属性。
1.标签选择器：选择的是"共性"，不管标签嵌套多少层。<div id='box' class='box'>Bound_w</div>
2.ID选择器：选择的是特性，ID是唯一的 #box
3.class选择器：选择的是共性，类选择器可以选择多个，一个标签也可以设置多个。.box
4.通配符选择器：重置样式 *{padding：0 margin：0}
3.css的高级选择器
1.后代选择器：儿子，孙子，重孙子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .father p{ color: red; } .father .wu{ color: green; } </style> </head> <body> <div class="father"> <p>alex </p> <ul> <li> <p class="wu">wusir </p> </li> </ul> </div> <p class="wu">日天 </p> </body> </html>
2.子代选择器：只能是亲儿子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /**.father >p{*/ /*color:red;*/ /*}*/ .father>ul>li{ color: yellow; } .ritian{ color: red; } </style> </head> <body> <div class="father"> <p> alex</p> <p> alex</p> <p> alex</p> <p> alex</p> <p> alex</p> <div class="conter"> <p> wisir</p> </div> <ul> <li> alex2 <ul> <li> wusir</li> </ul> </li> </ul> </div> <div class="ritian"> <p> 日天</p> </div> </body> </html>
3.组合选择器：多个选择器组合到一起共同设置样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /**{*/ /*padding: 0;*/ /*margin: 0;*/ /*}*/ body,div,p,a,span{ padding: 0; margin: 0; } </style> </head> <body> <div> alex </div> <p> alex2 </p> <a href="#"> 日天</a> <span> wusir</span> </body> </html>
4.交集选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*div{ font-size: 30px; } .active{ color: green; } div.active{ text-decoration: underline; }*/ div{ color: red; } div.active{ color: green; } </style> </head> <body> <div class="active">alex</div> </body> </html>
5.属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> form input[type='text']{ background-color: red; } form input[type='password']{ background-color: yellow; } form #user{ background-color: green; } </style> </head> <body> <form action=""> <input type="text" id="user"> <input type="password"> </form> </body> </html>
6.伪类选择器
a:link:没有被访问过的时候的状态
a:visited:访问过后的状态
a:hover:鼠标悬停时的状态
a:active:鼠标摁住的时候的状态
display:隐藏元素，不占位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*a:hover{ color: #ff6700 }*/ /*爱恨准则 LoVe HAte*/ /*没有被访问的a标签的颜色*/ a:link{ color: green; } /*访问过后的a标签的颜色*/ a:visited{ color: yellow; } /*鼠标悬停的时候a标签的颜色*/ a:hover{ color: red; } a:active{ color: blue; } span:hover{ color: red; font-size: 24px; text-decoration: underline; } .child{ display: none; } .father:hover .child{ color: red; display: block; } </style> </head> <body> <a href="#">百度一下</a> <span>alex</span> <div class="father"> wusir <p class="child">alex</p> </div> </body> </html>
7.伪元素选择器
p:before在、、、之前添加内容，要结合content
p:after在、、、什么后面添加内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p:first-letter{ color: red; font-size: 26px; } /*用伪元素 属性一定是content*/ /*伪元素选择器与后面的布局有很大关系*/ p:before{ content: '$' } p:after{ content: '.' } .box2{ /*需求：这个盒子一定是块级标签 span==>块 并且不再页面中占位置。未来与布局有很大关系 */ /*隐藏元素 不占位置*/ /*display: none;*/ display: block; /*display: none;*/ /*隐藏元素 占位置*/ visibility: hidden; height: 0; } </style> </head> <body> <p class="box"> <span>alex</span> </p> <span class="box2">alex</span> <div>wusir</div> </body> </html>
4.css的继承性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*.box p span{ color: red; }*/ .box{ color: red; } .box a{ color: yellow; } .box p{ color: green; font-size: 30px; line-height: 30px; background-color: red; text-align: right; } span{ background-color: transparent;#背景色透明色 } </style> </head> <body> <div class="box"> 日天 <a href="#">百度</a> <p> wusir <span>alex</span> </p> </div> </body> </html>
5.层叠性：
查看准则：
行内>id>class>标签
数数：ID class 标签
先选中标签，权重一样，以后设置的为主
继承来的属性，权重都是0,
如果都是继承来的属性，保证就近原则
都是继承来的属性，选择的标签一样经的话，就去数权重。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*css层叠性 权重 谁的权重大就会显示谁的样式*/ /*如何看权重 数数选择器 id class 标签*/ /*1 0 0*/ /*#box{ color: yellow; }*/ /*0 1 0*/ .box{ color: green; } /*0 0 1*/ div{ color: red; } /* id > 类 > 标签*/ </style> </head> <body> <div class="box" id="box">猜猜我是什么颜色</div> </body> </html>
层叠深入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> /*1 3 0 */ #father1 .box2 #father3 p{ color: yellow; } /*0 4 0*/ /*.box1 .box2 .box3 .box4{ color: red; }*/ /*2 1 1*/ #father1 #father2 .box3 p{ color: green; } </style> </head> <body> <div class="box1" id="father1"> <ul class="box2" id="father2"> <li class="box3" id="father3"> <p class="box4" id="child">猜猜我的颜色</p> </li> </ul> </div> </body> </html>
层叠再次深入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> /*继承来的属性 它的权重为0，跟选中的标签没有可比性*/ #father1 #father2 #father3{ color: red; } #father1 .box2 .box3 p{ color: green; } </style> </head> <body> <div class="box1" id="father1"> <ul class="box2" id="father2"> <li class="box3" id="father3"> <p class="box4" id="child">猜猜我的颜色</p> </li> </ul> </div> </body> </html>
层叠又深入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> /*继承来的属性 权重为0*/ /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/ /*#father1 .box2{ color: red; } .box1{ color: green; }*/ /*都是继承来的 ，都一样深*/ #father1 #father2 .box3{ color: red; } #father1 .box2 .box3{ color: green; } </style> </head> <body> <div class="box1" id="father1"> <ul class="box2" id="father2"> <li class="box3" id="father3"> <p class="box4" id="child">猜猜我的颜色</p> </li> </ul> </div> </body> </html>
6.盒模型：
属性：
width内容的宽度
height：内容的高度
padding：内边框，是内容到边框的距离
border：边框
margin：外边框，另一个边到另一个边的距离
盒模型的计算：
总结：如果保证盒模型的大小不变，加padding，就一定要减去width或者height
前提是：在标准的文档流
padding：在父子之间调整位置
margin：兄弟之间调整位置
7.布局的方式 浮动
浮动能实现元素的并排 盒子一浮动，就脱离了标准文档，不占位置。