什么是CSS？以及CSS的几种引入方式

最新推荐文章于 2024-09-27 15:15:00 发布

苏苏渗透大师

最新推荐文章于 2024-09-27 15:15:00 发布

阅读量1.8k

点赞数 47

分类专栏： web渗透文章标签：网络安全 web安全安全 css 前端

本文链接：https://blog.csdn.net/m0_74249600/article/details/141440515

版权

web渗透专栏收录该内容

23 篇文章 1 订阅

订阅专栏

1. CSS 简介

1.1. CSS 简介

1.1.1. CSS 是什么？

CSS，指的是Cascading Style Sheet（层叠样式表），是用来控制网页外观的一门技术。
前端最核心的3个技术是：HTML、CSS、JavaScript，

三者关系：

HTML 用于控制网页的结构；

CSS 用于控制网页的外观；

JavaScript控制的是网页的行为。

在互联网发展早期，网页都是用 HTML 来做的，这样的页面可想而知单调成什么样了。

为了改造 HTML 标签的默认外观，使得页面变得更加美观，后来就引入了 CSS。

1.1.2. CSS 和 CSS3

CSS 发展至今，历经 CSS1.0、CSS2.0、CSS2.1 以及 CSS3.0 几个版本。其中，CSS2.1 是 CSS2.0 的修订版，CSS3.0 是 CSS 的最新版本。

很多人都有一个疑问："现在都 CSS3 的时代了，CSS2 不是被淘汰了吗，为什么还要学 CSS2呢？"

这个误区非常严重，曾经误导绝大多数的初学者。其实，我们现在所说的 CSS3，一般指的是相对于 CSS2 "新增加的内容"，并不是说 CSS2 被淘汰了。

准确来说，你要学的 CSS 其实等于 CSS2 加上 CSS3。

1.2. CSS 引入方式

三种方式：

- 外部样式表

- 内部样式表

- 行内样式表

1.2.1. 外部样式表

外部样式表是最理想的 CSS 引入方式。

在实际开发中，为了提升网站的性能速度和可维护性，一般都是使用外部样式表。所谓的外部样式表，指的是把 CSS 代码和 HTML 代码都单独放在不同文件中，然后在 HTML 文档中使用 link 标签来引用 CSS 样式表。

当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用外部样式表，你就可以通过更改一个 CSS 文件来改变整个网站的外观。

创建一个 CSS 文件很简单，就像创建 HTML 文件一样。

外部样式表在单独文件中定义，然后在 HTML 文件的标签对中使用link标签来引用。

语法：

<link rel="stylesheet" type="text/css" href="文件路径" />

- rel 即 relative 的缩写，它的取值是固定的，即 stylesheet 表示引入的是一个样式表文件（即 CSS 文件）。

- type 属性取值也是固定的，即 "text/css"，表示这是标准的 CSS。

- href 属性表示 CSS 文件的路径。对于路径，相信小伙伴们已经很熟悉了。

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
  </head>
  <body></body>
</html>

分析：

- 如果你使用外部样式表，必须使用 link 标签来引入，而 link 标签是放在 head 标签内的。

1.2.2. 内部样式表

内部样式表，指的是把 HTML 代码和 CSS 代码放到同一个 HTML 文件中。其中 CSS 代码放在 style 标签内，并且 style 标签是放在 head 标签内部的。

语法：

<style type="text/css">
    ……
</style>

说明：

- type="text/css" 是必须添加的，表示这是标准的 CSS。

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      div {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>Gok，给你初恋般的感觉。</div>
    <div>Gok，给你初恋般的感觉。</div>
    <div>Gok，给你初恋般的感觉。</div>
  </body>
</html>

分析：

- 如果你使用内部样式表，CSS 样式必须在 style 标签内定义，而 style 标签是放在 head 标签内的。

1.2.3. 行内样式表

行内样式表跟内部样式表类似，也是把 HTML 代码和 CSS 代码放到同一个 HTML 文件。但是两者有着本质的区别：

- 内部样式表的 CSS 是在 "style 标签" 内定义的；

- 行内样式表的 CSS 是在 "标签的 style 属性" 中定义的。

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div style="color: red">Gok，给你初恋般的感觉。</div>
    <div style="color: red">Gok，给你初恋般的感觉。</div>
    <div style="color: red">Gok，给你初恋般的感觉。</div>
  </body>
</html>

分析：

- 大家将这个例子和前面一个例子对比一下，就知道两段代码实现的效果是一样的，都是定义 3 个 div 元素的颜色为红色。如果使用内部样式表，样式只需要写一遍；但是如果使用行内样式，则每个元素要单独写一遍。

- 行内样式是在每一个元素内部定义的，冗余代码非常多，并且每次改动 CSS 的时候，必须到元素中一个个去改，这样会导致网站的可读性和可维护性非常差。

- 为什么我们一直强烈不推荐使用 Dreamweaver "点点点"的方式来开发页面？就是因为这种方式产生的页面代码中，所有的 CSS 样式都是行内样式。

- 对于这三种样式表，在实际开发中，一般都是使用外部样式表。

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      h3,div,p,span {
        color: red;
      }
    </style>
  </head>
  <body>
    <h3>Gok</h3>
    <div>Gok</div>
    <p>Gok</p>
    <span>Gok</span>
  </body>
</html>