Der zunehmende Wettbewerb zwischen verschiedenen Browsern führt dazu, dass immer mehr Menschen Geräte verwenden, die die neuesten und fortschrittlichsten W3C-Webstandards unterstützen, um interaktiver auf das Internet zuzugreifen. Dies bedeutet, dass wir endlich die Vorteile eines leistungsfähigeren und flexibleren CSS nutzen können, um einfacheren, besser verwalteten Browser-Frontend-Code zu erstellen. Werfen wir nun einen Blick auf einige spannende CSS-Funktionen, die Sie vielleicht noch nicht kennen.
attr()Die Funktion erschien bereits im CSS 2.1-Standard, ist es aber nur erfreut sich mittlerweile 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, .content -Attribut und einen attr()-Ausdruck mit dem Namen des HTML-Attributs, das Sie verwenden möchten. Wenn Sie beispielsweise den Wert des Attributs data-prefix im Titel anzeigen möchten, können Sie ihn wie folgt schreiben:
h3:before {
content: attr(data-prefix) " ";
}
<h3 data-prefix="Custom prefix">This is a heading</h3>Offensichtlich zeigt dieses Beispiel nicht, wie nützlich es ist, sondern nur seine grundlegende 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 wie folgt schreiben:
@media print {
a:after {
content: " (link to " attr(href) ") ";
}
}
<a href="example.com">Visit our home page</a>Sobald Sie diese Technik kennen, werden Sie überrascht sein, wie praktisch sie Ihnen bei Ihrer Arbeit sein kann!
Tipps: In der neuen Version des CSS3-Standards wurde die Funktion attr() erweitert und kann in verschiedenen CSS-Tags verwendet werden. In CSS2.1 gibt attr() immer einen String zurück. In CSS3 kann attr() viele verschiedene Typen zurückgeben.
Eine weitere Funktion, die bereits in CSS 2.1 unterstützt wird, ist counter() Mit dieser Funktion können Sie bequem Seriennummern hinzufügen Nummern zu Seitentiteln, Blöcken und verschiedenen anderen aufeinanderfolgenden Seiteninhalten. Damit müssen Sie sich nicht darauf beschränken, nur zu verwenden, um diesen Effekt zu erzielen. Sie können benutzerdefinierte Zahlenfolgen auf der Seite flexibler verwenden.
Das Counter-Reset-Attribut legt den Wert des Zählers für die Anzahl der Vorkommen eines bestimmten Selektors fest. Der Standardwert ist 0.
Mit dieser Eigenschaft kann der Zähler auf einen beliebigen positiven oder negativen Wert gesetzt oder zurückgesetzt werden. Wenn keine Zahl angegeben wird, wird standardmäßig 0 verwendet.
Hinweis: Wenn „Anzeige: keine“ verwendet wird, kann der Zähler nicht zurückgesetzt werden. Wenn Sie „Sichtbarkeit: ausgeblendet“ verwenden, können Sie den Zähler zurücksetzen.
Hinweis: Internet Explorer 8 (und höher) unterstützt das Counter-Reset-Attribut, wenn !DOCTYPE angegeben ist.
| Wert | Beschreibung | < /tr>||||||||
|---|---|---|---|---|---|---|---|---|---|
| keine | Standard. Der Auswahlzähler kann nicht zurückgesetzt werden. | ||||||||
| id Definieren Sie den Selektor, die ID oder die Klasse, um den Zähler zurückzusetzen . Zahl body {
counter-reset: heading;
}
h4:before {
counter-increment: heading;
content: "Heading #" counter(heading) ".";
}Nach dem Login kopieren | ||||||||
| inherit | Gibt an, dass der Wert des Counter-Reset-Attributs geerbt werden soll vom übergeordneten Element. |
:before Pseudo- Zu counter() hinzugefügte Klassenattribute:
Wenn Sie mehr über diese Methode zum Nullstellen und Erhöhen des Zählers erfahren möchten, lesen Sie bitte die Seite des Mozilla
Developer Network zu diesem Thema. Es gibt ein hervorragendes Beispiel für die Verwendung verschachtelter Zähler. calc() zum Rechnen verwenden.parent {
width: 100%;
border: solid black 1px;
position: relative;
}
.child {
position: absolute;
left: 100px;
width: calc(90% - 100px);
background-color: #ff8;
text-align: center;
}Lassen Sie uns zu guter Letzt über die Funktion
calc()sprechen. Calc ist die Abkürzung des englischen Wortes calcule. Es handelt sich um eine neue Funktion von CSS3 und wird zur Angabe der Länge von Elementen verwendet. 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.
Wenn der Ausdruck „+“ und „-“ enthält, müssen davor und danach Leerzeichen stehen. Beispielsweise ist es falsch, „widht: calc(12%+5em)“ ohne Leerzeichen zu schreiben. Ausdruck Wenn „*“ und „/“ vorhanden sind, dürfen davor und danach keine Leerzeichen stehen, es wird jedoch empfohlen, Leerzeichen zu lassen. Die Kompatibilität des Browsers mit calc() ist ziemlich gut. Er wird in IE9+, FF4.0+, Chrome19+ und Safari6+ gut unterstützt. Es ist auch notwendig, die Kennung jedes Browserherstellers voranzustellen, aber leider bei den meisten Mobilgeräten Browser unterstützen es noch nicht und derzeit wird es nur von „Firefox für Android 14.0“ unterstützt. Angenommen, Sie möchten ein Element so erstellen, dass seine Breite das übergeordnete Element ausfüllt, aber einige Pixel für andere Zwecke übrig bleiben: Schön, nicht wahr? 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.Das obige ist der detaillierte Inhalt vonDrei CSS-Tipps, die Sie kennen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
