10 einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können

Eskere Guru

Wenn Sie einmal angefangen haben, sich mit HTML zu beschäftigen, werden Sie wahrscheinlich daran interessiert sein, Ihren Webseiten mehr visuelle Schlagkraft zu verleihen. CSS ist der beste Weg, dies zu tun. Mit CSS können Sie Änderungen auf Ihrer gesamten Seite anwenden, ohne sich auf Inline-Styling verlassen zu müssen.

Im Folgenden finden Sie einige einfache CSS-Beispiele, die Ihnen zeigen, wie Sie einige grundlegende Stiländerungen auf Ihrer Webseite vornehmen.

1. Grundlegender CSS-Code für einfache Absatzformatierung

Styling mit CSS bedeutet, dass Sie nicht jedes Mal einen Stil angeben müssen, wenn Sie ein Element erstellen. Sie können einfach sagen "alle Absätze sollten dieses besondere Styling haben" und Sie können loslegen.

Nehmen wir an, Sie möchten, dass jeder Absatz (<p>, eines der HTML-Tags, die jeder kennen sollte) etwas größer als gewöhnlich ist. Und mit dunkelgrauem Text statt schwarz.

Verwandte: Der HTML-Spickzettel

Der CSS-Code dafür lautet:

 p { font-size: 120%; color: dimgray; }

Einfach! Immer wenn der Browser einen Absatz rendert, erbt der Text jetzt die Größe (120 Prozent des Normalwerts) und die Farbe ("Dimgray").

Wenn Sie neugierig sind, welche Klartextfarben Sie verwenden können, sehen Sie sich diese CSS-Farbliste von Mozilla an.

2. CSS-Beispiel zum Ändern der Groß-/Kleinschreibung

Möchten Sie eine Bezeichnung für Absätze erstellen, die in Kapitälchen geschrieben werden sollen? Ein CSS-Beispiel dafür wäre:

 p.smallcaps { font-variant: small-caps; }

Um einen Absatz vollständig in Kapitälchen zu schreiben, verwenden Sie ein etwas anderes HTML-Tag. So sieht es aus:

 <p class="smallcaps">Your paragraph here.</p>

Das Hinzufügen eines Punkts und eines Klassennamens zu einem Element gibt einen Untertyp dieses Elements an, der von einer Klasse definiert wird. Sie können dies mit Text, Bildern, Links und fast allem anderen tun.

Wenn Sie einen Textsatz in einen bestimmten Fall ändern möchten, verwenden Sie diese CSS-Codebeispiele:

 text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Der letzte schreibt den ersten Buchstaben jedes Satzes groß.

Stiländerungen sind nicht auf Absätze beschränkt. Es gibt vier verschiedene Farben, die einem Link zugewiesen werden können: seine Standardfarbe, seine besuchte Farbe, seine Hover-Farbe und seine aktive Farbe (die angezeigt wird, während Sie darauf klicken). Verwenden Sie diesen CSS-Beispielcode:

 a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Bei Links folgt auf jedes "a" ein Doppelpunkt, kein Punkt.

Jede dieser Deklarationen ändert die Farbe eines Links in einem bestimmten Kontext. Es ist nicht erforderlich, die Klasse eines Links zu ändern, damit er die Farbe ändert.

Während unterstrichener Text eindeutig auf einen Link hinweist, sieht es manchmal besser aus, diese Unterstreichung zu entfernen. Dies wird mit dem Attribut "text-decoration" erreicht. Dieses CSS-Beispiel zeigt, wie Unterstreichungen von Links entfernt werden:

 a { text-decoration: none; }

Alles mit dem Link-Tag ("a") bleibt nicht unterstrichen. Möchten Sie es unterstreichen, wenn der Benutzer mit der Maus darüber fährt? Einfach hinzufügen:

 a:hover { text-decoration: underline; }

Sie können diese Textdekoration auch aktiven Links hinzufügen, um sicherzustellen, dass die Unterstreichung nicht verschwindet, wenn auf den Link geklickt wird.

Möchten Sie mehr Aufmerksamkeit auf Ihren Link lenken? Ein Link-Button ist eine großartige Möglichkeit, dies zu tun. Dieser erfordert ein paar weitere Zeilen:

 a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Lassen Sie uns diesen CSS-Beispielcode erklären.

Das Einbeziehen aller vier Linkstatus stellt sicher, dass die Schaltfläche nicht verschwindet, wenn ein Benutzer mit der Maus darauf fährt oder darauf klickt. Sie können auch verschiedene Parameter für Hover- und aktive Links einstellen, zB das Ändern der Schaltflächen- oder Textfarbe.

Die Hintergrundfarbe wird mit background-color und die Textfarbe mit color festgelegt. Padding definiert die Größe der Box – der Text wird vertikal um 10px und horizontal um 25px aufgefüllt.

Textausrichtung sorgt dafür, dass der Text in der Mitte der Schaltfläche angezeigt wird, anstatt seitlich. Textdekoration, wie im letzten Beispiel, entfernt die Unterstreichung.

Etwas komplizierter ist der CSS-Code "display: inline-block". Kurz gesagt, können Sie die Höhe und Breite des Objekts einstellen. Es stellt auch sicher, dass beim Einfügen eine neue Zeile beginnt.

6. CSS-Beispielcode zum Erstellen eines Textfelds

Ein einfacher Absatz ist nicht sehr aufregend. Wenn Sie ein Element auf Ihrer Seite hervorheben möchten, können Sie einen Rahmen hinzufügen. So machen Sie das mit einer Zeichenfolge von einfachem CSS-Code:

 p.important { border-style: solid; border-width: 5px; border-color: purple; }

Dieser ist einfach. Es erstellt einen durchgehenden violetten Rahmen mit einer Breite von fünf Pixeln um jeden wichtigen Absatz. Damit ein Absatz diese Eigenschaften erbt, deklarieren Sie ihn einfach wie folgt:

 <p class="important">Your important paragraph here.</p>

Dies funktioniert unabhängig davon, wie groß der Absatz ist.

Es gibt viele verschiedene Rahmenstile, die Sie anwenden können. statt "durchgehend" versuchen Sie es mit "punktiert" oder "doppelt". In der Zwischenzeit kann die Breite "dünn", "mittel" oder "dick" sein. CSS-Code kann sogar die Dicke jedes Rahmens individuell definieren, wie folgt:

 border-width: 5px 8px 3px 9px;

Dies führt zu einem oberen Rand von fünf Pixeln, einem rechten Rand von acht, einem unteren Rand von drei und einer linken Randgröße von neun Pixeln.

7. Elemente mit grundlegender Ausrichtung mit grundlegendem CSS-Code

Für eine allgemeine Aufgabe ist das Zentrieren von Elementen mit CSS-Code überraschend wenig intuitiv. Wenn Sie es jedoch ein paar Mal getan haben, wird es viel einfacher. Sie haben verschiedene Möglichkeiten, die Dinge zu zentrieren.

Verwenden Sie für ein Blockelement (normalerweise ein Bild) das Margin-Attribut:

 .center { display: block; margin: auto; }

Dadurch wird sichergestellt, dass das Element als Block angezeigt wird und der Rand auf jeder Seite automatisch gesetzt wird. Wenn Sie alle Bilder auf einer bestimmten Seite zentrieren möchten, können Sie dem img-Tag sogar "margin: auto" hinzufügen:

 img { margin: auto; }

Um zu erfahren, warum es auf diese Weise funktioniert, lesen Sie die Erklärung des CSS-Box-Modells beim W3C .

Aber was ist, wenn Sie Text mit CSS zentrieren möchten? Verwenden Sie dieses Beispiel-CSS:

 .centertext { text-align: center; }

Möchten Sie die Klasse "centertext" verwenden, um den Text in einem Absatz zu zentrieren? Fügen Sie diese Klasse einfach zum <p>-Tag hinzu:

 <p class="centertext">This text will be centered.</p>

8. CSS-Beispiele zum Anpassen von Padding

Die Auffüllung eines Elements gibt an, wie viel Platz auf jeder Seite sein soll. Wenn Sie beispielsweise am unteren Rand eines Bildes 25 Pixel Abstand hinzufügen, wird der folgende Text um 25 Pixel nach unten verschoben. Viele Elemente können Padding haben, nicht nur Bilder.

Nehmen wir an, Sie möchten, dass jedes Bild 20 Pixel auf der linken und rechten Seite und 40 Pixel oben und unten hat. Die einfachste CSS-Codeausführung dafür ist:

 img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Es gibt jedoch eine kürzere CSS-Anweisung, die all diese Informationen in einer einzigen Zeile darstellt:

 img { padding: 40px 25px 40px 25px; }

Dadurch wird die obere, rechte, untere und linke Auffüllung auf die richtige Zahl gesetzt. Da nur zwei Werte verwendet werden (40 und 25), können Sie es noch kürzer machen:

 img { padding: 40px 25px }

Wenn Sie nur zwei Werte verwenden, wird der erste Wert für oben und unten festgelegt, während der zweite für links und rechts steht.

9. Hervorheben von Tabellenzeilen mit CSS-Codierung

CSS-Code lässt Tabellen viel schöner aussehen als die Standardraster. Das Hinzufügen von Farben, das Anpassen von Rahmen und das Anpassen Ihrer Tabelle an mobile Bildschirme sind ganz einfach. Dieses einfache CSS-Beispiel zeigt Ihnen, wie Sie Tabellenzeilen hervorheben, wenn Sie mit der Maus darüber fahren.

 tr:hover { background-color: #ddd; }

Wenn Sie nun mit der Maus über eine Tabellenzelle fahren, ändert sich die Farbe dieser Zeile. Um einige der anderen coolen Dinge zu sehen, die Sie tun können, besuchen Sie die W3C-Seite zu ausgefallenen CSS-Tabellen .

10. CSS-Beispiel zum Verschieben von Bildern zwischen transparent und opak

CSS-Code kann Ihnen auch dabei helfen, coole Dinge mit Bildern zu tun. Hier ist ein CSS-Beispiel, um Bilder mit weniger als voller Deckkraft anzuzeigen, sodass sie leicht "weißlich" erscheinen. Wenn Sie mit der Maus über die Bilder fahren, werden sie auf volle Deckkraft gebracht:

 img { opacity: 0.5; filter: alpha(opacity=50); }

Das Attribut "filter" bewirkt dasselbe wie "opacity", aber Internet Explorer 8 und frühere Versionen erkennen die Opazitätsmessung nicht. Bei älteren Browsern ist es eine gute Idee, es einzubinden.

Da die Bilder jetzt leicht transparent sind, können Sie sie bei einem Mouseover vollständig undurchsichtig machen:

 img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 CSS-Beispiele mit Quellcode

Mit diesen CSS-Codebeispielen sollten Sie eine viel bessere Vorstellung davon haben, wie CSS funktioniert. CSS-Vorlagen können helfen, aber das Verständnis der Rohelemente ist entscheidend.

Diese 10 einfachen CSS-Codebeispiele zusammengefasst:

  1. Einfache Absatzformatierung
  2. Groß-/Kleinschreibung ändern
  3. Linkfarben ändern
  4. Linkunterstreichungen entfernen Remove
  5. Erstellen Sie einen Link-Button
  6. Erstellen Sie ein Textfeld
  7. Elemente mittig ausrichten
  8. Polsterung anpassen
  9. Tabellenzeilen hervorheben
  10. Bilder undurchsichtig machen

Wenn Sie sie erneut überprüfen, werden Sie mehrere Muster feststellen, die Sie auf zukünftigen Code anwenden können. Und dann wissen Sie, dass Sie wirklich angefangen haben, ein CSS-Meister zu werden. Aber sich daran zu erinnern kann schwer sein. Vielleicht möchten Sie diese Seite mit einem Lesezeichen versehen, um später darauf zurückgreifen zu können.