Liste und Erweiterungseigenschaften von Cascading Style Sheets (CSS)
Listen gestylt mit Cascading Style Sheets (CSS) sind wesentlich robuster als Listen mit Standardliste HTML-Formatierung gestylt. Mit CSS können Sie ganz einfach den Listentyp auswählen, für beide nummeriert und Aufzählungen, stellen Sie die Position der Kugeln in Bezug auf die Inhalte innerhalb der Liste, und sogar wählen Sie Ihre eigene Grafik für das Aufzählungszeichen Bild zu verwenden.
list-style-type: Für geordnete Listen, setzen Sie die Liste Typ dezimal, Unter-roman, Ober-roman, Unter-alpha, Ober-alpha, oder keiner. Wenn ungeordnete Listen erstellen, wählen Sie die Scheibe, Kreis, oder Platz Listentyp. Die Abbildung zeigt Beispiele für jede dieser Listentypen.
li {list-style-type: kreis-}list-style-image: Um Ihre eigenen Bild als Aufzählungszeichen, geben Sie den Speicherort und den Dateinamen des gewünschten Bildes als Attribut für die ungeordnete Liste Tag verwenden. Sie können auch die Kugel Teil der Liste Styling entfernen, indem Sie den Eigenschaftswert mit keiner.
ul {list-style-image: url (images / mybullet.gif) -}Um eine Liste mit verschiedenen Grafiken für jedes Listenelement erstellen, benutzerdefinierte Stile für jedes Listenelement erstellen und dann jeden Tag mit dem passenden anhängen Klasse Attribut, wie unten dargestellt und im folgenden Codebeispiel gezeigt, die auch jedes Element in der Liste einen Hyperlink macht:
.redarrow {list-style-image: url (redarrow.gif) -} bluearrow. {list-style-image: url (bluearrow.gif) -}list-style-position: Mit der Position-Eigenschaft können Sie die Kugel in Bezug auf Inhalt innerhalb jedes Listenelement zu positionieren. Die Position kann entweder innerhalb oder außerhalb des Text befinden. Wie unten dargestellt, wenn auf innerhalb, der Text fließt unterhalb der Kugel am linken Rand, und wenn auf draußen, Die Kugel bleibt außerhalb jeder gewickelt Text, wie ein hängender Einzug.
li {list-style-position: Draußen-}Mit Erweiterungseigenschaften, können Sie die Art und Weise ändern, um die Cursor-Displays in verschiedenen Umständen, Seitenumbrüche erstellen, und fügen Sie Spezialeffekt-Filter auf bestimmte Elemente auf der Seite.
Leider seit ihrer Gründung, nur sehr wenige von ihnen werden von den meisten gängigen Browsern unterstützt. Wenn Sie eines dieser Attribute verwenden möchten, testen sie in so vielen Browsern wie können Sie auf Mac und PC-Plattformen, um sicherzustellen, dass sie funktionieren und / oder in einer akzeptablen Weise fehlschlagen.
page-break-before/-nach: Dieses Attribut zwingt einen Seitenumbruch, wenn eine Seite gedruckt wird, entweder vor oder nach dem Objekt mit diesem Attribut gestylt. Wählen links, Recht, immer, oder Auto Werte für die Zeit vor und / oder nach dem gewünschten Stil Objekt, wie im folgenden:
# Sidebar3 {page-break-before: always-page-break-after: left;}Mauszeiger: Sie können einen anderen Cursor angezeigt werden angeben, wenn ein Besucher ein Objekt die Maus über die mit diesem Attribut gestylt. Wähle aus Fadenkreuz, Text, warte ab, Standard, Hilfe, E-Resize, ne-resize, n-Resize, nw-resize, w-resize, sw-resize, s-Resize, se-resize, und Auto.
Es gibt auch 15 neue CSS3 Cursor-Optionen, die alle in der neuesten Version von Firefox arbeiten, Chrome, Safari, Opera und IE9 +: keiner, Kontextmenü, Zelle, vertical-Text, alias, Kopieren, No-drop, nicht erlaubt, ew-Resize, ns-Resize, Nachrichten-Resize, NWSE-Resize, col-Resize, row-Resize, und All-Scroll. Um zu sehen, Beispiele für diese Cursor in Aktion, Besuch Sitepoint.
#helpmenu {cursor: Hilfe-}Filter: Sie können aus verschiedenen Spezialeffektfilter, einschließlich Alpha, BlendTrans, Blur, Chroma, Schlagschatten, FlipH (Flip horizontal), FlipV (Flip vertikal), Glühen, Grau, invertieren, Licht, Maske, RevealTrans, Schatten, Welle wählen, und Xray. Die meisten Filter erfordern numerische Eingabe, wie beispielsweise das Maskenfilter, der den hexadezimalen Wert der Farbe für die Maske enthalten muss, wie in Filter: Mask (Farbe = # FFCC33) -.
#details {Filter: Wech-}Obwohl es wahr ist, dass diese Filter ein paar coole und ungewöhnliche Dinge tun kann, die längste Zeit haben sie in allen anderen Browsern als IE nicht funktioniert. Um ein Beispiel für einige dieser Filter zu sehen, öffnen Sie den folgenden Link in einer IE-Browser: Xentrik. Zum Glück sind viele dieser Filter wurden als neue CSS3 Stile neu erfunden, die viel besser Browser-Unterstützung haben.