《网页设计基础——CSS的四种引入方式详解》

2022-10-22,,,,

网页设计基础——CSS的四种引入方式详解


一、行内式;


规则:

1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中。

格式:

<html>
<head>
<title>页面标题</title>
</head>
<body>
<p style="color:#FF0000; font-size:66px">使用行内样式引入CSS</p>
</body>
</html>

二、内嵌式;


规则:

1. 内嵌式就是将CSS代码写在 <head></head> 之间,并用 <style></style> 标记进行声明。

格式:

<html>
<head>
<title>页面标题</title>
<style>
p{
color:#FF0000;
font-size:66px;
}
</style>
</head>
<body>
<p>使用内嵌式引入CSS</p>
</body>
</html>

三、链接式;


规则:

1, 链接式CSS样式表是使用频率最高,也是最实用的方法,其最大的优势在于CSS代码与HTML代码完全分离,并且同一个CSS文件可以被不同的HTML所链接使用。

2. 链接式通过在 <head></head> 标记之间加上【<link href="链接式.css” type="text/css" rel="stylesheet">】语句,将CSS文件链接到网页中,其中“链接式.css”应为CSS文件名称。

HTML文件格式:

<html>
<head>
<title>页面标题</title>
<link href="链接式.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>使用链接样式导入CSS</p>
</body>
</html>

CSS文件格式:

p
{
color:#FF0000;
font-size:66px;
}

四、导入式;


规则:

1. 导入式和链接式的功能基本相同,只是语法和运行方式上略有区别。采用import方式导入的样式表,在HTML文件初始化时,会被导入到HTML文件内,作为文件的一部分,类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才已链接的方式引入。

2. 导入式CSS样式表的最大用处在于可以让一个HTML文件导入很多的样式表。

3. 常用的@import语句:@import url(导入式.css); @import url("导入式.css"); @import url('导入式.css');

@import 导入式.css @import "导入式.css"; @import '导入式.css';

4. 不单是HTML文件的 <style></style> 标记中可以导入多个样式表,在CSS文件内也可以通过@import语句导入其它的样式表。

HTML文件格式:

<html>
<head>
<title>页面标题</title>
<style>
@import "导入式.css";/* 此处为CSS文件名,可修改 */
</style>
</head>
<body>
<p>使用导入式引入CSS</p>
</body>
</html>

CSS文件格式:

p
{
color:FF0000;
font-size:66px;
}

五、结语;


四种CSS引入方式的优先级分别是——行内式>链接式>内嵌式>导入式。

《网页设计基础——CSS的四种引入方式详解》的相关教程结束。

《《网页设计基础——CSS的四种引入方式详解》.doc》

下载本文的Word格式文档,以方便收藏与打印。