"CSS在幕后是如何工作的？"

WBOY 转载: 2023-09-17 10:33:02 1036浏览

CSS（层叠样式表）是一种样式表语言，用于向网页添加视觉效果。它用于描述HTML元素的页面布局和显示。通过 CSS 可以节省大量时间。使用它可以同时管理多个网页的布局。它使开发人员能够为不同的元素实现各种自定义属性，从而增强网页的外观。在本文中，我们将了解 CSS 及其工作原理。

CSS 基本上分为 3 种类型 -

外部 CSS - 在每个页面上，都使用元素，并且 link> 标记属于 head 部分。如果您想同时更改多个页面，请使用外部样式表。它在这种情况下非常有用，因为它使您能够通过仅修改一个文件来改变整个网站的外观。
内联 CSS - 如果单个 HTML 页面具有独特的样式，则可以使用内部样式表。 head 部分的 style> 元素包含内部样式的定义。
内部 CSS - 要为单个元素提供独特的外观，请使用内联样式。通过将 style 属性添加到适当的元素来使用内联样式。 style 属性是任何 CSS 属性的容器。

语法

selector{
   property: value;
}

示例

下面给出了如何在 HTML 页面中使用 CSS 的示例。在这里，我们有内联 CSS。 h1 元素带有下划线，而 div 元素为绿色。

<!DOCTYPE html>
<html>
<head>
   <title> Using CSS within a HTML page </title>
   <style>
      h1{
         text-decoration: underline;
      }
      div{
         width: 30%;
         height: 30px;
         background-color: green;
      }
   </style>
</head>
<body>
   <h1> Inline CSS </h1>
   <div> This is an example. </div>
</body>
</html>

为什么我们应该使用CSS？

节省时间- 它可以节省大量时间。由于 CSS 样式定义保存在单独的 CSS 文件中，因此更改其中一个文件可能会对整个网站产生影响。
多个属性- 与纯 HTML 相比，CSS 提供了更精确的选项来确定网站的外观和感觉。
快速页面加载- 使用 CSS 时，并不总是需要编写 HTML 标记属性。可以只为一个标签编写一次规则，并将其应用于该标签的所有实例。由于 CSS 使用较少的代码，因此下载速度更快。
网站维护- 网站需要它进行维护。如果我们需要对文件进行全局修改，只需更改样式，网页上的所有组件都会立即更新。由于 CSS 文件的灵活性，网站的设计可以很容易地修改。
多设备兼容性- 我们可以将 CSS 与以前的语言版本一起使用，因为它传统上与它们兼容。因此，如果 CSS 应用程序是使用早期版本的编程语言创建的，并且开发人员将其与更新的开发内容合并，则 CSS 可以轻松地与所需的调整集成，从而允许开发人员成功更新现有代码。使用 CSS 的内容可以适应多种设备类型。