轻松学习三种层叠样式表！

怼烎@ 2022-11-11 13:19 164阅读 0赞

# 层叠样式表 #

## 三种引入方式归纳： ##

引入方式：

**第一种：**  行内式 CSS引入
            使用：  在标签内 加上style属性在引号内
                    样式名：样式值;(每个样式之间用分号相隔)
        
     **第二种：**  内部式CSS引入
            使用：  在head标签里面  加上一个style标签
                    标签名{样式;}
       
     **第三种：**  外部式CSS引入
       		使用：创建一个CSS文件 在html页面中的head标签里面使用 link标签进行引入。

**行内式 CSS引入：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        
        
    </head>
    <body>
        
        <div style="color: green;">
            看这个人头上是绿的
                 头顶大草原
            <h3>绿油油</h3>
        </div>
    
        <div>
            左青龙右白虎
        </div>
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]  
**内部式CSS引入：**

代码和上述一样的，这里就不重复了，将行内式标签注释掉，打开内部式样式运行得下面的**图示**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]  
**外部式CSS引入：**

将行内和内部式样式注释掉，新建一个css文件，在css文件里面写标签的样式，然后再html里面用link引入就可以达到效果：  
**如下代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        
        
    
        <div>
            左青龙右白虎
        </div>
    </body>
    </html>

图示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 3]

## 三种样式的优先级： ##

将上述代码的外部样式link的注释去掉，内部样式的注释去掉，还有行内样式的注释去掉，同时打开那么当运行代码时页面会显示什么颜色呢，那下面我们一起探讨一下，到底是红色还是黄色还是绿色呢？  
代码我们就不重复写了，还是沿用上述代码，依次打开三种css样式，外部样式，内部样式和行内样式：

**看图示比较如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 6]  
![在这里插入图片描述][2021032110562549.png_pic_center]

## 总结： ##

三种样式表到现在为止我们有了初步的认识啦，大家最喜欢哪一种样式表呢，就我个人而言觉着内部样式比较好用，为什么这么说呢，也不是说**行内样式**不行，我个人感觉css样式写到body里面代码太冗余啦，并不是太美观

其次讲到**内部样式**和**外部样式**其实两者用起来没什么区别，这就要归结于我个人的原因啦，我笔记本屏幕太小了，写外部要分开写不是很舒服哈哈哈哈！如果有一个大屏幕我肯定用外部啦，**这个每个页面都分离，代码看起来很美观！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/89b18cddf13b4de8bf72cc95451bc04d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/beca5bda54fa41299afcdfb0c8427f76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20210320172932115.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20210320172944253.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20210321105529206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20210321105545578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/2021032110560810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx,size_16,color_FFFFFF,t_70#pic_center
[2021032110562549.png_pic_center]: https://img-blog.csdnimg.cn/2021032110562549.png#pic_center