9 praktische CSS-Eigenschaften, die Web-Frontend-Entwickler kennen müssen

9 praktische CSS-Eigenschaften, die Web-Frontend-Entwickler kennen müssen
1. Abgerundete Ecken

Heutige Webdesigns halten ständig mit den neuesten Entwicklungstechnologien Schritt und verwenden HTML5 zur Entwicklung vielfältiger Webanwendungen. Einer der Vorteile von HTML5 besteht darin, dass Elemente, die früher mit Bildern umgesetzt werden mussten, nun mit Code umgesetzt werden können. Ein wichtiges Attribut zur Realisierung dieser Funktion ist „border-radius“, mit dem sich die abgerundeten Ecken von HTML-Elementen direkt definieren lassen und das von allen modernen Browsern unterstützt wird.

CSS Code

Code kopieren
Der Code lautet wie folgt:

border-radius: 10px; /* CSS3-Eigenschaft */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux-Browser */

Um die Unterstützung von CSS3-Eigenschaften durch den Internet Explorer-Browser vollständig zu verstehen, lesen Sie bitte diesen Artikel.

2. Schatteneffekt

Der Schatteneffekt kann einfach durch die Box-Shadow-Eigenschaft von CSS3 erzielt werden. Alle gängigen Browser unterstützen diese Eigenschaft und Safari unterstützt die mit dem Präfix „-webkit-box-shadow“ versehene Eigenschaft.

CSS Code

Code kopieren
Der Code lautet wie folgt:

#meineDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
Kastenschatten: 20px 10px 7px #ccc;
}

Sie können den Schatteneffekt auch mit JavaScript wie folgt erzielen:

CSS Code

Code kopieren
Der Code lautet wie folgt:

Objekt.Stil.boxShadow=”20px 10px 7px #ccc”

3. @media-Attribut

Das Attribut „Medien“ wird verwendet, um den Stil desselben Stylesheets auf verschiedenen Bildschirmen festzulegen. Das Medium oder die Medien, auf die dieser Stil angewendet wird, können im Attributwert angegeben werden.

CSS Code

Code kopieren
Der Code lautet wie folgt:

@media screen und (max-width: 480px) {
/* Anzeigestil der Webseite auf einem Bildschirm mit einer Breite von 480px*/
}

Entwickler können auch das Druckattribut @media verwenden, um den Druckvorschaustil anzugeben:

CSS Code

Code kopieren
Der Code lautet wie folgt:

@media drucken
{
p.inhalt { Farbe: #ccc }
}

4. Farbverlaufsfüllung

Die Gradient-Eigenschaft von CSS3 bietet Entwicklern eine weitere erstaunliche Erfahrung. Gradient wird noch nicht von allen Browsern unterstützt, daher können Sie sich beim Festlegen des Layouts nicht vollständig auf Gradient verlassen.

CSS Code

Code kopieren
Der Code lautet wie folgt:

Hintergrund: -webkit-gradient(linear, links oben, links unten, von (dunkelgrau), bis (#7A7A7A));

5. Hintergrundgröße

Die Hintergrundgröße ist eine der wichtigsten Eigenschaften in CSS3 und wird von vielen Browsern unterstützt. Mit der Eigenschaft „Hintergrundgröße“ wird die Größe des Hintergrundbildes festgelegt. Bisher war die Größe des Hintergrundbilds im Stil nicht anpassbar. Mithilfe der Eigenschaft „Hintergrundgröße“ können Sie nun mit nur einer Codezeile den vom Benutzer gewünschten Hintergrundbildeffekt erzielen.

CSS Code

Code kopieren
Der Code lautet wie folgt:

div
{Hintergrund:url(bg.jpg);
Hintergrundgröße: 800px 600px;
Hintergrundwiederholung: keine Wiederholung;
}

6 @Schriftart

Das @font-face-Attribut in CSS3 hat die Referenzierung von Schriftdateien erheblich verbessert. Dieses Attribut wird hauptsächlich verwendet, um benutzerdefinierte Webfonts in Webseiten einzubetten. Bisher waren Designer aufgrund von Schriftartenlizenzen auf die Verwendung bestimmter Schriftarten beschränkt. Passen Sie zunächst den Namen der Schriftart an:

CSS Code

Code kopieren
Der Code lautet wie folgt:

@Schriftart
{
Schriftfamilie: mySmashingFont;
Quelle: URL ('Blitz.ttf')
,url('blitz.eot'); /* IE9 */
}

Dann können Sie die Schriftfamilie mySmashingFont überall verwenden:

CSS Code

Code kopieren
Der Code lautet wie folgt:

div
{
Schriftfamilie: mySmashingFont;
}

7. Das Clearfix-Attribut

Wenn der Designer der Meinung ist, dass Overflow: hidden mit Floating nicht gut umgehen kann, stellt Clearfix eine bessere Lösung zum Umgang mit Floating dar.

CSS Code

Code kopieren
Der Code lautet wie folgt:

.klarfix {
Anzeige: Inline-Block;
}

CSS Code

Code kopieren
Der Code lautet wie folgt:

.clearfix:nach {
Inhalt: ".";
Anzeige: Block;
klar: beides;
Sichtbarkeit: versteckt;
Zeilenhöhe: 0;
Höhe: 0;
}

8. Marge: 0 automatisch

Die automatische Eigenschaft „Margin: 0“ ist eine grundlegende CSS-Eigenschaft. Obwohl in der CSS-Syntax keine Anweisung zum Zentrieren von Blockelementen definiert ist, können Designer dennoch die Option „Automatischer Rand“ verwenden, um diese Funktion zu erreichen. Mit dieser Eigenschaft kann ein Element nach Bedarf zentriert werden. Beachten Sie jedoch, dass dies nur möglich ist, wenn der Designer die Breite des Div festlegt.

CSS Code

Code kopieren
Der Code lautet wie folgt:

.meinDiv {
Rand: 0 automatisch;
Breite: 600px;
}

9. Überlauf: versteckt

Overflow: Die CSS-Eigenschaft Hidden hat neben der Ausblendung der Overflow-Funktion auch die Funktion Floats zu löschen.

CSS Code

Code kopieren
Der Code lautet wie folgt:

div
{
Überlauf: versteckt;
}

<<:  CSS3 zum Erzielen eines einfachen schwebenden Hintergrundeffekts mit weißen Wolken

>>:  Details zur Ereignisbindung reagieren

Artikel empfehlen

Einfache Implementierung zum Ausblenden der Bildlaufleiste in HTML

1. HTML-Tags mit Attributen XML/HTML-CodeInhalt i...

JavaScript-Entwurfsmuster, Befehlsmuster

Das Befehlsmuster ist ein Verhaltensentwurfsmuste...

Analyse der Implementierungsmethode der Koexistenz von Nginx und Apache unter Linux-Servern

Dieser Artikel beschreibt, wie die Koexistenz von...

Detailliertes Tutorial zum Löschen von Linux-Benutzern mit dem Befehl userdel

Was ist Serdel userdel ist ein Low-Level-Tool zum...

Gemeinsame MySQL-Sicherungsbefehle und Shell-Sicherungsskripte

Um mehrere Datenbanken zu sichern, können Sie den...

So gehen Sie mit dem vom Linux-System gemeldeten Warnproblem xfs_vm_releasepage um

Problembeschreibung Auf mehreren Rechnern wurden ...

JavaScript-Canvas zum Erzielen eines Spiegelbildeffekts

In diesem Artikel wird der spezifische Code für J...

Beheben Sie das Problem, dass nach der Installation von Centos7 in VMware kein Ping an das externe Netzwerk möglich ist

Beim Konfigurieren eines Clusters ist ein Problem...

Prozessdiagramm zum Aufbau des Linux RabbitMQ-Clusters

1. Allgemeine Schritte Zu Beginn haben wir die In...

So deaktivieren Sie die Klartextanzeige und die Schnelllöschfunktion von IE10

IE10 bietet eine Schaltfläche zum schnellen Lösche...

Neue Funktionen in MySQL 8.0 - Einführung in die Verwendung des Management-Ports

Inhaltsverzeichnis Vorwort Verbindungsverwaltung ...

Verwendung und Beschreibung des HTML-Tags tbody

Das Tbody-Element sollte in Verbindung mit den Ele...

Spezifische Verwendung von Linux which Befehl

Oft möchten wir in Linux eine Datei finden, wisse...

CSS verwendet calc(), um die aktuell sichtbare Bildschirmhöhe zu ermitteln

Schauen wir uns zunächst die relativen Längeneinh...

Detaillierte Erklärung der allgemeinen For-Schleife in JavaScript-Anweisungen

Es gibt viele Schleifenanweisungen in JavaScript,...