CSS发展史
•1996年12月 css第一版诞生。
•1998年5月 css2正式发布
•2004年 css2.1发布
•Css3的发布……。不是一个时间而是一个时间段
CSS的基本概念
–CSS是层叠样式表(Cascading Style Sheet)
CSS的作用
用于控制网页的外观，修饰和美化html标签的,实现了结构和形式的分离。
使用CSS+DIV的优点
采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优
1：表现和内容相分离
2：提高页面浏览速度
3：易于维护和改版
–样式的定义方式
选择器{样式1：样式值1；样式2：样式值2；……}
样式表的分类
1、行内样式表
在html标记内，使用style属性定义css样式。
如：<p style=”color:#00ffdc;”></p>
、内嵌样式就是将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：样式值1；样式2：样式值2；……}
–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)
