CSS 规则集有什么用?

cssweb developmentfront end technology更新于 2024/5/4 8:12:17

CSS 代表层叠样式表。它用于设置 HTML 元素的样式。HTML 用于创建网页或向网页添加内容。之后，开发人员使用 CSS 以特定样式呈现 HTML 内容，使其看起来更美观。

CSS 规则集主要包含两部分。一部分是 CSS 选择器，另一部分是声明块。

CSS 选择器用于选择 HTML 元素，声明块包含键值对格式的 CSS 属性，可应用于 HTML 元素。

语法

用户可以按照以下语法使用 CSS 规则集设置 HTML 元素的样式。

selector {
   /* 声明块 */
}

在上述语法中，"selector"可以是 HTML 元素的类名、ID 等，用于选择 HTML 元素。声明块包含多个 CSS 属性及其值，用于应用于 HTML 元素。

示例 1(CSS 类名选择器)

在下面的示例中，我们在定义 CSS 规则集时使用了类名作为 CSS 选择器。以下代码中有三个 div 元素，它们分别包含不同的类名。我们根据类名选择了每个 div 元素，并应用了不同的 CSS 样式，用户可以在输出中观察到这些样式。

<html>
<head>
   <style>
      .one {
         background-color: red;
         color: white;
         padding: 10px;
         margin: 10px;
         border: 1px solid green;
      }
      .two {
         background-color: green;
         color: white;
         padding: 10px;
         margin: 10px;
         border: 3px solid yellow;
      }
      .three {
         background-color: blue;
         color: white;
         padding: 10px;
         margin: 10px;
         border: 2px solid pink;
      }
   </style>
</head>
<body>
   <h2> Using the <i> class selector </i> in CSS ruleset </h2>
   <div class = "one"> One </div>
   <div class = "two"> Two </div>
   <div class = "three"> Three </div>
</body>
</html>

示例 2(CSS ID 选择器)

在下面的示例中，我们在定义 CSS 规则集时使用了 HTML 元素的 ID 作为 CSS 选择器。在 HTML 中，两个元素永远不能包含相同的 ID。

这里，我们有一个 ID 为"card"的 div 元素，它包含另外两个 ID 分别为"content1"和"content2"的 div 元素。我们通过访问所有 HTML 元素的 ID 来设置它们的样式，用户可以在输出中看到这些样式。

<html>
<head>
   <style>
      #card {
         width: 140px;
         height: 300px;
         background-color: grey;
         border-radius: 12px;
         border: 2px solid red;
         display: flex;
         justify-content: space-between;
         flex-direction: column;
      }
      #content1 {
         width: 100px;
         height: 100px;
         background-color: blue;
         border-radius: 12px;
         color: white;
         border: 2px solid red;
         margin: 20px;
      }
      #content2 {
         width: 100px;
         height: 100px;
         color: white;
         background-color: blue;
         border-radius: 12px;
         border: 2px solid red;
         margin: 20px;
      }
   </style>
</head>
<body>
   <h2> Using the <i> id selector </i> in CSS ruleset </h2>
   <div id = "card">
      <div id = "content1"> HTML </div>
      <div id = "content2"> CSS </div>
   </div>
</body>
</html>

示例 3(CSS 多选择器)

在下面的示例中，我们使用了多 CSS 选择器，一次性将相同的 CSS 样式应用于多个 HTML 元素。

我们有三个具有不同类名和 ID 的 <p> 元素。在 CSS 中，我们使用了".text1, .text2, #para1"CSS 选择器，将声明块中添加的相同样式应用于所有 HTML 元素。

此外，我们还分别使用类名和 ID CSS 选择器选择了这三个 HTML 元素，并对不同的元素应用了不同的样式。

<html>
<head>
   <style>
      .text1,
      .text2,
      #para1 {
         margin: 10px;
         height: auto;
         padding: 10px;
         width: 200px;
      }
      .text1 {
         background-color: red;
         color: white;
         font-size: 2rem;
      }
      .text2 {
         background-color: green;
         color: red;
         font-size: 1.7rem;
      }
      #para1 {
         background-color: blue;
         color: white;
         font-size: 1rem;
      }
   </style>
</head>
<body>
   <h2> Using the <i> Multiple selector </i> in CSS ruleset </h2>
   <p class = "text1"> This is the first paragraph </p>
   <p class = "text2"> This is a second paragraph. </p>
   <p id = "para1"> This is the third paragraph. </p>
</body>
</html>

示例 4(CSS 嵌套元素选择器)

在下面的示例中，我们介绍了 CSS 的嵌套选择器。在 HTML 中，div 元素包含多个类名为"link"的 <a> 元素。

在 CSS 中，我们使用了"div .link"CSS 选择器，它会选择所有类名为"link"的 HTML 元素以及 div 元素的后代元素。如果我们使用"div.link"作为 CSS 选择器，它会将样式应用于所有类名为"link"的 div 元素。因此，"div.link"和"div .link"是不同的 CSS 选择器。

在输出中，用户可以观察到 CSS 样式已应用于所有 <a> HTML 元素，它们是 div 元素的后代，但不应用于 div 元素外部的元素。

<html>
<head>
   <style>
      div .link {
         color: red;
         text-decoration: none;
      }
   </style>
</head>
<body>
   <h2> Using the <i> nested selectors </i> in CSS ruleset </h2>
   <div>
      <a href = "#" class = "link"> Link1 </a>
      <a href = "#" class = "link"> Link2 </a>
      <a href = "#" class = "link"> Link3 </a>
   </div><br>
   <a href = "#" class = "link"> Link 5 </a>
</body>
</html>

示例 5(CSS 伪选择器)

在本例中，我们演示了如何使用 CSS 伪选择器。CSS 伪选择器有很多种，我们在这里使用了其中几种。

这里，我们有一个"container"div 元素，它包含 4 个带有"element"类名的子元素。我们使用了":hover"伪选择器，当用户将鼠标悬停在"container"div 元素上时，它会更改其背景颜色。

之后，我们分别使用":first-child"、":last-child"和":nth-child()"CSS 选择器以及".element"选择器来选择第一个子元素、最后一个子元素和第 n 个子元素。

在输出中，用户可以观察到不同的 CSS 样式应用于第一个子元素、最后一个子元素和第二个子元素。

<html>
<head>
   <style>
      .container {
         height: 100px;
         width: 500px;
         background-color: blue;
         padding: 10px;
         display: flex;
         justify-content: space-around;
         border-radius: 12px;
         font-size: 1.2rem;
      }
      /* hover pseudo class */
      .container:hover {
         background-color: red;
      }
      /* first child pseudo class */
      .element:first-child {
         background-color: green;
         color: white;
      }
      /* last child pseudo class */
      .element:last-child {
         background-color: grey;
         color: black;
      }
      /* nth child pseudo class */
      .element:nth-child(2) {
         background-color: pink;
         color: green;
      }
   </style>
</head>
<body>
   <h2> Using the <i> pseudo selectors </i> in CSS ruleset </h2>
   <div class = "container">
      <div class = "element"> First Child </div>
      <div class = "element"> Second Child </div>
      <div class = "element"> Third Child </div>
      <div class = "element"> Fourth Child </div>
   </div>
</body>
</html>

在本教程中，用户学习了如何使用不同的 CSS 规则集。我们使用了类名和 ID 作为选择器。此外，我们还学习了如何使用多个 CSS 选择器和嵌套 CSS 选择器。在最后一个示例中，我们学习了如何使用 CSS 规则集中的伪选择器。