10 sehr gute CSS-Fähigkeiten sammeln und teilen

Hier können Sie durch geschickten Einsatz von CSS-Techniken ein gutes Erscheinungsbild für Ihren Blog oder Ihre Vorlage erzielen, ohne HTML zu ändern. Ich habe einige sehr nützliche CSS-Tipps zusammengestellt, um das Design Ihres Blogs noch beeindruckender und cooler zu gestalten.
Beim Entwerfen von Vorlagen und Blogthemen probiere ich oft CSS aus, um zu sehen, welches Farbschema und welche CSS-Eigenschaftskombination die Elemente der Seite perfekter machen kann. Oh, und der Grund, warum ich „CSS ausprobiere“ sage, ist, dass ich alles ausprobieren werde, bevor ich den Effekt erziele, mit dem ich zufrieden bin. Von diesen verschiedenen CSS-Eigenschaften verwende ich am häufigsten die hier aufgeführten.

Seitdem ich mit dem Bloggen begonnen habe, bin ich mit CSS in Berührung gekommen. Ich liebe Design und ich liebe CSS. Durch das Bloggen habe ich PHP, CSS und sogar HTML gelernt. Hier habe ich 10 tolle CSS-Tipps zusammengestellt, die Sie in Ihrem Blog oder auf Ihrer persönlichen Website verwenden können. Es kann Ihnen dabei helfen, die Elemente Ihres Blogs gut zu organisieren und ihnen ein cooles Aussehen zu verleihen. Beginnen wir mit unserem Inhalt unten. Ich hoffe, er gefällt Ihnen.
1. Einfache Methode zum Anpassen der Größe von Blogbildern

Code kopieren

Der Code lautet wie folgt:

Inhalt img {
Höhe: automatisch;
Breite: 500px;
}

Dies ist die einfachste und effektivste Möglichkeit, die Größe der Bilder in Ihrem Blog zu ändern. Dabei wird die Breite aller Bilder im Inhalt auf 500 Pixel festgelegt und die Höhe passt sich der Breite an. Ich verwende diese Methode jetzt, um die Bildgröße in diesem Bloginhalt neu zu definieren.
2. IE HTML Hack

Code kopieren

Der Code lautet wie folgt:

div#Inhalt {Breite: 580px}
* HTML-Body-Div#Inhalt {Breite: 600px}

Fügen Sie vor dem Div ein * hinzu, damit Sie die speziellen Stile für den IE anpassen können.
3. CSS-Schatten

Code kopieren

Der Code lautet wie folgt:

Schatten
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
Kastenschatten: 3px 3px 5px 6px #ccc;
}

Sie können die oben genannten Stile auf Elemente auf Blockebene oder auf beliebige Klassen oder Tags anwenden, die von einem Div umschlossen sind. Sie müssen den horizontalen und vertikalen Versatz, den Unschärferadius und die Schattenfüllfarbe festlegen. Ein Beispiel hierfür können Sie auf dem Bild sehen, das zu diesem Artikel gepostet wurde.
4. CSS-Erweiterung des ersten Wortes

Code kopieren

Der Code lautet wie folgt:

p:erster-Buchstabe {
Anzeige: Block;
schweben: links;
Rand: 5px 5px 0 0;
Farbe: rot;
Schriftgröße: 1,4em;
Hintergrund: #ddd;
Schriftfamilie: Helvetica;
}

Die Vergrößerung Ihres ersten Buchstabens ist ganz einfach. Verwenden Sie die CSS-Eigenschaft „first-letter“, um automatisch den ersten Buchstaben Ihres Blogs auszuwählen. Anschließend können Sie CSS anpassen, um den ersten Buchstaben zu formatieren, z. B. durch größere Schriftgröße, Kursivschrift usw.
5. Bilder mit CSS spiegeln

Code kopieren

Der Code lautet wie folgt:

#Inhalt img {
-moz-transform: MaßstabX(-1);
-o-transform: SkalaX(-1);
-webkit-transform: MaßstabX(-1);
transformieren: SkalierungX(-1);
Filter: FlipH;
-ms-filter: "FlipH";
}

Sie können jedes Bild mit den oben genannten CSS-Eigenschaften spiegeln
6. Entfernen Sie das angeklickte Linkfeld

Code kopieren

Der Code lautet wie folgt:

ein {Umriss: keiner}
oder
ein {Umriss: 0}

Sicher ist Ihnen aufgefallen, dass beim Anklicken eines Links in manchen Blogs ein gepunkteter Rahmen um den Link herum angezeigt wird. Sie können diese Ränder mit dem kleinen CSS-Ausschnitt oben entfernen.
7. Verwenden Sie spezielle Schriftarten in CSS <br />Sie können CSS verwenden, um spezielle Schriftarten zu laden. Sie müssen die Schriftart lediglich im TTF-Format auf den Server hochladen und sie dann mithilfe der Schriftartregeln in CSS importieren.
8. Elementtransparenz

Code kopieren

Der Code lautet wie folgt:

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

Mit der Transparenzeigenschaft können Sie Elemente in jedem Browser transparent machen. Diese Eigenschaften funktionieren in allen gängigen Browsern, sogar im Internet Explorer (PS: IE6 wird übersprungen?...)
9. Verwenden Sie CSS, um die URL hinter dem Link anzuzeigen

Code kopieren

Der Code lautet wie folgt:

a:nach{Inhalt:" ("attr(href) ") ";}

Dadurch wird die URL nach dem Linkanker angezeigt. Sie können es auch mit Schriftarten oder anderen Stilen definieren.
10. Passen Sie spezielle Stile für Handheld-Geräte an

Code kopieren

Der Code lautet wie folgt:

Wenn Ihr Blog nicht responsiv ist oder Sie bei der Anzeige auf einem Mobiltelefon ein spezielles Styling wünschen, können Sie das CSS für die mobile Version Ihres Blogs anpassen.

<<: Eine schnelle Lösung für das Problem des automatischen Zeilenumbruchs in Tabellenüberschriften im Responsive Framework

>>: Unterschiede zwischen proxy_pass in zwei Modulen in nginx

CSS3-Animation: Das Bild wird allmählich größer, wenn sich die Maus darauf befindet, und allmählich kleiner, wenn die Maus es verlässt

Artikel

Detaillierter Prozess zum Dekomprimieren und Installieren von mysql5.7.17 zip

Artikel empfehlen

So fixieren Sie die vier Seiten der Tabelle zum Scrollen nach oben, unten, links und rechts

Frage: Als ich kürzlich an Projektstatistiken arb...

Was bedeutet es, nach der CSS-Linkadresse ein Fragezeichen (?) hinzuzufügen?

Zum Beispiel: <link rel="stylesheet" ...

Implementieren Sie dynamisches Management und Monitoring von Docker-Containern basierend auf Spring-Boot und Docker-Java [mit vollständigem Quellcode-Download]

Einführung in Docker Docker ist eine Open-Source-...

10 sehr gute CSS-Fähigkeiten sammeln und teilen

CSS3-Animation: Das Bild wird allmählich größer, wenn sich die Maus darauf befindet, und allmählich kleiner, wenn die Maus es verlässt

Detaillierter Prozess zum Dekomprimieren und Installieren von mysql5.7.17 zip

Lösung für Primärschlüsselkonflikte, wenn innodb_index_stats beim Importieren von Sicherungsdaten einen Fehler meldet

Verwenden Sie Docker, um ein verteiltes lnmp-Image zu erstellen

Lösung für den Fehler beim Aufruf von Yum im Docker-Container

Vue implementiert die Countdown-Komponente für zweite Kills

Installation und Verwendung von MySQL unter Ubuntu (allgemeine Version)

Einführung in berechnete Eigenschaften in Vue

js, um die Rotation von Webseitenbildern zu realisieren

So realisieren Sie die vertikale Anordnung von Text mit CSS3

Artikel empfehlen

So fixieren Sie die vier Seiten der Tabelle zum Scrollen nach oben, unten, links und rechts

Was bedeutet es, nach der CSS-Linkadresse ein Fragezeichen (?) hinzuzufügen?

Implementieren Sie dynamisches Management und Monitoring von Docker-Containern basierend auf Spring-Boot und Docker-Java [mit vollständigem Quellcode-Download]

Tutorial zur Installation von MySQL 5.7.28 auf CentOS 6.2 (MySQL-Hinweise)

Einführung in die Unterschiede zwischen HTML-Name, ID, Klasse (Format/Anwendungsszenario/Funktionen) usw.

Linux-Anfänger konfigurieren in virtuellen Maschinen IP und starten das Netzwerk neu

So extrahieren Sie Zeichenfolgenelemente aus nicht festen Positionen in MySQL

Fünf Dinge, die ein guter User Experience Designer gut machen sollte (Bild und Text)

Detaillierte Erklärung zur passiven Überprüfung des Überlebensstatus des Servers durch Nginx

So implementieren Sie die Komprimierung von Webseiten im Nginx-Optimierungsdienst

HTML-Tags dl, dt, dd zum Erstellen einer Tabelle vs. Tabellenerstellungstabelle

Gerätetreiber des Linux-Kernels – Zusammenfassung der grundlegenden Hinweise zum Linux-Kernel

So ändern Sie das ursprüngliche Passwort von MySQL auf dem MAC

MySql Group By implementiert die Gruppierung mehrerer Felder

Front-End-JavaScript-Funktionsprinzip