Beliebte Beiträge Auf Dem Pc Und Software

Top Artikel Auf Internet - 2018

Format Fancy CSS-Schlagzeilen und Überschriften

Schlagzeilen sind auf den meisten Webseiten üblich. In der Tat, so ziemlich jedes Textdokument neigt dazu, mindestens eine Überschrift zu haben, so dass Sie den Titel dessen, was Sie lesen, wissen. Diese Überschriften werden mithilfe der HTML-Überschriftselemente h1, h2, h3, h4, h5 und h6 codiert.

Bei manchen Websites können Überschriften ohne diese Elemente codiert werden. Stattdessen können Überschriften Absätze verwenden, denen bestimmte Klassenattribute hinzugefügt wurden, oder Unterteilungen mit Klassenelementen. Der Grund, warum ich oft von dieser inkorrekten Praxis höre, ist, dass der Designer "nicht mag, wie Überschriften aussehen". Standardmäßig werden Überschriften in Fettschrift angezeigt und sie sind größer, insbesondere die Elemente h1 und h2, die in einer viel größeren Schriftgröße als der Rest des Texts einer Seite angezeigt werden. Beachten Sie, dass dies nur das Standard-Aussehen dieser Elemente ist! Mit CSS können Sie die Überschrift so gestalten, wie Sie es möchten! Sie können die Schriftgröße ändern, das Fett entfernen und so viel mehr. Überschriften sind der richtige Weg, um die Überschriften einer Seite zu codieren. Hier sind einige Gründe warum.

Warum Überschrift-Tags anstelle DIVs und Styling verwenden

Suchmaschinen wie Überschrift-Tags


Dies ist der beste Grund, Überschriften zu verwenden und sie in der richtigen Reihenfolge zu verwenden (dh. H1, dann h2, dann h3 usw.). Suchmaschinen geben Texten innerhalb von Überschriften-Tags die höchste Gewichtung, da für diesen Text ein semantischer Wert vorhanden ist. Mit anderen Worten, indem Sie Ihren Seitentitel H1 beschriften, sagen Sie dem Suchmaschinen-Spider, dass dies der Fokus # 1 der Seite ist. H2-Überschriften haben die Hervorhebung von # 2 usw.

Sie müssen sich nicht daran erinnern, welche Klassen Sie verwendet haben, um Ihre Schlagzeilen zu definieren

Wenn Sie wissen, dass alle Ihre Webseiten ein fettes H1 haben, 2em und gelb, dann kannst du das einmal in deinem Stylesheet definieren und fertig sein. 6 Monate später, wenn Sie eine weitere Seite hinzufügen, fügen Sie einfach ein H1-Tag oben auf Ihrer Seite hinzu. Sie müssen nicht zu anderen Seiten zurückkehren, um herauszufinden, welche Stil-ID oder Klasse Sie zum Definieren der Haupt-ID verwendet haben Überschrift und Unterüberschriften.

Sie liefern eine starke Seitengliederung

Umrisse erleichtern das Lesen von Texten. Aus diesem Grund haben die meisten US-Schulen den Schülern beigebracht, einen Entwurf zu schreiben, bevor sie das Papier schreiben. Wenn Sie Überschrift-Tags in einem Gliederungsformat verwenden, hat Ihr Text eine klare Struktur, die sich sehr schnell bemerkbar macht. Außerdem gibt es Werkzeuge, die die Seitengliederung überprüfen können, um eine Übersicht zu liefern, und diese beruhen auf Überschriften-Tags für die Gliederungsstruktur.

Ihre Seite wird auch bei deaktivierten Stilen Sinn machen

Nicht jeder kann sie anzeigen oder verwenden Stylesheets (und das kommt auf # 1 zurück - Suchmaschinen sehen den Inhalt (Text) Ihrer Seite, nicht die Stylesheets). Wenn Sie Überschriften-Tags verwenden, machen Sie Ihre Seiten leichter zugänglich, da die Überschriften Informationen liefern, die ein DIV-Tag nicht hat.

Für Bildschirmleser und Website-Zugänglichkeit

Die richtige Verwendung von Überschriften schafft eine logische Struktur ein Dokument. Dies ist, was Bildschirmleser verwenden, um eine Website für einen Benutzer mit Sehbehinderung zu "lesen", um Ihre Website für Menschen mit Behinderungen zugänglich zu machen.

Formatieren Sie den Text und die Schriftart Ihrer Überschriften

Der einfachste Weg, sich vom "großen, kühnen und hässlichen" Problem der Überschriften-Tags zu entfernen, besteht darin, den Text so zu formatieren, wie er aussehen soll. In der Tat, wenn ich an einer neuen Website arbeite, schreibe ich in der Regel die Absätze, h1, h2 und h3 Stile zuerst. Ich bleibe normalerweise nur mit Schriftfamilie und Größe / Gewicht. Dies könnte beispielsweise ein vorläufiges Stylesheet für eine neue Site sein (dies sind nur einige Beispielstile, die verwendet werden könnten):

 body, html {margin: 0; Auffüllen: 0; } p {font: 1em Arial, Genf, Helvetica, serifenlos; } h1 {font: bold 2em "Times New Roman", Times, Serifen; } h2 {font: bold 1.5em "Times New Roman", Times, Serifen; } h3 {font: bold 1.2em Arial, Genf, Helvetica, serifenlos; } 

Sie können die Schriftarten Ihrer Überschrift ändern oder den Textstil oder sogar die Textfarbe ändern. All dies verwandelt Ihre "hässliche" Überschrift in etwas Lebendigeres und im Einklang mit Ihrem Design.

 h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", Serifen ; Rand: 0; Auffüllen: 0; Farbe: # e7ce00; } 

Borders können Headlines anziehen

Borders sind eine gute Möglichkeit, um Ihre Schlagzeilen zu verbessern. Und Grenzen sind einfach hinzuzufügen. Aber vergiss nicht, mit den Grenzen zu experimentieren - du brauchst keinen Rand auf jeder Seite deiner Überschrift. Und Sie können mehr als nur einfach langweilig Grenzen verwenden.

 h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", Serifen; Rand: 0; Auffüllen: 0; Farbe: # e7ce00; border-top: fest # e7ce00 mittel; border-bottom: gepunktet # e7ce00 dünn; Breite: 600px; } 

Ich habe meiner Beispielüberschrift einen oberen und einen unteren Rand hinzugefügt, um einige interessante visuelle Stile vorzustellen. Sie können Grenzen auf jede Art und Weise hinzufügen, die Sie wollten, um den gewünschten Design-Stil zu erreichen.

Hinzufügen von Hintergrundbildern zu Ihren Schlagzeilen für noch mehr Pizz

Viele Websites haben einen Kopfbereich am oberen Rand der Seite, der a enthält Überschrift - in der Regel der Site-Titel und eine Grafik. Die meisten Designer betrachten dies als zwei separate Elemente, müssen es aber nicht. Wenn die Grafik nur dazu da ist, die Überschrift zu schmücken, warum fügen Sie sie nicht zu den Überschriften-Stilen hinzu?

Senden Sie Ihren Kommentar