Hinweis: Der folgende Artikel hilft Ihnen dabei: 10 zufällige CSS-Tricks, die Sie vielleicht kennen lernen möchten
CSS ist die grundlegende Art, unsere Webseiten zu gestalten. Seine täuschend einfache Syntax ermöglicht es uns, viele Dinge zu tun, um die visuelle Ebene unserer Arbeit zu beeinflussen. Und vor allem mit CSS3 ist die Sprache noch leistungsfähiger geworden.
Es gibt viele nützliche CSS-Techniken und -Tricks, die Sie nutzen können.
Dies ist eine Sammlung einiger nützlicher CSS-Snippets, die Sie möglicherweise in Ihrem Toolkit behalten möchten.
1. Stellen Sie die Schriftgröße des Textkörpers auf 62,5 % ein, um die Konvertierung zu vereinfachen
Wenn Sie relative Einheiten (em) für Ihre Schriftgrößen verwenden möchten, erleichtert die Angabe von 62,5 % für die Eigenschaft „font-size“ des Textkörpers die Konvertierung von px in em. Auf diese Weise muss bei der Konvertierung in em der px-Wert durch 10 geteilt werden (z. B. 24px = 2,4em).
body { Schriftgröße: 62,5 %; /* Schriftgröße 1em = 10px */ } p { Schriftgröße: 1.2em; /* 1.2em = 12px */ }
2. Entfernen Sie die Gliederung für WebKit-Browser
Wenn Sie den Fokus (:focus) auf ein Eingabeelement richten, ist Ihnen vielleicht aufgefallen, dass Safari ein hinzufügt blauer Rand um ihn herum (und Chromeein gelbes).
Wenn Sie diesen Rahmenumriss entfernen möchten, können Sie die folgende Stilregel verwenden (dadurch wird der Umriss aus Textfeldern entfernt):
Eingang[type=”text”]:focus { Gliederung: keine; }
Bitte beachten Sie, dass die Gliederung aus Gründen der Barrierefreiheit verwendet wird, damit leichter erkennbar ist, welches Eingabefeld aktiv ist. Dies ist von Vorteil für Personen mit motorischen Beeinträchtigungen, die kein Point-and-Click-Gerät (z. B. eine Maus) verwenden können und daher auf alternative Mittel zum Navigieren auf einer Webseite angewiesen sind, z. B. die Tabulatortaste. Die Gliederung ist auch für nichtbehinderte Benutzer nützlich, die Tastaturkürzel verwenden, um zu den Eingabefeldern von Webformularen zu gelangen (so können sie leichter erkennen, welche Eingabe gerade aktiv ist).
Anstatt die Gliederung vollständig zu entfernen, sollten Sie Ihre Eingabefelder daher so gestalten, dass sie darauf hinweisen, dass es sich um das fokussierte Element handelt.
3. Verwenden Sie die CSS-Transformation für interessante Hover-Effekte
Für eine progressive Verbesserung können Sie die Transformationseigenschaft verwenden, die von vielen Browsern mit CSS3-Unterstützung unterstützt wird.
Hier ist ein Trick, um ein Element beim Schweben um 110 % zu vergrößern.
a { -moz-transform: scale(1.1); -webkit-transform: Scale(1.1); -o-transform: Skala(1.1); }
4. Zielen Sie auf IE6- und IE7-Browser ohne bedingte Kommentare
Müssen Sie auf IE-Browser abzielen? Hier ist ein kurzer Hack, der keine bedingten Kommentare erfordert (beachten Sie, dass Ihr CSS daher die automatische Validierung nicht besteht, was in Ordnung ist, wenn Sie wissen, warum dies nicht der Fall ist).
Der folgende Code ändert die Hintergrundfarbe von Divs abhängig davon, in welchem Browser der Benutzer die Webseite anzeigt. Da * bis hin zu IE7 und darunter reicht, verwenden wir nach dieser Deklaration _, sodass IE6 (und darunter) eine andere Hintergrundfarbe als IE7 hat.
div { Hintergrundfarbe: #999; /* alle Browser */ *Hintergrundfarbe: #ccc; /* füge ein * vor der Eigenschaft hinzu – IE7 und niedriger */ _background-color: #000; /* füge ein _ vor der Eigenschaft hinzu – IE6 und niedriger */ }
5. Unterstützt Transparenz/Opazität in allen gängigen Browsern
Dieses Beispiel verleiht dem div-Element eine Deckkraft von 70 %. Wir müssen proprietäres CSS verwenden, damit es im Internet Explorer funktioniert (wodurch unser Code gemäß den W3C-Standards ungültig wird).
div { /* standardkonforme Browser */ Deckkraft:0,7; /* Folgendes wird von standardbasierten Browsern ignoriert */ -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”; /* IE8 */ Filter: Alpha(Deckkraft=70); /* IE 5-7 */ }
6. Verwenden Sie !important, um normale CSS-Vorrangregeln außer Kraft zu setzen
Wenn in CSS zwei Eigenschaften auf dasselbe Element angewendet werden, wird diejenige wirksam, die sich weiter unten im Stylesheet befindet. Durch die Verwendung von !important am Ende eines Eigenschaftswerts kann dies jedoch geändert werden.
Nehmen wir zum Beispiel diese Stilregeln:
h1 { Farbe: grün; } h1 { Farbe: rot; }
Das h1-Element hat mit dem oben genannten CSS eine rote Farbe.
Wenn wir die Priorität der Stilregel ändern möchten, ohne die Reihenfolge der Eigenschaftsdeklaration zu ändern, gehen wir einfach wie folgt vor:
h1 { Farbe: grün !wichtig; } h1 { Farbe: rot; }
Jetzt ist das
-Element grün.
7. Zentrieren eines Elements mit fester Größe
Hier ist eine Möglichkeit, ein Div mit fester Breite/fester Höhe in der Mitte seines Containers zu zentrieren. Dies könnte angepasst werden, um Text, Bilder usw. in ihren Containern zu zentrieren.
Im Wesentlichen führen wir ein wenig Arithmetik durch, um das Element mit fester Größe mithilfe absoluter Positionierung und Ränder zu zentrieren. Note Damit dies funktioniert, muss der übergeordnete Container über die Eigenschaft „position: relative“ verfügen.
div { Position: absolut; oben: 50 %; links: 50 %; Breite: 400px; Höhe: 300px; Rand oben: -150px; /* 1/2 Ihrer Elementhöhe*/ Rand links: -200px; /* 1/2 Ihrer Elementbreite */ }
8. Einfache Webfonts mit Google Font API
Mit Web-Schriftarten können Sie über die normalen websicheren Schriftarten hinausgehen, indem Sie die @font-face-Regel von CSS nutzen. Derzeit sind die Browser jedoch nicht einheitlich in der Implementierung von @font-face. Genauer gesagt unterscheiden sich Webbrowser in den von ihnen unterstützten Schriftartdateitypen (hoffentlich ändert sich dies mit den WOFF-Standards).
Darüber hinaus müssen Sie mit den von Ihnen verwendeten Schriftarten vorsichtig sein, da einige davon möglicherweise nicht für die Verwendung im Internet lizenziert sind.
Um die Probleme mit @font-face zu umgehen, hilft die Google Font API.
Hier ist ein Beispiel für die Verwendung der Cantarell-Schriftart auf
-Elementen, die die Vorteile der Google Fonts API nutzt.
Wenn Sie die Cantarell-Schriftart von Google Font API verwenden möchten, referenzieren Sie zunächst das Remote-Stylesheet in Ihren
-Tags als solches:Um die Schriftart in h1-Elementen zu verwenden, verwenden Sie einfach die CSS-Eigenschaft „font-family“.
h1 { Schriftfamilie: „Cantarell“Arial, Serife; /* Verwenden Sie für alle Fälle einen Schriftartenstapel. */ }
9. Verhindern Sie den Zeilenumbruch von Textelementen
Manchmal möchten Sie nicht, dass Ihr Text in die nächste Zeile umgebrochen wird, wenn er das Ende der Breite des enthaltenden Elements erreicht.
So funktioniert ein normaler Ankertext, wenn er das Ende der Breite seines übergeordneten Elements erreicht:
Beachten Sie, dass der Link an einem Leerzeichen im Text umgebrochen wird. Was wäre, wenn wir möchten, dass sich unsere Links immer in derselben Zeile befinden (dh um ein Umbrechen zu verhindern)?
Einfach. Wir verwenden einfach die White-Space-Eigenschaft.
a { Leerzeichen: nowrap; }
Jetzt werden unsere Links nicht umbrochen.
10. Text vertikal ausrichten
Wir können verschiedene Methoden zum horizontalen Ausrichten von Text verwenden (z. B. text-align: center oder margin: 0 auto), aber es ist etwas schwieriger, Text vertikal auszurichten.
Für einzeiligen Text können wir jedoch die Eigenschaft line-height verwenden. Indem Sie die Eigenschaft „line-height“ des Textelements auf die gleiche Höhe wie sein Container setzen, wird es vertikal zentriert.
Hier ist ein AP-Element, das mithilfe von text-align:center horizontal in einem 100x100px-Div zentriert ist:
Wie Sie sehen können, wird Text-Align nicht vertikal zentriert. Um das zu beheben, können wir die Zeilenhöhe auf die gleiche Höhe wie das enthaltende Div (100 Pixel) einstellen.
div { width:100px; Höhe: 100 Pixel; } div p { Zeilenhöhe:100px; }
Note Dies setzt voraus, dass das p-Element keinen Rand oder Abstand hat.
Wenn Sie oben oder unten am p-Element einen Rand oder eine Polsterung haben, müssen Sie diese entsprechend kompensieren oder einfach die Polsterung und den Rand auf 0 setzen, um das Leben einfacher zu machen.
Außerdem wird dieser Trick problematisch, wenn mehr als eine Textzeile vorhanden ist (z. B. wenn der Text umbrochen wird), da zwischen den Textzeilen ein Abstand vorhanden ist, der dem Wert für die Zeilenhöhe entspricht.
Jetzt sind Sie an der Reihe, etwas zu teilen.
