CSS样式的引用方式

最新推荐文章于 2024-09-25 00:51:11 发布

原创最新推荐文章于 2024-09-25 00:51:11 发布 · 6k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

想只用CSS修饰网页，就需要在HTML文档中引入CSS。CSS提供了4种引用方式，分别是行内式、内嵌式、外链式和导入式。.

1.行内式：

行内式也被称为内联式，可以通过style属性设置标签的样式。行内式基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</ 标签名>

在上述语法中，style是标签的属性，实际上任何HTML标签都拥有style属性，用于设置行内式。属性和属性值的书写规范与CSS样式规则一样。行内式CSS只对其所在的标签及嵌套在其中的子标签起作用。

通常CSS位于<head>头部标签中，但是行内式CSS位于<html>根标签中。例如，下面的示例代码即为行内式CSS样式的写法。

<h1 style="font-size: 20px; color: blue; ">使用行内式CSS修饰一级标题的字体大小和颜色</h1>

在上述代码中，使用<h1>标签的style属性设置行内式CSS样式，用于修饰一级标题的字体和颜色。行内式CSS展示效果如上图。

要注意一点，行内式是通过标签的属性来控制样式的，这样并没有做到结构与样式分离，所以不推荐使用。

2.内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并用<style>标签定义，其基本语法格式如下：

<head>
    <style type="text/css">
        选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
    </style>
</head>

在上述语法中，<style>标签一般位于<head>标签中的<title>标签之后，因为浏览器是从上到下解析代码的，为了便于CSS代码提前备加载和解析应把它放在头部，以避免网页内容加载后没有样式修饰的问题。在<style>标签中，只有设置type的属性值为“text/css”，浏览器才知道<style>标签包含的是CSS代码。

例如：

<head>
    <meta charset="UTF-8">
    <title>刘某人CSS内嵌式的练习网站</title>
    <style type="text/css">
        
        /*定义标题标签居中对其*/
        h2{ text-align: center;}
        /*定义div标签样式*/
        div{ border: 1px solid #CCC; width: 300px; height: 80px; color: purple;
            text-align: center;}
    </style>
</head>
<body>
    <h2>内嵌式CSS样式</h2>
    <div>
        使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中，
        title标签之后。
    </div>
</body>

结果如下：

在文件中，HTML文档头部使用<style>标签定义内嵌式CSS样式，第7行代码使用了标题标签<h2>设置标题，9、10行代码定义了<div>标签的样式。

内嵌式CSS只对其所在的HTML页面有效，所以仅设计一个网站时，内嵌式CSS是个好东西。但是！在设计网站的时候，不建议用。因为内嵌式不能充分发挥CSS代码的重用优势。

3.外链式：

外链式也叫链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件连接到HTML文件中。外链式CSS的基本语法格式如下：

<head>
    <link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

在上述语法中，<link>标签需要放在<head>头部标签中，并且必须指定<link>标签的3个属性。

（1）href：定义所连接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。

（2）type：定义所链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS

（3）rel：定义当前文档与被链接文档之间的关系，这里选哟指定为“stylesheet”，表示被链接的文档是一个样式表文件。

①创建样式表

创建一个名为style的CSS文件，用记事本打开，并编写如下代码

/*定义标题标签居中对齐*/
h1{ text-align: center;}
/*定义div标签样式*/
div{ border: 1px solid #CCC; width: 300px; height: 80px; color: purple;
    text-align: center;}

②创建HTML文档

如图：

<head>
    <meta charset="UTF-8">
    <title>刘某人外链式（链入式）的练习网站</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <h1>外链式CSS样式</h1>
    <div>
        外链式也叫链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式
        表文件中
    </div>
</body>

在上述代码中，第3行代码使用了<link>标签链入了style.css文件，代替了内嵌式的<style>标签。结果如下

如图，使用外链式跟内嵌式引用CSS文件的显示效果是一样的。实际开发中，外链式是使用频率最高、最实用的引入方式，它将HTML代码CSS代码分离为两个或多个文件，实现了结构与表现的完全分离，同一个CSS文件可以被不同的HTML页面链接使用，同一个HTML页面也可以通过多个<link>标签链接多个CSS样式表，极大提高了网页开发的工作效率。

4.导入式

导入式与外链式相同，都是通过引入外部样式表文件来实现的。导入式CSS对HTML头部文档应用<style>标签，并且在<style>标签内的开头处使用的@import语句。导入式CSS的基本语法格式如下：

 <style type="text/css">
        @import url（CSS文件路径）; 或者 @import "CSS文件路径";
    /*  这里还可以存放其他CSS样式  */
    </style>

在上述语法格式中，<style>标签内还可以存放其他的内嵌样式；@import语句需要位于其他内嵌样式的上面。

如果想在刚才的外链式HTML文件例子中使用导入式CSS，只需要把HTML文档的<link>标签代码替换成下面代码即可

<style type="text/css">
@import url(style.css);
</style>

或者

<style type="text/css">
@import "style.css";
</style>

虽然导入式CSS与外链式CSS功能基本相同，但是大多数网站采用外链式CSS引入外部样式表，主要原因是两者加载的时间和顺序不同。当一个页面被加载时，<link>标签引用的CSS样式表将同时被加载，而@import引用的CSS样式表会等页面全部下载完才被加载。因此，当用户的网速较慢时，会先显示有没有CSS修饰的网页，这样会造成不好的用户体验，所以大多数网站采用外链式CSS。