Dreamweaver入门之CSS样式表的关联方法详解
作者:本站整理 时间:2015-02-13
CSS是目前能够真正做到网页表现与内容分离的一种样式设计语言，我们可以通过三种方法在站点网页上使用样式表，接下来小编就为大家介绍CSS样式表的三种关联方法。
内部样式表
内部样式表需要在网页的<head>部分定义，格式如下：
<head>
<style type="text/css">
/*符合CSS语法结构的CSS语句，例如*/ body { background-color: blue; }
</style>
</head>
行内样式表(内嵌样式表)
它的使用方法我们在前两节也已经使用过了。行内样式表直接在标签内部定义，使用style属性，格式如下：
<标签 style="符合CSS语法结构的CSS语句">
例如：
<p style="text-indent:24px;">段落内容</p>
外部样式表
使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的<head>部分插入以下内容：
<head>
<link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" />
/*文件位置就是所处在的文件夹相对与当前网页的相对路径*/
</head>
下面我们以一个实例来看看如何使用外部样式表：
link标签为网页链入了一个CSS样式表文件“waibu.css”，HTML文档和CSS文件的源代码分别如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="waibu.css">
</head>
<body>
<h1>我是页面最上端的标题1</h1>
<h1 id="daohang">我是页面左侧的标题1，用来导航</h1>
<h1>我是页面新闻的标题1</h1>
<p>我是新闻的内容。</p>
</body>
</html>
提示：此例中，HTML文档和外部CSS文件要保存在同一个文件夹。
h1.dabiaoti {
font-weight: bolder;
text-align: center;
}
h1#daohang {
font-size: 12px;
font-weight: bolder;
text-align: left;
}
.xinwen {
font-size: 16px;
font-weight:bold;
text-align: center;
color:green;
}
p {
text-align: center;
}
层叠的意义
当我们为同一个标签多次设置样式表的时候，这些样式表会最终层叠成一个样式表来作用于标签。例如，你在外部样式表中为p定义了如下样式：
p { text-align: left;}
而在内部样式表中又定义了如下样式：
p {text-indent: 24px;}
那么最终网页内p标签的样式将为： p { text-align: left;text-indent: 24px;}。
几种样式表的优先级
上面的两个样式表的层叠比较好理解，两个样式表分别定义了一个标签的不同属性。但是如果外部样式表与内部样式表同时定义了一个属性呢？看下面的例子。
外部样式表的内容：
p { text-align: center;}
内部样式表的内容：
p { text-align: left; }
最终页面中的段落将是左对齐，也就是说如果你试图对同一标签的同一属性多次定义，那么内部样式表的定义将要覆盖外部样式表的定义。这是因为内部样式表的优先级高于外部样式表。三种样式表的优先级由高到低排列如下：
行内样式表(内嵌样式表)
内部样式表
外部样式表
补充规则：优先级相同的情况下，后定义的属性会覆盖先前定义的。
其他高级规则：CSS中的important!可用于浏览器兼容的问题，等以后再学习。
相关文章
相关推荐
-
Windows10安装程序(Win10升级工具) 64位 V10.0.10240.16399官方版
-
Notepad++ 中文绿色版
-
沁坤大宗交易系统官方版 v2.0
-
Gilisoft Video Editor中文版 v8.0
-
云上PDF官方版 V1.0.7.3774
-
萝卜家园一键重装系统官方版 v6.9.9.22
-
系统美化专家 18.8.5（系统美化大师）
-
TxT小说阅读器 7.17(TxtReader下载)
-
光影看图 V1.1.1.50 专业版
-
GoldWave音频转换工具官方版
-
QQ无QQ秀去广告版 V8.6
-
文华财经 6.7.215（行情分析专家）
-
百度Hi官方版
-
海鸥手机号码归属地查询绿色版 v2.1
-
开机大师官方版 v1.0.35
-
KK按键绿色版 V2012.8.13
