Erstellen einer Website mit Webstandards Tag 7: Erste Schritte mit CSS

Nachdem wir die XHTML-Codespezifikationen verstanden haben, müssen wir das CSS-Layout durchführen. Lassen Sie uns zunächst einige Einführungskenntnisse in CSS einführen. Wenn Sie bereits damit vertraut sind, können Sie diesen Abschnitt überspringen und direkt mit dem nächsten Abschnitt fortfahren.

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

Analyse einer typischen CSS-Anweisung:

p {COLOR: #FF0000; BACKGROUND: #FFFFFF }

Wir nennen „p“ „Selektoren“ (Selektoren), was darauf hinweist, dass wir einen Stil für „p“ definieren möchten; wird in geschweiften Klammern „{}“ geschrieben;

COLOR und BACKGROUND werden als „Eigenschaften“ (PROperty) bezeichnet, und verschiedene Attribute werden durch Semikolons „;“ getrennt; „ und „#FFFFFF“ sind die Werte der Attribute.

2. Farbwert

Der Farbwert kann in RGB-Werten geschrieben werden, zum Beispiel:

Farbe: rgb(255,0,0)

, Es kann auch 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. Schriftart definieren

Der Webstandard empfiehlt die folgende Schriftartdefinitionsmethode:

body { Schriftfamilie: „Lucida Grande“, Verdana, Lucida, Arial, Helvetica, Song Dynasty, Sans-Serif; }

Die Schriftarten werden in der angegebenen 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 Lucida-Grande-Schriftart ist für Mac OS X geeignet Schriftart ist für alle Windows-Systeme geeignet;

Lucida ist für UNIX-Benutzer geeignet

"Songti" ist für Benutzer mit vereinfachtem Chinesisch geeignet;

Wenn keine der aufgeführten Schriftarten verfügbar ist , die standardmäßige serifenlose Schriftart wird garantiert aufgerufen;

4. Gruppenauswahl

Wenn mehrere Elemente dieselben Stilattribute haben, können sie zusammen eine Anweisung aufrufen, und die Elemente sind durch Kommas getrennt:

p, td, li { Schriftgröße: 12px }

5. Abgeleiteter Selektor

Sie können Verwenden Sie einen abgeleiteten Selektor, um Elemente in einem Element auszuwählen. Untergeordnete Elemente definieren Stile, zum Beispiel:

li strong { font-style : italic;}

Es geht darum, einen kursiven, aber nicht fetten Stil für das starke Unterelement unter li zu definieren.

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

Definieren Sie es dann im Stylesheet so:

#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; margin-top : 10px; >

Diese Methode wird hauptsächlich zum Definieren von Ebenen und Elementen verwendet, die komplexer sind und über mehrere abgeleitete Elemente verfügen.

6. Kategorieauswahl

Verwenden Sie einen Punkt in CSS, um die Kategorieauswahldefinition anzugeben, zum Beispiel:

.14px { Farbe : #f60 ;font-size:14px ;}

Verwenden Sie auf der Seite die Methode class="category name", um Folgendes aufzurufen:

Schriftgröße 14px

Diese Methode ist relativ einfach und flexibel und kann sein jederzeit angepasst. Seiten müssen erstellt und gelöscht werden.

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 : fett ;Textdekoration: keine;Farbe: #c30; : fett ;textdekoration : keine ;farbe : #F90 ;}

Die obigen Anweisungen definieren jeweils „Links, besuchte Links, wenn die Maus oben geparkt ist, klicken Sie“ Wenn mit der Maus geklickt wird“-Stil. 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.

Haha, nach so viel Lektüre wird mir etwas schwindelig. Tatsächlich gibt es noch viele weitere grammatikalische Spezifikationen für CSS. Hier sind nur einige, die wir Schritt für Schritt verwenden Es ist unmöglich, mit einem Bissen dick zu werden:)

Das Obige ist der Inhalt von Tag 7 zum Erstellen einer Website mit Webstandards: Erste Schritte mit CSS. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!