CSS复习

19.标签选择器

19.1 元素选择器

元素选择符/类型选择符
语法： 元素名称{属性：属性值；}
如：div{width:100px;height:100px;background:red;}
可以改变某个元素默认样式

19.2 类选择器

19.3 id选择器

19.4通配符选择器

19.5 群组和后代选择器

群组选择器：
通过 逗号隔开

后代选择器（包含选择器）：
通过空格隔开

19.6 伪类选择器

必须按照这个顺序来

20.选择器的权重

当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突，会选择权重高的来执行。

id选择器权重>class>元素

21.CSS文本属性

21.1 大小和字体

21.2 文字颜色

rgb（255，0，0） ： 0-255 0是最弱的，255是最强的

21.3 加粗与倾斜

font-weight：100-900
100 细体 ligter
400 正常 normal
700 加粗 bold
900 更加粗 bolder

italic 倾斜
oblique 更倾斜
normal 正常

21.4 文本水平对齐和行高

text-align： justify
两端对齐，对行文本用

21.5 间距和首行缩进

文本间距：词间距、字符间距
英文中使用word-spacing来控制单词与单词之间的间距

21.6 文本修饰线

21.7检索大小写和font

检索大小写：
text-transform:
capitalize 全部首字母大写
lowercase 全部小写
uppercase 全部大写

使用font 时 顺序不能换，斜体，粗体可以省略，后两个不能省略。

22.列表属性

符合属性写法：

23.背景属性

背景颜色：

background-color: rgba(225,0,0,0.5) a代表的是透明度
background-color:red
background-color:#ff0000

背景图片：

background-image: url(img/1.jpg)

背景平铺：

background-repeat:repeat 默认平铺
background-repeat:repeat-x x轴平铺
background-repeat:repeat-y y轴平铺
background-repeat:no-repeat 不平铺

背景位置：

background-position: 20px 20px
background-position:10% 10%
background-position: left center`

背景图片的大小

background-size：400px 400px
background-size：100% 100%
background-size：cover   把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示在背景定位区域中。
background-size：contain  把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子，留白

背景图片的固定：

background-attachment:fixed 相对于浏览器窗口的位置固定

背景的复合属性：
复合写法：
1.用空格隔开
2.顺序可以换
3.可以只取一个值，放在后面能覆盖前面的值

background: yellow url(img/1.jpg) no-repeat center fixed;
background-size: 只能单独用，不能复合使用

24.浮动属性

定义网页中其他文本如何环绕该元素显示
就是让竖着的东西横着来

float:left; 元素左浮动
float:right;元素右浮动
float:none;元素不浮动

24.1 清浮动

1.写固定高度

2.清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。(写在后面盒子上）

clear:none;允许有浮动对象
clear:right;不允许右边有浮动对象
clear:left; 不允许左边有浮动对象
clear:both;不允许有浮动对象

3.当前浮动元素后面补一个盒子，不设置宽高，clear:both
4.overflow:hidden
bfc,让浮动元素计算高度

25.盒子模型

25.1内边距

padding

padding:30px;
一个值，4个方向一样
padding:20px 30px;
两个值，上下，左右
padding:10px 20px 30px
三个值，上，左右，下
padding:10px 20px 30px 40px
四个值，上，右，下，左

背景色蔓延到内边距
单一方向：

padding-方向：top bottom left right

25.2 边框

border:10px solid red
粗细 样式 颜色

单一方向：

border-方向：top bottom left right

样式：solid 实线 ；double 双实线；dashed 虚线；dotted 点状线。
背景色也能蔓延到边框

border-width:10px 20px 30px 40px
border-color: yellow blue black red
border-style:solid double dashed dotted

25.3 外边距

margin
背景色不会蔓延

margin:30px;
一个值，4个方向一样
margin:20px 30px;
两个值，上下，左右
margin:10px 20px 30px
三个值，上，左右，下
margin:10px 20px 30px 40px
四个值，上，右，下，左

单一方向：

margin-方向：top bottom left right

屏幕横向居中：

margin:0 auto;