1.什么是CSS
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表
- 用于HTML文档中元素样式的定义
– 实现了将内容与表现分离
– 提高代码的可重用性和可维护性
- 文件后缀是.css
css在前端中如同一个美容师
2.css引入方法
CSS与HTML之间的关系
- HTML用于构建网页的结构
- CSS用于构建HTML元素的样式
- HTML是页面的内容组成，CSS是页面的表现
- 结构层 HTML（如同人的骨骼构架）
- 表示层 CSS （如同人出门时的穿衣化妆）
- 行为层 JavaScript（如同人的走路吃饭等行为）
使用CSS样式表的方式
1.内联方式
直接把CSS代码用style属性添加到开始标签中
<p style=“color:red;”>红色字体</p>
用分号分割
2.内部样式表
直接把CSS代码添加到头部的style标签中
<head> <style> p{color:red;} </style> </head>
3.外部样式表
放在<head>中
<link rel="stylesheet" href=""/>
StyleSheet，的意思就是样式调用(必须要有)
href，是样式路径，即URL
外部样式表是为了防止html过于臃肿而设置的
4.导入式
<head> <style> @import url(my.css); </style> </head>
优先级：行内样式>内部样式>外部样式>导入样式
css加载方式link和@import的区别，为什么不推荐使用@import?
- @import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等。
- 加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。
- 兼容性的差别。@import在IE5以上才能识别，而link标签无此问题。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。
- 使用@import方式会增加HTTP请求，会影响加载速度，所以谨慎使用该方法。
3.css规则与注释
css语法
- css是以属性/值对形式出现
- 属性和属性值之间用冒号（:）连接
- 多对属性之间用分号（;）隔开
如：color：red；
css注释语句
- html/css 注释快捷键：
- ctrl+/ 单行注释/取消注释
- ctrl+shift+/ 多行注释/取消注释
单行注释
<style> p{ color: pink; /*font-family: "微软雅黑";*/ font-siza: 20px; } </style>
多行注释
<style> /* p{ color: pink; font-family: "微软雅黑"; font-siza: 20px; }*/ </style>
4.元素选择器和通用选择器
1. 通用选择器，全局选择器（*）
可以与任何元素匹配
常用于设置一些默认样式
范围最广，但优先级最低
<style> *{ color: #805abb; font-family: "宋体"; } </style>
2. 元素选择器
HTML文档中的元素
p、b、div、a、img、body等
<style> p { color: red; } </style>
3. 类选择器
.className{ } 如：.box{ color:red; }
类名不能以数字开头
注意：一个页面中class名字可以重复
<style> .libai{ color: #f00; } </style>
4. ID选择器
#idName{ } 如：#box{color:red;}
注意：一个页面中id相同的id名只能出现一次
<style> #libai{ color:orange; } </style>
一般重复使用的样式不使用ID选择器，因为ID属性是唯一的
5. 合并选择器
语法：选择器1,选择器2,…{ }
作用：提取共同的样式，减少重复代码
例如：.header,.footer{height:300px;}
优先级： ID>类>通用>元素
6.CSS样式表特征
1.继承性
指被包含在内部的标签可以拥有外部标签的样式，比如：text-*、font-*、line-*，但有些属性不能继承，比如：border、padding、margin
2.层叠性
可以定义多个样式
3.优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式
css样式表优先级总结：
- 相同的选择器，其样式表排序：行内样式>内部样式>外部样式(就近原则)
- 相同方式的样式表，其选择器排序：ID选择器>类选择器>标签选择器（范围越小越优先）
- 外部样式表的ID选择器>内部样式表的标签选择器
7. div+css布局
内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显
div：
- 可定义文档中的分区或节
- 可以把文档分割为独立的、不同的部分。
- 是一个块级元素。这意味着它的内容自动地开始一个新行
- 通常与css进行配合，会有更加强的表现形式
布局实例时需要用到的css属性
- width:数值
- height:数值
- background-color:颜色
- float:left 使div不占据一行
