Heim > Artikel > Web-Frontend > Wofür werden CSS-Regelsätze verwendet?
Wofür werden CSS-Regelsätze verwendet?
- PHPznach vorne
- 2023-09-09 16:01:021196Durchsuche
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 */
}
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>
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>
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>
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>
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>
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!
In Verbindung stehende Artikel
Mehr sehen- Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses
- Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite
- Reine CSS3-Vollbild-Diashow-Effekte
- Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen
- Atemberaubende sechseckige CSS3-Menüanimationseffekte