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

Beispielcode zur Installation von ElasticSearch und Kibana unter Docker

1. Einleitung Elasticsearch erfreut sich derzeit ...

Implementierung der CSS-Variableneinfügung im Vue3-Stil

Inhaltsverzeichnis Zusammenfassung Einfaches Beis...

So mounten Sie eine neue Festplatte auf einem Linux-Cloud-Server

Hintergrund Im Unternehmen wurde ein neuer Server...

MySQL-Datenbank implementiert OLTP-Benchmark-Test basierend auf Sysbench

Sysbench ist ein hervorragendes Benchmark-Tool, d...

MySQL-Optimierung: InnoDB-Optimierung

Lernpläne werden leicht unterbrochen und es ist s...

Detaillierte Erläuterung verschiedener praktischer Verwendungen virtueller Gerätedateien im Linux-System

Hallo zusammen, ich bin Liang Xu. Wie wir alle wi...

JavaScript zum Erzielen eines einfachen Countdown-Effekts

In diesem Artikelbeispiel wird der spezifische Co...

So verstehen Sie SELinux unter Linux

Inhaltsverzeichnis 1. Einführung in SELinux 2. Gr...

So installieren Sie schnell eine Tensorflow-Umgebung in Docker

Installieren Sie schnell die Tensorflow-Umgebung ...

So beheben Sie das Timeout während des Pip-Vorgangs in Linux

So lösen Sie das Timeout-Problem, wenn Pip in Lin...

Detailliertes Tutorial zum Herunterladen und Installieren von VMware Workstation

Virtuelle Maschinen sind eine sehr praktische Tes...

Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue

Die Betriebsumgebung dieses Tutorials: Windows 7-...

Zusammenfassung der Verwendung des CSS-Bereichs (Stilaufteilung)

1. Verwendung des CSS-Bereichs (Stilaufteilung) I...

Über das Problem der dynamischen Spleißen der SRC-Bildadresse von img in Vue

Werfen wir einen Blick auf das dynamische Spleiße...

Tutorial zur Installation und Konfiguration einer virtuellen Linux-Maschine unter dem Windows-Betriebssystem

Vorwort Bei der Arbeit müssen wir häufig in einer...