1.css的概念
css（Cascading Style Sheet）,中文译为层叠样式表，是2用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
2.css的发展史
- 1996年css1.0
- 1998年css2.0(融入了div+css的概念，提出了HTML结构与css样式表的分离)
- 2004年css2.1(融入了更多高级的用法，如浮动，定位 等)
- 2010年css3.0:它包括了css2.1的所有功能，是目前最新的版本，它向着模块化的趋势 发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。由于 现在IE6、IE7使用比例已经很少，对市场企业进行调研发现使用css3的频率大幅增加，学习css3已经成为一种趋势。
3.css的优势 - 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的css，有利于网页被 搜索引擎收录
4.css的基础语法
css的代码被分割为一个个样式，它也是css代码的最小单元。每一个css样式都必须有两部分组成：选择器（Selector）和声明（Declaration）；声明有包括属性和属性值。在每个声明之后要用分号结束。
style标签在HTML中的位置，在<head></head>之间
<style type="text/css">
h1{
font-size：12px;
color:#F00;
}
</style>
5.引入css的方式
- 行内样式：使用style属性引入css样式
- 内部样式表：css代码写在
<head>的<style>标签中 - 外部样式表：1.链接式
<link>2.导入式<import>
css样式的优先级（就近原则）：
行内样式>内部样式表>外部样式表
6.css选择器
(1)标签选择器：HTML标签作为标签选择器的名称，例如
p{
font-size:16px;
}
这里的p就是标签选择器
（2）类选择器
<标签名 class="类名称">标签内容<标签名>
.类名称{
font-size:16px;
}
（3）ID选择器
<标签名 id=id名称">标签内容<标签名>
#id名称{
font-size:16px;
}
标签选择器 直接应用于HTML标签；
类选择器可以在页面中多次使用；
ID选择器在同一个页面中只能使用一次
基本选择器 的优先级：
ID选择器>类选择器>标签选择器（基本选择器不遵循"就近原则"）
（4）后代选择器
也称为包含选择器，两和选择器之间必须要以空格隔开
body p{
background:red;
}
此时body下所有的p元素都变为红色。
（5）子选择器
请注意这个选择器与后代选择器的区别，子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
css:
#links a {color:red;}
#links > a {color:blue;}
html:
<p id="links">
<a href="#">Div+css教程</a>>
<span><a href="#">css布局教程</a></span>
<span><a href="#">css 2.0 教程</a></span>
</p>
将会看到第一个链接元素“Div+css教程”会显示成蓝色，而其他两个元素会显示成红色。
（6）相邻同胞选择器
除了上面的子选择器和后代选择器，用户可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式，就可以使用相邻同胞选择器。例如下面的代码:
css:
h1+p{color:blue;}
html:
<h1>一个非常专业的css站点</h1>
<p>Div+css教程中，介绍了很多关于css网页布局的知识。</p>
<p>css布局中，有很多与css布局有关的案例。</p>
我们会看到，第一个段落“Div+css教程中，介绍了很多关于css网页布局的知识。”的文字颜色将会是蓝色，而第二段则不受此css样式 的影响。
（7）属性选择器
属性选择器是根据元素的属性来匹配的，其属性可以是标准属性，也可以是自定义属性，当然，也可以同时匹配多个属性。
例如:
a[id]{background:yellow;}
a[id=first]{background:red;}
a[class*=links]{background:red;}
a[href^=http]{background:red;}
a[href$=png]{background:red;}
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
