寒假集训——二

二十四、选择器

为什么要用选择器？
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器

1.标签选择器

元素选择符/类型选择符（element选择器）如: div{width:100px; height:100px; background:red;}
语法:元素名称{属性:属性值; }如: div,p,h1,img,a,span,i,em,strong,b,ul,ol,li…等
说明：
a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、 div、p,img,em,strong，span…等。
b)所有的页面元素都可以作为选择符;
用法：
1)如果想改变某个元素得默认样式时，可以使用类型选择符;
(如：改变一个div、p、h1样式)
2)当统一文档某个元素的显示效果吋，可以使用类型选择符
(如：改变文档所有p段落样式)

2.类选择器

class选择器/类选择器
语法: .class名{属性: 属性值;}
说明:
A)当我们使用class选择符时，应先为每个元素定义一个class名称
B) class选择符的语法格式是:
如: <div class= "top"> </div>
.top{width:200px; height:100px; background:green;}
用法: class选择符更适合定义一类样式;

3.id选择器

id选择器

语法:：#id名{属性:属性值;}
说明:
A)当我们使用id选择符时，应该为每个元素定义一个id属性
如：<div id= "box"> </div>
B) id选择符的语法格式是"#” 加上自定义的id名
如：#box{width:300px; height:300px;}
C)起名时要取英文名，不能用关键字: (所有的标记和属性都是关键字)
如：head标记
D)一个id名称只能对应文档中一个具体的元素对象。(唯一性)

4.通配符选择器

*通配符/通配选择器
语法：*{属性: 属性值; }

说明：通配选择符的写法是"*” ，其含义就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值；

5.群组选择器

群组选择器
语法：选择符1,选择符2,选择符3…{属性:属性值} 例: #top1,#nav1,h1 {width:960px;}
说明：当有多个选择符应用相同的声明时，可以将选择符用", ”分隔的方式，合并为一组。
margin:0 auto;实现盒子的水平居中

6.后代选择器

包含选择器/后代选择器
语法：选择符1 选择符2 {属性:属性值;}
说明：含义就是选择符1中包含的所有选择符2;
用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如：结构：

<ul class= "list">
<li> </li>
<li> </li>
<li> </li>
</ul>

样式：.list li{background:red;}

7.伪类选择器

伪类选择器
语法:
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;)超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
Link–visited–hover–active。
说明:
A) 当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为:
a:link,a:visited,a:hover,a:active，错误的顺序有时会使超链接的样式失效;
B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中;
例如: a{color:red;} a:hover{color:green;}表示超链接的初始和访问过后的状态一样， 鼠标划过的状态和点击时的状态一样。

二十五、选择器的权重

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

个数	选择器	权重，CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0
1	类型（元素）选择器	0001
2	Class选择器（类选择器）	0010
3	id选择器	0100
4	包含选择符	为包含选择符的权重之和
5	内联样式	1000
6	!important	10000

CSS选择器解析规则1：当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式
CSS选择器解析规则2：相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。

二十六、文本属性

个数	属性	描述	说明
1	font-size	字体大小	单位是px，浏览器默认是16px,设计图常用字号是12px
2	font-family	字体	当字体是中文字体、英文字体中有空格时，需加双引号; 多个字体中间用逗号链接先解析第1个字体，如果没有解析第2个字体,以此类推
3	color	颜色	color:red; color:#ff0; color:rgb(255,0,0); 0-255
4	font-weight	加粗	font-weight:bolder(更粗的)/bold (加粗) /normal (常规) font-weight: 100-900; 100- 500不加粗600- 900加粗
5	font-style	倾斜	font- style: italic(斜体 字)/oblique(倾斜的文字)/normal (常规显示) ;
6	text-align	文本水平对齐	text- align:left;水平靠左 text- align: right; 水平靠右 text-align: center; 水平居中 text- align:justify;水平2端对齐，但是只对多行起作用。
7	line-height	行高	line-height的数据=height的数据，可以实现单行文本垂直居中
8	text-indent	首行缩进	text-indent可以取负值;text-indent属性只对第一行起作用
9	letter-spacing	字间距	控制文字和文字之间的间距
10	text-decoration	文本修饰	text-decoration:none没有/underline下划线/overline上划线/line- through删除线
11	font	文字简写	font是font- style font-weight font-size / line-height font- family的简写。 font:italic 800 30px/80px “宋体” ;顺序不能改变，必须同时指定font-size和font- family属性时才起作用
12	text-transform	大小写	capitalize首字母大写 lowercase全部小写 uppercase全部大写 none

二十七、列表属性

个数	属性	描述	说明
1	list-style-type	定义列表符合样式	list- style-type:disc(实心圆)circle(空心圆)/square(实心方块)/none(去掉符号)
2	list-style-image	将图片设置为列表符合样式	list-style- image:url();
3	list-style-position	设置列表项标记的放置位置。	list-style-position: outside; 列表的外面默认值 list-style-position: inside; 列表的里面
4	list-style	简写	list-style:none;去除列表符号

二十八、背景属性

个数	属性	描述	说明
1	background-color	背景颜色	background-color: red;
2	background-image	背景图片	background-image:url();
3	background-repeat	背景图片的平铺	background-repeat:no-repeat/repeat/repeat-x/repeat-y;
4	background-position	背景图片的定位	background-position:水平位置垂直位置; 可以给负值
5	background- attachment	背景图片的固定	background-attachment : scroll (滚动)/ fixed (固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了) ;

可以简写成background：

1. 用空格隔开
2. 顺序可以换
3. 可以只取一个值，放在后面能覆盖前面的值

background-size属性只能单独用

二十九、浮动属性

个数	属性	描述	说明
1	float	float: left;	元素靠左边浮动
2	float	float: right;	元素靠右边浮动
3	float	float: none;	元素不浮动
4	clear	Clear: none;	允许有浮动对象
5	clear	Clear: right;	不允许右边有浮动对象
6	clear	Clear: left;	不允许左边有浮动对象
7	clear	Clear:both;	不允许有浮动对象

浮动的作用1：
定义网页中其它文本如何环绕该元素显示
浮动的作用2：
就是让竖着的东西横着来
清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。

三十、盒子模型

内边距

1个值，4个方向一样
2个值，上下，左右
3个值，上 左右 下
4个值，上 右 下 左

内边距特性

1. 背景色蔓延到内边距
2. 可以设置单一方向

边框

样式：solid double dashed dotted
背景色 也能蔓延到边框

外边距

margin-方向 4个方向
背景色不蔓延
支持外边距负值
屏幕居中：margin:0 auto; 横向居中