非零基础自学前端最后一遍一 HTML+CSS 4 邂逅CSS 4.2 三种CSS的编写样式的规则

短命女 2024-03-25 09:25 60阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  4 邂逅CSS
         *   *  4.2 三种CSS的编写样式的规则
             *   *  4.2.1 CSS如何编写
                 *  4.2.2 如何将CSS样式应用到元素上
                 *  4.2.3 内联样式（inline style）
                 *  4.2.4 内部样式表（internal style sheet）
                 *  4.2.5 外部样式表（external style sheet）
                 *  4.2.6 @import

![在这里插入图片描述][41f1eaffa50c47dbad4db413dcc5b37d.png_pic_center]

#### 一 HTML+CSS ####

#### 4 邂逅CSS ####

##### 4.2 三种CSS的编写样式的规则 #####

###### 4.2.1 CSS如何编写 ######

*  CSS这么重要，那么它的语法规则是怎么样的呢？
    
    ![在这里插入图片描述][ce08832207e0474c98936a2e38e38d84.png_pic_center]
 *  声明（Declaration）一个单独的CSS规则，如 color: red; 用来指定添加的CSS样式。
    
     *  属性名（Property name）：要添加的css规则的名称；
     *  属性值（Property value）：要添加的css规则的值；
 *  但是有个问题：我们会编写了，要编写到什么位置呢？

###### 4.2.2 如何将CSS样式应用到元素上 ######

*  CSS提供了3种方法，可以将CSS样式应用到元素上：
    
     *  内联样式（inline style）
     *  内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
     *  外部样式表（external style sheet）
 *  疑问：三种方式，学好哪一个呢？  每一个都很重要，目前开发中不同的场景都会用到

###### 4.2.3 内联样式（inline style） ######

*  内联样式（inline style），也有人翻译成行内样式。
    
     *  内联样式表存在于HTML元素的style属性之中。
 *  CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;
 *  很多资料不推荐这种写法：
    
    1.  在原生的HTML编写过程中确实这种写法是不推荐的
    2.  在Vue的template中某些动态的样式是会使用内联样式的；
 *  所以，内联样式的写法依然需要掌握

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <div style="color: red;font-size: 20px;">我是div元素</div>
      <p style="color: white; background: blue;">我是p元素</p>
    
    </body>
    
    </html>

![在这里插入图片描述][8839ec85b6c94c8e87509c86a611988a.png_pic_center]

![在这里插入图片描述][f29611e751104d628768e2e44e60d290.png_pic_center]

###### 4.2.4 内部样式表（internal style sheet） ######

内部样式表（internal style sheet）

*  将CSS放在HTML文件元素里的

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    
      <style>
        .div-one {
          
          color: red; 
          font-size: 30px; 
          background-color: orange;
        }
      </style>
    
    </head>
    <body>
      
      <div class="div-one">我是div元素</div>
      <div>我也是div元素</div>
    
      <p>我是段落</p>
      <h1>我标题</h1>
    
    </body>
    </html>

![在这里插入图片描述][44b1a33511584231b8b0942d139afce2.png_pic_center]

![在这里插入图片描述][8321c33fe2124b08842ff8f2c33598b1.png_pic_center]

在Vue的开发过程中，每个组件也会有一个style元素，和内部样式表非常的相似（原理并不相同）；

###### 4.2.5 外部样式表（external style sheet） ######

*  外部样式表（external style sheet） 是将css编写一个独立的文件中，并且通过元素引入进来；
 *  使用外部样式表主要分成两个步骤：
    
     *  第一步：将css样式在一个独立的css文件中编写（后缀名为.css）；
     *  第二步：通过元素引入进来；
 *  link元素的作用，后续单独讲解。

![在这里插入图片描述][d02448bbe57a4224bffc9c462d2f08c9.png_pic_center]

![在这里插入图片描述][12620d409fe848ef96a48b2d6dfaf7e0.png_pic_center]

![在这里插入图片描述][ebbbfc70cba34025b872ffbf58814fc3.png_pic_center]

###### 4.2.6 @import ######

可以在style元素或者CSS文件中使用@import导入其他的CSS文件

![在这里插入图片描述][99296767d2084776937a1cffc9d107ec.png_pic_center]

[41f1eaffa50c47dbad4db413dcc5b37d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c5ac3d230dda407dad919a4a696832b0.png
[ce08832207e0474c98936a2e38e38d84.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/fd99153bbcfa4f7b941a948cf91d8e53.png
[8839ec85b6c94c8e87509c86a611988a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/aec3d63834d74a38a81f6b235eb132f3.png
[f29611e751104d628768e2e44e60d290.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2c255045ecf849c1938244862e02b66e.png
[44b1a33511584231b8b0942d139afce2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/29a67fcddbcc4cf8a40a514f9b0a0088.png
[8321c33fe2124b08842ff8f2c33598b1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/56ce581c0af8422494f96d990ca493d4.png
[d02448bbe57a4224bffc9c462d2f08c9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9cc86501e8e74ba4ad9cc59bc4d4ec55.png
[12620d409fe848ef96a48b2d6dfaf7e0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/186eec2c79064e84b94832f27745bee4.png
[ebbbfc70cba34025b872ffbf58814fc3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2c0511b09de141cf8d595b8c2158859d.png
[99296767d2084776937a1cffc9d107ec.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/56ebe6c75db744eab1ab4bc00425d090.png