CSS样式应用方式

样式的优先级:行内样式>内部样式>外部样式(如果内部样式的<style>标签在<link>标签之前,则不一样;

4.1 链接外部样式表文件 (Linking to a Style Sheet)

<head>

<title>文档标题</title>

<link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css">

</head>

4.2 定义内部样式块对象 (Embedding a Style Block)(内嵌式)

<html>

<head>

<title>文档标题</title>

<style type="text/css">

<!--

body {font: 10pt "Arial"}

h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}

h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}

p {font: 10pt/12pt "Arial"; color: black}

-->

</style>

</head>

<body>

4.3 内联定义 (Inline Styles)(行间样式表)

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:

<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

4.4 导入样式(Import Styles)

与链入外部样式的功能基本相同,只是语法和实现方式上有差别

几种方式的优先级

内联样式优先级最高,其次是链接样式,再次是内嵌式,最后是导入样式

添加CSS的方法;(以下方法可以混用,且不会造成混乱.这就是它为什么称这为"层叠样式表的原因.执行有优先级:行内插入式---头部方式---外部方式;当有多个网页要用到CSS,应采用CSS文件的方式,这样网页的代码会大大减少,修改起来也很方便.只在单个网页中使用的CSS,则应采用文档头部方式;只有在一个网页一两个地方才用到的CSS,才采用行内插入方式;

1 将样式表直接添加在HTML的标识符<tag>内:(这种方法不常用,因为这样添加无法完全发挥样式表的优势-内容结构和格式控制分别保存。

<tag style="properties">网页内容</tag>

<p style"color:blue;font-size:10pt">CSS实例</p>

2 将样式表添加在HTML的关信息标识符<head>内;

<head>

<style type="text/css">

<!--样式表的具体内容。-->

</style>

</head>

3 链接样式表

同样是添加在HTML的头信息符<head>内。

<head>

<link rel="stylesheet" href="*css" type="text/css" media="screen"

</head>

4 联合使用样式表

<head>

<style type="text/css">

<--

@import "*.css"

其它样式表的声明

-->

</style>

</head>

使用外部CSS:

这个方法可方便地管理整个网站的网页风格,它让网页的文字内容与版面设计分开.只要在一个CSS文档中定义好网页的外观风格,所有链接到此CSS文档的网页便会按照定义好的风格显示. 在CSS样式面板中右击---添加为