重学CSS-前言

CSS前言

引入CSS的三种方式

内联样式（inline style）

内联样式表存在于HTML元素的style属性之中 , CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

在原生的HTML编写过程中确实这种写法是不推荐的

在Vue的template中某些动态的样式是会使用内联样式的

<p style="color: rebeccapurple"> 我是div元素  </p>

将CSS放在HTML文件<head>元素里的<style>元素之中

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

外部样式表（external style sheet）

外部样式表（external style sheet）是将css编写一个独立的文件中，并且通过元素引入进来；

使用外部样式表主要分成两个步骤 :

第一步：将css样式在一个独立的css文件中编写（后缀名为.css）
第二步：通过<link>元素引入进来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title {
            color: aquamarine;
            font-size: 20px;
        }

    </style>

    <!-- 外部样式表 -->
    <link rel="stylesheet" href="../src/css-codes/css/css引入.css">
</head>
<body>

<p style="color: rebeccapurple"> 我是div元素 </p>

<div class="div">我也是div元素</div>

</body>
</html>