一,css组合选择器
每个选择器位可以为任意基本选择器或选择器结合
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style> /*1,群组选择器:,隔开,选择的所有内容全部修改*/ /*div,.s,section { color:tan;*/ } /*2,子代选择器:>链接,主要修改子代部分内容*/ body > div { color: red; } /*去除a标签里面的下横线*/ div > a { text-decoration: none; } /*3,后代选择器(包含子代选择器):用空格链接,主要用于修改父级下面好几代的内容选择*/ body a { color: orange; } /*4,相邻选择器:用+链接,不许再一个父级下面位置相邻的两个标签,修改的是后面标签里面的内容*/ span + section { color: pink; } /*5,兄弟选择器(包含相邻选择器):用~相连,在同一个父级的情况下,位置随意,修改的是后面的内容*/ div ~ section { color: yellow; } /*6,交集选择器:既是选择器1,也是选择器2*/ i.s { color: green; } /*7,多类名选择器:一个标签里面存在多个类名,可以直接点添加*/ .d1.d2 { color: blue; } </style> </head> <body> <h1>组合选择器</h1> <hr> <div>div</div> <span class="s">span</span> <section>section</section> <div> <a href="">a标签</a> </div> <i class="s">iiii</i> <div class="di d2">乌云一层一层的遮住了光</div> </body> </html>
二,组合器优先级(控制的是同一目标才具有可比性)
在同级目录结构下
1,子代与后代优先级相同
2,相邻与兄弟优先级相同
3,最终样式采用逻辑后的样式级
不同目录结构下:
1,根据选择器的权值进行比较
2,权值为标签权重之和
3,权重 (1)*:1 (2)div:10 (3)class:100 (4)id=1000 (5)!important:10000 (权重只是在相同数量下进行比较)
4,权值比较时,关心的是值得大小,不关心位置与具体选择器名
5,id永远比class大,class永远比标签大
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组合选择器优先级</title> <!-- 10 --> <style> /*权重10*/ div { color: red; } /*权重20*/ div div { color: green; } /*大于一切标签*/ .d2 { color: blue; } /*类名抵消权重,剩余权重10*/ div .d2 { color: pink; } /*等价于,div .d2,权值相同由位置决定*/ .d1 div { color: yellow; } /*目标不一致不具有可比性*/ div .d1 >div{ color: tan; } /*id高于一切class和标签*/ #dd1 div { color: yellowgreen; } </style> </head> <body> <div> <div class="d1"> <div class="dd1"></div> <div> <div></div> <div> <div class="d2">今天真的是好天气</div> </div> </div> </div> </div> </body> </html>
三,属性选择器
属性选择器权重==class选择器权重
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .d2 { color: red; } /*存在属性class属性的所有标签*/ [class] { color: blue; } /*有属性class且值全部为d2的所有标签(值不影响权重)*/ [class="d2"] { color: pink; } /*是div,且属性class的值为d2,增加了权重*/ div[class="d2"] { color: yellow; } /*用正则匹配class中的值*/ [class ^="he"] { color: tan; } [class $="ld"] { color: cyan; } [class *='ow'] { color: green; } [class][dd] { color: brown; } </style> </head> <body> <div class="d1">div的d1 <div class="d2">div的d2</div> <!-- dd与do 都是自定义的属性 --> <div class="helloword" dd do = "do something">helloword</div> </div> </body> </html>
四,盒模型
盒模型:就是有内边距,外边距 边框与内容组成的一个正方形的模型
由margin + border + padding + content 组成 content = width *height
1,四个成员均具有自身独立显示区域,不互相影响(视觉上感觉会相互影响)
2,margin/padding 外边距/内边距控制布局
3,border 控制边框
4,content 控制内容
注意:`1,padding 与 content 共有背景颜色
2,规定起始,顺时针,不足找对面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型</title> <style> .box { margin:10px; border:solid; padding: 10px; width: 100px; height: 100px; background: red; } .box { /*一个值控制四个方向*/ margin: 20px; padding: 30px; /*两个值控制:上下,左右*/ margin:20px 10px; padding: 10px 20px; /*三个值控制:上,左右,下*/ margin: 10px 20px 30px; padding: 20px 30px 20px; /*四个值控制四个方向,上左下右顺时针的顺序*/ } /*边框:宽度,颜色,样式*/ .box { border-width: 10px; border-color: transparent; /*transparent透明,会透明处背景的颜色*/ border-style: double; /*整体设置*/ border: 5px solid orange; } </style> </head> <body> <div class="box">今天天气真好</div> </body> </html>边框的风格:
solid 实线
dashed 虚线
dotted 点状线
double 双实线
groove 曹状线
ridge 脊线
inset 内嵌效果
outset 外凸效果
border 满足复合赋值的语法 border:1px solid red
padding 和 margin 都满足单独赋值:比如:padding-left padding-right padding-top padding-bottom
五,边界圆角(border-radius)
成员:
border-top-left-radius 左上方位
border-top-right-radius 右上方位
border-bottom-left-radius 左下方位
border-bottom-right-radius 右下方位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边界圆角</title> <style> .box { width: 200px; height: 200px; background-color: orange; } .box { /*一个固定值:横纵都设置*/ border-top-left-radius: 100px; /*两个固定的值:横纵需要分开设置*/ border-top-left-radius:100px 50px; /*百分比赋值:最大200%*/ border-top-left-radius: 100%; } .box { /*不区分横纵,左上为第一个角,顺时针旋转,不足就找对角*/ border-radius: 10px 50px 100px; /*区分横纵*/ /*1,/前控制横向的,后边控制纵向的,都可以设置四个值,顺时针旋转,不足就找对角*/ border-radius: 10px 100px 70px/50px; } </style> </head> <body> <div class="box"></div> </body> </html>
六,_a_img_list标签
1,超链接标签a的基本使用
<a href="链接地址">页面显示的内容</a>
链接地址可以是网页链接地址,本地相同文件夹下的地址(直接写文件名即可) 不同文件夹下的地址(..返回本层路径的上一层目录)
2,属性:
title:鼠标悬浮的文本提示
target:_blank 新开空白标签位来打开目标页面
<a herf="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>3,其他应用场景
<a href="mailto:[email protected]">发邮件给zero</a> <a href="tel:15632478596">给这个手机号打电话</a> <a href="sms:15247859632">给这个手机号发短信</a>4,锚点
两种用法
<a href="#锚点名">前往</a>
这里的锚点名可以是id名,也可以是class名,点击前往,会自动跳转到这个标签下
5,img使用
src可以链接本地以及网络图片
alt:资源加载失败时的文本提示
title:图片的文本信息(鼠标悬浮时展示)
<img src="http://" alt="雪纳瑞" title="雪纳瑞风采">6,list列表
无序列表
<ul list-type=(一些属性)> <li>列表</li> <li>列表</li> <li>列表</li> </ul>list-style-type:circle(圆圈) disc(黑点) 意思是无序标签前面的一些标志
list-style-position:inside; outside; 前面的标志放在边框的里面还是外面
把符号变成图片: list-style-image:url("图片路径")
复合属性:list-style:none inside url("")
有序列表
<ol start="1" type="a" reversed(降序)> <li>列表</li> <li>列表</li> <li>列表</li> </ol><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>_a_img_list标签</title> <!-- reset操作:a标签的默认属性清除 --> <style> a { color: red; text-decoration: none; outline: 0; } </style> </head> <body> <!-- 超链接a的基本使用 --> <a href="https://www.baidu.com">前往百度</a> <!-- title与target属性 --> <a herf="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a> <!-- 其他应用场景 --> <a href="mailto:[email protected]">信息给zero</a> <!-- 锚点 --> <a href="#tag">前往底部</a> b*100 <div class="bottom"> <a name="tag"></a> </div> <!-- img使用 --> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537511739499&di=f5f2763fe54c8ea4d89b2fafe0569c84&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB2IZbxogmTBuNjy1XbXXaMrVXa_%2521%25212754890204.jpg_400x400.jpg" alt="雪纳瑞" title="雪纳瑞风采"> <!-- list --> <!-- reset操作 --> <style type="text/css"> ol, ul { margin: 0; padding: 0; list-style: none; } </style> <!-- 有序列表 --> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <!-- 无需列表:常用 --> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </body> </html>
七:伪类选择器
E:link (设置超链接未被访问时的样式)
E:visited (设置超链接a在其链接地址已经被访问过的样式)
E:hover (设置元素在其鼠标悬浮时的样式)
E:active (设置元素在被用户激活(在鼠标点击与释放之间发生的时间)时的样式)
E:focus (设置对象在称为输入焦点(该对象的onfocus事件发生)时的样式)
注意:1,E:hover必须位于E:link与E:visited之后,E:active必须位于E:hover之后
2,伪类选择器可以用于选择框,内容和位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> a { color: tan; text-decoration: none; outline: 0; } /*表示a中的字初始状态*/ a:link { color: red; } /*表示a中的字悬浮的状态*/ a:hover { color: green; } /*表示a中的字被点击的状态*/ a:active { color: blue; } /*表搜a中的字被点击之后的状态*/ a:visited { color: black; } /*普通标签运用的:hover :active*/ .box { width: 50px; height: 20px; background-color: red; } .box:hover { background-color: orange; } .box:active { background-color: green; } /*内容伪类*/ .txt:before { content: "我是前缀"; } .txt:after { content: "我是后缀" } /*伪类单独出现说明把所有的内容全部选中:before :after(或者:前面加个*)*/ :after { content: "234" } /*位置从1开始,先匹配位置,再匹配类型*/ /*找到所有结构下第2个标签，如果刚好是div,那么匹配成功*/ div:nth-child(2) { color: pink; } /*先确定类型再匹配位置*/ /*先将页面中所有的div找出啦,在匹配那些在自己及机构层次下的第二个div*/ div:nth-of-type(2) { color: people } </style> </head> <body class="body"> <!-- 标签的四大伪类(链接可以添加网页链接和本地链接) --> <a href="边界圆角" target="_blank">前往边界圆角</a> <a href="http://www.baidu.com" target="_blank">访问百度</a> <div class="box" target="_blank">box</div> <!-- 内容伪类 --> <div class="txt">原来的文本</div> <!-- 位置伪类 --> <div class="wrap"> <span>span1</span> <div>div1</div> <div>div2</div> </div> <!-- 取反伪类 --> <span d>123456</span> <span dd>456789</span> </body> </html>
八,盒模型布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型布局</title> <style> /*做页面开始必须做reset操作*/ * { margin:0; } .box,.wrap { width: 200px; height: 200px; background-color: red; } .wrap { background-color: orange; } /*影响自身布局,需要改上 左边的margin-left 和margin-top*/ .box { margin-top: 50px; margin-left: 20px; } /*影响兄弟布局,需要改右 下的margin-right 和margin-bottom*/ .box { margin-right: 50px; margin-bottom: 30px; } /*display:显示方式(可以填三个值) block:块 inline:内联(宽和高被内容撑开,如果没有内容则什么也不显示) inline_block:内联块*/ .box,.wrap { display: inline-block; vertical-align: top; } /*兄弟坑(盒模型布局坑只出现在和margin-top相关的地方)*/ .si,.s2 { width: 50px; height: 100px; background-color: red; } /*重叠取大值*/ .s1 { margin-bottom: 50px; } .s2 { margin-top: 70px; } /*父子坑*/ .sup { width: 100px; height: 100px; background-color: tan; } .sub { width: 50px; height: 50px; background-color: red; } /*父子重叠,同样取大值,只不过父子连在一起,如果一方被下移,另一方也被下移*/ .sup { margin-top: 50px; } .sub { margin-top: 70px; } /*解决盒模型经典布局坑:两种方法1将父级固定*/ .sup { border-top: 1px solid transparent; /*要保证显示的区域为200px,则设置高度*/ height: 199px } /*2通过padding*/ .sup { padding-top: 50px; height: 150px; } </style> </head> <body> <div class="box">什么</div> <div class="wrap">今天天气真好</div> <section class="s1"></section> <section class="s2"></section> <div class="sup"> <div class="sub"></div> </div> </body> </html>