一丶css的引入方式
1.行内样式
<div> <p style="color: green">我是一个段落</p> </div>
2.内接样式
<style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style>
3.外接样式-链接式
<link rel="stylesheet" href="./index.css">
4.外接样式-导入式
<style type="text/css"> @import url('./index.css'); </style>
二丶css选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./css/reset.css"> <style type="text/css"> /*1.标签选择器 选中的是 ‘共性’*/ p{ color: red; } /*重置样式*/ /*组合选择器*/ ul,ol{ list-style: none; } /*2.类选择器 .类名 选中的也是共性 可以有多个*/ .active{ color: yellow; } .large{ font-size: 30px; } /*3.id选择器 选中的是‘特性’ # id是唯一的*/ #p1{ color: green; } /*4. 通配符选择器 * 在以后工作中不要用这个 */ /*一开始布局页面如果写css,一定要重置*/ /**{ padding: 0; margin: 0; }*/ a{ /*清除a标签的下划线*/ text-decoration: none; } .baidu{ color: blue; /*下划线*/ text-decoration: underline; /*显示小手的状态*/ cursor: pointer; } input{ border: none; width: 400px; height: 40px; border: 1px solid #e0e0e0; font-size: 22px; } </style> </head> <body> <p id="p1">alex</p> <p id="p2">alex2</p> <p>alex3</p> <p>alex4</p> <p>alex5</p> <ul> <li class="active large"> alex1 </li> <li> alex2 </li> </ul> <ul> <li class="active"> wusir </li> </ul> <a href="javascript:void(0);">百度一下</a> <span class="baidu">百度一下</span> <input type="text"> </body> </html>
三丶高级选择器
后代选择器 儿子丶孙子丶重孙子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style type="text/css"> /*指定到了具体标签,father下的,类是wu的标签的变色*/ .father .wu{ color:red; } /*father后代里的所有p标签都变色*/ /*.father p{ color: green; }*/ </style> </head> <body> <div class="father"> <p>你好</p> <ul> <li> <p class="wu">wusir</p> </li> </ul> </div> <p class="wu">日天</p> </body> </html>
子代选择器 只能是亲儿子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>子代选择器</title> <style type="text/css"> /*含有father类下面的子标签p变色*/ /*.father>p{ color: red; }*/ /*含有father类下面的ul标签下的li标签变色*/ .father>ul>li{ color: blue; width: 100px; } .container{ color: green; } </style> </head> <body> <div class="father"> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <div class="content"> <p>wusir</p> </div> <ul> <li> <p>alex2</p> <ul> <li>wusir2</li> </ul> </li> </ul> </div> <div class="container"> <p>日天</p> </div> </body> </html>
组合选择器 多个选择器组合到一起共同设置样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style type="text/css"> /*标签的组合选择*/ body,div,p,a,span{ color: blueviolet; font-size: 50px; } </style> </head> <body> <div>alex</div> <p>骑猪日天鸟</p> <a href="#">噬月吞天狗</a> <span>wusir</span> </body> </html>
交集选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>交集选择器</title> <style type="text/css"> div{ color: red; } div.active{ color: green; } </style> </head> <body> <div class="active">alex</div> </body> </html>
属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style type="text/css"> form input[type="text"]{ background-color: red; } form input[type="password"]{ background-color: blue; } form #user{ background-color: green; } </style> </head> <body> <form action=""> <input type="text" name="" id="user" value="" /> <input type="password" name="" id="" value="" /> <input type="text" name="" id="" value="" /> </form> </body> </html>
伪类选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> /*爱恨准则 LoVe HAte*/ /*没有被访问的a标签的颜色*/ a:link{ color: red; } /*访问过后的a标签的颜色*/ a:visited{ color: yellow; } /*鼠标悬停时候a标签的颜色*/ a:hover{ color: green; } /*鼠标点击时a标签的颜色*/ a:active{ color: slateblue; } /*鼠标悬停在上面时候的变成下面的样式*/ span:hover{ color: red; font-size: 42px; text-decoration: underline; } /*使child不显示*/ .child{ display: none; } /*鼠标悬停在father上面时候 child变成下面的样式*/ .father:hover .child{ color: blueviolet; display: block; font-size: 52px; } </style> </head> <body> <a href="#">百度一下</a> <br> <span>alex</span> <div class="father"> wusir <p class="child">alex2</p> </div> </body> </html>
伪元素选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style type="text/css"> /*p标签中第一个元素变成下面样式*/ p:first-letter{ color: red; font-size: 30px; } /*在p标签最前面加上符号*/ p:before{ content: '$'; } /*在p标签最后面加上符号*/ p:after{ content: '%'; } .box{ background-color: black; /*需求：这个盒子一定是块级标签 span==>块 并且不再页面中占位置。未来与布局有很大关系 */ /*隐藏元素,不占位置*/ /*display: none;*/ display: block; /*隐藏元素,占位置*/ visibility: hidden; height: 0; } </style> </head> <body> <p class="box"> <span>alex</span> </p> <span class="box2">alex2</span> <div> wusir </div> </body> </html>
三丶css的继承性和层叠性
继承性:
color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。盒模型的属性是不可以继承下来的 a标签有特殊情况，设置a标签的字体颜色 一定要选中a，不要使用继承性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>继承性</title> <style type="text/css"> /*box下面的p标签中的span标签变成下面样式*/ /*.box p span{ color: red; }*/ .box{ color: red; } .box a{ color: yellow; } .box p{ color: green; font-size: 30px; line-height: 30px; background-color: crimson; 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>
层叠性
(1)行内 > id >class >标签
(2)数数 数 id class 标签
(3)先选中标签,权重一样,以后设置为主
(4)继承来的属性,它的权重为0,与选中的标签没有可比性
(5)如果都是继承来的属性,保证就近原则
(6)都是继承来的属性,选择的标签一样近,再去数权重
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*css层叠性 权重 谁的权重大就会显示谁的样式*/ /*如何看权重 数数选择器 id class 标签*/ /*1 0 0*/ #box{ color: cornflowerblue; } /*0 1 0*/ .box{ color: red; } /*0 0 1*/ div{ color: green; } /* id > 类 > 标签*/ </style> </head> <body> <div id="box" class="box">猜猜我是什么颜色 </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层叠性-深入</title> <style type="text/css"> /*1 3 0*/ #father1 .box #father2 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> <head> <meta charset="UTF-8"> <title>层叠性-再深入</title> <style type="text/css"> /*继承来的属性 它的权重为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> <head> <meta charset="UTF-8"> <title>层叠性-又再深入</title> <style type="text/css"> /*继承来的属性 权重为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>
四丶盒模型
属性:
内容的宽度
height:内容的高度
padding:内边距框 内容到边框的距离
border:边框
margin:外边框另一个边到另一个边的距离
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; padding: 20px; border: 10px solid greenyellow; } </style> </head> <body> <div id="box" class="box"> </div> </body> </html>
盒模型的计算
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型的计算</title> <style type="text/css"> .box{ width: 180px; height: 180px; padding-left: 20px; padding-top: 20px; border: 1px solid red; } span{ background-color: blue; } .box1{ margin-left: 30px; } </style> </head> <body> <!--202*202--> <div class="box"> <span>哈哈哈</span> <span class="box1">嘻嘻嘻</span> </div> <div class="box"> <span>嘎嘎嘎</span> </div> </body> </html>
浮动
float:left 向左浮动
float:right 向右浮动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*一定要先写这个*/ *{ padding: 0; margin: 0; } .top-Bar{ width: 100%; height: 40px; background-color: #333; } .container{ width: 1226px; height: 40px; margin-right: auto; margin-left: auto; } .top-Bar .top-l{ width: 550px; height: 40px; background-color: green; float: left; } .top-Bar .top-shop{ width: 100px; height: 40px; background-color: yellow; float: right; } .top-Bar .top-info{ width: 200px; height: 40px; background-color: blue; float: right; margin-right: 20px; } </style> </head> <body> <div class="top-Bar"> <div class="container"> <div class="top-l"> </div> <div class="top-shop"></div> <div class="top-info"></div> </div> </div> </body> </html>