CSS (Cascading Styel Sheet) ist eine Reihe von Formatierungsregeln, die das Erscheinungsbild von Webseiten steuern. Es ist eines der wesentlichen Werkzeuge für das Webdesign. Als nächstes beginnen wir mit dem Erlernen des grundlegenden Syntaxformats von CSS.
1. CSS-Definitionsregeln
Ein Cascading Style Sheet ist eine vollständige reine Textdatei, die normalerweise als separate Datei mit der Erweiterung „css“ verwendet wird. Ihr Inhalt enthält eine Reihe von Regeln, die dem Browser mitteilen, wie der Inhalt in bestimmten HTML-Tags angeordnet und angezeigt werden soll bestehen aus drei Teilen: Selektoren, Attributen und Attributwerten. Die Syntax lautet wie folgt:
Syntax: Selektor { Eigenschaft: Wert }
↑ ↑ ↑
Selektor {Eigenschaft: Wert}
CSS-Stile bestehen aus einer Reihe von Regeln, die von Webbrowsern analysiert und dann auf entsprechende Elemente eines HTML-Dokuments angewendet werden. CSS-Stilregeln bestehen aus drei Teilen, nämlich Selektoren, Eigenschaften und Werten:
1. Selektor: Der Selektor ist das HTML-Tag zum Definieren des Stils. Nachdem das HTML-Tag als Selektor definiert wurde, wird der Inhalt unter dem Tag auf der HTML-Seite gemäß den von CSS definierten Regeln geändert.
2. Attribut: Der Stilname, den Sie für das HTML-Element festlegen möchten, bezieht sich auf den zu ändernden Inhalt im Selektor. Zu den gängigen gehören: Schriftartattribute, Farbattribute, Textattribute usw. Unten finden Sie ein von uns definiertes Stylesheet.
3. Wert: Der Wert eines Attributs, bestehend aus einem numerischen Wert und einer Einheit oder einem Schlüsselwort, wird verwendet, um den Anzeigeeffekt eines bestimmten Attributs zu steuern.
@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}In diesem Stylesheet:
1. @charsetgb2312; bedeutet die Verwendung des chinesischen nationalen Standardzeichensatzes.
2. body und p sind zwei Tags in HTML, und für diese beiden Tags sind drei Stile festgelegt, nämlich:
Schriftartenfamilie: Gibt den Schriftarttyp der Schriftart an.
"> 2. Stylesheet einbetten
Das in der HTML-Seite definierte CSS-Stylesheet wird als eingebettetes CSS-Stylesheet bezeichnet. Das heißt, im Kopfteil des HTML-Dokuments wird das Style-Tag verwendet und im Tag wird eine Reihe von CSS-Regeln definiert.
Syntax: <head><styletype=text/css><!--......--></style></head>
veranschaulichen:
<style> gibt den Anfang des CSS-Stylesheets an und die Endmarkierung ist </style>. In der Startmarkierung <style> können Sie nach Bedarf einige Attribute hinzufügen, wie z. B. das Attribut type=text/css im obigen Beispiel Spalte, die angibt, dass das CSS-Stylesheet den MIME-Typ übernimmt. Das Merkmal dieses Typs besteht darin, dass der CSS-Code gefiltert wird, um zu verhindern, dass der Browser den CSS-Code in der Form anzeigt Quellcode. Um mehr Sicherheit zu gewährleisten, fügen Sie im Stylesheet erneut die Kommentarkennung <!--...--> hinzu. In dieser Kommentarkennung werden die CSS-Regeln definiert.
Beispiel 1: t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Eingebettetes CSS-Stylesheet</title><styletype=text/css><!--@charsetgb2312; {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head > <body>Tausende Vögel fliegen über Tausende von Bergen und verschwinden ohne Spuren von Menschen<p>Tausende Vögel fliegen über Tausende von Bergen und verschwinden ohne Spuren von Menschen</p></body></html>3. Link zu externen Stylesheets
Ein externes CSS-Stylesheet ist eine externe Datei mit dem Suffix .css. Das Definieren eines externen Stylesheets kann auf mehrere Seiten angewendet werden. Sie können das Link-Tag in einer HTML-Seite verwenden, um ein externes CSS-Stylesheet zu verbinden. Die Syntax lautet wie folgt:
Grammatik:
<linkrel=stylesheethref=*.css“ type=text/css>
Parameter:
1. Das rel-Attribut gibt an, wie das Stylesheet mit dem HTML-Dokument kombiniert wird. rel-Wert: Stylesheet, das die Angabe eines externen Stylesheets angibt
2. *.css ist eine separat gespeicherte Stylesheet-Datei.
Beispiel 2 Definieren Sie eine externe CSS-Datei p2.css und verbinden Sie die Datei dann mit der Datei t2.htm.
Beispiel 2: t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Link zum externen Stylesheet</title><styletype=text/css><!--@charsetgb2312; body {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head > <body>Meine Liebe, fliege langsam, pass auf die dornigen Rosen vor dir auf<p>Meine Liebe, öffne deinen Mund, der Duft der Blumen im Wind wird dich berauschen</p></body>< /html>4. Inline-Stylesheets
Inline-Stile beziehen sich auf CSS-Stylesheets, die in HTML-spezifischen Tags definiert sind. Häufig verwendete HTML-Tags sind hauptsächlich einige Elemente in BODY, z. B. <p>, <h2>, <ul>, <div> usw. Im Folgenden finden Sie Beispiele für Inline-Stile.
Beispiel 3: t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Untitled Document</title></head><body><divstyle=color:blue;font- size :30px;>Der Duft von Blumen im Wind wird Sie berauschen</div><pstyle=color:#ff0000;font-style:italic;>Der Duft von Blumen im Wind wird Sie berauschen</p>< /body></html>
5. Externe Stylesheets importieren
Das Importieren eines externen Stylesheets bedeutet, dass ein eingebettetes Stylesheet in der HTML-Datei erstellt wurde, aber einige Einstellungen des externen Stylesheets verwendet werden müssen. In diesem Fall können Sie ein externes Stylesheet in <style> importieren und @ verwenden. importieren, wie im Beispiel unten gezeigt.
<html><head><styletype=text/css><!--@importurl(mystyle.css);Deklaration anderer Stylesheets--></style></head></body>..... .</body></html>
Unter anderem bedeutet @import url(mystyle.css); das Importieren des Stylesheets mystyle.css. Das importierte externe Stylesheet muss sich am Anfang des Stylesheets über dem internen Stylesheet befinden.
Beispiel 4
Definieren Sie eine externe CSS-Datei p4.css und importieren Sie die Datei dann in die Datei t4.htm
Beispiel 4: t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Externes Stylesheet importieren</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--> </style></head><body>Tausende Vögel fliegen über Tausende von Bergen und alle Spuren von Menschen verschwinden<p>Tausende Vögel fliegen über Tausende von Bergen und keine Spuren von Menschen sind zu sehen</p>< /body></html>6. Vererbung von CSS-Stylesheets
Im CSS-Stylesheet erben einige Attribute des untergeordneten Tags die Attribute des übergeordneten Tags. Beispielsweise ist das Tag p ein untergeordnetes Element des Tag-Körpers. Wenn das Tag p das Attribut „Schriftfarbe“ nicht festlegt, wird der Inhalt festgelegt In p wird die Farbe im Körperwert verwendet. Das folgende Beispiel veranschaulicht diese Situation.
Beispiel 5: t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Eingebettetes CSS-Stylesheet</title><styletype=text/css><!--@charsetgb2312; {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;}--></style></head><body>千Mountain Vögel fliegen über Tausende von Wegen und verschwinden ohne Spuren von Menschen<p>Tausende Bergvögel fliegen über Tausende von Wegen und verschwinden ohne Spuren von Menschen</p></body></html>7. Legen Sie mehrere Elemente fest
CSS ermöglicht die Anwendung eines einzelnen Formats auf mehrere Tags, wenn es als Selektor verwendet wird, wie im folgenden Beispiel gezeigt.
Beispiel 6: t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Eingebettetes CSS-Stylesheet</title><styletype=text/css><!--@charsetgb2312; ,h2,h3,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>Tausende Vögel fliegen über Tausende von Bergen und Tausende von Menschen verschwinden </ h1><h2>Tausende Vögel fliegen über Tausende von Bergen und verschwinden, verschwinden ohne Spuren</h2><h3>Tausende Vögel fliegen über Tausende von Wegen und verschwinden ohne Spuren von Menschen</h3><p>Tausende Vögel fliegen über Tausende von Wegen und verschwinden ohne Spuren von Menschen< /p></body></html>