So erstellen Sie kleinere CSS-Aufzählungszeichen


Cascading Style Sheets bieten eine Reihe von Tools zum Anpassen und Steuern des Erscheinungsbilds der Website Ihres Unternehmens. Das Ändern des Aufzählungsstils in einer ungeordneten Liste ist so einfach wie die Verwendung von „Listenstil-Typ:“, um einen Kreis, ein Quadrat oder eine Disc anzugeben. Es ist auch möglich, ein Bild zu ersetzen, um Listenaufzählungen weiter anzupassen. Die Größe der Listenaufzählungszeichen wird jedoch durch die aktuelle Schriftgröße bestimmt. Um die genaue Größe der Aufzählungspunkte der Seite zu steuern, um das Erscheinungsbild oder das Markenbild einer Website zu ergänzen, müssen Sie das Pseudoelement „: before“ verwenden.

1


Öffnen Sie die CSS-Datei in einem Texteditor.

2

Geben Sie die Schriftgröße und -familie für den Hauptteil der Webseite an. Verwenden Sie für dieses Beispiel:


Körper {Schriftfamilie: Verdana, Arial, Helvetica, serifenlos; Schriftgröße: 14pt; }}

Diese beiden Anweisungen setzen die Schriftart der Seite auf allgemein verfügbare serifenlose Schriftarten mit einer Größe von 14 Punkten. Die einzige Möglichkeit, um sicherzustellen, dass Ihre Aufzählungszeichen kleiner als der Begleittext sind, besteht darin, die Schriftgröße anzugeben, anstatt sich auf eine Standard-Browsereinstellung zu verlassen.

3

Setzen Sie den ungeordneten Listenstil mit der folgenden Anweisung auf none zurück:

ul {Listenstil: keine; }}

Diese Anweisung überschreibt erneut die Standardeinstellungen des Browsers, um den ungeordneten Listenstil auf „Keine“ zurückzusetzen.

4

Fügen Sie das Symbol ein, das für das Aufzählungszeichen verwendet werden soll, und geben Sie die zu verwendende Schriftgröße wie folgt an:

ul li: before {content: „•“; Schriftgröße: 10pt; }}

Das Pseudoelement „: before“ fügt für jedes Listenelement ein Aufzählungselement vor dem Inhalt ein. Die Anweisung „Schriftgröße“ gibt ein etwas kleineres 10-Punkt-Aufzählungszeichen als Listenmarkierung an. Passen Sie die Größe nach Bedarf für Ihre Webseite an.