交集选择器
由两个选择器组成,标签选择器,第二个class选择器,两个选择器之间不能有空格
p .p1{
color: red;
}
交集用的比较少
并集选择器
并集选择器用逗号链接,任何形式的选择器都可以作为并集选择器的一部分
div,p{
color: red;
}
后代选择器
也称为包含选择器,用空格连接,子子孙孙都可以被选中
注意:把外层标签写在前面,内层标签写在后面,中间用空格分割
子元素选择器
只包含子元素,父级标签写在前面自己标签写在后面,中间用>连接
CSS 可以添加背景颜色和背景图片,以及来进行图片设置。
background-color | 背景颜色 |
---|---|
background-image | 背景图片地址 |
background-repeat | 是否平铺 |
background-position | 背景位置 |
background-attachment | 背景固定还是滚动 |
背景的合写(复合属性) | |
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
背景图片(image)
语法:
background-image : none | url (url)
none 无背景图
url 背景图片的地址
背景平铺(repeat)
语法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
背景位置(position)
语法:
background-position : length || length
background-position : position || position
背景附着
语法:
background-attachment : scroll | fixed
背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: color url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
CSS的特殊性(Specificity)
关于css 的权重,我们需要一套公式,就叫CSS的特殊性(Specificity),我们称之为css特性或非凡性
css特性有四个数字组成,从左到右,左边最大,数位没有进制,级别之间不可超越
继承的贡献值 | 0,0,0,0 |
---|---|
每个元素贡献值 | 0,0,0,1 |
每个类,伪类 | 0,0,1,0 |
每个id | 0,1,0,0 |
行内样式 | 1,0,0,0 |
!important | 无穷大 |
div ul li | 0003 |
---|---|
.nav ul li | 0012 |
a:hover | 0011 |
.nav a | 0011 |
#nav p | 0101 |
1.数位之间没有进制,0005+0005=00010,
2.继承的权重为0
总结优先级
1.!important
2.行内样式
3.id选择器
4.类选择器,属性选择器,伪元素,伪类
5.元素选择器
6.通配符选择
7.同一类选择就近原则
权重是优先级的算法,层叠是优先级的表现
盒子边框写法总结表
设置内容 | 样式属性 | 常用属性值 |
上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色; | |
下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色; | |
左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色; | |
右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色; | |
样式综合设置 | border-style:上边 [右边 下边 左边]; | none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线 |
宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
边框综合设置 | border:四边宽度 四边样式 四边颜色; |
border: 1px 2px 3px 3px
圆角边框(CSS3)
之前的世界只有矩形,学了这个就不只矩形
border-radius(半径): 左上 右上 右下 左下
内边距(padding)
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
值的个数 | 表达意思 |
---|---|
1 | 上下左右 |
2 | 上下 左右 |
3 | 上 左右 下 |
4 | 上右下左 |
外边距(margin)
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
外边距实现盒子居中
可以让一个盒子实现水平居中,需要满足一下两个条件:
- 必须是块级元素。
- 盒子必须指定了宽度(width)
然后就给左右的外边距都设置为auto,就可使块级元素水平居中。
文字盒子居中图片和背景区别
-
文字水平居中是 text-align: center
-
盒子水平居中 左右margin 改为 auto
-
插入图片 我们用的最多 比如产品展示类
-
背景图片我们一般用于小图标背景 或者 超大背景图片
background-position: center center;