香飘飘的CSS之CSS的引用

快来打我* 2021-09-20 07:04 181阅读 0赞

## **一，什么是CSS？** ##

**CSS这个名字，相信大家已经是听过很多很多遍了，那么你知道CSS是什么吗？**

**CSS的全称是层叠样式表(英文全称：Cascading Style Sheets)，是用来表示HTML等文件的样式的计算机语言，它强大到可以对元素进行像素级的操作，支持很多字体的字号样式，有木有觉得它很厉害？是不是心动的感觉？（笑）**

**在这里就不赘述CSS的发展历程，工作原理等内容了，有兴趣的可以看一下维基百科（当然百度也行啦，不过最好维基），我们下面来看一下具体的应用CSS的方法。**

--------------------

## **二，如何引用CSS** ##

**一般来说，想要应用css有四种办法：**

style 属性、style 标签、css link、css import

**让我们来一个一个的说明。**

**1.style属性**

**首先我们先来写个简单的HTML文档，只要有一行字就可以了，写什么都行，不过我推荐你按照我下面示范的写。**

<!DOCTYPE html>
    <html lang="zh-Hans">
    <head>
        <meta charset="UTF-8">
        <title>css示例</title>
    </head>
    <body>
    <div class="css-demo">
        <h1>东明轩真是帅炸了</h1>
    
    </div>
    
    </body>
    </html>

**这时候我们是没有给它加上css样式的，但是我们可以看到它仍然有样式，这是为什么呢？**

**很简单，因为很多的标签它都会有自带的样式，而不自带样式的只有<div>，<span>等少数标签**

![v2-f5277d2bcc8e47ffb56583b3e1a3186a_hd.jpg][]

**那么现在让我们用style属性的方式来给这句话加上我们自己想要的样式**

<h1 style="color: red; border: 1px solid blue;">东明轩真是帅炸了</h1>

1.  将文字改为红色
2.  设置一个边框 1px 蓝色

![v2-56ea120ad24332deec6455578fdbf3eb_hd.jpg][]

显示效果

**可以看到，这句至理名言已经变为了我们想要的样子，这就是在标签内用style属性来添加样式的方法**

**用这种方法虽然可以实现我们的要求，可是实在是太麻烦了，你脑补一下当你要完成一个完整的项目时很多标签内挤满了css的样子，是不是留下了悲痛的泪水？没关系我们还有一种更简单的方法。**

--------------------

**2.style标签**

<!DOCTYPE html>
    <html lang="zh-Hans">
    <head>
        <meta charset="UTF-8">
        <title>css示例</title>
        <style>
            h1{
                color: red; border: 1px solid blue;
    
            }
        
        </style>
    </head>
    <body>
    <div class="css-demo">
        <h1>东明轩真是帅炸了</h1>
    
    </div>
    
    </body>
    </html>

**将style标签写在<head>中，并将之前我们在h1上面使用的css代码写在<style>标签中**

![v2-56ea120ad24332deec6455578fdbf3eb_hd.jpg][]

**依旧可以实现我们想要的效果，这样做是不是HTML代码就看起来清爽了？但是，还是有缺点，如果你的css代码非常非常的多，当我们查看源代码的时候，如果你想看HTML代码，你就要一直往下找，是不是很捉急？不急我们还有一种方法。**

--------------------

**3.CSS link 外联式的CSS样式表**

**首先，让我们新建一个CSS文件，叫什么都行，然后我们将css代码写入这个文件中，然后回到我们之前的HTML文档，在<head>标签中加入**<link rel="stylesheet" href="style.css">

**记住href中的路径一定要对，不然是无法生效的**

<!DOCTYPE html>
    <html lang="zh-Hans">
    <head>
        <meta charset="UTF-8">
        <title>css示例</title>
        <link rel="stylesheet" href="style.css">
    
    </head>
    <body>
    <div class="css-demo">
        <h1>东明轩真是帅炸了</h1>
    
    </div>
    
    </body>
    </html>

**运行后：**

![v2-4236ec60ea696219262de8a764eb28cd_hd.jpg][]

**如图，我们制定的CSS样式依旧生效了，这样我们就解决了上面我们所有的麻烦，css代码和html各是一个文件，看着干净简洁，也方便我们阅读和改动**

--------------------

**4.css import**

**其实在CSS文件中我们还可以继续引用别的css文件，首先我来给HTML文档加一个<p>标签里面你随便写点什么**

**然后我们继续新建一个CSS文件**

p{
        font-size: 200px;
        color: green;
        border: 2px solid black;
    }

**定义**

1.  字号为200px
2.  颜色是绿色
3.  加一个黑色的2px的边框

**再在我们之前的那个CSS文件的顶部加入**

@import "style2.css";

![v2-bb27e1a9e6c4d927ab37983e9306de89_hd.jpg][]

**可以看见我们并没有在HTM文档中引用新的CSS文件，但是我们想要实现的样式还是生效了，这就是在CSS文件中引用了别的CSS文件，图中控制<h1>标签的是style.css文件，而控制<p>标签的是style2.css文件。**

--------------------

**以上就是CSS引用的全部内容。**

[v2-f5277d2bcc8e47ffb56583b3e1a3186a_hd.jpg]: /images/20210812/4fd26ffb32564627bf34def39c229aaa.png
[v2-56ea120ad24332deec6455578fdbf3eb_hd.jpg]: /images/20210812/ad888e30d03e473880f1c2b9027004ed.png
[v2-4236ec60ea696219262de8a764eb28cd_hd.jpg]: /images/20210812/1cb2b1852e2c48688645a1c06652c8fc.png
[v2-bb27e1a9e6c4d927ab37983e9306de89_hd.jpg]: /images/20210812/10fdaf9bebfd477f88ca35d15caffa39.png