本文共 4634 字，大约阅读时间需要 15 分钟。
- 作用
查看如下代码
<body bgcolor="silver" text="blue">
<h2>h2 text</h2>
<hr color="red" />
Some text here.
</body>
如果使用HTML标记中的属性来定义样式，各元素对于样式的属性定义各不相同
使用CSS定义样式
<html>
<head>
<style type="text/css">
body
{
background-color:silver;
color:blue;
}
h2
{
background-color:orange;
color:green;
}
hr { color:red; }
</style>
</head>
<body>
<h2>h2 text</h2>
<hr />
Some text here.
</body>
</html>
使用CSS： 各元素使用统一的样式声明，且提高了样式的可重用行和可维护性！
- 什么是CSS
层叠样式表，又 叫级联样式表，简称样式表
• 用于 HTML 文档中元素的样式定义
– 实现了将内容与表现分离
– 提高代码的可重用性和可维护性
CSS 与 HTML 之间的关系
• HTML 用于构建网页的结构
• CSS 用于构建 HTML 元素的样式
• HTML 是页面的内容组成，CSS 是页面的表现
| <style type="text/css"> p{ color:red; font-size:14px; text-align:center; } </style>
<p>段落1</p> <p>段落2</p> <p>段落3</p> |
HTML 属性与 CSS 样式的使用原则
• W3C 建议尽量使用 CSS 样式取代 HTML 属性
– 实现内容和表现的分离
– 如果为 HTML 所特有的属性，则使用 HTML 属性
使用 CSS 样式表的方式
• 内联方式
– 样式定义在单个的 HTML元素中
• 内部样式表
– 样式定义在 HTML 页的头元素中
• 外部样式表
– 将样式定义在一个外部的 CSS 文件中（.css 文件）
– 由 HTML 页面引用样式表文件
内联方式使用 CSS
• 样式定义在 HTML 元素的标准属性 style 里
• CSS 语法
– 只需要将分号隔开的一个或者多个属性/值对作为元素的 style 属性的值
– 属性和属性值之间用：连接
– 多对属性之间用；隔开
<h1 style =“background-color : silver ; color : blue ;”>
文本
</h1>
内部样式表
• 样式表规则位于文档头元素中的 <style> 元素内
– 在文档的 <head> 元素内添加 <style> 元素
– 在 <style> 元素中添加样式规则
<html>
<head>
<style type="text/css">
h1 { color : blue ; }
</style>
</head>
<body>
<h1>文本1</h1>
<h1>文本2</h1>
</body>
</html>
可以在当前页面范围内重用
• 在 <style> 元素中添加样式规则
– 可以定义多个样式规则
– 每个样式规则有两个部分：选择器和样式声明
• 选择器：决定哪些元素使用这些规则
• 样式声明：一对大括号，包含一个或者多个属性/值对
<head>
<style type="text/css">
h1 #选择器
{
color : blue ; #样式声明
}
</style>
</head>
外部样式表
• 第一步：创建一个单独的样式表文件用来保存样式规则
– 一个纯文本文件，文件后缀为 .css
– 该文件中只能包含样式规则
– 样式规则由选择器和样式声明组成
myStyle.css 文件
h1
{ color:green; } P { background-color:silver; color:blue; }
• 第二步：在需要使用该样式表文件的页面上，使用 <link> 元素链接需要的外部样式表文件
– 在文档的 <head> 元素内添加 <link> 元素
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
<body>
<h1>1号标题</h1>
<p>段落</p>
<span>其他文本</span>
</body>
</html>
可以实现内容与表现分离 ，可以被站点中的所有页面重用
CSS语法规范
• 内联样式：由样式声明组成
<h1 style=“background-color:silver;color:blue;”>文本</h1>
• 样式表（内部样式表或者外部样式表）
– 由多个样式规则组成
– 每个样式规则有两个部分：选择器和样式声明
+---------------------------------------------------------------------+
选择器 样式声明 |
↓ ↓ ↓ |
↓ 属性 值 … |
↓ ↓ ↓ |
h1 { text-align:center; color:red;} |
+---------------------------------------------------------------------+
CSS 样式表特征
1. 继承性
– 大多数 CSS 的样式规则可以被继承2. 层叠性
– 可以定义多个样式– 不冲突时，多个样式表中的样式可层叠为一个
3. 优先级
– 样式定义冲突时，按照不同样式规则的优先级来应用样式
通用选择器
• 通用选择器，显示为一个星号（*）
– 可以与任何元素匹配
– 常用于设置一些默认样式，比如设置整个文档的文本的默认字体和大小
*
{
font-size : 9pt;
font-family : "Times New Roman";
}
元素选择器
• html 文档的元素就是选择器
– 比如 <p>、<h1> 等
html
{
color : black ;
}
h1
{
color : blue ;
}
h2
{
color : silver ;
}
类选择器
• 语法为：.className { color:red;}
– 类名称不能以数字开头
• 所有能够附带class属性的元素都可以使用此样式声明
– 将元素的 class属性的值设置为样式类名
样式表中：声明一个样式类，写在css文件里，在html文档调用
.myClass
{
background-color : Pink;
font-size : 35pt;
}
<!DOCTYPE html>
<html lang="en"> <head> <link rel="stylesheet" type="text/css" href="myClass.css" /> </head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- html 文档中：将元素的 class 属性的值设置为样式类的名称 --><h2 class="myClass">h2文本</h2>
<p class="myClass">段落文本</p>
</body> </html>
• 可以将多个类选择器应用于同一个元素（多类选择器）
– HTML 元素的 class 属性的值中可能包含一个词列表
– 各个词之间用空格分隔，每个词都是一个类选择器
样式表中：声明两个样式类
.important {
font-weight : bold;
}
.warning {
color : red;
}
html 文档中：将元素的 class 属性的 值设置为多个样式类名的列表
<p class="warning">警告</p>
<p class="important">重要</p>
<p class="important warning">哈哈</p>
• 可以将类选择器和元素选择器结合起来使用，以实现对 某种元素中不同样式的细分控制（分类选择器）
• 语法为：元素选择器 .className { }
– 先声明一个元素选择器
– 然后使用一个点号（.）代表将使用类选择器
– 然后声明一个类的名称
– 最后使用一对大括号声明样式规则
• 将样式规则与附带 class 属性的某种元素匹配
– 元素的 class 属性的值为分类选择器中指定的样式类名知
样式表中：定义一个分类选择器
p.important
{
color : red ;
font-size : 20pt;
border:1px solid black;
}
html 文档中：将元素的 class 属性的值设置为样式类的名称
<h2 class="important">h2文本</h2>
<p class="important">段落文本</p>
只有 <p> 元素使用样式
- id 选择器
id 选择器以一种独立于文档元素的方式来指定样式
• 它仅作用于 id 属性的值
• 语法为：
– 选择器前面需要有一个 # 号
– 选择器本身则为文档中某个元素的 id 属性的值
样式表中：定义一个 id 选择器
#mostImportant
{
color:red;
background:yellow;
}
html 文档中：将元素的 id 属性的值设置为选择器的名称
<h1 id="mostImportant">This is important!</h1>
<h1 >This is important!</h1>
群组选择器
• 选择器声明为以逗号隔开的选择器列表
– 将一些相同的规则作用于多个元素
样式表中：定义选择器分组
h2, p.important
{
color:green;
font-size:20pt;
border:1px solid red;
}
html 文档中：
<p class="important">p text</p>
<h2>h2 text</h2>
伪类选择器
• 伪类用于向某些选择器添加特殊的效果
• 使用冒号(:)作为结合符，结合符左边是其他选择器，右 边是伪类
– 选择器 : 伪类选择器
• 链接伪类
– : link ，适用于尚未访问的链接
– : visited ，适用于访问过的链接
• 动态伪类，用于呈现用户操作
– :hover，适用于鼠标悬停在 HTML 元素时
– :active，适用于 HTML 元素被激活时
– :focus，适用于 HTML 元素获取焦点时
样式表中：定义伪类选择器
a:link {
color: black;
font-size:15pt;
}
a:visited {
color: pink;
font-size:15pt;
}
a:hover {
font-size : 20pt;
}
a:active {
color : red;
}
转载地址：http://qhiqi.baihongyu.com/