Zusammenfassung der Tipps zur CSS-Verwendung

Zusammenfassung der Tipps zur CSS-Verwendung
Vor Kurzem habe ich mit der Aktualisierung meines Blogs begonnen.
Beim Ändern der Vorlage müssen Sie das CSS-Stylesheet neu schreiben. Ich bin zufällig auf einen Artikel auf instantshift.com gestoßen, in dem gängige CSS-Techniken zusammengefasst sind. Deshalb habe ich ihn zu meiner eigenen Information zusammengestellt und hoffe, dass er für alle von Nutzen sein wird.
Dieser Artikel wird auch in Zukunft weiter aktualisiert.

1. Horizontale Zentrierung des Textes <br />Um einen Textabschnitt in der horizontalen Mitte des Containers zu platzieren, legen Sie einfach die Eigenschaft „text-align“ fest:

Code kopieren
Der Code lautet wie folgt:

Textausrichtung: zentriert;

2. Horizontale Zentrierung des Containers <br />Legen Sie zunächst eine lichte Breite für den Container fest und setzen Sie anschließend den horizontalen Wert des Rands auf „Auto“.

Code kopieren
Der Code lautet wie folgt:

div#Container {
Breite: 760px;
Rand: 0 automatisch;
}

3. Vertikale Zentrierung von Text <br />Um eine einzelne Textzeile vertikal zu zentrieren, stellen Sie die Zeilenhöhe einfach so ein, dass sie der Containerhöhe entspricht.
Beispielsweise befindet sich im Container eine Zahlenreihe.

Code kopieren
Der Code lautet wie folgt:

<div id="Container">1234567890</div>

Dann wird das CSS wie folgt geschrieben:

Code kopieren
Der Code lautet wie folgt:

div#container {Höhe: 35px; Zeilenhöhe: 35px;}

Wenn n Textzeilen vorhanden sind, legen Sie die Zeilenhöhe einfach auf ein N-tel der Containerhöhe fest.

4. Vertikale Zentrierung von Containern <br />Beispiel: Es gibt zwei Container, einen großen und einen kleinen. Wie zentriert man den kleinen Container vertikal?

Code kopieren
Der Code lautet wie folgt:

<div id="groß">
<div id="klein">
</div>
</div>

Stellen Sie zunächst die Position des großen Containers auf relativ ein.

Code kopieren
Der Code lautet wie folgt:

div#groß{
Position: relativ;
Höhe: 480px;
}

Positionieren Sie dann den kleinen Container absolut, verschieben Sie seine obere linke Ecke entlang der Y-Achse um 50 % nach unten und verschieben Sie schließlich seinen oberen Rand um 50 % seiner eigenen Höhe nach oben.

Code kopieren
Der Code lautet wie folgt:

div#klein {
Position: absolut;
oben: 50 %;
Höhe: 240px;
Rand oben: -120px;
}

Mit der gleichen Idee können Sie auch einen horizontalen Zentriereffekt erzielen.

5. Adaptive Bildbreite <br />Wie kann man größere Bilder automatisch an die Breite kleinerer Container anpassen? Das CSS kann wie folgt geschrieben werden:

Code kopieren
Der Code lautet wie folgt:

img {max-width: 100%}

IE6 unterstützt jedoch keine maximale Breite. Verwenden Sie daher bei Verwendung von IE6 bedingte Kommentare im IE und schreiben Sie die Anweisung folgendermaßen um:

Code kopieren
Der Code lautet wie folgt:

img {width: 100%}

6. 3D-Schaltfläche <br />Um einer Schaltfläche einen 3D-Effekt zu verleihen, stellen Sie einfach seinen oberen linken Rand auf eine helle Farbe und seinen unteren rechten Rand auf eine dunkle Farbe ein.

Code kopieren
Der Code lautet wie folgt:

div#Schaltfläche {
Hintergrund: #888;
Rand: 1px durchgezogen;
Rahmenfarbe: #999 #777 #777 #999;
}

7. Tastenkombinationen für Schriftattribute
Das Format der Schriftartverknüpfung ist:

Code kopieren
Der Code lautet wie folgt:

Körper {
Schriftart: Schriftstil, Schriftvariante, Schriftstärke, Schriftgröße, Zeilenhöhe, Schriftfamilie;
}

Also,

Code kopieren
Der Code lautet wie folgt:

Körper {
Schriftfamilie: Arial, Helvetica, serifenlos;
Schriftgröße: 13px;
Schriftstärke: normal;
Schriftvariante: Kapitälchen;
Schriftstil: kursiv;
Zeilenhöhe: 150 %;
}

kann wie folgt geschrieben werden:

Code kopieren
Der Code lautet wie folgt:

Körper {
Schriftart: kursiv, Kapitälchen, normal, 13px/150 % Arial, Helvetica, serifenlos;
}

8. Reihenfolge der Verbindungsstatuseinstellung
Die vier Verbindungszustände müssen in der folgenden Reihenfolge eingestellt werden:

Code kopieren
Der Code lautet wie folgt:

ein:Link
a:besucht
ein:schweben
a:aktiv

9. Bedingte Kommentare im Internet Explorer <br />Mithilfe bedingter Kommentare können Sie Anweisungen festlegen, die nur im Internet Explorer funktionieren:

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
< ![endif]-->

Außerdem kann man zwischen verschiedenen IE-Versionen unterscheiden:

Code kopieren
Der Code lautet wie folgt:

<!--[if IE 6]> - zielt nur auf IE6 ab -->
<!--[if gt IE 6]> - zielt auf IE7 und höher ab -->
<!--[if lt IE 6]> - zielt auf IE5.5 und darunter ab -->
<!--[if gte IE 6]> - zielt auf IE6 und höher ab -->
<!--[if lte IE 6]> - zielt auf IE6 und darunter ab -->

10. IE6-spezifische Anweisungen: Methode 1 <br />Da IE6 HTML nicht als Stammelement des Dokuments betrachtet, können Sie hiermit Anweisungen schreiben, die nur IE6 lesen kann:

Code kopieren
Der Code lautet wie folgt:

/* die folgenden Regeln gelten nur für IE6 */
* html{
}
* HTML-Text{
}
* html .foo{
}

IE7-spezifische Anweisungen sollten wie folgt geschrieben werden:

Code kopieren
Der Code lautet wie folgt:

/* die folgenden Regeln gelten nur für IE7 */
*+html .foo{
}

11. IE-spezifische Anweisungen: Methode 2 <br />Außer IE6 können nicht alle Browser den Unterstrich vor dem Attribut erkennen. Mit Ausnahme von IE7 können nicht alle Browser das * vor dem Attribut erkennen. Sie können daher eine Anweisung schreiben, die nur diese beiden Browser lesen können:

Code kopieren
Der Code lautet wie folgt:

.element {
Hintergrund: rot; /* moderne Browser */
*Hintergrund: grün; /* IE 7 und darunter */
_background: blau; /* ausschließlich IE6 */
}

12. CSS-Vorrang <br />Wenn derselbe Container durch mehrere CSS-Anweisungen definiert wird, welche Definition hat dann Vorrang?
Die Grundregeln sind:
Inline-Stil > ID-Stil > Klassenstil > Tag-Name-Stil. Beispielsweise gibt es ein Element:

Code kopieren
Der Code lautet wie folgt:

<div id="ID" Klasse="KLASSE" Stil="Farbe:schwarz;"></div>

Inline-Stile haben Vorrang, und auch andere Einstellungen haben Vorrang (von der niedrigsten zur höchsten):

Code kopieren
Der Code lautet wie folgt:

div < .Klasse < div.Klasse < #id < div#id < #id.Klasse < div#id.Klasse

13. IE6 Mindesthöhe
 IE6 unterstützt keine Mindesthöhe. Es gibt zwei Möglichkeiten, dieses Problem zu lösen:
Methode 1:

Code kopieren
Der Code lautet wie folgt:

.element {
Mindesthöhe: 500px;
Höhe: auto !wichtig;
Höhe: 500px;
}

Insgesamt gibt es drei CSS-Anweisungen. Die erste Anweisung legt die Mindesthöhe für andere Browser fest, die dritte Anweisung legt die Mindesthöhe für den Internet Explorer fest und die zweite Anweisung ermöglicht es anderen Browsern, die Einstellungen der dritten Anweisung zu überschreiben.
Methode 2:

Code kopieren
Der Code lautet wie folgt:

.element {
Mindesthöhe: 500px
_Höhe: 500px
}

_height kann nur von IE6 gelesen werden.

14. Benchmark für Schriftgröße <br />Die Standardschriftgröße des Browsers beträgt 16px. Sie können die Benchmark-Schriftgröße zunächst auf 10px setzen:

Code kopieren
Der Code lautet wie folgt:

Text {Schriftgröße:62,5 %;}

Im Folgenden wird als Schrifteinheit em verwendet. 2,4em bedeutet 24px.

Code kopieren
Der Code lautet wie folgt:

h1 {Schriftgröße: 2,4 em}

15. Textumwandlung und Schriftvariante
Mit der Texttransformation können Sie alle Buchstaben in Kleinbuchstaben, Großbuchstaben oder Großbuchstaben umwandeln:

Code kopieren
Der Code lautet wie folgt:

p {Texttransformation: Großbuchstaben}
p {Texttransformation: Kleinbuchstaben}
p {Texttransform: Großschreibung}

Mit der Schriftvariante wird eine Schriftart in Kapitälchen geändert (das heißt, Großbuchstaben mit der gleichen Höhe wie Kleinbuchstaben).

Code kopieren
Der Code lautet wie folgt:

p {Schriftartvariante: Kapitälchen}

16. CSS zurücksetzen
CSS-Resets werden verwendet, um die integrierten Stile des Browsers zu überschreiben, siehe YUI und die Stylesheets von Eric Meyer.

17. Verwenden Sie Bilder als Listenmarkierungen <br />Standardmäßig verwenden Browser einen schwarzen Kreis als Listenmarkierung. Sie können ihn durch ein Bild ersetzen:

Code kopieren
Der Code lautet wie folgt:

ul {Listenstil: keine}
ul li {
Hintergrundbild: URL("Pfad zu Ihrem Bild");
Hintergrundwiederholung: keine;
Hintergrundposition: 0 0,5em;
}

18. Transparenz <br />Um einen Container transparent zu machen, können Sie den folgenden Code verwenden:

Code kopieren
Der Code lautet wie folgt:

.element {
Filter: Alpha (Deckkraft = 50);
-moz-Deckkraft: 0,5;
-khtml-Deckkraft: 0,5;
Deckkraft: 0,5;
}

Von diesen vier Zeilen mit CSS-Anweisungen ist die erste Zeile spezifisch für IE, die zweite Zeile für Firefox, die dritte Zeile für WebKit-basierte Browser und die vierte Zeile für Opera.

19. CSS-Dreieck <br />Wie erstelle ich mit CSS ein Dreieck?
Schreiben Sie zuerst ein leeres Element <div class="triangle"></div>
Stellen Sie dann drei der vier Ränder auf transparent und den verbleibenden auf sichtbar, um einen Dreieckseffekt zu erzeugen:

Code kopieren
Der Code lautet wie folgt:

.Dreieck {
Rahmenfarbe: transparent transparent grün transparent;
Rahmenstil: durchgezogen;
Rahmenbreite: 0px 300px 300px 300px;
Höhe: 0px;
Breite: 0px;
}

20. Automatischen Zeilenumbruch deaktivieren <br />Wenn Sie möchten, dass der Text einzeilig ohne automatischen Zeilenumbruch angezeigt wird, lautet der CSS-Befehl wie folgt:

Code kopieren
Der Code lautet wie folgt:

h1 { Leerzeichen:nowrap; }

21. Ersetzen Sie Text durch Bilder <br />Manchmal müssen wir Bilder in der Titelleiste verwenden, aber wir müssen sicherstellen, dass Suchmaschinen den Titel lesen können. Die CSS-Anweisung kann wie folgt geschrieben werden:

Code kopieren
Der Code lautet wie folgt:

h1 {
Texteinzug: -9999px;
Hintergrund: URL("h1-bild.jpg") keine Wiederholung;
Breite: 200px;
Höhe: 50px;
}

22. Fokussierte Formularelemente <br />Wenn ein Formularelement fokussiert ist, kann es hervorgehoben werden:

Code kopieren
Der Code lautet wie folgt:

Eingabe: Fokus { Rahmen: 2px durchgehend grün; }

23. !important-Regel <br />Wenn mehrere CSS-Anweisungen miteinander in Konflikt stehen, überschreibt die Anweisung mit !important andere Anweisungen. Da der IE !important nicht unterstützt, kann es auch zur Unterscheidung verschiedener Browser verwendet werden.

Code kopieren
Der Code lautet wie folgt:

h1 {
Farbe: rot !wichtig;
Farbe: blau;
}

Das Ergebnis der obigen Anweisung ist, dass andere Browser rote Titel anzeigen und nur der Internet Explorer blaue Titel anzeigt.

24. CSS-Tooltip-Box <br />Wenn die Maus über den Link bewegt wird, erscheint automatisch eine Tooltip-Box.

Code kopieren
Der Code lautet wie folgt:

<a class="tooltip" href="#">Linktext<span>Eingabeaufforderungstext</span></a>

Das CSS wird wie folgt geschrieben:

Code kopieren
Der Code lautet wie folgt:

a.tooltip {position: relativ}
a.tooltip span {Anzeige: keine; Polsterung: 5px; Breite: 200px;}
a:hover {background:#fff;} /*Hintergrundfarbe ist ein Muss für IE6*/
a.tooltip:hover span{display:inline; position:absolute;}

25. Header mit fester Position <br />Wenn die Seite gescrollt wird, muss der Header manchmal an seiner Position fixiert bleiben. Die CSS-Anweisung kann wie folgt geschrieben werden

Code kopieren
Der Code lautet wie folgt:

Körper { Rand: 0; Polsterung: 100px 0 0 0;}
div#header{
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe:<Länge>;
}
@Medienbildschirm{
body>div#header{position: fest;}
}
* HTML-Text {overflow:hidden;}
* html div#content{height:100%;overflow:auto;}

Eine andere Schreibweise in IE6 (für Fußzeilen mit fester Position):

Code kopieren
Der Code lautet wie folgt:

* html #Fußzeile {
Position: absolut;
oben: Ausdruck ((0-(Fußzeile.OffsetHeight)+(Dokument.Dokumentelement.ClientHeight ? Dokument.Dokumentelement.ClientHeight : Dokument.Body.ClientHeight)+(ignoreMe = Dokument.Dokumentelement.ScrollTop ? Dokument.Dokumentelement.ScrollTop : Dokument.Body.ScrollTop))+'px');
}

26. Einstellen des Transparenzeffekts von PNG-Bildern in IE6

Code kopieren
Der Code lautet wie folgt:

.Klassenname {
Hintergrund: URL (Bild.png);
_Hintergrund: keiner;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(Quelle='Bild.png', Größenmethode='Zuschneiden');
}

27. Spezielle Anweisungen für verschiedene Browser

Code kopieren
Der Code lautet wie folgt:

/* IE6 und darunter */
* html #uno { Farbe: rot }
/* IE7 */
*:erstes-kind+html #dos { Farbe: rot }
/* IE7, FF, Saf, Opera */
html>body #tres { Farbe: rot }
/* IE8, FF, Saf, Opera (Alles außer IE 6,7) */
html>/**/body #cuatro { Farbe: rot }
/* Opera 9.27 und darunter, Safari 2 */
html:erstes-Kind #cinco { Farbe: rot }
/* Safari 2-3 */
html[xmlns*=""] body:letztes-kind #seis { color: red }
/* Safari 3+, Chrome 1+, Opera9+, FF 3.5+ */
body:n-ter-Typ(1) #siete { Farbe: rot }
/* Safari 3+, Chrome 1+, Opera9+, FF 3.5+ */
body:erster-vom-Typ #ocho { Farbe: rot }
/* saf3+, chrome1+ */
@media screen und (-webkit-min-device-pixel-ratio:0) {
#diez { Farbe: rot }
}
/* iPhone / mobiles Webkit */
@media screen und (max-device-width: 480px) {
#veintiseis { Farbe: rot }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { Farbe: rot }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { Farbe: rot }
/* Alles außer IE6-8 */
:root *> #quince { Farbe: rot }
/* IE7 */
*+html #dieciocho { Farbe: rot }
/* Nur Firefox. 1+ */
#veinticuatro, x:-moz-any-link { Farbe: rot }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { Farbe: rot }
/***** Attribut-Hacks ******/
/* IE6 */
#einmal { _Farbe: blau }
/* IE6, IE7 */
#doce { *Farbe: blau; /* oder #Farbe: blau */ }
/* Alles außer IE6 */
#diecisiete { color/**/: blau }
/* IE6, IE7, IE8 */
#diecinueve { Farbe: blau\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blau\9; }
/* IE6, IE7 – fungiert als !important */
#veintesiete { color: blue !ie; } /* String nach ! kann alles sein */

28. Horizontale und vertikale Zentrierung von Behältern
Der HTML-Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<Abbildung Klasse = "Logo">
<span></span>
<img Klasse = "Foto"/>
</figure>

Der CSS-Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

.logo {
Anzeige: Block;
Textausrichtung: zentriert;
Anzeige: Block;
Textausrichtung: zentriert;
vertikale Ausrichtung: Mitte;
Rand: 4px durchgezogen #dddddd;
Polsterung: 4px;
Höhe: 74px;
Breite: 74px; }
.logo * {
Anzeige: Inline-Block;
Höhe: 100%;
vertikale Ausrichtung: Mitte; }
.logo .foto {
Höhe: automatisch;
Breite: automatisch;
maximale Breite: 100 %;
maximale Höhe: 100 %; }

29. CSS-Schatten <br />Äußerer Schatten:

Code kopieren
Der Code lautet wie folgt:

.Schatten {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
Kastenschatten: 5px 5px 5px #ccc;
}

Innerer Schatten:

Code kopieren
Der Code lautet wie folgt:

.Schatten {
-moz-box-shadow:Einschub 0 0 10px #000000;
-webkit-box-shadow:Einschub 0 0 10px #000000;
Box-Schatten: Einschub 0 0 10px #000000;
}

30. Löschen Sie die Bildlaufleiste des IE-Textfelds

Code kopieren
Der Code lautet wie folgt:

Textbereich { Überlauf: auto; }

31. Bildvorladen <br />Bitte beachten Sie
https://www.jb51.net/article/32761.htm
https://www.jb51.net/css/68340.html
32. Informationen zum Zurücksetzen von CSS finden Sie unter https://www.jb51.net/css/68582.html

<<:  5 coole und praktische Einführung in HTML-Tags und -Attribute

>>:  Zeitzonenprobleme mit im Docker-Container bereitgestelltem Django

Artikel empfehlen

Express-Projektdateiverzeichnisbeschreibung und detaillierte Funktionsbeschreibung

app.js: Startdatei oder Einstiegsdatei package.js...

Die richtige Verwendung von MySQL-Indizes und detaillierte Erklärung der Indexprinzipien

1. Einleitung Warum brauchen wir Indizes? In allg...

Beispielanalyse der Listen-Direktive in Nginx

Handlungsüberblick Im vorherigen Artikel haben wi...

MySQL-Lerndatenbankbetrieb DML ausführliche Erklärung für Anfänger

Inhaltsverzeichnis 1. Anweisung einfügen 1.1 Einf...

Verwenden Sie CSS3s webkit-box-reflect geschickt, um verschiedene dynamische Effekte zu erzielen

In einem Artikel vor langer Zeit habe ich über di...

MariaDB unter Linux startet mit dem Root-Benutzer (empfohlen)

Da ich Sicherheitsprodukte testen musste, wollte ...

So zeigen Sie JSON-Daten auf einer HTML-Seite an und formatieren sie

JSON-Daten werden auf der HTML-Seite angezeigt un...

Beispiel zum Ändern der inländischen Quelle in Ubuntu 18.04

Die eigene Quelle von Ubuntu stammt aus China, da...

CSS zum Implementieren von QQ-Browserfunktionen

Code Wissenspunkte 1. Kombinieren Sie fullpage.js...

Detaillierte Erklärung der HTML-Tabellen

Funktion: Datenanzeige, Tabellenanwendungsszenari...

Lösen Sie das Problem, dass das Vue-Projekt beim lokalen Start keine Cookies übertragen kann

Lösen Sie das Problem, dass das Vue-Projekt zwar ...

Implementierungscode für die adaptive IFrame-Größe

Seitendomänenbeziehung: Die Hauptseite a.html gehö...

Verwenden Sie Docker, um ein Git-Image mithilfe des Klon-Repositorys zu erstellen

Überblick Ich verwende Docker seit über einem Jah...

MySQL-Abfragedaten stündlich, geben Sie 0 ein, wenn keine Daten vorhanden sind

Nachfragehintergrund Als statistische Schnittstel...

Einigen Eigenschaften in CSS geht ein "*" oder "_" voraus.

Einigen Eigenschaften in CSS geht ein "*&quo...