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

Sobald Sie mit dem HTML-Code 17 begonnen haben, erhalten Sie einfache HTML-Code-Beispiele, die Sie in 10 Minuten lernen können. 17 Einfache HTML-Code-Beispiele, die Sie in 10 Minuten lernen können Sie können eine einfache Webseite von Grund auf neu erstellen oder den Code einer App wie… Lesen Sie weiter, Sie werden wahrscheinlich daran interessiert sein, Ihren Webseiten mehr Leistung zu verleihen. CSS ist der beste Weg, dies zu tun. Mit CSS können Sie Änderungen auf Ihre gesamte Seite anwenden, ohne viele Inline-HTML-Stile verwenden zu müssen Wenn Sie sie jedoch früher oder später ablehnen, wird Ihre Seite besser aussehen, einfacher zu warten und funktioniert so, wie Sie es möchten. Weiterlesen .

Im Folgenden wird beschrieben, wie Sie ein Inline-Stylesheet erstellen, mit dem Sie Ihre CSS-Kenntnisse trainieren können. Anschließend werden wir mit 10 einfachen Beispielen fortfahren, die Ihnen zeigen, wie Sie einige grundlegende Dinge ausführen können. Von dort aus ist deine Vorstellungskraft die Grenze!

Wenn Sie eine etwas technischere Einführung wünschen, lesen Sie unbedingt 5 Baby-Schritte zum Erlernen von CSS & zum Kick-Ass-CSS-Zauberer. 5 Baby-Schritte zum Erlernen von CSS und zum Kick-Ass-CSS-Zauberer Ein Kick-Ass-CSS-Zauberer CSS ist die wichtigste Änderungswebseite der letzten zehn Jahre und hat den Weg für die Trennung von Stil und Inhalt geebnet. Auf moderne Art definiert XHTML die semantische Struktur… Lesen Sie mehr .

Inline-Stylesheet

Jedes HTML-Dokument enthält ein Etikett. In diesem Kopfbereich finden Sie Ihr Inline-CSS-Stylesheet. So wird es aussehen:

 Alle Ihre CSS-Deklarationen. 

Setzen Sie das oben in Ihr Dokument, füllen Sie es mit Ihrem CSS und schon kann es losgehen.

1. Einfache Absatzformatierung

Das Coole an der Gestaltung mit CSS ist, dass Sie nicht jedes Mal einen Stil angeben müssen, wenn Sie ein Element erstellen. Du kannst es einfach sagen “Alle Absätze sollten diesen besonderen Stil haben” und du bist gut zu gehen. Hier ist ein Beispiel, wie Sie das tun könnten.

Angenommen, Sie möchten jeden Absatz (das ist alles mit einem

HTML-Tag Top 11 HTML-Tags Jeder Blogger und Website-Besitzer muss es wissen Top 11 HTML-Tags Jeder Blogger und Website-Besitzer muss wissen Das World Wide Web kennt viele Sprachen und ist in mehreren Sprachen codiert. Die eine Sprache, die überall zu finden ist und seit der Erfindung von Webseiten existiert, ist, dass die Seite auf Ihrer Seite etwas größer als üblich ist. Und dunkelgrau statt schwarz. So würden Sie das mit CSS machen:

p Schriftgröße: 120%; Farbe: Dimgray; 

Das ist alles dazu. Nun, wann immer der Browser eine

Absatz erbt der Text die Größe (120 Prozent des Normalwerts) und die Farbe (“Dimgray”).

Wenn Sie wissen möchten, welche Nur-Text-Farben Sie verwenden können, sehen Sie sich diese CSS-Farbliste von Mozilla an.

2. Briefkasten ändern

Okay, jetzt, wo wir gesehen haben, wie man an jedem Absatz eine Änderung vornimmt, schauen wir uns an, wie wir etwas selektiver werden können. Lassen Sie uns eine Bezeichnung für Absätze erstellen, die in Kleinbuchstaben sein sollten. So würden wir das machen:

p.smallcaps font-variant: Kapitälchen; 

Um einen Absatz zu erstellen, der vollständig in Kleinbuchstaben geschrieben ist, verwenden wir ein etwas anderes HTML-Tag. So sieht es aus:

Ihr Absatz hier.

Wenn Sie einem bestimmten Element in CSS einen Punkt und einen Klassennamen hinzufügen, wird ein durch eine Klasse definierter Subtyp dieses Elements angegeben. Sie können dies mit Text, Bildern, Links und anderen Elementen tun.

Wenn Sie die Groß- und Kleinschreibung einer Textgruppe in einen bestimmten Fall ändern möchten, können Sie diese CSS-Zeilen verwenden:

Text-Transformation: Großbuchstaben; Text-Transformation: Kleinbuchstaben; Text-Transformation: Großschreibung;

Der letzte schreibt den ersten Buchstaben jedes Satzes groß.

3. Ändern Sie die Verbindungsfarben

Versuchen wir, den Stil von etwas anderem als einem vollständigen Absatz zu ändern. Es gibt vier verschiedene Farben, denen ein Link zugewiesen werden kann: seine Standardfarbe, seine besuchte Farbe, seine Schwebefarbe und seine aktive Farbe (die angezeigt wird, wenn Sie darauf klicken). So können wir diese ändern:

a: link Farbe: grau;  a: besuchte color: green;  a: hover color: rebeccapurple;  a: active color: teal; 

Beachten Sie, dass jeder “ein” Es folgt 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. Es wird alles vom Benutzer und dem Status des Links bestimmt.

4. Entfernen Sie Link Underlines

Während unterstrichener Text ziemlich deutlich auf einen Link hinweist, sieht es manchmal besser aus, diese Unterstreichung zu streichen. Dies wird mit der “Textdekoration” Attribut. So werden Unterstriche bei Links entfernt:

eine Textdekoration: keine; 

Alles mit dem Link (“ein”) Tag bleibt nicht unterstrichen. Möchten Sie es unterstreichen, wenn der Benutzer darüber fährt? Füge einfach das unten hinzu:

a: hover text-decoration: underline; 

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

5. Erstellen Sie eine Link-Schaltfläche

Wenn Sie mehr Aufmerksamkeit auf Ihren Link richten möchten, ist die Verwendung einer Link-Schaltfläche eine gute Möglichkeit, dies zu tun. Diese erfordert ein paar Zeilen mehr, aber wir gehen sie einzeln durch:

a: link, a: besucht, a: hover, a: aktiv Hintergrundfarbe: grün; Farbe weiß; Polsterung: 10px 25px; Text ausrichten: Mitte; Textdekoration: keine; Anzeige: Inline-Block; 

Durch die Einbeziehung aller vier Verknüpfungsstatus stellen wir sicher, dass die Schaltfläche nicht ausgeblendet wird, wenn ein Benutzer den Mauszeiger darüber hält oder darauf klickt. Sie können auch verschiedene Parameter für Schwebeflug und aktive Verknüpfungen festlegen, z. B. das Ändern der Schaltfläche oder der Textfarbe, um ein wenig Pop hinzuzufügen.

Die Hintergrundfarbe wird mit Hintergrundfarbe und Textfarbe mit Farbe festgelegt. Auffüllen definiert die Größe der Box - der Text wird vertikal um 10px und horizontal um 25px aufgefüllt. Durch Textausrichtung wird sichergestellt, dass der Text in der Mitte der Schaltfläche angezeigt wird und nicht auf einer Seite. Textdekoration entfernt, wie wir im letzten Beispiel gesehen haben, die Unterstreichung.

“Anzeige: Inline-Block” ist etwas komplizierter. Kurz gesagt, Sie können die Höhe und Breite des Objekts festlegen und sicherstellen, dass beim Einfügen eine neue Zeile beginnt.

6. Erstellen Sie ein Textfeld

Ein einfacher Absatz ist nicht sehr aufregend. Wenn Sie Ihre Handlungsaufforderung oder ein anderes Element auf Ihrer Seite hervorheben möchten, können Sie einen Rand darum legen. So machen Sie das mit einer Textzeichenfolge:

p.wichtig border-style: solid; Randbreite: 5px; Randfarbe: lila; 

Dieser ist ziemlich unkompliziert. Es erstellt einen durchgehenden violetten Rahmen mit einer Breite von 5 Pixeln um alle wichtigen Absätze. Damit ein Absatz diese Eigenschaften erbt, müssen Sie ihn wie folgt deklarieren:

Ihr wichtiger Absatz hier.

Dies funktioniert unabhängig von der Größe Ihres Absatzes. Eine einzelne Zeile erhält einen Rahmen in der Breite der Seite, eine Zeile hoch und ein längerer Absatz wird von einem größeren Rahmen umgeben.

Es gibt viele verschiedene Randstile, die Sie anwenden können. anstatt “solide,” Versuchen “gepunktet” oder “doppelt.” Und die Breite kann sein “dünn,” “Mittel,” oder “dick.” Sie können sogar die Stärke jedes Randes individuell definieren, wie folgt:

Randbreite: 5px 8px 3px 9px;

Dies führt zu einem oberen Rand von 5 Pixeln, einem rechten Rand von 8, einem unteren Rand von 3 und einer linken Randgröße von 9 Pixeln.

7. Elemente zentrieren

Für eine sehr gewöhnliche Aufgabe ist dies überraschend etwas Unfuges mit CSS. Wenn Sie es jedoch ein paar Mal gemacht haben, wird es viel einfacher. Es gibt verschiedene Möglichkeiten, Dinge zu zentrieren.

Für ein Blockelement (normalerweise ein Bild) verwenden wir das Margin-Attribut:

.Mitte Anzeige: Block; Marge: auto; 

Dadurch wird sichergestellt, dass das Element als Block angezeigt wird und der Rand auf jeder Seite automatisch festgelegt wird (wodurch sie gleich sind). Wenn Sie alle Bilder auf einer bestimmten Seite zentrieren möchten, können Sie sogar hinzufügen “Marge: auto” zum img-Tag:

img margin: auto; 

Um zu erfahren, warum es auf diese Weise funktioniert, lesen Sie die Erklärung zum CSS-Box-Modell auf W3C. Hier ist eine kurze grafische Version:

Was aber, wenn wir den Text zentrieren möchten? CSS hat dazu eine spezielle Methode:

.centertext text-align: center; 

Wenn wir das benutzen wollen “Centertext” Klasse, um den Text in einem bestimmten Absatz zu zentrieren, müssen wir diese Klasse nur dem hinzufügen

Etikett:

Dieser Text wird zentriert.

Das Erinnern an diese verschiedenen Schritte ist jedoch eine andere Sache. Sie können diese Seite mit einem Lesezeichen versehen.

8. Anpassen der Polsterung

Die Auffüllung eines Elements gibt an, wie viel Platz auf jeder Seite sein sollte. Wenn Sie beispielsweise am unteren Rand eines Bilds 25 Pixel Abstand hinzufügen, wird der folgende Text um 25 Pixel nach unten verschoben. Viele Elemente können aufgefüllt werden, aber wir verwenden hier ein Bild als Beispiel.

Angenommen, Sie möchten, dass jedes Bild auf der linken und rechten Seite jeweils 20 Pixel und auf und unter 40 Pixel hat. Es gibt verschiedene Möglichkeiten, dies zu tun. Die einfachste:

img padding-top: 40px; Polsterung rechts: 25px; Polsterung unten: 40px; Polsterung links: 25px; 

Es gibt eine kurze Hand, mit der wir all diese Informationen präsentieren können:

img padding: 40px 25px 40px 25px; 

Dadurch werden die oberen, rechten, unteren und linken Abstände auf die rechte Zahl gesetzt. Aber wir können es noch kürzer machen:

img padding: 40px 25px

Wenn Sie nur zwei Werte verwenden, wird der erste Wert für den oberen und unteren Wert festgelegt, während der zweite links und rechts ist.

9. Markieren Sie Tabellenzeilen

CSS kann viel dazu beitragen, dass Ihre Tabellen wirklich schön aussehen. Das Hinzufügen von Farben, das Anpassen der Rahmen und die Anpassung Ihres Tisches an mobile Bildschirme sind einfach. Wir betrachten hier nur einen coolen Effekt: Hervorheben von Tabellenzeilen, wenn Sie mit der Maus darüber fahren.

Hier ist der Code, den Sie dafür brauchen:

tr: hover Hintergrundfarbe: #ddd; 

Immer wenn Sie mit der Maus über eine Tabellenzelle fahren, ändert sich diese Farbe. Auf der W3C-Seite finden Sie weitere interessante Dinge, die Sie tun können.

10. Bilder zwischen transparent und undurchsichtig verschieben

CSS kann Ihnen auch dabei helfen, coole Sachen mit Bildern zu machen. Beispielsweise können Bilder mit geringerer Deckkraft angezeigt werden (sie erscheinen geringfügig) “weiß geworden”) und bringen Sie sie zur vollen Deckkraft, wenn Sie mit der Maus darüber fahren. So machen wir das:

img Opazität: 0,5; Filter: Alpha (Deckkraft = 50); 

Das “Filter” Attribut macht dasselbe wie “Opazität,” Internet Explorer 8 und frühere Versionen erkennen die Opazitätsmessung jedoch nicht. Daher ist es ratsam, sie aufzunehmen.

Nun, da die Bilder etwas transparent sind, werden wir sie bei einem Mouseover vollständig undurchsichtig machen:

img: hover Opazität: 1,0; Filter: Alpha (Deckkraft = 100); 

Werden Sie ein CSS-Meister

Mit diesen CSS-Codebeispielen sollten Sie eine bessere Vorstellung davon haben, wie CSS funktioniert. Nachdem Sie alle durchgegangen sind, werden Sie eine Reihe von Mustern bemerken, die Sie für den weiteren CSS-Code anwenden können. Lernen Sie HTML und CSS mit diesen Schritt für Schritt-Anleitungen. CSS und JavaScript? Wenn Sie der Meinung sind, wie Sie eine Website von Grund auf neu erstellen können, dann haben Sie hier einige großartige Schritt-für-Schritt-Anleitungen, die einen Versuch wert sind. Weiterlesen . Und dann wissen Sie, dass Sie wirklich ein CSS-Meister geworden sind.

Und wenn das alles zu kompliziert klingt, denken Sie daran, dass Sie nur einige CSS-Vorlagen verwenden. 11 CSS-Vorlagen-Sites: Nicht von vorne anfangen! 11 CSS-Template-Sites: Beginnen Sie nicht von vorne! Es gibt Tausende von kostenlosen CSS-Vorlagen, die online verfügbar sind und moderne Trends und Technologien unterstützen. Sie können sie in ihrer ursprünglichen Form verwenden oder sie an Ihre eigenen Bedürfnisse anpassen. Lesen Sie mehr und ändern Sie sie.

Was machst du mit CSS? Welche Beispiele möchten Sie in Zukunft sehen? Teilen Sie Ihre Gedanken in den Kommentaren unten mit!

Erfahren Sie mehr über: CSS, Webdesign.