选择器 常用样式 布局
今日内容:
css:重点 -选择器, 布局
-高级选择器 -伪类选择器
-常用样式
-三种布局方式
*form 提交方式:
get:不安全提交数据,高效;
post:安全的提交数据,低效;
前台都可以给后台提交数据,后台一定会给前台一个反馈结果
*****高级选择器:
1.群组选择器:控制多个*/
h1, .p, .a {
color: red;
}
注：每一个选择器位，可以为id、class、标签、选择器组合
2.后代(子代)选择器:控制一个标签,前方都是修饰
body .div2 .p2 { /*后代 空格，父子(孙)*/
color: orange;
}
.div2 > div > .p2 { /*子代 >，父子*/
color: pink;
}
3.兄弟(相邻)选择器:控制一个标签,前方都是修饰
.p3 ~ .i3 { /*兄弟 ~，可相邻也可不相邻，但必须通过上方修饰下方*/
color: greenyellow;
}
.div3 + .i3 { /*相邻 +，必须相邻，但必须通过上方修饰下方*/
color: green;
}
小结:
高级选择器优先级:高级选择器通过权重(个数)区别优先级,前提多个选择器控制同一个标签;
id>class>标签 eg:一个id选择器 高于 n和类与标签选择器的组合
种类相同:比个数 eg:先比较id个数,谁多睡优先级高,个数相同再比较类,以此类推
个数相同:比顺序 eg:所有类型所有个数(id,类,标签)都相同,在下方的起作用
高级选择器种类不影响优先级 eg：后代选择器、子代选择器、兄弟选择器...不会运行优先级
伪类选择器
/*()内填的是编号，所以从1开始*/
/*1.伪类选择器可以单独出现，相当于省略了统配*/
/*2.:nth-child先匹配层级位置，再匹配标签*/ /*3.:nth-of-type先匹配标签类型，再匹配层级位置*/
<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>
<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最后一列 3n+1|3n-2第一列 3n-1中间列*/
.pp:nth-child(3n-1) {
color: orange;
}
/*伪类选择器影响优先级，伪类就相当于class*/
.a1.a2 {
color: red;
}
.a1:nth-child(1) {
color: orange;
}
/*id > class=:nth- > 标签*/
</style>
<style>
/*属性选择器*/
p[a] {
color: crimson;
}
</style>
</head>
<body>
<a class="a1 a2" href="">aaaaaaaaaaaaaa</a>
<hr>
<!--p.pp.p${p$}*9-->
<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>
<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>
<hr>
<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>
a标签的四大伪类:
<style>
/*链接的初始状态*/
a:link {
color: deepskyblue;
}
/*链接的悬浮状态*/
a:hover {
/*cursor: wait;*/
/*cursor: col-resize;*/
cursor: pointer;
color: blue;
}
/*链接的激活状态*/
a:active {
color: deeppink;
}
/**链接的已访问状态*/
a:visited {
color: yellow;
}
</style>
<style>
body {
/*文本不能选择*/
user-select: none;
}
/*普通标签都可以去使用 :hover :active */
.btn {
width: 80px;
height: 38px;
background-color: cornflowerblue;
border-radius: 5px;
text-align: center;
line-height: 38px;
color: white;
}
.btn:hover {
cursor: pointer;
background-color: deepskyblue;
}
.btn:active {
background-color: blue;
}
</style>
常用样式:
文本样式: /*字体大小: 最小12px，还需要更小就更换字体库*/ font-size: 30px; /*字体库(字族)：字体, 备用1, ..., 备用n*/ /*font-family: "STSong", "微软雅黑";*/ /*字重: 100~900 bold normal lighter*/ font-weight: lighter; /*字体颜色*/ color: tomato; /*水平位置: left center right*/ text-align: center; /*行高(垂直位置)：默认文本在所在行高中垂直居中，要实现文本的垂直居中，让行高 = 容器高*/ line-height: 200px; /*文本划线: underline line-through overline none*/ text-decoration: underline;
背景样式: /*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url("img/001.png");
/*平铺: no-repeat repeat repeat-x repeat-y */
background-repeat: no-repeat;
/*背景定位: x轴(left center right) y轴(top center默认 bottom)*/
/*background-position: right top;*/
/*指定尺寸移动*/
/*background-position: 100px 100px;*/
/*反向移动*/
background-position: 10px -10px;
背景样式案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background-color: cornflowerblue; } .h1 { /*width: 1300px;*/ /*height: 900px;*/ width: 500px; height: 100px; background-color: tomato; } .h1 { background-image: url("img/bg.png"); background-position: 0 -150px; } .h1:hover { background-position: 0 -250px; } </style> <style> .p1 { width: 155px; height: 48px; background-color: green; background-image: url("img/bg.png"); } .p2 { width: 157px; height: 48px; background-color: green; background-image: url("img/bg.png"); background-position-x: -155px; } .p1:hover, .p2:hover { background-position-y: -48px; cursor: pointer; } /*背景图片操作：就是更换背景图片的位置*/ </style> </head> <body> <div class="h1"> </div> <p class="p1"></p> <p class="p2"></p> </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%;*/ /*左上是第一个角，顺时针编号，不足找对角，只有一个值同时控制4个角*/ /*border-radius: 10px 20px 30px 40px;*/ /*border-radius: 10px 50px 100px;*/ /*border-radius: 10px 100px;*/ /*border-radius: 100px;*/ /*横向 / 纵向*/ /*border-radius: 50% / 50px;*/ /*横向1,2,3,4 / 纵向13,24*/ /*border-radius: 10px 30px 50px 100px / 50px 100px;*/ border-radius: 200px 200px 0 0 / 200px 200px 0 0; } </style> </head> <body> <div class="box"></div> </body> </html>
显示方式:
显示方式 :
block：1.可以手动设置宽高 2.自带换行 3.支持所有css样式 inline：1.宽高只能由文本内容撑开，不能手动设置 2.不带换行 3.支持部分css样式 inline-block：1.可以手动设置宽高 2.不带换行 3.支持所有css样式
嵌套关系:
block：可以嵌套block、inline、inline-block
div、li搭架构的，可以任意嵌套 h1~h6、p 建议只嵌套inline，就是用来转文本的
inline：只用来嵌套inline
span、i、b、em、strong a一般都会修改其display为block
inline-block：不建议嵌套任何
img input系统都设计成了单标签
none：没有显示方式，就会在页面中隐藏
开发是：修改display的情况 - 要支持宽高，要更改位置(水平排列还是垂直排列)
block 的显示规则:
不同的标签在页面中有不同的显示规则
如有些是自带换行、有些同行显示、有些同行显示还支持宽高，这些不是标签的特性，而是标签的display属性值决定的
完成复杂的布局和样式，标签的显示方式都采用 block
a {
display: block;
}
a可以任意嵌套其他标签，还可以设置宽高，还支持所有css样式，但是a不再同行显示了(block自带换行)
如果解决block同行显示 => css布局
inline: 同行显示，不用去关宽高，不用额外操作
inline-block: 同行显示, 一般会主动设置宽或高、设置宽，高会等比缩放，反之亦然
有inline特性的标签，同行显示，但是有默认垂直对其方式vertical-align
block：默认显示规则
宽继承父级，高由内容撑开
overflow属性:
问题:
1、规定了标签的宽高，标签的内容超出范围
2、规定了标签的宽高，标签内的子标签显示区域更大，超出范围 如果让父级宽高限制内容和子集
方法:
内容超出，都会以 hidden 处理影藏，如果想显示全内容，采用子页面*/
hidden：影藏超出内容 scroll：以滚动显示超出内容 auto：有超出内容才滚动显示*/
盒模型:
定义:页面中每一个标签都可称之为盒子,它由外边距、边框、内边距、内容四部分组成，每部分都有独立区域
外边距 - margin - 控制位置
边框 - border - 控制边框
内边距 - padding - 控制内容与边框的间距
内容 - content(width*height) - 文本内容或子标签显示的区域
当要保证显示区域不变，内容往里偏移，增加padding、相应减少content
border边框：宽度 、 样式 solid实线 dashed虚线 dotted点状线、 颜色
margin参考系：自身原有位置
margin的left和top控制自身位置
margin的right和bottom控制兄弟位置
盒模型布局的地位：盒模型用来完成超简单的布局要求，一般都是用来辅助其他布局，完成布局的微调
/*上右下左*/
/*margin: 10px 20px 30px 40px;*/
/*快速居右*/
/*margin-left: auto;*/
/*快速居中*/
/*margin-left: auto;*/
/*margin-right: auto;*/ margin: 0 auto;
浮动布局:
<!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>
