CSS是如何在幕后工作的

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与所需的调整集成在一起，从而成功更新现有代码。使用CSS可以适应多种设备类型的内容。