CSS背景样式、复合选择器、CSS三大特性、标签的显示模式基础笔记

背景样式

1.背景颜色

background-color

属性值

预定义的颜色值
十六进制
rgb
rgba

默认值

为：transparent透明色

2.背景图片

background-image

3.图片重复方式

background-repeat

属性值

repeat-x只在x方向上平铺
repeat-y只在y方向上平铺
no-repeat不平铺

4.图片位置

background-position:水平位置 垂直位置;

属性值

预定义的值：仅定义一个值，第二个值将是“center”
长度：仅规定一个值，第二个值将是“50%”
百分比：盒子百分比和图片百分比重合的位置，仅规定一个值，第二个值将是“50%”

图片居中：

background-position:center center；
background-position:50% 50%；

拓展：

精灵图

需要使用：
background-image
background-repeat
background-position

5.图片附着

background-attachment

属性值

scroll随着页面内容滚动
fixed不会随着浏览器滚动

总结

简写属性：
background:color image repeat position;

6.图片的尺寸

background-size

属性值

像素值同盒子宽高一致为完全显示
百分比100%为完全显示
cover自动调整缩放比例，图片充满整个背景图片，溢出隐藏
contain自动调整缩放比例，保证图片始终完整显示在背景区域

注意

background-size属性一定要写在background属性后面

复合选择器

1.交集选择器

标签选择器类名选择器（div.tit）

2.并集选择器

中间用逗号隔开（.main,.con）

3.后代选择器

中间用空格隔开（.nav li）
可以是父子关系，也可以是祖孙关系，最好不要超过四层

4.子元素选择器

父子关系，用>连接（.nav>span）

标签的显示模式

1. 块元素

块元素可以设置宽和高，独占一行
h1-h6、p、dv、ul、li、ol
宽度默认为100%
默认的display属性是block

2.行内元素

行内元素宽和高设置不生效，不独占一行，默认宽度就是它本身内容的宽度
默认的display属性是inline

3. 行内块元素

行内块可以设置宽和高，不独占一行
img、input、td、th
默认的display属性是inline-block

注意

容器包含元素
div：盒子—容器可以包含任何元素
不建议span包含块元素
p元素不可以包含块元素

CSS三大特性

1.CSS层叠性

2.CSS继承性

继承：字体大小、字体颜色、字体粗细、字体、字体风格、行高

注意

边框、内外边距、背景、高度、定位都不继承
其中宽度不是被继承下来的，而是子元素与父元素保持了一致

3.CSS优先级

浏览器默认样式<继承的样式<通配符<标签选择器<类选择器<ID选择器<行内样式表<！important