Sobald Sie begonnen haben, mit HTML zu experimentieren 17 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 Wenn Sie die folgenden 17 HTML-Tags kennen (und die wenigen, die dazu gehören) Ich werde in der Lage sein, eine grundlegende Webseite von Grund auf neu zu erstellen oder den Code zu optimieren, der von einer App wie ... Read More erstellt wurde, und Sie werden wahrscheinlich daran interessiert sein, Ihren Webseiten mehr Power zu verleihen. CSS ist der beste Weg, dies zu tun. Mit CSS können Sie Änderungen auf der gesamten Seite anwenden, ohne viele Inline-HTML-Stile verwenden zu müssen. 9 Fehler, die beim Erstellen einer Webseite nicht auftreten sollten 9 Fehler beim Erstellen einer Webseite Folgende HTML-Codierungsfehler sind einfach zu beheben make, aber wenn Sie sie früher als später abstellen, wird Ihre Seite besser aussehen, einfacher zu warten sein und funktionieren, wie Sie es wollen. Weiterlesen .
Wir besprechen, wie Sie ein Inline-Stylesheet erstellen, damit Sie Ihre CSS-Kenntnisse üben können, und dann gehen wir zu 10 einfachen Beispielen, die Ihnen zeigen, wie Sie einige grundlegende Dinge tun können. Von da an ist Ihrer Fantasie keine Grenze gesetzt!
Wenn Sie eine etwas technischere Einführung wünschen, sollten Sie sich 5 Baby Steps zum Erlernen von CSS und ein Kick-Ass CSS Sorcerer 5 Baby Schritte zum Erlernen von CSS und ein Kick-Ass CSS Sorcerer 5 Baby Schritte zum Erlernen von CSS und Werden Ein Kick-Ass CSS Sorcerer CSS ist die wichtigste Veränderung, die Webseiten im letzten Jahrzehnt erlebt haben, und ebnete den Weg für die Trennung von Stil und Inhalt. Auf moderne Weise definiert XHTML die semantische Struktur ... Read More.
Inline Stylesheet
Jedes HTML-Dokument enthält ein Tag. In diesem Kopfabschnitt wird das Inline-CSS-Stylesheet verwendet. So wird es aussehen:
All of your CSS declarations.Setzen Sie das oben in Ihrem Dokument, füllen Sie es mit Ihrem CSS, und schon können Sie loslegen.
1. Einfache Absatzformatierung
Das Schöne am Styling mit CSS ist, dass Sie nicht jedes Mal, wenn Sie ein Element erstellen, einen Stil angeben müssen. Sie können einfach sagen "alle Absätze sollten dieses besondere Styling haben" und Sie können loslegen. Hier ist ein Beispiel, wie Sie das tun könnten.
Nehmen wir an, Sie möchten jeden Absatz (das ist alles mit a
HTML-Tag Top 11 HTML-Tags Jeder Blogger und Website-Besitzer muss wissen Top 11 HTML-Tags Jeder Blogger und Website-Besitzer muss wissen Das World Wide Web kennt viele Sprachen und ist in mehreren verschiedenen codiert. Die einzige Sprache jedoch, die überall gefunden werden kann und seit der Erfindung von Webseiten existiert, ist das ... Lesen Sie mehr) auf Ihrer Seite, um etwas größer als üblich zu sein. Und dunkelgrau statt schwarz. So würden Sie das mit CSS machen:
p { font-size: 120%; color: dimgray; } Das ist alles dazu. Jetzt, wenn der Browser a
Absatz, erbt der Text die Größe (120 Prozent der Normalen) und die Farbe ("Dimgray").
Wenn Sie wissen möchten, welche einfachen Textfarben Sie verwenden können, sehen Sie sich diese CSS-Farbliste von Mozilla an.
2. Ändern Sie den Brieffall
Okay, jetzt, wo wir gesehen haben, wie man jeden Absatz ändert, schauen wir uns an, wie wir etwas selektiver vorgehen können. Lassen Sie uns eine Bezeichnung für Absätze erstellen, die in Kapitälchen stehen sollten. So würden wir das machen:
p.smallcaps { font-variant: small-caps; } Um einen Absatz zu erstellen, der ausschließlich aus Kapitälchen besteht, verwenden wir ein etwas anderes HTML-Tag. So sieht es aus:
Dein Absatz hier.
Wie Sie sehen können, gibt das Hinzufügen eines Punkts und eines Klassennamens zu einem bestimmten Element in CSS einen Untertyp dieses Elements an, der durch eine Klasse definiert wird. Sie können dies mit Text, Bildern, Links und allem anderen tun.
Wenn Sie die Groß- / Kleinschreibung eines Texts in einen bestimmten Fall ändern möchten, können Sie diese CSS-Zeilen verwenden:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; Der letzte kapitalisiert den ersten Buchstaben jedes Satzes.
3. Ändern Sie die Verbindungsfarben
Versuchen wir, den Stil von etwas anderem als einem ganzen Absatz zu ändern. Es gibt vier verschiedene Farben, denen eine Verknüpfung zugewiesen werden kann: die Standardfarbe, die besuchte Farbe, die Schwebefarbe und die aktive Farbe (die beim Klicken angezeigt wird). So können wir diese ändern:
a:link { color: gray; } a:visited { color: green; } a:hover { color: rebeccapurple; } a:active { color: teal; } Beachten Sie, dass auf jedes "a" ein Doppelpunkt und kein Punkt folgt.
Jede dieser Deklarationen ändert die Farbe eines Links in einem bestimmten Kontext. Sie müssen die Klasse eines Links nicht ändern, um die Farbe zu ändern. Es wird alles vom Benutzer und dem Status des Links bestimmt.
4. Entfernen Sie die Unterstreichungen
Während unterstrichener Text ziemlich klar auf einen Link hinweist, sieht es manchmal schöner aus, diese Unterstreichung zu verwerfen. Dies wird mit dem Attribut "text-decoration" erreicht. So würden wir die Links zu Links entfernen:
a { text-decoration: none; } Alles mit dem Link-Tag ("a") bleibt nicht unterstrichen. Möchten Sie unterstreichen, wenn der Benutzer darüber schwebt? Füge einfach folgendes hinzu:
a:hover { text-decoration: underline; } Sie können diese Textdekoration auch aktiven Links hinzufügen, um sicherzustellen, dass die Unterstreichung nicht verschwindet, wenn auf die Verknüpfung geklickt wird.
5. Erstellen Sie eine Verknüpfungsschaltfläche
Wenn Sie mehr Aufmerksamkeit auf Ihren Link lenken möchten, ist die Verwendung eines Linkbuttons eine gute Möglichkeit, dies zu tun. Dieser benötigt ein paar Zeilen mehr, aber wir gehen einzeln auf sie ein:
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; } Indem Sie alle vier Verbindungsstatus einbeziehen, stellen wir sicher, dass die Schaltfläche nicht verschwindet, wenn ein Benutzer die Maus berührt oder darauf klickt. Sie können auch verschiedene Parameter für Hover und aktive Links festlegen, wie zum Beispiel das Ändern der Schaltflächen- oder Textfarbe, um ein wenig Pop hinzuzufügen.
Die Hintergrundfarbe wird mit Hintergrundfarbe und Textfarbe mit Farbe eingestellt. Padding definiert die Größe der Box - der Text wird um 10 Pixel vertikal und 25 Pixel horizontal aufgefüllt. Text-Align stellt sicher, dass der Text in der Mitte der Schaltfläche angezeigt wird und nicht auf einer Seite. Text-Dekoration, wie wir im letzten Beispiel gesehen haben, entfernt die Unterstreichung.
"Display: inline-block" ist etwas komplizierter. Kurz gesagt, Sie können Höhe und Breite des Objekts festlegen und sicherstellen, dass beim Einfügen eine neue Linie beginnt.
6. Erstellen Sie ein Textfeld
Ein einfacher Absatz ist nicht sehr aufregend. Wenn Sie Ihren Call-to-Action oder ein anderes Element auf Ihrer Seite hervorheben möchten, sollten Sie einen Rahmen darum werfen. So wird das mit einer Textzeichenfolge ausgeführt:
p.important { border-style: solid; border-width: 5px; border-color: purple; } Dieser ist ziemlich einfach. Es erzeugt eine solide violette Umrandung, 5 Pixel breit, um jeden wichtigen Absatz. Um einen Absatz zu erben, deklarieren Sie ihn wie folgt:
Dein wichtiger Absatz hier.
Dies funktioniert unabhängig von der Größe Ihres Absatzes. Eine einzelne Zeile erhält einen Rand mit der Breite der Seite, eine Zeile mit einem höheren und ein längerer Absatz mit einem größeren Rand.
Es gibt viele verschiedene Rahmenstile, die Sie anwenden können. Anstelle von "solid", versuchen Sie "dotted" oder "double". Und die Breite kann "thin", "medium" oder "dick" sein. Sie können sogar die Dicke jedes Rahmens individuell definieren, wie folgt:
border-width: 5px 8px 3px 9px; Das ergibt einen oberen Rand von 5 Pixeln, einen rechten Rand von 8, einen unteren Rand von 3 und einen linken Rand von 9 Pixeln.
7. Elemente in der Mitte ausrichten
Für eine sehr häufige Aufgabe ist dies eine überraschend wenig intuitive Sache mit CSS. Sobald Sie es ein paar Mal getan haben, wird es viel einfacher. Es gibt ein paar verschiedene Möglichkeiten, Dinge zu zentrieren.
Für ein Blockelement (normalerweise ein Bild) verwenden wir das Attribut margin:
.center { display: block; margin: auto; } Dies stellt sicher, dass das Element als Block angezeigt wird und dass der Rand auf jeder Seite automatisch eingestellt wird (was sie gleich macht). 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 so funktioniert, sehen Sie sich die W3C-Erklärung zum CSS-Box-Modell an. Hier ist eine kurze, grafische Version:
Was aber, wenn wir Text zentrieren wollen? CSS hat dafür eine spezielle Methode:
.centertext { text-align: center; } Wenn wir die "centertext" -Klasse verwenden möchten, um den Text in einem bestimmten Absatz zu zentrieren, müssen wir nur diese Klasse zu der Klasse hinzufügen
Etikett:
Dieser Text wird zentriert sein.
Die Erinnerung an diese verschiedenen Schritte ist jedoch eine andere Sache. Sie können diese Seite mit einem Lesezeichen versehen.
8. Einstellen der Polsterung
Das Padding eines Elements gibt an, wie viel Platz auf jeder Seite sein sollte. Wenn Sie beispielsweise am unteren Rand eines Bilds 25 Bildpunkte mit Füllmaterial hinzufügen, wird der folgende Text um 25 Pixel nach unten verschoben. Viele Elemente können Padding haben, aber wir verwenden hier ein Bild für ein Beispiel.
Nehmen wir an, Sie möchten, dass jedes Bild auf der linken und rechten Seite 20 Pixel und auf der oberen und unteren Seite 40 Pixel hat. Es gibt eine Reihe von Möglichkeiten, wie Sie dies tun können. Die einfachste:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; } Es gibt eine kurze Hand, die wir verwenden können, um all diese Informationen zu präsentieren:
img { padding: 40px 25px 40px 25px; } Dadurch werden die oberen, rechten, unteren und linken Abstände auf die richtige 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 Rand festgelegt, während der zweite Wert links und rechts liegt.
9. Markieren Sie Tabellenzeilen
CSS kann eine Menge dazu beitragen, dass Ihre Tabellen wirklich gut aussehen. Das Hinzufügen von Farben, das Anpassen von Rahmen und das Reagieren Ihres Tisches auf mobile Bildschirme sind einfach. Wir sehen uns hier nur einen coolen Effekt an: Markieren Sie Tabellenzeilen, wenn Sie mit der Maus darüber fahren.
Hier ist der Code, den du dafür brauchst:
tr:hover { background-color: #ddd; } Wenn Sie nun mit der Maus über eine Tabellenzelle fahren, wird diese Zeile ihre Farbe ändern. Um einige der anderen coolen Dinge zu sehen, die Sie tun können, sehen Sie sich die W3C-Seite zu fantastischen CSS-Tabellen an.
10. Verschieben von Bildern zwischen Transparent und Opak
CSS kann dir helfen, coole Dinge mit Bildern zu machen. Zum Beispiel kann es Bilder mit weniger als voller Deckkraft anzeigen (sie erscheinen leicht "weiß") und bringen sie zu voller Deckkraft, wenn Sie mit der Maus darüber fahren. So machen wir das:
img { opacity: 0.5; filter: alpha(opacity=50); } Das "Filter" -Attribut macht dasselbe wie "Opazität", aber Internet Explorer 8 und früher erkennen die Opazitätsmessung nicht, daher ist es eine gute Idee, sie einzuschließen.
Jetzt, da die Bilder leicht transparent sind, bringen wir sie mit einem Mouseover vollständig undurchsichtig:
img:hover { opacity: 1.0; filter: alpha(opacity=100); } Werde ein CSS-Master
Mit diesen CSS-Codebeispielen sollten Sie eine viel bessere Vorstellung davon haben, wie CSS funktioniert. Sobald Sie alle durchgelesen haben, werden Sie eine Reihe von Mustern bemerken, die Sie auf weiteren CSS-Code anwenden können. Lernen Sie HTML und CSS mit diesen Schritt für Schritt Tutorials Lernen Sie HTML und CSS mit diesen Schritt für Schritt Tutorials Neugierig auf HTML, CSS und JavaScript? Wenn Sie glauben, dass Sie ein Händchen dafür haben, zu lernen, wie Sie Webseiten von Grund auf neu erstellen, sollten Sie hier einige Schritt-für-Schritt-Tutorials ausprobieren. Weiterlesen . Und dann weißt du, dass du wirklich ein CSS-Master geworden bist.
Und wenn Ihnen das alles zu kompliziert erscheint, denken Sie daran, dass Sie sich nur ein paar CSS-Templates besorgen. CSS Template Sites: Nicht von vorne beginnen! 11 CSS-Vorlagen-Sites: Starten Sie nicht von Grund auf! Es gibt Tausende von kostenlosen CSS-Vorlagen online verfügbar, die alle modernen Designtrends und Technologien umfassen. Sie können sie in ihrer ursprünglichen Form verwenden oder sie anpassen, um sie zu Ihren eigenen zu machen. 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!