标签：
CSS发展史
1996年12月 css第一版诞生。
1998年5月 css2正式发布
2004年 css2.1发布
Css3的发布……。不是一个时间而是一个时间段
css3模块介绍
css2中在 css1基础上添加了高级功能
浮动和定位、高级选择器（子选择器、相邻选择器、通用选择器）
css3遵循的是模块化开发。发布时间并不是一个时间点，而是一个时间段。
css简介
CSS的基本概念
CSS是层叠样式表(Cascading Style Sheet)
CSS的作用
用于控制网页的外观，修饰和美化html标签的,实现了结构和形式的分离。
使用CSS+DIV的优点
采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优
1：表现和内容相分离
2：提高页面浏览速度
3：易于维护和改版
样式表的定义方式
Css样式定义在样式表中
样式的定义方式
选择器{样式1：样式值1；样式2：样式值2；……}
样式表的分类
1、行内样式表
在html标记内，使用style属性定义css样式。
如：<p style=”color:#00ffdc;”></p>
2、内嵌式样式表将css添加到<head>与</head>之间，并用
<style></style>标记声明的一种样式。
语法如下：
<style>
/*这里写css内容*/
</style>3、外部定义css样式表，通过<link/>链接标记链接到页面中的一种样式。
语法：
<link href="style.css" rel="stylesheet" type="text/css" /> 4、在外部定义css样式表，通过导入方式链接到页面中的一种样式。
语法：
<style>
@import url();
</style>样式表的优先级
就近原则
CSS选择器
1：基本选择器
Css选择器
全局选择器
设置所有标签使用同一样式，用*来表示
全局选择器语法:*{ }
标签选择器
标签选择器的语法：p{}
类选择器
类选择器：用来为一系列标签定义相同的样式
类选择器的语法: .classname{}
先定义
.blue{color:#00000ff;}
然后再引用
<h2 class=“blue” >一站式建店</h2>
ID选择器
ID选择器的语法:#idname{}
先定义
#green{color:#0000ff;}
再引用样式
<h2 id=“green” >一站式建店</h2>
用法和class类似，但要注意同一id名在同一个页面中只能出现一次
选择器的优先级及权重
行内>id>class>element>*
权重：
行内/1000
id/100,
class/10,
element/1,
*/0基本样式
基础样式属性
Color：颜色；规定颜色值为颜色单词名称例如（red）或者十六进制值得颜色例如（#ff0000）或者为rgb值得颜色例如（rgb(255,0,0)）；
Width:宽度；设置元素的宽度值，值为数字；单位为px（像素)、em（字符）、%（百分比）；默认值为auto（自动，通过浏览器自动计算出宽度值单位为像素）
Height：高度；设置元素的高度值，值为数字；单位为px（像素)、em（字符）、%（百分比）；默认值为auto（自动，通过浏览器自动计算出宽度值单位为像素）
Background-color:背景颜色；规定颜色值为颜色单词名称例如（red）或者十六进制值得颜色例如（#ff0000）或者为rgb值得颜色例如（rgb(255,0,0)）；
Inherit：属性值，大部分属性都有该属性值意义为继承。
颜色值的表示法
单词表示法 Red green blue yellow pink orange…
十六进制表示法
#ff0000 #00ff00 #0000ff #000000 #ffffff
#f00 #0f0 #00f #000 #fff
Rgb表示法 (255,0,0)
Rgba表示法 (255,255,0,0.3)note3
html:结构
css:修饰和美化HTML标签->表现
历史：96年css第一个版本。easy decorate change color size 补白、基本选择器
2000年网吧火
css3新特性：
css<cascading style sheet>层叠样式表
css作用：用于控制网页的外观， 修饰美化htmlb标签，实现了结构和形似的分离
css优点：【表现和内容想分离|提高页面浏览速度|易于维护和改版】
1:css的使用
css定义方法：
【1】css应写CSS样式表里
【2】css样式应该怎么写
语法： 选择器{ 样式1：样式值;样式2：样式值2;....}
【样式表】：/he
【1】：行内样式表 style=""
<h2 style="color:red"></h2>
【缺点】
只能给当前的标签定义样式，不能给所有相同标签设置
结构样式未分离
【优点】
级别最高
【2】：内部样式表（内嵌式样式表）
<style type="text/css"> H5中{type="text/css"}不用谢
样式
span{color:pink;}
</style>
【缺点】
结构与样式未分离
【优点】
可以定义同一样式
【3】:外部样式表
1:链接式样式表(常用 最多用)
<link href="css/index.css" type="text/css" rel="stylesheet"/>
【优点】
实现结构样式的分离
维护方便
2:导入时样式表(几乎不用)
<style type="text/css">
@import url(样式表的路径);
</style>
【样式表的优先级】：
行内演示表：就近原则（行内）最高 外部和内部与顺序有关
【选择器】：
基本选择器
《1》【全局选择器】：*{样式1：样式值;样式2:样式值2;...}
【*】标示页面所有标签
特点：页面当中所有标签都具有相同样式
《2》【标签选择器】：
p{样式1：样式值;样式2:样式值2;...}
/**/css注释
优缺点：
相同 标签具有统一样式
《3》 问题：相同标签有统一样式 | 不同的标签有统一样式
【类别选择器】
选定义后使用
定义：.classname{样式1：样式值;样式2:样式值2;...}
使用：<p class="classname"></p>
特点：
定义一次可以多次使用
《4》【id选择器】
先定义后使用
定义; #idname{样式1：样式值;样式2:样式值2;...}
使用：<p id="idname"></p>
特点：相同的ID名称，在一个页面中只能出现一次（id唯一）
问题：
一个标签可以引入多个类别选择器 怎样引入?
并列引入， 以最早引入的为主
class="a b" 一般引入两个 中间加入空格
一个标签可不可以同时引入类别选择器和ID选择器？
可以同时，单被覆盖，以ID选择器为主
四种选择器的优先级？
#>.>eliement>*
选择器的优先级:
行内样式表>id>.class>element(元素)>*
【权重】 1000 100 10 1 0
text-decoration:underline;
【颜色标示法】<rgb>
单词表示方法：
red green blue yellow pink purple white black orange gray
十六进制颜色表示方法：（0-9）(a-f) 0最小 f 最大
#ff0000红色 #00ff00绿色 #0000ff蓝色 #ffff00黄色
#000000黑色 #ffffff白色 #ddddddd灰色
#f00
RGB标示方法(0.255)
background-color:rgb(255,0,0); 红色
background-color:rgb(120,120,120); 灰色
rgba表示法(rgb 红绿蓝 a标示透明度0-1之间值 0.3|0.4 0==表示完全透明 1==不透明)
background-color:rgba(255,0,0,0.1); 红色
background-color:rgba(120,120,120,1); 灰色
opacity:0.5也可以设置透明度，但是影响文字
【宽|高的表示法】
witdth:500px（固定单位）; width="50%"(流体)； width:em/rem（相对单位）
em:相对于父类元素进行改变
rem:相对根元素进行改变;
基本样式：
color:
background-color:
widht|height
<h3 align="center">写在标签里面的东西叫：标签属性</h3> 标签属性="标签属性值"
h3{
color:red; css属性：css属性值
}
能用CSS属性设置的不要再用标签属性了
text-align:center;
层叠 ：样式表 多个页面可以引用 一个css属性可以多个标签使用 标签：
原文地址：http://blog.csdn.net/qq_35260622/article/details/51931208
