CSS引用方式_strong标签内写入style-优快云博客

本文介绍了CSS的四种引用方式：行内样式、内嵌样式、外链样式和导入式，并详细解释了它们的区别及应用场景。此外，还探讨了不同引用方式的优先级以及使用<link>标签引用CSS样式的诸多好处。

CSS引用方式

CSS拥有四种样式引用方式，分别是行内样式，内嵌样式、外链样式、导入式。

行内样式

在标签内设置标签的样式

<span <strong>style="font-size:24px;"</strong>>CSS引用方式</span>

style="font-size:24px;"这就是设置的行内样式，通过在标签内写CSS，来控制标签的样式。

内嵌样式

把<style>标签对放在<head>标签对中，

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css>
        p{font-size:24px;}
    </style>
</head>
<body>
    <p>CSS引用方式</p>
</body>

加粗的地方，就是内嵌样式，如果使用严格模式/标准模式来开发的话，在<style>标签里面必须加入type="text/css"

index.css

<style type="text/css>
<pre name="code" class="html">    p{font-size:24px;}

</style>

外链样式

通过<link>标签使用 “href ” 获取CSS文件路径，引入外部CSS样式，在<lnk>标签中必须加入 rel="stylesheet".

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <p>CSS引用方式</p>
</body>

index.css

@charset "utf-8";
p{font-size:24px;}

在外部CSS文件中需要加入

@charset "utf-8";

如果不加入CSS文件的备注可能会是乱码。

导入式

在style标签对中通过 “@import” 方法导入外部CSS文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css>
        @import"css/index.css";  //注意外部CSS样式表的路径
    </style>
</head>
<body>
    <p>CSS引用方式</p>
</body>

index.css

@charset "utf-8";
p{font-size:24px;}

CSS样式引用的优先级

行内样式 > 内嵌样式 > 外链样式 > 导入式

但是如果在CSS样式属性后加入 ！important

这个属性不论在那种样式表中都是最高级的优先级。

index.css

@charset "utf-8";
p{font-size:24px; <strong>!important</strong>}   //最高级的优先级

link标签引用css样式的好处

1.简化了DOM结构，实现了内容和表现的分离，使HTML和CSS文件结构更加清晰，利用维护

2.大大减少了css代码的编写量，项目越大，这里一点体现的越明显

3.link可以和其他link、JS文件以及body内的内容进行多线程加载，使加载速度更快

4.利于项目整体风格的调整，维护起来也更加便捷，单文件修改、全网站（应用）生效，、

5.浏览器会对css文件进行缓存，进一步减少了加载时间

6.可以根据需要利用JavaScript或Media动态的组合所需的CSS文件

7.对搜索引擎友好，有利于SEO

新手上路，请大家指正错误，谢谢。