Wofür werden CSS-Regelsätze verwendet?-CSS-Tutorial-php.cn

Wofür werden CSS-Regelsätze verwendet?

CSS steht für Cascading Style Sheets. Es wird zum Formatieren von HTML-Elementen verwendet. HTML wird zum Erstellen oder Hinzufügen von Inhalten zu Webseiten verwendet. Anschließend verwenden Entwickler CSS, um den HTML-Inhalt in einem bestimmten Stil darzustellen, damit er großartig aussieht.

Der CSS-Regelsatz besteht hauptsächlich aus zwei Teilen. Einer ist ein CSS-Selektor und der andere ist ein Deklarationsblock.

CSS-Selektoren werden zur Auswahl von HTML-Elementen verwendet. Deklarationsblöcke enthalten CSS-Eigenschaften im Schlüsselwertformat, die auf HTML-Elemente angewendet werden können.

Grammatik

Benutzer können den CSS-Regelsatz verwenden, um HTML-Elemente gemäß der folgenden Syntax zu formatieren.

selector {
   /* declaration block */
}

Nach dem Login kopieren

In der obigen Syntax kann „Selektor“ der Klassenname, die ID usw. des HTML-Elements sein, das zur Auswahl von HTML-Elementen verwendet wird. Ein Deklarationsblock enthält mehrere CSS-Eigenschaften und ihre Werte, die auf HTML-Elemente angewendet werden sollen.

Beispiel 1 (CSS-Klassennamenauswahl)

Im folgenden Beispiel verwenden wir den Klassennamen als CSS-Selektor bei der Definition des CSS-Regelsatzes. Der folgende Code enthält drei div-Elemente mit unterschiedlichen Klassennamen. Wir haben jedes div-Element anhand seines Klassennamens ausgewählt und einen anderen CSS-Stil angewendet, den der Benutzer in der Ausgabe beobachten kann.

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

Nach dem Login kopieren

Beispiel 2 (CSS-ID-Auswahl)

Im folgenden Beispiel verwenden wir die ID des HTML-Elements als CSS-Selektor bei der Definition des CSS-Regelsatzes. In HTML können zwei Elemente niemals dieselbe ID enthalten.

Hier haben wir ein div-Element mit der ID „card“, das zwei weitere div-Elemente mit der ID „content1“ und „content2“ enthält. Wir formatieren alle HTML-Elemente, indem wir über ihre ID auf sie zugreifen, die der Benutzer in der Ausgabe sehen kann.

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

Nach dem Login kopieren

Beispiel 3 (CSS-Mehrfachauswahl)

Im folgenden Beispiel verwenden wir mehrere CSS-Selektoren, um denselben CSS-Stil auf mehrere HTML-Elemente gleichzeitig anzuwenden.

Wir haben drei

Elemente mit unterschiedlichen Klassennamen und IDs. In CSS verwenden wir den CSS-Selektor „.text1, .text2, #para1“, um die gleichen Stile, die im Deklarationsblock hinzugefügt wurden, auf alle HTML-Elemente anzuwenden.

Darüber hinaus haben wir alle drei HTML-Elemente mithilfe von CSS-Selektoren für Klassennamen und ID einzeln ausgewählt, um unterschiedliche Stile auf verschiedene Elemente anzuwenden.

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

Nach dem Login kopieren

Beispiel 4 (CSS Nested Element Selector)

Im folgenden Beispiel stellen wir die verschachtelten CSS-Selektoren vor. In HTML enthält ein div-Element mehrere -Elemente mit dem Klassennamen „link“.

In CSS haben wir den CSS-Selektor „div .link“ verwendet, der alle HTML-Elemente mit dem Klassennamen „link“ und die Nachkommen des div-Elements auswählt. Wenn wir „div.link“ als CSS-Selektor verwenden, wird der Stil auf alle div-Elemente mit dem Klassennamen „link“ angewendet. Daher sind „div.link“ und „div .link“ beide unterschiedliche CSS-Selektoren.

In der Ausgabe kann der Benutzer beobachten, dass CSS-Stile auf alle HTML-Elemente angewendet werden, die Nachkommen des div-Elements sind, jedoch nicht auf Elemente außerhalb des div-Elements.

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

Nach dem Login kopieren

Beispiel 5 (CSS-Pseudoselektor)

In diesem Beispiel demonstrieren wir die Verwendung von CSS-Pseudoselektoren. Es gibt viele Arten von CSS-Pseudoselektoren, und wir verwenden hier einige davon.

Hier haben wir ein „Container“-Div-Element, das 4 untergeordnete Elemente mit dem Klassennamen „Element“ enthält. Wir verwenden den Pseudoselektor „:hover“, um die Hintergrundfarbe des div-Elements „container“ zu ändern, wenn der Benutzer mit der Maus über das div-Element fährt.

Danach verwenden wir die CSS-Selektoren „:first-child“, „:last-child“ und „:nth-child()“ sowie den Selektor „.element“, um das erste untergeordnete Element und das letzte untergeordnete Element auszuwählen. bzw. n-tes Kind.

In der Ausgabe kann der Benutzer beobachten, dass unterschiedliche CSS-Stile auf das erste Kind, das letzte Kind und das zweite Kind angewendet werden.

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

Nach dem Login kopieren

In diesem Tutorial haben Benutzer gelernt, wie sie verschiedene CSS-Regelsätze verwenden. Wir verwenden den Klassennamen und die ID als Selektor. Darüber hinaus haben wir gelernt, wie man mehrere CSS-Selektoren und verschachtelte CSS-Selektoren verwendet. Im vorherigen Beispiel haben wir gelernt, wie man Pseudoselektoren aus einem CSS-Regelsatz verwendet.

Das obige ist der detaillierte Inhalt vonWofür werden CSS-Regelsätze verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!