CSS作用：
- 快速维护页面元素的样式属性
- 弥补HTML元素的属性不足
CSS基础
CSSCascading Style Sheets，层叠样式表单
CSS的使用方式有三种
1，书写于标记的内部（内联样式）
<标记名称 style="属性：值；属性：值"/>
<标记名称 style="属性：值；属性：值">...</标记名称>
仅对指定的标记有效
2，书写于文档的头部（内部样式）
<style type="text/css">
选择器{属性：值;...}
...
</style>
仅对整个文档的所有标记有效
3，链接到外部的CSS文档
step1，创建css文件
1，CSS文件的扩展名为.css
2，CSS文件的语法结构：选择器{属性:值;...}
step2，在网页文件内链接到外部的CSS文件
<link type="text/css" rel="stylesheet" href="CSS文档URL"/>
CSS语法规范
内联样式
<标记名称 style="属性：值；属性：值"/>
<标记名称 style="属性：值；属性：值">...</标记名称>
外部样式/内部样式
选择器{属性:值;...}
CSS选择器
1，元素选择器（只针对指定的元素有效，且自动应用）
元素名称{属性:值;...}
2，类选择器（可手动应用于任何标记，class="类名称"，多个类名之间以空格分隔）
.类名称{属性:值;...}
3，ID选择器（只能手动应用于唯一的元素，id="ID"）
#id{属性:值;...}
id的用途
- CSS中的ID选择器
- JavaScript
- JQuery
4，群组选择器（实际上是具有相同属性的选择器的简洁写法）
选择器,选择器,...{属性:值;...}
5，派生选择器（两个选择器之间至少为父子关系）
选择器 选择器 ...{属性:值;...}
6，伪类选择器
- :link ：正常显示状态
- :hover ：鼠标放上的状态
- :active ：鼠标按下的状态
- :visited：访问过的状态
CSS单位
长度单位：px（像素）、%（百分比）、em（文字尺寸的倍数）
颜色单位：
- A，英文名称，如red，green，blue等
- B，十六进制表示法，如#ff0000，红绿蓝的顺序
- C，简写的十六位进制，如#f00
- D，RGB表示法，如rgb（255，0，0）
- E，百分比的RGB表示法，如rgb（100%，0%，0%）
布局样式
- width，设置宽度
- height，设置高度
边框样式
- border-top（right|bottom|left）:宽度 线型（none|solid[实线]|dotted[点划线]） 颜色;
HTML标记的种类
根据是否换行，划分成：
- 块级对象：可以自然换行（p，div，h1，h2...ul，ol，li等）块级对象其默认宽度占其父对象的100%
- 内联对象：不能换行
布局样式
1，内边距：
- padding-top：上侧的内边距
- padding:value：四个方向内边距相同
- pading:value（上下） value（左右）
- pading:value（上） value（左右） value（下）
- pading:value（上） value（右） value（下） value（左）
2，外边距
- margin-top：上侧的外边距
- margin:value|auto：四个方向的外边距，同内边距的定义方法。
auto只有左右居中，不能上下居中。
控制元素的现实方式
display：none|inline（内联样式）|block（块级对象）
说明：只有块级元素或者HTML元素中存在width、height属性的对象（如img，table）才能通过CSS样式设置宽度/高度
背景样式
background-color：背景颜色
background-image：url
background-repeat：设置背景图像的平铺方式，repeat|no-repeat|repeat-x|repeat-y;
background-position：设置图像的位置，水平位置（left|center|right）、垂直位置（top|center|bottom）。
background-attachment：scroll（随文档滚动）|fixed（背景固定）
background：背景颜色 url 平铺方式 水平位置 垂直位置。
浮动样式
float:left|right
文本样式
line-height：行高
text-indent：首行缩进
text-align：left|center|right 文本的水平对齐方式
cursor：pointer 手型
font-weight：normal|bold（加粗效果）
列表样式
设置列表样式
- list-style-type：none|disc|circle|lower-alpha...
- list-style-image：
- list-style-position：
- list-style：样式 url(图像的URL) 位置（inside|outside）
border-collapse: collapse/separate;设置是否将表格边框合并为单一边框
定位属性
position：fixed（固定的）|absolute（绝对）|relative（相对）
颜色透明的处理：
- Chrome Firefox等：opacity:Value（0~1）
- IE filter:alpha(opacity=value[0~100]);
left|top|right|bottom:value(设置其余父对象之间的距离);
堆叠顺序
z-index：value（设置叠放次序）
CSS选择器的优先级
style，IDs，classes，tags
