CSS学习笔记(一)-4.CSS样式引入三种方式

学习视屏：https://www.bilibili.com/video/BV14J4114768

一、内部样式

即在Html中任意位置使用<style></style>标签，内部编写样式。

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 21:15:57
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 21:15:58
 7  * @Description: 
 8  * @FilePath: \CSS2\07-CSS的三种样式引入.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 <head>
13     <meta charset="UTF-8">
14     <meta http-equiv="X-UA-Compatible" content="IE=edge">
15     <meta name="viewport" content="width=device-width, initial-scale=1.0">
16     <title>07-CSS的三种样式引入</title>
17     <style>
18         * {
19             color:red;
20         }
21     </style>
22 </head>
23 <body>
24     <h2>我是测试标题</h2>
25 </body>
26 </html>
View Code

好处：1.样式位置清晰。

           2.可以控制当前整个Html文件。

缺点：不能控制其他hmtl文件。没有做到css与html完全分离。

 

二、行内样式表

在标签内部写样式，使用style属性

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 21:15:57
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 21:20:53
 7  * @Description: 
 8  * @FilePath: \CSS2\07-CSS的三种样式引入.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>07-CSS的三种样式引入</title>
18 </head>
19 
20 <body>
21     <h2 style="color:pink;">我是测试标题</h2>
22 </body>
23 
24 </html>
View Code

编写规范：style属性，属性值必须双引号

好处：1.调试单个标签方便

缺点：1.没有做到样式与html分离

           2.如果需要控制大量元素，编写麻烦。

 

三、外部样式表

就是将原始写在单独的css文件中，然后Html中单独引用。

好处：1.css月html分离

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 21:15:57
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 21:25:56
 7  * @Description: 
 8  * @FilePath: \CSS2\07-CSS的三种样式引入.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>07-CSS的三种样式引入</title>
18     <link rel="stylesheet" href="./normal.css">
19 </head>
20 
21 <body>
22     <h2>我是测试标题</h2>
23 </body>
24 
25 </html>
View Code

 

posted @ 2021-07-09 21:27  kaer_invoker  阅读(78)  评论(0)  编辑  收藏  举报