CSS (Cascading Style Sheets) ist eine Sprache zur Steuerung des Stils von Webseiten. Mit ihr können Sie Schriftart, Farbe, Rahmen, Layout und andere Eigenschaften der Webseite festlegen. Bei der Entwicklung einer Webseite ist das Festlegen von CSS-Eigenschaften ein entscheidender Schritt. In diesem Artikel wird ausführlich beschrieben, wie CSS-Eigenschaften festgelegt werden, sowie häufig verwendete Eigenschaftswerte und Methoden.
1. So legen Sie CSS-Eigenschaften fest
- Inline-Stil: Fügen Sie das Stilattribut zum HTML-Tag hinzu, um die CSS-Eigenschaften festzulegen. Zum Beispiel:
<p style="color: red; font-size: 16px;">Hello, world!</p>
Nach dem Login kopieren
- Internes Stylesheet: Fügen Sie das Style-Tag im HTML-Kopf hinzu und legen Sie dann die CSS-Eigenschaften darin fest. Zum Beispiel:
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>Hello, world!</p>
</body>Nach dem Login kopieren
- Externes Stylesheet: Fügen Sie den CSS-Code in eine separate Stylesheet-Datei ein und referenzieren Sie ihn dann in HTML über das Link-Tag. Zum Beispiel:
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello, world!</p>
</body>
Nach dem Login kopieren
2. Häufig verwendete CSS-Attribute und ihre Attributwerte
- Font-Attribut (Schriftart)
- font-family: Legen Sie den Namen der Schriftart fest, bei der es sich um den Namen einer bestimmten Schriftart handeln kann Schriftart (z. B. „Helvetica“). Es kann sich auch um eine universelle Schriftart handeln (z. B. „Serif“, „Sans-Serif“, „Monospace“ usw.).
- Schriftgröße: Legen Sie die Schriftgröße in Einheiten wie Pixel (px), Prozentsatz (%), em (Vielfaches der aktuellen Schriftgröße als Basis) usw. fest.
- Schriftstil: Legen Sie den Schriftstil fest, der „normal“, „kursiv“ oder „schräg“ sein kann.
- Schriftstärke: Legen Sie die Schriftstärke fest, die eine Zahl (z. B. 400) oder ein Schlüsselwort (z. B. „normal“, „fett“) sein kann.
- Farbattribut (Farbe)
- Farbe: Legen Sie die Farbe des Texts fest. Sie können Farbnamen (z. B. „Rot“, „Grün“, „Blau“ usw.) oder RGB-Werte (RGBA) verwenden Werte (wie „rgb( 255, 0, 0)“, „rgba(255, 0, 0, 0.5)“) und andere Methoden.
- Hintergrundattribut (Hintergrund)
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe des Elements fest. Sie können den Farbnamen oder den RGB-Wert, RGBA-Wert usw. verwenden.
- Hintergrundbild: Legen Sie das Hintergrundbild des Elements fest. Sie können ein lokales Bild oder eine Remote-Bildadresse verwenden.
- background-repeat: Stellen Sie den Wiederholungsmodus des Hintergrundbilds ein, der „repeat“ (wiederholen), „repeat-x“ (horizontale Wiederholung), „repeat-y“ (vertikale Wiederholung) oder „no-repeat“ sein kann. (keine Wiederholung) ).
- Hintergrundposition: Legen Sie die Position des Hintergrundbilds fest. Sie können Schlüsselwörter (z. B. „links oben“, „Mitte“, „rechts unten“) oder Pixelwerte, Prozentwerte usw. verwenden.
- Border-Attribut (Rahmen)
- border-width: Legen Sie die Breite des Rahmens fest. Sie können Einheiten wie Pixel und em verwenden.
- Rahmenstil: Legen Sie den Rahmenstil fest, der „durchgezogen“ (durchgezogene Linie), „gepunktet“ (gepunktete Linie), „gestrichelt“ (gestrichelte Linie) usw. sein kann.
- Rahmenfarbe: Legen Sie die Farbe des Rahmens fest. Sie können den Farbnamen oder den RGB-Wert, den RGBA-Wert usw. verwenden.
- Größenattribute (Breite, Höhe)
- Breite: Legen Sie die Breite des Elements fest. Sie können Einheiten wie Pixel und Prozentsätze verwenden.
- Höhe: Legen Sie die Höhe des Elements in Einheiten wie Pixeln und Prozentsätzen fest.
- Textattribut (Text)
- text-align: Legen Sie die horizontale Ausrichtung des Textes fest, die „links“ (linke Ausrichtung), „rechts“ (rechte Ausrichtung), „center“ (zentrierte Ausrichtung) sein kann ), usw. .
- Textdekoration: Legen Sie den Dekorationseffekt des Textes fest, der „keine“ (keine Dekoration), „unterstrichen“ (unterstrichen), „durchgestrichen“ (durchgestrichen) usw. sein kann.
- Texttransformation: Legen Sie die Methode zur Groß-/Kleinschreibung von Text fest, die „Großbuchstabe“ (Großbuchstabe), „Kleinbuchstabe“ (Kleinbuchstabe), „Großschreibung“ (erster Buchstabe groß geschrieben) usw. sein kann.
- Box-Attribut (Box)
- Margin: Legen Sie den Rand des Elements fest (den Abstand zwischen dem Element und anderen Elementen), der in Pixeln, Prozentsätzen und anderen Einheiten angegeben werden kann.
- padding: Legen Sie den inneren Rand des Elements fest (den Abstand zwischen dem Inhalt des Elements und dem Rand), der in Pixeln, Prozentsätzen und anderen Einheiten angegeben werden kann.
- Anzeige: Legen Sie den Anzeigemodus des Elements fest. Dies kann „Block“ (Blockebenenelement), „Inline“ (Inline-Element) oder „Inline-Block“ (Inline-Blockebenenelement) usw. sein.
3. Zusammenfassung
Das Festlegen von CSS-Eigenschaften ist ein entscheidender Schritt in der Webentwicklung. Der Umgang mit CSS-Eigenschaften ermöglicht es uns, schöne, leicht lesbare und benutzerfreundliche Webseiten zu entwerfen. In diesem Artikel werden häufig verwendete CSS-Eigenschaften und ihre Eigenschaftswerte vorgestellt und drei Methoden zum Festlegen von CSS-Eigenschaften ausführlich erläutert. Ich hoffe, dass die Leser CSS in der Webentwicklung flexibel nutzen können, um herausragendere Webwerke zu erstellen.
Das obige ist der detaillierte Inhalt vonCSS-Eigenschaften festlegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
