CSS知识点概要
一．CSS简介
1.什么是CSS
层叠样式表。专门用来描述结构文档(HTML)的表现方式，主要用于网页风格设计，包括字体，颜色，背景，元素定位等等，使传统网页更加丰富。HTML 结构 CSS 表现
2.CSS的优势
内容与表现分离（HTML+CSS==>>结构+表现）
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
3.CSS的发展史
CSS1:1996年正式规范面世。
CSS2.1998年正式推出。
CSS2.1:2004年对原版本进行了一些小范围修改，删除了一些浏览器 支持不成熟的属性。
CSS3.2010年CSS3规范推出，完善了前面CSS存在的不足，例如：颜色模块增加了色彩校正、透明度等功能，还增加了变形和动画模块等。但目前浏览器的支持还不理想。
二．CSS 的使用
1.CSS的引入模式
1)内联样式：将样式定义到具体的html元素上，参演用于精确控制一个html元素的表现
例：<p style=”color:#f00;font-size:14px;font-weight:bold:”>
样式表学习开始
</p>
2)内部样式：通过在html文档头部定义样式。在这种方式下，每批CSS样式只能控制一份html文档，写在<head></head>之间，用<style></style>标记进行声明
3)链接外部的样式文件：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式 下，一份样式可重复被多个文件引入，即一份样式可控制多份文档。
例：<link href=”样式文件路径” type=”text/CSS” rel=”stylesheet”>
4)导入外部文件：与第三种类似，只是使用@import来引入外部样式表文件.放到<style></style>之间，使用 @import 文件地址
四种引用方式的优先级：
内联>内部>@外部样式>link 外部样式(就近原则)
2.CSS选择器
选择器是一种模式，用于选择需要添加样式的元素
如何定义CSS样式
Selector{ //selector由选择器决定，对哪些元素起作用
属性:值;
属性:值; //属性定义 ，决定了起什么作用
}
CSS选择器类型：
元素选择器：
p{ font-size:16px;}
类选择器：. Name 点号开始 ，一个元素中可以应用多个类，效果叠加
.class{color:red;}
ID选择器： #Name #号开始，不能应用多个ID选择器（ID具有唯一性）
#header{text-align:left;}
并集选择器：
多个选择器之间用逗号隔开，可以同时定义多个选择器
h1,h2,h3,h4{text-align:center;}
后代选择器
在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明，外层的标签写在前面，内层的标签写在后面，之间用空格分隔
p a{…} 指p标签内部所有a标签应用的样式
交集选择器
由两个选择器直接连接构成，选中二者各自元素范围的交集
第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
选择器之间不能有空格，必须连续书写
p.txt{color:blue; line-height:28px;}
三．CSS常用样式属性
1.字体和文本：字体大小，样式，粗细，类型等
1)字体相关属性：
font-family:字体
font-size:字体大小，尺寸
font-style:字体样式，主要有normal,italic,oblique
font-weight:字体的粗细。主要有normal，bold,自定义粗细
p span{font:oblique bold 12px "楷体";}
2)文本相关属性：
color:文本颜色
letter-spacing:字符间距(可以取像素为单位)
line-height:行高
text-align:文本对齐方式：left,right,center
text-decoration:文本装饰效果，主要有:
overline 上划线
underline 下划线
line-through 删除线
text-indent: 文本首行缩进
text-transform:控制文本的大小写，uppercase（大写）,lowercase（小写）,capitalize（首字母大写）
word-spacing:设置单词间距
2.边框和背景(大多数元素都有边框属性)
border:设置所有边框属性
border-width:设置边框宽度
border-style:设置边框的样式，主要有:
none, 无边框
dotted：定义点状边框。在大多数浏览器中呈现为实线。
dashed 虚线
solid: 实线
double:双线
border-color:设置边框颜色
单边设置：
border-left:设置左侧边框属性
border-right
border-top
border-bottom
border-left-color:设置左边颜色
border-left-style:设置左边样式
border-left-width:设置左边宽度。
背景：
background:在一个声明中设置所有的背景属性
background-color:设置元素的背景颜色
background-image:设置元素的背景图片，主要有url和none
background-position:设置背景图像的开始位置。可以指定left top等，可可以指定具体的像素位置
background-repeat:设置是否及如何重复背景图像，主要 有:repeat,repeat-x,repeat-y,no-repeat;
3.列表属性：
list-style:在一个声明中设置所有的列表属性
list-style-image:将列表项标记设置为图片
list-style-position:设置列表项标记的位置，主要有outside和 inside
4.常用伪类别属性
a:link 超链接的普通样式
a:visited 被点击过的超链接的样式
a:hover 鼠标指针经过时的样式
a:active 在链接上单击时超链接的样式
