CSS 创建

梁辰兴

已于 2023-09-18 16:29:12 修改

阅读量970

点赞数 1

分类专栏： CSS 文章标签： css 前端创建

于 2023-09-18 15:48:50 首次发布

本文链接：https://blog.csdn.net/m0_62617719/article/details/132981985

版权

31 篇文章 2 订阅

订阅专栏

CSS可以通过三种方式创建：

外部样式表：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部，例如： <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>。浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。
内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。例如： <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>。
内联样式：这是将样式直接添加到HTML元素中的方法。它不推荐用于大型网站，因为会导致代码混乱，但非常适合用于单个元素的快速样式更改。例如：<p style="color: sienna;"> This is a paragraph </p>。

外部样式表

外部样式表（External Stylesheet）是将样式信息（CSS）存储在一个独立的.css文件中，并通过HTML文件的<link>标签链接到HTML文档中，以便控制整个网站的外观和样式。

创建和使用外部样式表可以带来很多好处，包括提高网站的可维护性、减少代码冗余、易于更新和调试等。同时，外部样式表也可以被缓存，从而提高网站的加载速度和性能。

要创建外部样式表，首先需要在文本编辑器中创建一个CSS文件，例如命名为style.css，并将所有的样式声明写入该文件中。然后，在HTML文件的<head>标签中添加<link>标签来链接该CSS文件，例如：

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

在这个例子中，style.css文件中的CSS代码将应用于整个HTML文档。你可以根据需要修改CSS文件中的样式声明，以改变网站的外观和样式。

内部样式表（Internal Stylesheet）是存储在HTML文档的<head>标签中的<style>标签内的样式表。它用于控制HTML文档中特定元素的样式，其语法和普通CSS代码相同。

例如：

<head>
  <style>
    h1 {
      color: blue;
      font-size: 20px;
    }
    p {
      font-size: 14px;
      color: red;
    }
  </style>
</head>

在这个例子中，h1标签的文本颜色将变为蓝色，字体大小为20px；所有p标签的文本颜色将变为红色，字体大小为14px。

内部样式表适用于单个HTML文档的样式控制，但如果有多个HTML文档需要共享样式，则可以考虑使用外部样式表。

内联样式（Inline Styles）是直接在HTML标签中使用style属性来添加样式，例如：

<p style="color: red; font-size: 30px;">这是一个段落。</p>

在这个例子中，我们通过style属性设置了文字颜色为红色，字体大小为30像素。

内联样式的优点是方便快捷，可以直接在HTML标签中添加样式，不需要额外的CSS文件。但是，内联样式的缺点也很明显，比如不利于样式的复用和维护，因为样式信息分散在多个HTML标签中，不易于统一管理和修改。此外，内联样式也不利于代码的压缩和缓存，会增加页面加载时间和带宽成本。

因此，对于大型网站而言，通常会采用外部样式表来集中管理样式信息，以提高网站的可维护性和性能。

多重样式是指在一个样式规则中，同时定义多个CSS属性及其取值。

例如，你可以为一个元素添加多重样式，覆盖已定义的样式规则。

多重样式可以覆盖已定义的样式规则。

多重样式的定义必须遵循CSS的语法规则，使用分号（;）分隔多个CSS属性及其取值，使用逗号（,）分隔多个选择器，以同时定义相同的多重样式。

浏览器在应用多重样式时，会根据优先级来确定哪个样式应该被应用到一个元素上。

优先级是浏览器通过判断哪些属性值与元素最相关以决定并应用到该元素上的。多重样式的优先级取决于样式规则的组成，主要由四个方面决定：

选择器的特指性：特指性就是选择器匹配的元素类型的数量。比如，id选择器的特指性最高，因为它们可以匹配页面上唯一的元素。其次是类选择器和属性选择器，最后是通用选择器。
选择器的层叠性：在CSS中，多重样式冲突时，层叠性高的选择器会覆盖层叠性低的选择器。
样式表的顺序：如果样式表的顺序影响优先级，则外部样式表会覆盖内部样式表，因为外部样式表在后面，有更高的优先级。
!important规则：当一个样式声明被标记为!important时，它将会覆盖CSS中任何其他的声明，无论这个声明在列表中的哪个位置。

以上是多重样式的优先级规则，使用时要注意不要滥用!important规则，因为它会改变样式表本来的级联规则，从而使其难以调试。

关注