AnalyseCSS-ListenstilAttributlistenstil
Auf täglichen Produktionsseiten kann der Attributlistenstil häufig in Listenelementobjekten verwendet werden, wird jedoch nicht häufig verwendet. Im Allgemeinen ist es fast in Ordnung, die gesamte Seite zurückzusetzen, indem man sie auf „Keine“ setzt. Vielleicht wissen viele Leute, einschließlich mir, nicht viel über die detaillierteren Attribute des Attributs list-style-type Es ist wahrscheinlicher, dass die Attribute list-style und Das Konzept des Attributs list-style-type relativ vage ist. Jetzt müssen Sie es erneut aufrufen und lernen, sodass es wie folgt organisiert ist.
Bedeutung und Verwendung
Kurzschriftattribut im Listenstil legt alle Listenattribute in einer Anweisung fest.
Beschreibung
Dieses Attribut ist ein Kurzattribut, das alle anderen Listenstilattribute abdeckt. Da es für alle Elemente mit der Anzeige list-item gilt, kann es nur für li-Elemente in normalem HTML und XHTML verwendet werden. Tatsächlich kann es jedoch auf jedes Element angewendet werden und wird von list-item-Elementen geerbt.
kann die folgenden Attribute der Reihe nach festlegen:
•list-style-type
•list-style-position
•list- style -image
◆list-style
Definition: Ein Kurzattribut, das zum Festlegen aller Attribute einer Liste in einer Deklaration verwendet wird. Dieses Attribut ist ein Kurzattribut, das abdeckt Alle anderen Listenstilattribute werden nur von Objekten beeinflusst, deren Anzeigewert list-item entspricht (z. B. li-Objekte).
Verwandt mit: list-style-imagelist-style-positionlist-style-type
◆list-style-image
Beschreibung: Legt das Listenelement-Markup als fest oder ruft es ab Objektbild. Wenn der Wert dieses Attributs „None“ ist oder das Bild unter der angegebenen URL-Adresse nicht angezeigt werden kann, wird das Attribut „list-style-type“ wirksam.
Wert:
keine: Standardwert. Ohne Angabe eines Bildes
url(url): Geben Sie ein Bild mit einer absoluten oder relativen URL-Adresse an
Legen Sie das Bild als Element-Tag in der Liste fest:
ul
{
list-style-image:url("/i/arrow.gif");
list-style-type:square;
}Beispiel
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>◆list-style-position
Beschreibung: Legt fest oder ruft ab, wie die Listenelement-Tags als Objekte entsprechend dem Text angeordnet sind. Wenn der linke äußere Patch (margin-left) eines Listenelements auf 0 gesetzt ist, wird die Listenelementmarkierung nicht angezeigt. Der linke Rand kann auf mindestens 30 eingestellt werden. Funktioniert nur bei Objekten mit einem Anzeigeattributwert gleich list-item. Wie Li-Objekt.
Wert:
außerhalb: Standardwert. Das Listenelement-Tag wird außerhalb des Textes platziert und der umgebende Text wird nicht entsprechend dem Tag
inside ausgerichtet: Das Listenelement-Tag wird innerhalb des Textes platziert und der umgebende Text wird entsprechend dem Tag < ausgerichtet 🎜>
Instanz gibt die Liste an Position des Listenelement-Tags:
ul
{
list-style-position:inside;
}<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>◆list-style-type
Dieses Beispiel ändert den Typ der Liste:
Das obige ist der detaillierte Inhalt vonCSS: Detaillierte Erläuterung der Verwendung des Listenstils im Listenstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
