前端Day05-CSS

CSS的三大特性

CSS优先级
	当同一个元素通过不同欧冠的选择器设置样式时，会根据选择器优先级优先级高的显示，会把低优先级的样式覆盖
CSS层叠性：
	当属性发生冲突时，优先级高的会把优先级低的属性给层叠掉；当没有发生冲突时，就不会层叠，会被显示出来
CSS继承性：
	给父元素添加的属性，子元素也会应用
	一般文本样式的属性都能继承(text-/font-/line=)
	设置结构的属性不能继承(width/margin/padding)

选择器权重：

1.基础选择器的权重：
	通配符		0,0,0,0
	类型选择器  0,0,0,1
	类选择器.	0,0,1,0 
	伪类选择器  0,0,1,0
	id选择器#	0,1,0,0
2.复合选择器的权重：
	1.权重之和：包含选择器、子选择器、兄弟选择器、通用选择器、交集选择器
	2.群组选择器就是选择器自身的权重大小
3.其他权重类型：
	继承权重	0,0,0,0
	行内样式表	1,0,0,0
	!important最高优先级

CSS核心属性：

属性：元素所具有的属性，是已经规定好的，直接使用即可
属性值：设置属性所显示的具体的效果；
	法定属性值：指的是属性所具有的属性值，已经规定好的，直接使用即可
	数值加单位：
		px	固定单位
		%	相对单位，相对父元素显示的%
		em	相对单位，相对当前字号大小显示，默认font-size:16px;也就是1em=16px；
	颜色值：
		英文单词
		十六进制：rgb(#000000#红绿蓝)

CSS文本属性：

1.文本颜色：
color:colorValue颜色值
2.文字字号：
font-size:Value
	部分浏览器不支持12px一下的文字大小
3.文本字体：
font-family：
	说明：
		1.字体是中文汉字，需要写在引号里，如："微软雅黑"；
		2.字体是多个英文组成的，需要在引号里"Time New Roman"
		3.字体是一个英文单词组成的，不需要写在引号里Arial
		4.中文的字体对英文起作用，但英文字体对中文不起作用
		5.同时设置中英文字体时，先写英文字体，在写中文字体
4.字体粗细：
font-weight：
	normal	默认值
	blod	加粗
	lighter	极细的
	bolder	更粗的
5.文本样式：
font-style：
	normal	取消倾斜 常规显示
	italic	倾斜的
	oblique	倾斜的文字
6.小型的大写字母：
font-variant：
	normal
	small-caps	显示为小型的大写字母

复合属性：font:" weight style variant size family" ;
	必须同时具有字号和字体属性，先字号后字体
	一般在body里使用，用来设置全局的默认的字号和字体

CSS文本对齐属性

1.水平对齐属性：
	text-align:
		left	左对齐
		center	居中对齐
		right	右对齐
		justify	两端对齐
2.垂直对齐属性：
	vertical-align：
		top		顶对齐
		bottom	底对齐
		middle	居中对齐
		baseline基线对齐，(默认值)
		text-top 相对文本顶对齐
		text-bottom相对文本底对齐
		super	 显示为上标
		sub		 显示为下标
	说明：
		1.没有继承性
		2.该属性对行内块元素和img标签一起使用才起作用
		3.设置元素自身的垂直对齐方式，不是设置元素里面的内容的对齐方式
		4.给td设置时，是可以设置td里面文本的垂直对齐方式
		5.对input、img、textarea、select、td起作用

CSS间距

1.修饰文本
text-decoration：
	none	默认没有（常用）
	underline下划线
	overline 上划线
	line-through删除线

4.文本缩进
	text-indent:value
	说明：1.只对第一行起作用
		 2.支持负值，可以隐藏文本

5.字间距
	 letter-spacing:value;
      说明：1、设置字和字以及字母和字母之间的间距
           2、支持负值
6.词间距：
	word-spacing:value;
    说明：1、主要设置英文单词之间的间距
         2、支持负值
7.文本行高属性：
	line-height:value;
    说明：
    	1.设置多行文本的行间距：
    		1.有默认的行高，是文字的1.3倍
    		2.属性值是数值或者是倍数，倍数的话不加单位，是当前文字大小的倍数
    		3.多行文本的行高测量方式，从上一行开始量到下一行开始的位置
    		4.如果行高的值等于文字大小，那么行与行之间就挨在一起
    	2.设置单行文本在容器中的垂直位置：
    		1.行高等于文字大小时，单行文本就在容器中顶对齐位置
    		2.行高等于容器高度时，单行文本就在容器中垂直居中位置
    		3.行高小于容器高度时，单行文本就在容垂直居中以上的位置
    		4.行高大于容器高度时，单行文本就在容垂直居中以下的位置
    	3.单行文本的测量方式：
    		从元素的顶边量到文字的顶边，乘2加文字的大小