高级选择器：
基础选择器的各种组合
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-size: 30px; } /*选择器高级：基础选择器的各种组合*/ #h1, .p, .a { /*1、群组选择器：可以控制多个标签( #h1, .p, .a),用逗号连接*/ /*注：每一个选择器位( #h1, .p, .a)，可以为id、class、标签、选择器组合*/ color: red; } body .div2 .p2 { /*2、后代选择器(经常用)：需要父类们中需要有一个.div2一个body，用空格连接 控制一个标签，前方的都是修饰*/ color: orange; } .div2 > div > .p2 { /*子代 >，父子*/ /*3、子代选择器：.p2必须和div相连，div必须和.div2相连，用>连接， 控制一个标签，前方的都是修饰*/ color: pink; } .p3 ~ .i3 { /*4、兄弟选择器：可相邻也可不相邻，且必须通过上方修饰下方，用~连接 控制一个标签，前方的都是修饰*/ color: greenyellow; } .div3 + .i3 { /*5、相邻选择器 ，必须相邻，且必须通过上方修饰下方，用+连接， 控制一个标签，前方的都是修饰*/ color: green; } </style> </head> <body>
<i class="i3">iiii1</i> /*3，4兄弟(相邻)选择器*/ <p class="p3">pppp</p> <div class="div3">dddd</div> <i class="i3">iiii2</i> <p class="p2"> 单独的p /*2，3 后代(子代)选择器*/ </p> <div class="div2"> <div class="div22" id="div22"> <p class="p2">div的p</p> </div> </div> <h1 class="h1" id="h1">标题</h1> /*1、群组选择器/ <p class="p">段落</p> <div> <a class="a" href="">链接</a> </div> </body> </html>
高级选择器通过权重（个数）区别优先级:
先比：id > class > 标签
种类相同：比选择器位的个数
个数相同：比谁在下面的顺序
伪类选择器：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> i:nth-child(1) { color: orange; } i:nth-child(4) { color: red; } i:nth-of-type(1) { color: brown; } i:nth-of-type(2) { color: blue; } </style> </head> <body> <i class="i3">iiii1</i> <p class="p3">pppp</p> <div class="div3">dddd</div> <i class="i3">iiii2</i> <hr> <div> <i class="i3">iiii1</i> <p class="p3">pppp</p> <div class="div3">dddd</div> <i class="i3">iiii2</i> </div> </body> </html>
1.()内填的是编号，找到每层的第编号位，必须1开始编号
2.伪类选择器可以单独出现，前面相当于省略了*
3.:nth-child先匹配编号位置，再匹配标签(通常一个标签下结构一样使用)
4.:nth-of-type先找出所有标签，保留层级关系然后再找编号位置(通常一个标签下结构不一样使用)
5.伪类选择器就相当于class，所以影响着优先级顺序（id > class=:nth- > 标签）
伪类选择器的变形和属性选择器（了解）
伪类选择器的变形：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 150px; } .pp { width: 50px; height: 50px; background-color: red; border-radius: 50%; float: left; text-align: center; line-height: 50px; } /* 2n偶数 2n-1|2n+1奇数 3n找到(3*3列)最右边一列 3n+1|3n-2最左边列 3n-1中间列*/ .pp:nth-child(3n-1) { color: orange; } .a1.a2 { color: red; } .a1:nth-child(1) { color: orange; } </style> </head> <body> <a class="a1 a2" href="">aaaaaaaaaaaaaa</a> <div class="box"> <p class="pp p1">p1</p> <p class="pp p2">p2</p> <p class="pp p3">p3</p> <p class="pp p4">p4</p> <p class="pp p5">p5</p> <p class="pp p6">p6</p> <p class="pp p7">p7</p> <p class="pp p8">p8</p> <p class="pp p9">p9</p> </div> ss="i3">iiii2</i> </div> </body> </html>
属性选择器：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> /*属性选择器*/ p[a] { color: crimson; } </style> </head> <body> <div class="box"> <p class="pp p1" a>p1</p> <p class="pp p2" b>p2</p> <p class="pp p3">p3</p> <p class="pp p4">p4</p> </div> </body> </html>
a标签的四大伪类与普通标签的伪类应用（常用）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title>
<style>
body {
user-select: none; /*鼠标放在文本上，文本不能被选中*/
}
/*a标签的四大伪类*/ a:link { /*链接的初始状态*/ color: deepskyblue; } a:hover { /*链接的悬浮状态*/ cursor: pointer; /* cursor:设置鼠标放在连接上的图片*/ color: blue; } a:active { /*链接的激活状态*/ color: deeppink; } a:visited { /**链接的已访问状态*/ color: yellow; } </style> <style> .btn:hover { /*普通标签只能使用 :hover :active */ cursor: pointer; background-color: deepskyblue; } .btn:active { background-color: blue; } </style> </head> <body> <a href="https://www.baidu.com">aaaaaaaaaaaaaaaaaa</a> <div class="btn">按钮</div> </body> </html>
显示样式
文本样式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本样式</title> <style> .div { width: 200px; height: 200px; background-color: orange; } .div { font-size: 30px; /*字体大小: 最小12px，还需要更小就更换字体库*/ font-family: "STSong", "微软雅黑"; /*字体库(字族)：首选字体, 备用1, ..., 备用n*/ font-weight: 200; /*字重: 100~900(100倍数)，还需要更大就更换字体库*/ color: tomato; /*字体颜色*/ text-align: center; /*文本的水平位置: left(左对齐) center(居中) right(右对齐)*/ line-height: 200px; /*文本的行高(垂直位置)：默认文本在所在行高中垂直居中，要实现文本的垂直居中，让行高 = 容器高*/ text-decoration: underline; /*文本划线: underline(上划线) line-through(中划线) overline(下划线) none(取消划线)*/ } </style> </head> <body> <div class="div">文本</div> <a href="">aaaa</a> <i>dasdassad</i> </body> </html>
背景样式的设计
<head> <meta charset="UTF-8"> <title>Title</title> <style> .bg { width: 300px; height: 300px; } .bg { background-color: red; /*设置背景颜色*/ background-image: url("img/001.png"); /*设置背景图片*/ background-repeat: no-repeat; /* no-repeat(不平铺) repeat(平铺) repeat-x(以x轴平铺) repeat-y(以y轴平铺) */ /*background-position: right top(移动到右上角 );*/ /*背景定位: 移动到x轴(left center right) 在移动到y轴(top center bottom)*/ /*background-position: right;*/ /*x轴一个值时，y轴默认center*/ /*background-position: 100px 100px(往右移100后，在往下移100);*/ /*指定尺寸移动*/ background-position: 10px -10px(往右移10后，在往上移10); /*反向移动*/
background-position: 0 0; /*默认在左上角，x轴，y轴要自己写*/
} </style> </head> <body> <div class="bg">12345</div> </body> </html>
边界圆角的设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 400px; height: 200px; background-color: red; } .box { /*border-radius: 50%;*/ /*border-radius: 10px 20px 30px 40px;*/ /*左上是第一个角，先横向，在纵向画圆角，然后顺时针编号， 不足找对角，只有一个值同时控制4个角*/ /*border-radius: 10px 50px 100px;*/ /*border-radius: 10px 100px;*/ /*border-radius: 100px;*/ /*border-radius: 50% / 50px;*/ /*横向 / 纵向(第一个角横向找左边值，纵向找右边的值)*/ /*border-radius: 10px 30px 50px 100px / 50px 100px;*/ /*横向1,2,3,4 / 纵向13,24*/ } </style> </head> <body> <div class="box"></div> </body> </html>
显示方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { display: block; width: 100px; height: 100px; background-color: red; } span { display: inline; width: 100px; height: 100px; background-color: orange; } owen { display: inline-block; width: 100px; height: 100px; background-color: pink; } </style> <style> a { display: block; width: 100px; background-color: brown; /*透明色：transparent*/ border: 1px solid black; } img { /*设置宽度，高度由内容撑开(百度图片)*/ width: 100px; } p { texalign: center; } </style> </head> <body> <div>divdivdiv</div> <div>divdivdiv</div> <span>spanspanspan</span> <span>spanspanspan</span> <owen>owenowenowen</owen> <owen>owenowenowen</owen> <a href="https://www.baidu.com"> <img src="img/bd_logo.png" alt=""> <p>前往百度</p> </a> </body> </html>
三种显示方式
block：
1.可以手动设置宽高 2.自带换行 3.支持所有css样式，4.宽继承父级，高由内容撑开
inline：
1.宽高只能由文本内容撑开，不能手动设置，子标签也无法撑开宽高，2.不带换行 3.支持部分css样式
4.跟文本有关系，所以有对其方式, vertical-align: middle; baseline基线(底线)( middle中线 top顶线
inline-block：
1.可以手动设置宽高 2.不带换行 3.支持所有css样式
嵌套规则：
block：可以嵌套block、inline、inline-block
div、li搭架构的，可以任意嵌套别的标签 h1~h6、p 建议只嵌套inline，因为本来就是装文本的
inline：只用来嵌套inline(不可以嵌套block)
如span、i、b、em、strong a一般都会修改其display为block(经常使用)
inline-block：不建议嵌套任何
因为img input系统都设计成了单标签
none：没有显示方式，所有会在页面中隐藏
注： 开发中，修改display的情况 - 要支持宽高，要更改位置(水平排列还是垂直排列)
overflow属性
使用场景：父级宽高限制内容和子集
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 200px; height: 200px; background-color: orange; overflow: scroll; /*hidden：影藏超出内容 scroll：以滚动显示超出内容 auto：有超出内容才滚动显示*/ } .sup { width: 200px; height: 200px; background-color: red; /*overflow: hidden;*/ } .sub { width: 300px; height: 300px; background-color: pink; } </style> </head> <body> <div class="box">字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字</div> <div class="sup"> <div class="sub"></div> </div> </body> </html>
内容超出，基本都会以 hidden 处理影藏，如果想显示全内容，采用子页面
布局方式
1.盒模型
什么是盒模型：页面中的每一个标签都可以称之为一个盒子
盒子的组成：外边距、边框、内边距、内容四部分组成，每部分都有独立区域
外边距 - margin - 控制位置
边框 - border - 控制边框
内边距 - padding - 控制内容与边框的间距
内容 - content(width*height) - 文本内容或子标签显示的区域
盒模型布局的地位：盒模型用来完成超简单的布局要求，一般都是用来辅助其他布局，完成布局的微调
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title> <style> .box { width: 200px; height: 200px; background-color: red; } .box { /*padding: 50px;*/ } .box { padding: 20px 0 0 20px; /*上右下左 (移动顺序)*/ width: 180px; /*当要保证显示区域不变，内容往里偏移，增加padding、相应减少content*/ height: 180px; } .box { border: 10px dotted black; /*border边框：宽度 、 样式 solid实现 dashed虚线 dotted点状线、 颜色*/ } */ .box { /*margin(控制盒子位置)参考系：自身原有位置*/ margin-left: 100px; /*margin的left和top控制自身位置*/ margin-top: 100px; } .abc { width: 200px; height: 200px; background-color: orange; margin-top: 10px; margin-left: -1px; } .top, .bottom { width: 100px; height: 100px; background-color: pink; } .top { /*margin的right和bottom控制兄弟位置(当前盒子结束基线向右移和向下移)*/ margin-bottom: -50px; } .bottom { background-color: tan; } .abc { margin: 10px 20px 30px 40px; /*也可以上右下左简写*/ margin-left: auto; /*快速居右*/ margin: 0 auto; /*快速居中*/ } </style> </head> <body> <div class="box">12345</div> <div class="abc"></div> <div class="top"></div> <div class="bottom"></div> </body> </html>
2.浮动布局
不再撑开父级高度(漂浮起来，此时父级高度为0，所以要清浮动，让高度显现出来)，但浮动受父级宽度影响
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap { width: 150px; background-color: cornflowerblue; /*height: 200px;*/ } .d { width: 50px; height: 50px; background-color: orange; border-radius: 50%; } .d { float: right; /*浮动*/ } .wrap:after { /*如何让父级刚刚好包含所有子标签： 清浮动（把漂浮的在按下去）- 让父级高度由子标签撑起*/ display: block; content: ""; clear: both; } </style> </head> <body> <div class="wrap"> <div class="d d1">1</div> <div class="d d2">2</div> <div class="d d3">3</div> <div class="d d4"></div> <div class="d d5"></div> <div class="d d6"></div> <div class="d d7"></div> <div class="d d8"></div> <div class="d d9"></div> </div> </body> </html>