CSS样式的引用方式_css引用-程序员宅基地

想只用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。

本文链接：https://blog.csdn.net/Battles2/article/details/126939621

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

解析蓝牙原理_蓝牙原理图详解-程序员宅基地

文章浏览阅读1.4w次，点赞19次，收藏76次。1.前言市面上关于Android的技术书籍很多，几乎每本书也都会涉及到蓝牙开发，但均是上层应用级别的，而且篇幅也普遍短小。对于手机行业的开发者，要进行蓝牙模块的维护，就必须从Android系统底层，至少框架层开始，了解蓝牙的结构和代码实现原理。这方面的文档、网上的各个论坛的相关资料却少之又少。分析原因，大概因为虽然蓝牙协议是完整的，但是并没有具体的实现。蓝牙芯片公司只负责提供最底层的API_蓝牙原理图详解

从未在一起更让人遗憾_“从未在一起和最终没有在一起哪个更遗憾”-程序员宅基地

文章浏览阅读7.7k次。图/源于网络文/曲尚菇凉1.今天早上出门去逛街，在那家冰雪融城店里等待冰淇淋的时候，听到旁边两个女生在讨论很久之前的一期《奇葩说》。那期节目主持人给的辩论题是“从未在一起和最终没有在一起哪个更遗憾”，旁边其中一个女生说，她记得当时印象最深的是有个女孩子说了这样一句话。她说:“如果我喜欢一个人呢，我就从第一眼到最后一眼，把这个人爱够，把我的感觉用光，我只希望那些年让我成长的人是他，之后的那些年他喝过..._从未在一起更遗憾

【CSDN精选】基于龙芯1B200的rt-thread基础_龙芯1b200参数-程序员宅基地

文章浏览阅读927次，点赞15次，收藏13次。龙芯是中国的一款自主设计的处理器架构，由中国科学院计算技术研究所（ICT）主导研发。龙芯处理器最早的版本为Loongson-1，其后发展出Loongson-2、Loongson-3等系列。这些处理器主要用于高性能计算、服务器、嵌入式系统等领域。Loongson架构具有独立知识产权，是中国自主研发的一种指令集架构。龙芯的设计旨在实现对计算机体系结构的自主掌握，减少对外部知识产权的依赖。RT-Thread（Real-Time Thread）是一个开源的实时嵌入式操作系统。_龙芯1b200参数

Python函数知识点（详解）-程序员宅基地

文章浏览阅读6w次，点赞584次，收藏2.9k次。本篇总结了Python函数相关的基础知识点，代码案例超详细，欢迎阅读，交流！_python函数知识点

虚拟机如何在net模式下进行联网_虚拟机net网络-程序员宅基地

文章浏览阅读1.7k次，点赞3次，收藏7次。虚拟机如何在net模式下进行联网（centos7）1.首先你需要先将虚拟机安装好，如果不会可以参考[centos7安装教程](https://blog.csdn.net/qq_44714603/article/details/88829423?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161949204316780274178621%2522%252C%2522scm%2522%253A%252220140713.130102334…_虚拟机net网络

python中的range()函数_python range函数-程序员宅基地

文章浏览阅读6.5w次，点赞59次，收藏241次。range()函数：用于生成一个整数序列；range()的三种创建方式：第一种：只有一个参数（小括号中只给了一个数）即range(stop)例如：range(10)指的是默认从0开始，步长为1，不包括10；注意：的运行结果为：；要想输出0-9的数字序列则应该是的结果为；第二种：range(start,stop) （给了两个参数，即小括号中给了两个数）r=range(1,10) print(list(r)) 运行结果为：；第三种：range(start,stop,step)：._python range函数