Wie Listen und Tabellen mit CSS3 Style

Styling-Listen und Tabellen ist ein bisschen anders als Styling-Gehalt in den Körper der Seite, weil beide Listen und Tabellen bestimmte Tags, die neu definiert werden, um zu steuern, wie Inhalte innerhalb dieser Strukturen sitzt.

Wie zu stylen Listen mit CSS3

Mit Listen können Sie Textattribute wie Schriftart auswählen, die Größe und Ausrichtung, und tragen Sie eine Hintergrundfarbe und den Rahmen jedes Listenelement. Darüber hinaus können Sie den gewünschten Listenstil Typ wählen, wählen Sie die Position relativ die Kugel auf den Listenpunkt Inhalt, und wählen Sie Ihre eigenen Kugel Grafik zu verwenden.

Das Geheimnis zu halten alle Listenstile ist, um Ihre Liste zwischen den Tags mit einer einzuwickeln Ich würde Attribut und erstellen Sie Stile für die, und Tags. Dies ist besonders nützlich, wenn Navigationssysteme mit Listenformatierung zu erstellen:

Hier sind die Stile, die Sie vielleicht für Ihre Liste in der CSS erstellen. Dieser Code enthält Stile für normale und Hover-Link lautet:

#nav {position: absolute-width: 539px; height: 57px; z-index: 4-right: 30px;} # nav ul {list-style-type: none; margin: 0px; padding-top: 31px; padding- rechts: 0px; padding-bottom: 0px; padding-left: 8px;} # nav ul li {display: inline-font-family: Arial, Helvetica, sans-serif-font-size: 14px; font-weight: Bold- color: # 4e2d17-padding: 0px; margin: 0px;} # nav ul li a: link, #nav ein ul li: visited {text-decoration: none; color: # 4e2d17-background-color: # FAF8ED-padding- top: 57px; padding-right: 6px; padding-bottom: 10px; padding-left: 6px;} # nav ul li a: hover {color: # FFF-background-color: # E51B24-}

Das Bild unten zeigt, wie das Navigationsmenü in einem Browser aussieht, wenn ein Besucher die Maus über einen der Links.

bild0.jpg

Wie zu stylen Tabellen mit CSS3

Mit Tabellen und CSS können Sie die gesamte Tabelle, einzelnen Tabellenzellen, ganze Zeilen oder Spalten, und die Inhalte jeder Zelle Stil.

Beginnen Sie, indem Sie eine Tabelle einfügen und das Hinzufügen der gewünschten Inhalte zu jeder der Tabellenzellen. Wenden Sie alle Zellauffüllung und Zellabstand auf den Tisch, wie gewünscht. Dann, um den Prozess zu machen von Stylen der Tabelle zu erleichtern, sollten Sie eine hinzufügen Ich würde Attribut mit dem Tag beim Öffnen der Tabelle und die Klasse Attribut auf den ersten Tabellenzeilen-Tag Öffnung:

id = "longjohns" width = "300" border = "0" cellpadding = "10" cellspacing = "0">class = "longjohnsth">
Kinder Silk Long JohnsPreis
Crewneck Lange Unterwäsche Top17,95 $
 Lange Unterwäsche Hose17,95 $

Als nächstes erstellen Sie einen Stil für die Ich würde, mit dem Sie die wichtigsten Teile der Tabelle formatieren können, wie zum Beispiel die Größe der Tabelle, Hintergrundfarbe und Grenze:

#longjohns {background-color: # 996-height: 200px; width: 300px; color: # FFF-}

Nachdem Sie die Tabelle Haupt Formatierung abgeschlossen haben, können Sie erweiterte combinators erstellen (auch genannt abhängige Selektoren) Und benutzerdefinierte Stile für die verschiedenen Tabellenzellen, wie unten dargestellt.

image1.jpg
#longjohns tr td {border-top-width: 0px; border-right; width: 0px; border-bottom-width: 1px; border-left; width: 0px; border-top-style: none; border-right; Stil : none; border-bottom-style: gepunkteten border-left; style: none; border-bottom-color:. #FFF -} longjohnsth {font-weight: bold-background-color: # C9C9AD-color: # 000- }

Ähnliche

Menü