Drei CSS-Tipps, die Sie kennen müssen

Drei CSS-Tipps, die Sie kennen müssen

Der harte Wettbewerb zwischen verschiedenen Browsern führt dazu, dass immer mehr Menschen Geräte verwenden, die die neuesten und fortschrittlichsten W3C-Webstandards unterstützen, eine interaktivere Möglichkeit des Zugriffs das Internet. Dies bedeutet, dass wir endlich die Vorteile eines leistungsfähigeren und flexibleren CSS nutzen können, um saubereren und besser gepflegten Browser-Frontend-Code zu erstellen. Werfen wir nun einen Blick auf einige spannende CSS-Funktionen, die Sie vielleicht noch nicht kennen.

Verwenden Sie attr(), um HTML-Attributwerte in CSS anzuzeigen

Die Funktion attr() erschien bereits im CSS 2.1-Standard, erfreut sich aber erst jetzt allgemeiner Beliebtheit. Es bietet eine clevere Möglichkeit, Attribute für HTML-Tags in CSS zu verwenden, was Ihnen in vielen Fällen dabei helfen kann, den Prozess einzusparen, der zuvor eine JavaScript-Verarbeitung erforderte.

Um diese Funktion nutzen zu können, müssen Sie drei Elemente verwenden: einen :before- oder :after-CSS-Pseudoklassenstil, das .content-Attribut und ein attr() mit dem Namen des gewünschten HTML-Attributs Ausdruck verwenden. Wenn Sie beispielsweise den Wert des data-PRefix-Attributs im Titel

anzeigen möchten, können Sie ihn wie folgt schreiben:

h3:before { content: attr(data-prefix) " "; }

Dies ist eine Überschrift

Offensichtlich zeigt dieses Beispiel nicht, wie nützlich es ist, sondern zeigt nur seine Grundlagen Verwendung. Versuchen wir ein nützlicheres Beispiel. Eine hervorragende Anwendung von attr() besteht darin, Links zu Seiten anzuzeigen, wenn der Benutzer die Seite druckt. Um dies zu erreichen, können Sie schreiben:

@media print { a:after { content: " (link to " attr(href) ") "; .com">Besuchen Sie unsere Homepage

Sobald Sie diese Technik kennen, werden Sie überrascht sein, wie praktisch sie Ihnen bei Ihrer Arbeit sein kann!

Tipp: In der neuen Version des CSS3-Standards wurde die Funktion attr() erweitert und kann in verschiedenen CSS-Tags verwendet werden.

Verwenden Sie counter(), um automatisch Seriennummern zur Liste hinzuzufügen

Eine weitere Funktion, die bereits in CSS 2.1 unterstützt wird, ist counter(). Mit dieser Funktion können Sie die Seriennummer einfach zum Seitentitel hinzufügen , Bereich Fügen Sie Seriennummern zu Blöcken und verschiedenen anderen zusammenhängenden Seiteninhalten hinzu. Damit müssen Sie sich nicht auf die Verwendung von

beschränken, um diesen Effekt zu erzielen, sondern können benutzerdefinierte Zahlenfolgen auf der Seite flexibler verwenden.

Der Schlüssel ist, dass es wirklich einfach ist: Fügen Sie counter() zum Inhaltsattribut in der :before-Pseudoklasse hinzu:

body { counter-reset: heading } h4:before {; counter-increment : heading; content: „Heading #“ counter(heading) „.“; Thema Die Seite des Mozilla Developer Network. Es gibt ein hervorragendes Beispiel für die Verwendung verschachtelter Zähler.


Verwenden Sie calc(), um Arithmetik durchzuführen
Lassen Sie uns zu guter Letzt über die Funktion calc() sprechen. Mit dieser Funktion können Sie einfache arithmetische Berechnungen durchführen, beispielsweise die Berechnung der Länge und Breite eines Elements, ohne nicht wartbaren Javascript-Code schreiben zu müssen. Diese Funktion unterstützt alle einfachen Grundrechenarten, einschließlich Addition, Subtraktion, Multiplikation und Division.
Angenommen, Sie möchten ein Element erstellen, dessen Breite die volle Breite seines übergeordneten Elements einnimmt, aber einige Pixel für andere Zwecke breit lassen:
.parent { width: 100 %; border : solid black 1px; position: absolute; width: calc(90% - 100px); >

Wunderschön, nicht wahr? Eine ausführlichere Einführung finden Sie in der W3C-CSS-Berechnungsspezifikation.

Wir können immer deutlicher feststellen, dass CSS so weit ausgereift ist, dass es JavaScript in einigen Methoden ersetzen kann, was die Arbeit von Webentwicklern erheblich vereinfacht. Es wäre dumm, diese Funktionen nicht zu nutzen.


Die oben genannten drei CSS-Fähigkeiten, die Sie kennen müssen, finden Sie auf der chinesischen PHP-Website (www.php.cn).