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 */
}
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 id="Using-the-i-class-selector-i-in-CSS-ruleset"> 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 id="Using-the-i-id-selector-i-in-CSS-ruleset"> 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 id="Using-the-i-Multiple-selector-i-in-CSS-ruleset"> 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 id="Using-the-i-nested-selectors-i-in-CSS-ruleset"> 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 id="Using-the-i-pseudo-selectors-i-in-CSS-ruleset"> 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices
Mar 08, 2025 am 09:45 AM
Dies ist der 3. Beitrag in einer kleinen Serie, die wir in Form von Barrierefreiheit gemacht haben. Wenn Sie den zweiten Beitrag verpasst haben, lesen Sie "Verwalten des Benutzerfokus mit: Fokus-Sichtbar". In
Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework
Mar 07, 2025 am 11:33 AM
Dieses Tutorial zeigt, dass professionelle JavaScript-Formulare mithilfe des Frameworks Smart Forms erstellt werden (Hinweis: Nicht mehr verfügbar). Während der Rahmen selbst nicht verfügbar ist, bleiben die Prinzipien und Techniken für andere Formbauer relevant.
Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen
Mar 09, 2025 pm 12:53 PM
Die CSS-Box-Shadow- und Umrisseigenschaften haben Thema gewonnen. JSON-Unterstützung in WordPress 6.1. Sei ein paar Beispiele für die Funktionsweise in realen Themen und welche Optionen wir diese Stile auf WordPress -Blöcke und Elemente anwenden müssen.
Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut
Mar 02, 2025 am 09:03 AM
Der Aufbau eines Inline -Texteditors ist nicht trivial. Der Prozess beginnt damit, dass das Zielelement bearbeitbar wird und potenzielle SyntaxE -Ausnahmen behandelt. Erstellen Sie Ihren Editor Um diesen Editor zu erstellen, müssen Sie den Inhalt dynamisch ändern
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)
Mar 04, 2025 am 10:22 AM
In diesem Artikel werden die auf dem Envato -Markt verfügbaren Top -Skripte für PHP -Formulierungen untersucht und deren Funktionen, Flexibilität und Design verglichen. Lassen Sie uns vor dem Tauchen in bestimmte Optionen verstehen, was ein PHP -Formular Builder ist und warum Sie einen verwenden würden. Eine PHP -Form
Datei hochladen mit Multer in node.js und ausdrücken
Mar 02, 2025 am 09:15 AM
Dieses Tutorial führt Sie durch das Erstellen eines Datei -Upload -Systems mit Node.js, Express und Multer. Wir werden die Hoch- und mehrere Datei -Uploads behandeln und sogar das Speichern von Bildern in einer MongoDB -Datenbank zum späteren Abrufen demonstrieren. Richten Sie zunächst Ihr Projec ein
