CSS不同类型与使用不同类型的优缺点

发表于 | 更新于: | 分类于
字数统计: 416 | 阅读时长 ≈ 1

内联样式、内部样式、外部样式

内联样式

使用 style 关键字将 css 代码嵌入到 html 代码中，与 html 代码混写。具体如下：

1
<p style="color:red; text-align:center">内容</p>

内部样式

在 html 文件中 head 中使用一对标签 style,将 css 代码声明其中。

1
<p>内容</p>
1
2
3
4
5
6
7
8
<head>
<style>
    p {
      color:red;
      text-align:center
    }
</style>
</head>

外部样式

将 css 样式单独写成一个文件，在 html 文件中通过 link 引入。

举例 css 文件名: example.css

1
2
3
<head>
  <link href="example.css" rel="stylesheet" />
</head>

使用不同类型 css 的优缺点

内联样式

优点

  1. 方便，快捷
  2. 与某个元素的有关样式一目了然
  3. 加载和渲染 html 时同时加载和渲染 css 文件，减少 http 请求，减少文件下载数量

缺点

  1. 优先级最高，容易造成混乱，不利于后期维护
  2. html 与 css 混合写，代码显得冗余、复杂。不符合 html 与 css 分离的要求。
  3. 代码可复用性查

内部样式

优点

  1. 减少页面请求
  2. 实现基本的 html 与 css 分离
  3. 加载和渲染 html 时同时加载和渲染 css 文件，减少 http 请求，减少文件下载数量

缺点

  1. 不能跨 html 文件进行代码复用

外部样式

优点

  1. css 单独写成一个文件，便于管理 css 代码
  2. 复用代码方便，可以跨多个 html 文件管理 css 代码

缺点

  1. 需要单独加载文件，增加 HTTP 请求数，占用资源，延缓了网页加载速度
0%