CSS介绍

中文名 层叠样式表（级联样式表） 
英文名 Cascading Style Sheets
简写 CSS
功能：主要用于设置HTML页面中的文本、外形、布局等属性。			
CSS以HTML为基础

书写CSS样式

1. 在head标签中添加 style标签
2. style标签里面编写的都是CSS代码

CSS代码语法

选择器 {
	属性名: 属性值;
	属性名: 属性值;
	属性名: 属性值;
	属性名: 属性值;
}
注意点: 
	里面的所有符号都是英文符号
	一个选择器下 可以设置多个属性
	多个属性需要使用分号隔开 ;
	

选择器

CSS修改元素样式
1. 找到元素 
找元素这个过程 方法 称为 选择器
选择器：
        作用： 用与寻找HTML中元素
        写法：
1. 标签选择器：
	语法： 标签名 {
			属性名:属性值;
		  }
	选择范围： 选择页面中所有符合名字的标签
	
2. id选择器：
	语法： #id名 {
			属性名:属性值;
		  }
	选择范围： 选择页面中符合ID名的标签
	使用： 给需要选择的标签添加ID属性  通过该标签的ID名 来进行选择  
	一个ID只能出现一次，ID选择器只能选择单个
3. class(类)选择器
	语法： .类名 {
			属性名:属性值;
		  }
	选择范围： 选择页面中所有符合class（类）名的标签
	使用： 给需要选择的标签添加class属性 通过该标签的class名 来进行选择  
             与ID选择器的区别：
		1. 一个ID在html只能出现一次（唯一性）（只能选择单个）
		2. class选择器可以一次性选择多个
		3. 一个标签可以有多个class（类名） 多个类名需要使用空格隔开
		

CSS字体样式属性：

color  字体颜色
	属性值：
		1. 颜色的英文单词 如：red  yellow
		2. 颜色16进制 如： #FFFFFF #000000
		3. 颜色rgb值 如： rgb(0,0,0) rgb(255,255,255)	
font-size 字体大小
	属性值：
		数字 (所有字体默认16px、最小像素为12px)
		单位： px  像素
                          em  比例像素
			(根据上层元素的字体大小进行比例计算)
			  rem 绝对像素
			(根据HTMl标签的字体大小进行比例计算)
                                    
font-weight 字体粗细
        属性值： 100 - 900  (默认400)
	必须为100的倍数  数值越高字越粗、数值越小字越细
	700 等同于 bold  400 等同于 normal 
                            
line-height:行间距
    line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px 一般情况下，行距比字号大7.8像素左右就可以了。

text-align:水平对齐方式
    text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

text-decoration: 装饰文字

text-decoration 用于修饰文字效果 例如下划线 中划线

none 无
line-through 中划线
underline 下划线
overline 上划线
                            
                            

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}

链接伪类选择器

 :link      /* 未访问的链接 */
 :visited   /* 已访问的链接 */
 :hover     /* 鼠标移动到链接上 */
 :active    /* 选定的链接 */

结构(位置)伪类选择器（CSS3)

 :first-child :选取属于其父元素的首个子元素的指定选择器
 :last-child :选取属于其父元素的最后一个子元素的指定选择器
 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式