企业官网建设流程全解析

本次我们将以CSS给HTML设置样式的三种主流方法导入，方便我们开始学习css的基础。

1. 行内式：给单个元素进行装饰
原理：直接在HTML标签的 style 属性里写CSS代码，只对当前这一个标签生效；
优点：写起来简单，修改方便，适合给单个元素临时调整样式；
缺点：如果页面里有很多元素都要设置样式，会导致代码非常臃肿，不方便统一管理，也不利于复用。

<!-- 第一种：行内式 --> <p style="color: red; font-size: 10rpx;">第一种：通过style属性直接在元素里配置样式</p>

2. 内嵌式：给当前页面统一化
- 原理：在HTML文件里用 <style> 标签包裹CSS代码，通过选择器（这里用了最简单的标签选择器 h3 ）给页面里的所有 h3 标签设置样式；
优点：样式和内容分离，比行内式更整洁，也方便给多个同类型元素设置相同样式；
缺点：样式只能作用于当前这一个HTML文件，如果有多个页面需要相同样式，就得重复写多份代码，不利于复用。

<style> /* 第二种：通过style标签和选择器里配置样式 标签选择器：直接用标签名选中某个元素 */ h3 { color: aqua; font-size: 15rpx; } </style>

3. 外链式：给多个页面共享相关文件包
原理：把CSS代码单独写在 .css 后缀的文件里（这里是 ./css/style.css ，表示和当前HTML文件同级的 css 文件夹里的 style.css 文件），再通过 <link> 标签把它引入HTML中；
优点：样式和HTML完全分离，一份CSS文件可以被多个HTML文件引入，样式统一管理，修改时只需要改一份文件，非常适合大型项目；
缺点：需要单独维护CSS文件，对于非常简单的单页面来说，会增加文件数量。

<!-- 第三种：外链式 (允许相对路径，绝对路径和URL)--> <link rel="stylesheet" href="./css/style.css"> </head>