CSS规则集有什么用？-css教程-PHP中文网

CSS规则集有什么用？

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

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

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

语法

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

selector {
   /* declaration block */
}

登录后复制

在上面的语法中，‘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 元素。我们通过通过 ID 访问所有 HTML 元素来设置它们的样式，用户可以在输出中观察到这些元素。

<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 的

元素。在 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”的元素。

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

在输出中，用户可以观察到 CSS 样式应用于所有 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”类名称的子元素。当用户将鼠标悬停在 div 元素上时，我们使用“: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 规则集中的伪选择器。

以上是CSS规则集有什么用？的详细内容。更多信息请关注PHP中文网其他相关文章！