Zusammenfassung einiger versteckter erweiterter Attributverwendungen in CSS2

Zählerschritt

Haben Sie sich schon oft gewünscht, eine geordnete Liste zu haben oder alle Titel eines Artikels automatisch nummerieren zu lassen? Leider gibt es noch keine Unterstützung für CSS3-Eigenschaften. Aber in CSS 2.1 bietet Counter-Inkrement eine Lösung. Dies bedeutet, dass es es schon seit mehreren Jahren gibt und in IE8 unterstützt wird.

Mit dem :before-Pseudoelement und dem Inhaltsattribut kann Counter-Inkrement automatische Nummern zu allen HTML-Tags hinzufügen. Auch verschachtelte Kodierungen werden unterstützt.

Beispiel

Um Überschriften zu kodieren, setzen Sie den Rechner zurück:

   body {counter-reset: thecounter}

Der folgende Stil gibt jeder Überschrift ein „Abschnitt“-Präfix und dann das Zahl, nachdem sie automatisch um 1 erhöht wird (dies ist die Standardeinstellung und kann weggelassen werden), wobei der Zähler der Name des Rechners ist:

.counter h1:before {
counter-increment: thecounter 1;
content:"Section"counter(thecounter)":";
}

Beispiel

Für ein Nest das codierte Liste, setzen Sie den Zähler zurück und deaktivieren Sie dann die automatische Kodierung für c34106e0b4e09414b63b2ea253ff83d6, da es nicht verschachtelt ist:

ol {
counter-reset: section;
list-style-type: none;
}

Stellen Sie dann jedes 25edfb22a4f469ecb59f1190150159c6 auf automatische Nummerierung ein, das Trennzeichen ist ein Punkt ( .), gefolgt von einem Leerzeichen

li:before {
counter-increment: section;
content: counters(section,".")"";
}

HTML-Code:

<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 1.1 -->
<li>item</li> <!-- 1.2 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<ol>

Browserunterstützung: CSS 2.1., alle modernen Browser, IE 7+.

Anführungszeichen

Haben Sie Probleme, weil Ihr CMS nicht weiß, wie Anführungszeichen richtig konvertiert werden? Beginnen Sie also mit der Verwendung des quotes-Attributs. Auf diese Weise können Sie jedes Symbol individuell anpassen. Sie können dann die Pseudoelemente :before und :after verwenden, um Anführungszeichen für jedes gewünschte Element anzugeben. Leider unterstützen Webkit-Browser dieses Attribut nicht – nach Tests hat Chrome 11 damit begonnen, dieses Attribut zu unterstützen (frühere Versionen haben es nicht getestet).

Beispiel

Die ersten beiden Symbole bestimmen die Anführungszeichen für den Zitatinhalt der ersten Ebene, die letzten beiden Symbole werden für den Zitatinhalt der zweiten Ebene verwendet und so weiter:

q {
quotes: '«' '»' "‹" "›";
}

Die folgenden zwei Zeilen werden verwendet, um Anführungszeichen für die ausgewählten Elemente anzugeben:

q:before {content: open-quote}
q:after {content: close-quote}

Dies ist ein sehr 1244aa79a84dea840d8e55c52dc97869schönes9c3e8ae475e7f023c5ba43842c1b434e Zitat.c8f1720b047c55e91c75b0adcc1f4c09Es wird lila aussehen:
„Das ist ein sehr ‹schönes› Zitat.»

Browserunterstützung: CSS 2.1., zusätzlich zu WebKit, IE 7 und IE6 Alle modernen Browser. Aber Chrome unterstützt es. . .

Frage: Muss das CSS-Dokument auf UTF-8 eingestellt sein, um Symbole direkt hinzuzufügen? Das ist eine sehr verworrene Frage. Leider kann ich keine eindeutige Antwort geben. Ich habe die Erfahrung gemacht, dass es nicht notwendig ist, einen bestimmten Zeichensatz festzulegen, und dann ist der UTF-8-Zeichensatz möglicherweise falsch, weil er die falschen Zeichen anzeigt (z. B. „»“). Verwenden Sie stattdessen den Zeichensatz iso-8859-1 und alles wird normal sein.

W3C beschreibt es so: „Da die im vorherigen Beispiel durch ‚Anführungszeichen‘ definierten Anführungszeichen bequem auf der Computertastatur positioniert sind, erfordern hochwertige Zeichen einen anderen 10646-Zeichensatz.“

CSS3-Eigenschaften, von denen Sie vielleicht schon gehört haben, sich aber nicht erinnern

Gegen Ende wollen wir uns einige CSS3-Eigenschaften ansehen, die weniger beliebt und nicht so häufig benötigt werden wie border-radius und box-shadow.

Textüberlauf

Vielleicht stoßen Sie häufig auf dieses Problem: Ein Container ist zu klein für den darin enthaltenen Text, und dann müssen Sie Javascript verwenden, um die Zeichenfolge abzuschneiden und „…“ hinzuzufügen. Symbol, um Textüberlauf zu vermeiden.

Vergiss es! Mit CSS3 und text-overflow: ellipsis können Sie erzwingen, dass Text mit „…“ endet, wenn er länger als die Breite seines Containers ist. Die einzige Voraussetzung besteht darin, overflow:hidden festzulegen. Leider unterstützt Firefox dieses Attribut nicht, aber es sieht so aus, als ob es in einer neueren Version unterstützt wird.

Beispiel

div {
width: 100px;
text-overflow: ellipsis;
}

Browserunterstützung: CSS 3, die neueste Version aller Browser, außer Firefox, IE unterstützt sie ab IE6, und es heißt, dass Firefox auch Unterstützung bieten wird 6,0—— Hoffe es.

Wortumbruch

Wenn sich der Text in einem schmalen Container befindet, ist ein Teil davon möglicherweise zu lang, um korrekt umgebrochen zu werden. Beispielsweise bereiten Links häufig Probleme. Wenn Sie Überlauftext nicht mit „overflow:hidden“ ausblenden möchten, können Sie „word-wrap“ auf „break-word“ setzen, wodurch die Zeichenfolge umbrochen wird, wenn sie die Breitenbeschränkung des Containers erreicht.

Beispiel

div {
width: 50px;
word-wrap: break-word;
}

Browserunterstützung: CSS 3, alle modernen Browser.

Größe ändern

Wenn Sie Firefox oder Chrome verwenden, müssen Sie bemerkt haben, dass sich in der unteren rechten Ecke des Textfelds standardmäßig ein kleiner Griff befindet, mit dem Sie die Größe ändern können . Dieses Standardverhalten wird durch die CSS3-Eigenschaft resize: Both implementiert.

Aber es ist nicht auf den Textbereich beschränkt. Es kann für alle HTML-Elemente verwendet werden. Die horizontalen und vertikalen Werte steuern, ob die Anpassung horizontal oder vertikal erfolgt.

Bitte beachten Sie: Wenn für das display:block-Element overflow:visible festgelegt ist, ist das Größenänderungsattribut ungültig (die ursprüngliche Beschreibung hierfür ist unbekannt – von Shenfei).

Browserunterstützung: CSS3, andere aktuelle Browser außer Opera und IE.

Hintergrundanhang

当你为一个设置了overflow:auto的元素指定背景图片的时候，当内容太多而出现滚动条后，拖动滚动条就会发现背景图片的位置是固定的，而不是随着滚动条移动。如果你想要背景图片随着内容而滚动，可以设置background-attachment:local。

浏览器支持: CSS 3，除了Firefox以外的所有现代浏览器，Firefox是支持background-attachment属性的，只是不支持local值.

text-rendering

随着越来越多的网站开始用@font-face来渲染文字，易读性开始被关注了。小号字体上，文字会更容易出现。由于目前还没有CSS属性控制显示在线字体的微妙细节，你可以利用text-rendering来启用kerning 和 ligatures。

Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性，而后者，你需要将其设置为optimizeLegibility。

浏览器支持: CSS3, 所有WebKit 和Firefox浏览器.

transform: rotateX/transform: rotateY

如果你已经开始使用CSS3，那么你可能会比较熟悉transform: rotate()，这个在z轴上旋转元素的属性。

但是你是否也知道，它也可以更深入的旋转的(比如，围绕x轴和y轴)？ 这些变形结合-webkit-backface-visibility: hidden会更合适。

示例

如果你鼠标经过这个元素，它将会旋转180°，倒转过来:

div:hover {
transform: rotateY(180deg);
}

小技巧:如果只是映射一个元素，你可以设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).

浏览器支持: CSS3, WebKit、firefox、Opera以及IE9

Das obige ist der detaillierte Inhalt vonZusammenfassung einiger versteckter erweiterter Attributverwendungen in CSS2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!