CSS运用简介
日期：2014-05-17 浏览次数：20597 次
1.CSS 指层叠样式表 (Cascading Style Sheets)
2.说明：
? ? ?样式定义如何显示 HTML 元素；
? ? ?样式通常存储在样式表中；
? ? ?把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题；
? ? ?外部样式表可以极大提高工作效率；
? ? ?外部样式表通常存储在 CSS 文件中；
? ? ?多个样式定义可层叠为一 ；
3.分类：? 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
? ? 1）浏览器缺省设置
? ? 2）外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css" />
? ? 3）内部样式表（位于 <head> 标签内部）<style type="text/css"></style>
? ? 4）内联样式（在 HTML 元素内部）
4.CSS 语法：CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
? ?selector {declaration1; declaration2; ... declarationN }
5.选择器分类：
? ?1)派生选择器:派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
? ? ??strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
下面是它施加影响的 HTML：
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
2)id 选择器:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
#red {color:red;}
#green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
3)类选择器:类选择器以一个点号显示：
.center {text-align: center}
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
4)属性选择器:?对带有指定属性的 HTML 元素设置样式。
? ? ? 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
下面的例子为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
6.常用样式设置：
? 1）a:link{}
? 2) a:visited{}
? 3) a:hover:{}
? 4) a:active{}
