复习
1. 基础选择器
标签选择器(div) | 类选择器(.div1) | id选择器(#div2)
<div class="div1" id="div2"></div>
统配选择器 | !important | 行间式
2. 选择器优先级
通常作用范围越精确优先级越高
!important > 行间式 > id > class > 标签 > 统配
3. 长度与颜色
px in mm cm em rem vw vh
red #FF0000 rgb(255, 0, 0) rgba(255, 0, 0, 1)
4.标签的分类
主内容: 双标签, <div></div>
主功能: 单标签, <img />(结束标识符可以省略)
5. display
通过显示方式来分类
inline: 同行显示, 不支持宽高, 宽高有内容撑开
block: 异行显示, 支持所有css样式, 设置宽高一定为设置的宽高(解决block的默认宽高)
inline-block: 同行显示, 支持所有css样式, 宽高一般有内容撑开, 但通过会设置宽或高,那么 高或宽会等比缩放(img)
6. 嵌套关系
inline套inline
inline-block不建议嵌套任意标签
block可以嵌套任意标签(hn,p一般嵌套inline标签)
7. 盒模型
margin + border + padding + content(w x h), 四个部分区域
8. 盒模型布局
1.margin-top | margin-left 完成自身布局
2.margin-right | margin-bottom 影响兄弟布局
坑:
1. 上兄弟的下(bottom)下兄弟的上(top)重叠, 取大值
2. 父级和第一个显示子级top重叠, 取大值 => 解决, 给父级加padding-top | (父级加border-top)
block设置宽高
一定采用设置的宽高
block默认宽高:
1.没有设置宽, 宽自适应父级的宽(子级的border+padding+width = 父级的width)
2.没有设置高, 高由内容撑开
前端写数字或者字母,不使用空格会被认为是一个字母或数字,中间可以加空格
margin-left:auto,自动值,自适应,将剩余空间给左边使用盒子总结
block:
默认宽高
1.没有设置宽, 宽自适应父级的宽(子级的border+padding+width = 父级的width)
2.没有设置高, 高由内容撑开
设置了宽高
一定采用设置的宽高
显示宽高
border+padding+content
自身布局
margin-top | margin-left
兄弟布局
margin-bottom | margin-right
父级水平居中
margin: 0 auto;
与inline相关的盒子
vertical-align盒子水平居中
.sup {
width: 500px;
height: 100px;
background-color: orange;
/*屏幕水平居中*/
/*margin-left: calc((100% - 500px) / 2);*/
/*屏幕水平居右*/
/*margin-left: auto;*/
margin: 0 auto;
}
.sub {
width: 50px;
height: 50px;
background-color: red;
/*父级水平居中*/
/*margin-left: calc((500px - 50px) / 2);*/
/*父级水平居右*/
/*auto自适应父级可利用的剩余宽度*/
/*margin-left: auto;*/
/*能不能通过自适应完成水平居中*/
margin-left: auto;
margin-right: auto;
margin: 0 auto;
}
<div class="sup">
<div class="sub"></div>
</div>今日内容
字体|文本相关属性样式
边界圆角属性样式
系统默认样式的清除操作(reset操作)，（body|ul|p|a|hn等）
高级选择器
伪类选择器，a的四大伪类
背景属性样式文本属性操作
颜色,大小,字重,行高,水平居中方式
text-align: center; # 水平居中方式
color: red; # 字体颜色
font: 900 30px/120px "STSong"; # 字重 大小/行高 字族
# 了解
# em(自身->父->html) | rem(html)
text-indent: 2em;
# 字划线
# underline | line-through | overline
text-decoration: overline;
font-family:"STSong","微软雅黑",可以设置备用字体
a标签字体大小不是继承
最小字体大小只能达到12px
.p1 {
/*颜色 大小 字重 字族 行高 水平居中方式*/
color: red;
font-size: 50px;
/*100~900| normal | lighter | bold*/
font-weight: bold;
/*字族可以设置备用字体*/
font-family: "STSong", "微软雅黑";
/*将行高值以盒子高度一致*/
line-height: 200px;
/*left | center | right*/
/*text-align: center;*/
}
.p1 {
/*简写*/
/*text-align: center;*/
color: red;
font: normal 30px/200px "STSong", "微软雅黑";
}
.p1 {
font-size: 50px;
/*em就是一个字的大小*/
text-indent: 2em;
/*underline | line-through | overline*/none
text-decoration: overline;
}
html {
/*rem: r => root 只和html字体大小关联*/
font-size: 50px;
}
.sup {
/*最小字体只能到达12px*/
font-size: 12px;
}
.sub
<p class="p1">
一二三四五
</p>
<div class="sup">
<div class="sub">呵呵</div>
</div>reset操作
what|why: 大多系统预定义标签, 有默认样式, 不满足实际开发需求, 反倒影响布局, 通常在开发前, 将需要用到的预定义标签的默认样式清除, 该操作就称之为 reset操作
body, h1, h6, p {
margin: 0;
}
ul {
margin: 0px;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: black;
}高级选择器
1.群组选择器
/*1.群组选择器:
同时控制多个
选择器之间用逗号隔开
每一个选择器位均可以替换为任意基础选择器或高级选择器
*/
.div1, .p1 {
color: red;
}
2.后代子代选择器
通过关系层次控制一个目标选择器
>代表父子关系 | 空格代表后代关系(后代关系不一定是父子,还可能是爷孙关系)
.sup1 > .sub {
color: orange;
}
/*sub是body的后代,但不是子代*/
body .sub {
color: pink;
}
3.兄弟选择器
通过关系层次控制一个目标选择器
上兄弟可以控制下兄弟,下兄弟不能控制上兄弟
+,~
+:相邻
~:兄弟,中间可以跨越几个相邻标签
/* + 相邻 */
.b2 + .b3 {
color: blueviolet;
}
/* ~ 兄弟 */
.b1 ~ .b3 {
color: brown;
}
4.伪类选择器 - 位置
:nth-child(3)
3n-1,可以表示第3,6,9个数
ul:nth-child(10) > li:nth-child(2n) {
color: green;
}
5.多类
.d.dd {
}
<div class="div1">123</div>
<p class="p1">456</p>
<div>3333</div>
<div class="sup1">
<div class="sub">sub</div>
</div>
<div class="sup2">
<div class="sub">sub</div>
</div>
<div class="b3">b3 333</div>
<div class="b1">001</div>
<div class="b2">002</div>
<div class="b3">b3 003</div>
<ul>
<h3>标题</h3>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ul>
<h3>标题</h3>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<div>
<p>0001</p>
<p>0002</p>
<p>0003</p>
</div>高级选择器优先级
优先级和个数(权重)相关
基础选择器优先级占主导: id 无限大于 class 无限大于 标签
选择器优先级相同时, 和顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
<style>
.div {
font-size: 100px;
color: red;
}
div > .div {
color: orange;
}
div ~ div ~ .div {
color: brown;
}
div .div {
color: pink;
}
.div:nth-child(3) {
color: yellowgreen;
}
.sup .div {
color: darkgreen;
}
</style>
<style>
/*多类名*/
.div.div1 {
color: black;
}
/* div.div#dd.div1 */
</style>
<div>
<div class="sup">
<div>
<div>
<div></div>
<div></div>
<div class="div div1" id="dd">123</div>
</div>
</div>
</div>
</div>边界圆角
左上为第一个角,顺时针赋值,不足找对角
先横后纵的取像素值,然后画圆角
可以横纵向分离:50px(横向) 10px (第一个角横向50px,第二个角横向10px,第三个50px,第四个10px) / 150px(纵向)
<style>
div {
width: 300px;
height: 300px;
background-color: red;
}
div {
/*左上为第一个角, 顺时针赋值, 不足找对角*/
/*border-radius: 30px 60px;*/
/*border-radius: 150px;*/
/*border-radius: 50%;*/
/*横向第一个角50px, 第二个角10px, 不足找对角*/
/*纵向均是150px*/
border-radius: 50px 10px / 150px;
}
</style>
<div></div>a标签的四大伪类
:link 链接初始状态
:hover 鼠标悬浮状态 *****
:visited 链接访问后的状态
:active 鼠标按下时的状态 ***
字体属性还是靠继承,但是a标签的四大伪类属性对应了不同的颜色,所有它默认不继承父级的颜色
<style>
/*链接初始状态 | 鼠标悬浮状态 | 链接访问后的状态 | 鼠标按下时的状态*/
/*a:link {*/
/*color: black;*/
/*}*/
/*a:hover {*/
/*cursor: pointer;*/
/*}*/
/*a:visited {*/
/*color: yellow;*/
/*}*/
/*a:active {*/
/*color: green;*/
/*}*/
div标签只有两个伪类状态会生效/*鼠标悬浮状态 | 鼠标按下时的状态*/
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:hover {
background-color: yellowgreen;
cursor: pointer;
}
div:active {
background-color: red;
}
</style>背景图片之精灵图
div {
background: url("img/bg.png") no-repeat 10px 20px;
图片地址 不平铺 x轴偏移 y轴偏移
}
精灵图操作本质: 控制背景图片的位置
backgroud-position-x
backgroud-position-y
div:hover {
backgroud-position-y: -20px;
<style>
.div {
width: 500px;
height: 500px;
border: 1px solid black;
}
.div {
background-image: url("img/001.png");
/*平铺: repeat-x | repeat-y | repeat | no-repeat*/
background-repeat: no-repeat;
/*背景图片位置*/
/*水平: left|center|right 垂直:top|center|bottom*/
background-position: -200px 50px;
}
.div:hover {
transition: 2s;
background-position-x: center;
}
</style>精灵图案例
<!DOCTYPE html><head> <meta charset="utf-8"> <title>Title</title> <style> a { color: #333; text-decoration: none; } h1 { width: 500px; height: 100px; border: 1px solid black; } h1 a { width: 500px; height: 100px; display: block;
background: url("img/bg.png") no-repeat 0 -150px;
}
h1 a:hover {
background-position-y: -250px;
}
</style>
<style>
.li {
width: 157px;
height: 48px;
border: 1px solid black;
background: url("img/bg.png") no-repeat -155px 0;
}
.li:hover {
cursor: pointer;
background-position-y: -48px;
}
</style>
</head>
<body>
<h1><a href=""></a></h1>
<div class="li"></div>
</body>
</html>