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

, da es nicht verschachtelt ist:

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

Nach dem Login kopieren

Stellen Sie dann jedes

1. auf automatische Nummerierung ein, das Trennzeichen ist ein Punkt ( .), gefolgt von einem Leerzeichen

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

   Nach dem Login kopieren

   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>

   Nach dem Login kopieren

   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: '«' '»' "‹" "›";
   }

   Nach dem Login kopieren

   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}

   Nach dem Login kopieren

   Dies ist ein sehr schönes Zitat.Es 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;
   }

   Nach dem Login kopieren

   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;
   }

   Nach dem Login kopieren

   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);
   }

   Nach dem Login kopieren

   小技巧:如果只是映射一个元素，你可以设置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!