CSS的基本代码形式:
<style type="text/css">
<!--
适用标签{属性:值}
-->
</style>
1):CSS代码应放在HTML文本的<HEAD>...</HEAD>部分内。
2):CSS采用<STYLE>...</STYLE>形式。譬如要将HTML文本中<H2>标签内的文字全部以“斜体+红色”显示,那么必须按如下编辑。H2{font-style:italic;color:red}
HTML文本中嵌入样式表的四种方式:
1):内嵌至HEAD部分。
2):使用外部样式表—链接模式。
3):直接插入至标签部分。
4):使用外部样式表—Import模式。
1):内嵌至HEAD部分
该方法是将样式表直接内嵌至<HEAD>...</HEAD>部分,一般称其为“内嵌(Embedding)样式表”方式。
<style type=”text/css”>
<!--
适用标签{属性:值;属性:值}
适用标签{属性:值;属性:值}
-->
</style>
【css_01.htm的内容如下:】
<html>
<head>
<title>在HEAD部分嵌入CSS</title>
<style type="text/css">
<!--
H1{font-family:楷体;color:pink}
H2{font-style:italic;color:red}
H3{font-style:italic;color:green}
-->
</style>
</head>
<body>
<H1>此处是H1风格适用的部分</H1>
<H2>此处是H2风格适用的部分</H2>
<H3>此处是H3风格适用的部分</h3>
</body>
</html>
执行此代码的结果如下所示:
2):使用外部样式表—链接模式
该方法是先将样式表保存在别的文件中,然后再对其进行定义及使用。一般该方法称为“链接<Linking>样式表”方式。
<link rel =”stylesheet” type=”text/css” href=”样式表文件名”>
使用链接方式能将保存在其他文件中的样式表插入至自身的文本中。使用该方法可以在众多HTML文本中共享同一样式表,而且只需要修改样式表文本(.css)就可以达到修改HTML文本的目的。
【02.css的内容如下:】
H2{font-family:楷体;font-style:italic;color:purple}
p{font-size:20pt;line-height:2em;color:green}
【css_02.htm的内容如下:】
<html>
<head>
<title>使用外部样式表</title>
<link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
<H2>H2标签内字体为斜体加楷体,颜色为紫色!</H2>
<p>p标签内的文字大小为20pt,行距为2em,颜色为绿色!</p>
</body>
</html>
执行此段代码的结果如下:
3):直接插入至标签部分
在标签中使用STYLE属性直接编辑样式表,该方式一般被称做“Inline样式表”方式。
<标签 STYLE=”属性:值”>
利用STYLE属性使样式表直接适用于HTML标签,主要用在风格内容只适用于局部页面的情况。然而要特别注意的是,不可过度地使用这种方式,因为直接插入的样式表会使文本文件变大。
【css_03.htm的内容如下:】
<html>
<head>
<title>Inline方式</title>
</head>
<body>
<font style="font-size:15pt;color:blue;font-family:楷体;">Inline方式</font>
<p style="background:green;font-size:20pt;font-family:楷体;">直接在标签内起作用的方式</p>
</body>
</html>
执行此代码的结果如下:
4):使用外部样式表—Import模式
此种样式表与<STYLE>...</STYLE>标签一起使用,在使用外部文件这一点上与链接式样式表颇为相似。一般将该方法称为“Import样式表”。
<STYLE TYLE=”text/css”>
<!--
@import url(“css文件路径/文件名”)
-->
</STYLE>
要先编辑样式表文件再对其进行使用。它要与<STYLE>...</STYLE>标签一起使用,比其他样式表的某些设定拥有更高的优先权。
【04.css的内容如下:】
H2,H3{font-family:楷体;font-style:italic;color:purple}
【css_04.htm的内容如下:】
<html>
<head>
<title>Import模式</title>
<style type="text/css">
<!--
@import url("04.css");
-->
</style>
</head>
<body>
<H2>H2标签内字体为斜体加楷体,颜色为紫色!</H2>
<H3>H3标签内字体为斜体加楷体,颜色为紫色!</H3>
</body>
</html>
执行此代码的结果如下: