导入CSS文件的方法总结

最新推荐文章于 2024-06-05 16:49:46 发布

亦是浓香

最新推荐文章于 2024-06-05 16:49:46 发布

阅读量951

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/mirro81/article/details/75447570

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

导入CSS文件的方法总结

HTML主要负责网页的内容展现，而CSS文件负责网页内容的样式，在HTML中使用CSS的方法有三种，希望对大家有帮助。

1.内联样式

具体一点就是在HTML标签中使用CSS，代码书写规范如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>内联样式</title>
</head>
<body>
<p style="color: red; font-size: 20px; border: 2px solid green;">内联样式引入规范</p>
</body>
</html>

在HTML的标签中用style=”“引入，在引号中书写具体的样式内容，并且在引入CSS样式后，标签的自有属性也是可以书写的（虽然现在已经不推荐了，但是二者的确能并存），在我自己的试验中发现，当内联样式和标签属性冲突时，内联样式具有高的优先级，也就是最终会以CSS样式为准，我个人是在chrome浏览器中实验的，代码为：

<p style="color: red; font-size: 20px; border: 2px solid green; text-align: left;" align="center" >内联样式引入规范</p>

最终显示效果为：文字居左显示（大家可以试试，如有异样，欢迎留言）

2.内部样式

这个和内联样式的区别是，这里将CSS内容通过style标签写在head标签中，具体代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>内部样式</title>
    <style type="text/css">
        p{
            color: red; 
            font-size: 20px; 
            border: 2px solid green; 
            text-align: left;
        }
    </style>
</head>
<body>
<p>内部样式引入规范</p>
</body>
</html>

style标签中的type属性指定引用文件的类型，这里是text/css，在style标签中书写具体的样式内容。这里也同样存在上面的问题，当CSS内容和标签属性冲突时，内部样式具有高的优先级，也就是最终会以CSS样式为准，这里代码类似，不再展示。

3.外部样式

最后一种引入样式的方法为外部样式引入，通过link标签引入外部样式表，具体代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>外部样式</title>
    <link rel="stylesheet" type="text/css" href="indexJD.css">
</head>
<body>
<p>外部样式引入规范</p>
</body>
</html>

link标签中的rel属性是要引入的文件和HTML的关系（relation），这里是“stylesheet”，type是引入的文件类型，这里为“text/css”，href是hyperreference（超级引用），指的是引用文件地址，可以是相对路径，也可以是绝对路径。这里如果使用标签属性，依然是CSS具有高的优先级。

@import引入CSS

按照CSS文件规定，在CSS中是不能存在任何文档内容的，如果你在一个样式表中还要用到其他的样式表的内容，那么可以使用@import关键字引用，关于@import有以下几点要注意：

@import只能位于style标签中CSS语句之前，当然可以有多个@import语句，它们都会被加载且执行，具体书写规则如下：
1. 外部样式表中引入：

    @import url(mycss1.css);
    @import url(mycss2.css);
p{
    color: red; 
    font-size: 20px; 
    border: 2px solid green; 
    text-align: left;
}

内部样式表引入：

<style type="text/css">
            @import:url(mycss1.css);
            @import:url(mycss2.css);
        p{
            color: red; 
            font-size: 20px; 
            border: 2px solid green; 
            text-align: left;
        }
    </style>