CSS-Einführungs-Tutorial_Grundlegendes Tutorial

CSS ist die Abkürzung für Cascading Style Sheets. Es handelt sich um einen einfachen Mechanismus zum Hinzufügen von Stilen zu Webdokumenten und gehört zur Layoutsprache der Präsentationsebene.
　1. Grundlegende Syntaxspezifikationen
Analysieren Sie eine typische CSS-Anweisung:
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
Wobei „p“ wir „Selektoren“ nennen, was angibt, dass wir es wollen Definieren Sie einen Stil für „p“;
Die Stildeklaration wird in ein Paar geschweifter Klammern geschrieben „{}“;
FARBE und HINTERGRUND werden als „Eigenschaften“ bezeichnet und zwischen verschiedenen Eigenschaften werden Semikolons verwendet ;
„#FF0000“ und „#FFFFFF“ sind die Werte der Attribute.
　2. Farbwert
Der Farbwert kann als RGB-Wert geschrieben werden, zum Beispiel: color: rgb(255,0,0), oder er kann hexadezimal geschrieben werden, genau wie im obigen Beispiel color:#FF0000 . Wenn die Hexadezimalwerte paarweise wiederholt werden, können sie mit dem gleichen Effekt abgekürzt werden. Beispiel: #FF0000 kann als #F00 geschrieben werden. Es kann jedoch nicht abgekürzt werden, wenn es sich nicht wiederholt. Beispielsweise muss #FC1A1B mit sechs Ziffern gefüllt werden.
　3. Schriftarten definieren
Webstandards empfehlen die folgende Methode zur Schriftartendefinition:
body { Schriftfamilie: „Lucida Grande“, Verdana, Lucida, Arial, Helvetica, Song Dynasty, Sans-Serif }
Schriftarten werden in der aufgeführten Reihenfolge ausgewählt. Wenn der Computer des Benutzers die Schriftart Lucida Grande enthält, wird das Dokument als Lucida Grande bezeichnet. Wenn nicht, wird sie als Verdana-Schriftart bezeichnet, wenn es keine Verdana-Schriftart gibt, wird sie als Lucida-Schriftart bezeichnet und so weiter.
Die Schriftart Lucida Grande ist für Mac OS X geeignet.
Die Schriftart Verdana ist für alle Windows-Geräte geeignet Systeme;
Lucida ist für UNIX-Benutzer geeignet
"Song Ti" ist für Benutzer mit vereinfachtem Chinesisch geeignet
Wenn keine der aufgeführten Schriftarten verfügbar ist, kann garantiert die standardmäßige serifenlose Schriftart aufgerufen werden;
　4. Gruppenselektor
Wenn mehrere Elemente die gleichen Stilattribute haben, können sie durch Kommas getrennt eine Anweisung aufrufen: p, td, li { Schriftgröße: 12px }
5. Die abgeleiteten Selektor
kann verwendet werden. Der abgeleitete Selektor definiert einen Stil für die untergeordneten Elemente in einem Element, zum Beispiel:
li strong { font-style : italic;}
dient zum Definieren eines Kursivschrift für das untergeordnete Element, stark unter li. Fettschrift.
　6.id-Selektor
Das CSS-Layout wird hauptsächlich mithilfe der Ebene „div“ implementiert, und der Stil des div wird durch den „id-Selektor“ definiert. Beispielsweise definieren wir zunächst eine Ebene

und definieren diese dann im Stylesheet wie folgt:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666 ;}
Wobei „menubar“ der von Ihnen definierte ID-Name ist. Beachten Sie das „#“-Zeichen davor.
Der ID-Selektor unterstützt auch die Ableitung, zum Beispiel:
#menubar p { text-align : right; 10px; }
Diese Methode wird hauptsächlich zum Definieren von Ebenen und solchen verwendet, die komplexer sind und haben viele abgeleitete Elemente.
6. Kategorieauswahl
Verwenden Sie einen Punkt in CSS, um die Kategorieauswahldefinition anzugeben, zum Beispiel:
.14px {color : #f60 ;font-size:14px ;}
auf der Seite, Verwenden Sie die Methode class="category name", um Folgendes aufzurufen:
14px-Schriftgröße
Diese Methode ist relativ einfach und flexibel und kann jederzeit entsprechend den Anforderungen erstellt und gelöscht werden Seite.
7. Definieren Sie den Linkstil
Vier Pseudoklassen werden in CSS verwendet, um den Linkstil zu definieren, nämlich: a:link, a:visited, a:hover und a:active, zum Beispiel:
a :link{font-weight : Bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : Bold ;text-decoration : none ;color : #c30 ;}
a :hover {Schriftstärke: fett;Textdekoration: unterstrichen;Farbe: #f60;}
a:active {Schriftstärke: fett;Textdekoration: keine;Farbe: #F90;}
Oben Die Anweisungen definieren jeweils die Stile von „Links, besuchten Links, wenn die Maus darüber ist und wenn die Maus angeklickt wird“. Beachten Sie, dass Sie in der oben genannten Reihenfolge schreiben müssen, da die Anzeige sonst möglicherweise anders ausfällt als erwartet. Denken Sie daran, dass die Reihenfolge „LVHA“ lautet.