css组合选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style type="text/css"> /*组合选择器*/ /*特性:每个选择器位可以为任意基本选择器或选择器组合*/
/*群组选择器: ,隔开*/ /*控制多个*/ div, .s, section { color: red; } /*子代选择器: >连接*/ body > div { color: orange; } /*div > a { text-decoration: none; }*/ /*后代选择器: 空格连接*/ /*包含子代选择器*/ body a { text-decoration: none; } /*text-decoration 去除超链接下面的下划线*/ /*相邻选择器: +连接*/ span + section { background-color: pink; } /*兄弟选择器: ~连接*/ /*包含相邻选择器*/ div ~ section { background-color: brown; } /*交集选择器*/ /*即是选择器1又是选择器2*/ i.s { color: yellow; } /*多类名选择器*/ .d1 { color: blue; } .d1.d2 { color: tan; } .d1.d2.d3 { color: #780; } </style> </head> <body> <!-- div{div}+span{span}+section{section} --> <div>div</div> <span class="s">span</span> <section>section</section> <div> <a href="">a标签</a> </div> <i class="s">iiii</i> <div class="d1 d2 d3">呵呵</div>
</body> </html>
组合选择器优先级 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组合选择器优先级</title> <style type="text/css"> 同目录结构下 1.子代与后代优先级相同 body > div == body div 2.相邻与兄弟优先级相同 div + span == div ~ span 3.最终样式采用逻辑后的样式值
不同目录结构下 1.根据选择器权值进行比较 2.权值为标签权重之和 3.权重: *:1 div:10 class:100 id:1000 !important:10000 4.权值比较时,关心的是值大小,不关心位置与具体选择器名 5.id永远比class大,class永远比标签大 注:控制的是同一目标,才具有可比性 div>div>div>div>...>div {} 11 < .div{} /*10*/ div { color: red; } /*20*/ div div { color: yellow; } /*大于一切标签*/ .d2 { color: blue; } /*.d2抵消,剩权重10*/ div .d2 { color: orange; } /*等价于div .d2,权值相同,位置决定*/ .d1 div { color: pink; } /*又多10*/ div .d1 div { color: tan; } /*不具有可比性*/ div .d1 > div{ color: gree ; } /*高于一切class及标签*/ #dd1 div { color: #000; } </style> </head> <body> <!-- div>.d1>#dd1>div>.d2 --> <div> <div class="d1"> <div id="dd1"> <div> <div class="d2">12345</div> </div> </div> <!-- <div id="dd2"> <div> <div class="d2">12345</div> </div> </div> --> </div> </div> </body> </html>
属性选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .d2 { color: red; } /*属性选择器权重 == class选择器权重*/ /*有属性class的所有标签*/ [class] { color: orange; }
/*有属性class且值为d2的所有标签(值不影响权重)*/ [class="d2"] { color: pink; } /*是div且class='d2',增加了权重*/ div[class='d2'] { color: blue; } 属性以什么开头: ^= 属性以什么结尾: $= 属性模糊匹配: *= [class ^= 'he'] { color: yellow; } [class $= 'ld'] { color: tan; } [class *= 'ow'] { color: cyan; } [class][dd] { color: brown; }
</style> </head> <body> <!-- div.d1>.d2 --> <div class="d1">00000 <div class="d2">12345</div> <!-- dd与do为自定义属性 --> <div class="helloworld" dd do="do something">helloworld</div> </div> </body> </html>
盒模型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型</title> <style type="text/css"> .box { margin: 10px; border: solid; padding: 10px; 100px; height: 100px; /*background-color: orange;*/ /*覆盖*/ background: red; } /*组成:margin + border + padding + content*/ /*content = width * height*/ /*1.四个成员均具有自身独立显示区域,不相互影响(视觉上感觉会相互影响)*/ /*2.margin/padding外边距/内边距控制布局*/ /*3.border控制边框*/ /*4.content控制内容*/
/*padding*/ /*与content共有背景颜色*/ /*content*/ /*内容显示区域*/ /*红色区域 120 * 120 */ /*content区域 100 * 100 => 内容显示区域*/
/*值设置*/ .box { /*控制四个方位*/ /*margin: 20px; padding: 30px;*/ /*上下 左右*/ /*margin: 10px 20px; padding: 30px 40px;*/ /*上 左右 下*/ /*margin: 10px 20px 30px; padding: 30px 40px 50px;*/ /*上 右 下 左*/ margin: 10px 20px 30px 40px; padding: 30px 40px 50px 40px; /*总结*/ /*1.规定起始 2.顺时针 3.不足找对面*/ }
/*边框: 宽度,颜色,样式*/ .box { border- 10px;
/*transparent透明,会透出背景颜色*/ /*border-color: transparent;*/ border-color: #333; /*边框的不同形式*/ /*solid solid dotted dotted outset inset double*/ border-style: double;
/*整体设置*/ border: 5px solid orange; }
</style> </head> <body> <div class="box">12345</div> </body> </html>
边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边界圆角</title> <style type="text/css"> .box { 200px; height: 200px; background-color: orange; } /*单角设置*/ .box { /*一个固定值: 横纵*/ border-top-left-radius: 100px; /*两个固定值:横 纵*/ border-top-left-radius: 100px 50px; /*百分比赋值*/ border-top-left-radius: 100%; }
/*整体赋值*/ .box { /*不分方位(横纵)*/ /*左上为第一个角,顺时针,不足找对角*/ /*border-radius: 10px 100px 50px;*/
/*区分横纵*/ /*1./前控制横向,后控制纵向*/ /*2.横向又可以分为1,2,3,4个值,纵向毅然*/ border-radius: 10px 100px 50px / 50px; /*左上横10 右上横100 右下横50 左下横100 / 纵向全为50*/ /*所有最多可以赋值8个值*/ } </style> </head> <body> <div class="box"></div> </body> </html>
a img list 标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>a_img_list</title> <style type="text/css"> /*reset操作: a标签一些默认属性的清除*/ a { color: #333; text-decoration: none; outline: 0; } </style> </head> <body> <!-- 一.基本使用 --> <!-- 超链接标签:a --> <!-- 双/行/单一类型标签 --> <a href="https://www.baidu.com">前往百度</a> <a href="./05_边界圆角.html">前往边界圆角页面</a> <!-- ./或省略代表当前文件所在路径,可以访问与该文件同路径下的所有文件及文件夹 --> <a href="./temp/temp.html">前往temp页面</a>
<!-- 二.属性 --> <!-- title:鼠标悬浮的文本提示 --> <!-- target:_blank,新开空白标签位来打开目标页面 --> <a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>
<!-- 三.其他应用场景 --> <!-- mailto | sms | tel --> <a href="mailto:zero@163.com">信息给zero</a>
<!-- 四.锚点 --> <!-- a与a href="#锚点名" -- name="锚点名" --> <!-- a与标签 href="#锚点名" -- id="锚点名" --> <a href="#tag">前往底部</a> <!-- 测试锚点请tab --> br * 100 <!-- 设置一个锚点 --> <!-- .bottom做底部布局的区域 --> <div class="bottom"> <a name="tag"></a> <!-- <i id="tag"></i> --> <!-- <div id="tag"></div> --> ... </div>
<!-- 五.img使用 --> <!-- src可以连接本地及网络图片 --> <!-- alt:资源加载失败时的文本提示 --> <!-- title:图片的文本信息(鼠标悬浮时展示) --> <!-- <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>
伪类选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> a { color: #333; text-decoration: none; } /*:link为一个整体,代表超链接的初始状态*/ a:link { color: orange; } /*:hover鼠标悬浮*/ a:hover { color: green; /*鼠标样式*/ cursor: pointer; } /*:active活动状态中(被鼠标点击中)*/ a:active { color: red; } /*:visited访问过的状态*/ a:visited { color: cyan; } /*普通标签运用: :hover :active*/ .box { 200px; height: 200px; background-color: red; } .box:hover { background-color: orange; cursor: pointer; } .box:active { 400px; border-radius: 50%; }
/*内容伪类*/ .txt:before { content: "我是前缀~~~" } .txt:after { content: ">>>我是后缀" } /*伪类可以单独出现*/ /*:after { content: "呵呵" }*/
/*位置伪类*/ /*1.位置从1开始*/ /*2.*/ /*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/ /*body a-baidu div01*/ div:nth-child(2) { color: green; } /*先确定类型,再匹配位置*/ /*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/ div:nth-of-type(2) { color: cyan; }
/*2n*/ /* div ooo div ooo div ooo div ooo div */
/*3n*/ /* div div ooo div div ooo div div ooo */
/*3n - 1*/ /* div ooo div div ooo div div ooo div */
/*取反伪类*/ /*:not([d]) { color: red; } body.body { color: orange; }*/ span:not([d]) { color: red; } </style> </head> <body class="body"> <!-- 1.a标签的四大伪类 --> <a href="./123.html">访问页面</a> <a href="https://www.baidu.com">访问过页面</a> <div class="box">box</div>
<!-- 2.内容伪类 --> <div class="txt">原来的文本</div>
<!-- 3.位置伪类 --> <div class="wrap"> <span>span01</span> <div>div01</div> <div>div02</div> </div> <!-- 4.取反伪类 --> <span d>12345</span> <span dd>67890</span> </body> </html>
盒模型布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型布局</title> <style> /*做页面必备reset操作*/ html, body { margin: 0 } .box, .wrap { 200px; height: 200px; background-color: red; } .wrap { background: orange; } /*影响自身布局*/ /*.box { margin-top: 30px; margin-left: 100px; }*/ /*影响兄弟布局*/ /*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/ /*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/ .box { /*margin-bottom: 30px;*/ margin-right: 100px; }
/*display:显示方式*/ /*块:block*/ /*内联:inline*/ /*内联块:inline-block*/ .box, .wrap { display: inline-block; /*vertical-align: top;*/ }
/*兄弟坑*/ /*盒模型布局坑只出现在和margin-top相关的地方*/ .s1, .s2 { 100px; height: 100px; background-color: pink; } /*重叠取大值*/ .s1 { margin-bottom: 30px; } .s2 { margin-top: 50px; } /*父子坑*/ .sup { 200px; height: 200px; background-color: cyan; } .sub { 100px; height: 100px; background-color: orange; } /*父子top重叠,取大值*/ .sup { margin-top: 50px; } .sub { margin-left: 50px; } /*解决盒模型经典布局坑*/ /*1.将父级固定*/ .sup { /*border-top: 1px solid black;*/ /*border-top: 1px solid transparent;*/ /*保证显示区域 200*200 */ /*height: 199px;*/ } .sub { /*margin-top: 50px;*/ } /*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>
w3c引导 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>w3c</title> <style type="text/css"> * { margin: 0; padding: 0; /*border: 1px solid transparent;*/ } h1.title { 500px; /*height: 250px;*/ height: 100px; border: 1px solid black; } .title { background: url('img/bg.png') no-repeat 0 -150px; } .title:hover { background: url('img/bg.png') no-repeat 0 -250px; cursor: pointer; } .nav_div { 150px; height: 45px; background-color: #444; text-align: center; line-height: 45px; display: inline-block; } .nav_div:hover { background: red; cursor: pointer; color: white; } </style> </head> <body> <div class="warp"> <div class="top"> <h1 class="title"></h1> <div class="nav"> <div class="nav_div d1">#####</div> <div class="nav_div d2">#####</div> <div class="nav_div d3">#####</div> <div class="nav_div d4">#####</div> <div class="nav_div d5">#####</div> </div> </div> <div class="main"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <div class="end"></div> </div> </body> </html>