Standardisierte Designlösungen – Markup Language and Style Handbook
Web Standards Solutions Das Markup and Style Handbook
Teil 1: Machen Sie sich mit Markup vertraut, beginnend mit der Markup-Syntax
Kapitel 2 Titel
Übersicht:
Alle Webseiten benötigen nicht nur Titel, sondern können bei korrekter Markierung auch zum Webdesign und zur Benutzerfreundlichkeit beitragen. Ganz schön Wenige.
Was das Erscheinungsbild angeht, verwendet der Titel einer Webseite normalerweise eine größere Schriftgröße und kann eine andere Farbe oder Schriftart als der Haupttext verwenden. Die Funktion des Titels besteht darin, „das besprochene Thema kurz zu beschreiben“. In den folgenden Kapiteln beschreibt das W3C es so: Eine Zusammenfassung jedes Absatzes auf einer Webseite anzeigen.
Wie erstelle ich einen Seitentitel, um die Informationen, die wir anzeigen möchten, am effektivsten zu nutzen? In diesem Kapitel besprechen wir Wir werden mehrere häufig verwendete Methoden zur Titelverarbeitung untersuchen und versuchen, eine davon zu finden, die für uns am hilfreichsten ist. Anschließend werden wir einige CSS-Tipps und -Tricks verwenden, um die beste Methode zu finden So erstellen Sie einen Dokumenttitel: Was ist ein guter Weg?
Bevor wir diese Frage beantworten, gehen wir davon aus, dass wir jetzt den Titel oben im Dokument platzieren, und schauen wir uns drei Möglichkeiten an, um einen ähnlichen Effekt zu erzielen.
Methode A: Macht es Sinn?
Super Cool Page Title
Obwohl die -Tag wird in einigen Fällen verwendet. Es ist ein praktisches Tag, aber für den Seitentitel bedeutet es nicht viel. Der einzige Vorteil dieser Methode besteht darin, dass wir einen CSS-Stil für die Überschriftenklasse angeben können Text sieht aus wie ein Titel.
.heading {
Schriftgröße: 24px; Schriftstärke: fett;
Farbe: blau;
}
Jetzt werden alle mit der Überschrift „Klasse“ gekennzeichneten Titel größer, dicker und blauer, was aber passiert, wenn jemand mit einem Browser auf diese Seite zugreift, der kein CSS unterstützt. Wenn wir beispielsweise Fügen Sie den CSS-Stil in einer externen Stylesheet-Datei ein, die der Browser nicht unterstützt – oder was passiert, wenn ein Bildschirmleser die Seite für Benutzer mit Behinderungen vorliest? Benutzer, die auf diese Weise auf die Seite zugreifen, können sie nicht sehen (hören). ) Der Unterschied besteht darin, dass Annotationsmethoden wie
class="heading" nur die Bedeutung des Tag-Inhalts beschreiben, aber Ändern Sie den Standardanzeigestil.
Wenn die Suchmaschine diese Seite crawlt, überspringt sie das Tag , als ob es nicht vorhanden wäre, und erhöht nicht die Gewichtung der darin enthaltenen Schlüsselwörter. Dies wird später in diesem Kapitel näher erläutert.
Da es sich bei dem -Tag um ein Inline-Element handelt, müssen wir den Inhalt größtenteils in ein anderes einfügen Container auf Blockebene, zum Beispiel , damit er eine eigene Zeile einnimmt. Selbst wenn Sie die erforderlichen Container hinzufügen, wird dies nicht unterstützt CSS zeigt den Text weiterhin in seiner ursprünglichen Form an, damit Benutzer ihn sehen können. Es gibt keinen Unterschied zwischen dem Titel und dem Text.
#p#
Methode B: Kombination von P und B
Super cooler Seitentitel
Methode B verwendet das Absatz-Tag, das uns die gewünschte Elementanzeige auf Blockebene ermöglicht, und das -Tag macht den Text fett (in den meisten Browsern) – aber wenn wir wichtige Titel auf diese Weise markieren , wir haben immer noch mit dem gleichen Mangel an semantischen Ergebnissen zu kämpfen Im Gegensatz zu Methode A wird der Text in den meisten Browsern immer noch fett dargestellt, auch wenn ihm die Definition des CSS-Stils fehlt Wie beim -Tag erhöhen Suchmaschinen jedoch nicht die Gewichtung des Schlüsselworts für fetten Text innerhalb des Absatzes.
Es ist schwierig, Stile hinzuzufügen.
p- und b-Tags verhindern, dass wir diesem Titel einen anderen Stil verleihen als anderen Absätzen. Vielleicht möchten wir den Titel auf einzigartige Weise hervorheben und dem Seiteninhalt Definition und Struktur hinzufügen – aber mit After verwenden wir diese Methode, um ihn fett erscheinen zu lassen , wir haben keine Möglichkeit, diese Dinge zu tun.
Methode C: Stil und Substanz
Super Cool Page Title
Haha , hier kommt unser guter Freund: Titel-Tags gibt es von Anfang an, aber viele Webdesigner nutzen sie immer noch nicht konsequent. Bei richtiger Verwendung können Titel-Tags einen Ankerpunkt für den Seiteninhalt bieten Flexible, indizierbare und stilveränderbare Struktur. Aus Sicht der Tags selbst werden Sie von ihrer Einfachheit begeistert sein. Man kann sogar sagen, dass diese Methode einige Bytes einsparen kann die ersten beiden Methoden, die ignoriert werden können, aber jedes kleinere Byte ist eine Änderung. stellen jeweils sechs Überschriftenebenen dar, von der wichtigsten bis zur unwichtigsten; sie sind selbst Elemente auf Blockebene und können ohne zusätzlichen Container abgeschlossen werden . Eine Zeile, einfach und effizient – das beste Werkzeug für diesen Job.
Einfach zu definierende Stile
Weil das -Tag eine eindeutige Bedeutung hat, im Gegensatz zu Das
-Tag wird im Text mehrfach verwendet, sodass wir ihm mithilfe von CSS verschiedene Stile hinzufügen können (wir werden es in diesem Kapitel unter „Weitere Techniken“ ausführlich besprechen).
Noch wichtiger ist, auch ohne Wenn Sie Stildefinitionen hinzufügen, sieht der Titel-Tag eindeutig wie ein Titel aus. Der Browser verwendet große Schriftarten und Fettschrift, um den Inhalt von
darzustellen. Auch wenn alle Stildefinitionen von der Seite entfernt werden, können Sie die Struktur weiterhin sehen des Dokuments, da der richtige Titel-Tag die Bedeutung des Inhalts beschreibt, nicht die Präsentationsmethode (Abbildung 2-1)
Abbildung 2-1: Verwendung von Titel-Tags nach der Trennung von den Stilen Seite Inhalt
Screenreader, PDAs, Mobiltelefone und andere visuelle und nicht-visuelle Browser können den Inhalt des Title-Tags ebenfalls erkennen und korrekt verarbeiten und so seine Bedeutung gegenüber anderen Inhalten auf der Seite hervorheben die CSS nicht unterstützen (oder nicht unterstützen können), denken nicht, dass es etwas Besonderes ist.
Ärgerliche Standardstile
In der Geschichte des Webdesigns vermeiden Designer einfach die Verwendung von Titel-Tags denn ohne Stil sehen Titel-Tags wie Monster aus, und einige von ihnen vermeiden die Verwendung von , oder verwenden Sie stattdessen eine kleinere Schriftgröße und eine höhere Beschriftung Titel-Tag.
Es gibt jedoch einen wichtigen Punkt, der hervorgehoben werden muss, indem wir den Stil dieser Titel-Tags leicht an unsere eigenen Vorlieben anpassen. Beispielsweise muss Etwas, das die Hälfte des Bildschirms einnimmt. Später werde ich zeigen, wie Sie einfach CSS-Stile verwenden, um Titel-Tags zu definieren, um Ihre Angst vor zu überwinden.
Freundlich für Suchmaschinen
Das ist der größte Vorteil von Suchmaschinen. Fettgedruckte Schriftarten in -Tags bedeuten für Suchmaschinen nicht viel viel Zeit, aber es kann Suchmaschinen dabei helfen, Ihre Seite zu indizieren und Benutzern das Auffinden Ihrer Seite zu erleichtern.
Suchmaschinenroboter legen großen Wert auf den Inhalt im Titel-Tag. Vielleicht möchten Sie ein paar Schlüsselwörter anhäufen Nachdem sie die Tags verarbeitet haben, werden sie auch das Titel-Tag im Seiteninhalt verarbeiten ziehen ihre Aufmerksamkeit auf sich und werden von ihnen ignoriert.<br>Es dauert also nur wenig Zeit, es für andere einfacher zu machen. Das Auffinden Ihrer Seite nach Inhalt klingt gut, oder? <br><strong>Eine Randbemerkung zur Tag-Reihenfolge</strong><br>Im obigen Beispiel ist der Titel das Wichtigste auf der Seite, da er der Titel des gesamten Dokuments ist. Daher verwenden wir laut W3C das wichtigste Titel-Tag. Einige Leute denken, dass das Überspringen der Titelebene keine gute Vorgehensweise ist. Nehmen wir zum Beispiel an, wir haben die folgende Webseite: <br><span class="code"><h1>Super Cool Page Title</h1></span><br>Dann Der nächste Titel (sofern es sich nicht um einen anderen <h1> handelt) sollte <h2> sein. Verwenden Sie dann <h3> und so weiter. Sie dürfen eine bestimmte Überschriftenebene nicht überspringen. Verwenden Sie beispielsweise <h3> direkt nach <h1>. Ich stimme zu und denke, dass die Struktur und Gliederung gleich sind und jede Ebene in der richtigen Reihenfolge verwendet werden sollte. Dadurch können Sie problemlos Titel und Stile zu vorhandenen Seiten hinzufügen. Es ist weniger wahrscheinlich, dass alle Titelebenen verbraucht werden. <br> Wie bereits erwähnt, stellen Designer möglicherweise den wichtigsten Titel auf der Seite dar, nur weil die Standardschriftgröße nicht so beängstigend ist wie <h1> . Aber denken Sie daran, zuerst die Struktur zu schreiben und dann den Stil anzupassen. Wir können die Schriftgröße des Titel-Tags jederzeit über CSS anpassen.<br>
#p#<br><strong>Zusammenfassung</strong><br>Lassen Sie uns kurz überprüfen, warum es besser ist, Titel-Tags (<h1> bis <h6>) zu verwenden, um die Titel innerhalb der Seite zu markieren.<br><strong>Methode A:</strong><br>Visuelle Browser zeigen den Titel im gleichen Stil wie normalen Text an, wenn die CSS-Funktion deaktiviert ist oder diese nicht unterstützt. Nicht-visuelle Browser haben keine Ahnung von der Beziehung zwischen dem Titel und Der Unterschied. <br>Suchmaschinen schenken den mit <span> gekennzeichneten Titeln keine besondere Aufmerksamkeit.<br>Wir können einzigartige Stile entwickeln, aber wenn wir Titel hinzufügen, werden wir durch die Überschriftenklasse gefangen.
<br><strong>Methode B:</strong><br>Der visuelle Browser zeigt Inhalte nur in Fettschrift an und verwendet weiterhin die Standardschriftgröße. <br>Wir können dem Titel keinen eindeutigen Stil hinzufügen, der sich vom Haupttext unterscheidet.<br>Suchmaschinen achten auch nicht besonders auf < ;p> <b>Der Inhalt des erstellten Titels.
<br><strong>Methode C: </strong><br> vermittelt die genaue Bedeutung des Textes im Titel-Tag. <br>Ob es sich um einen visuellen oder nicht-visuellen Browser handelt, der Titelinhalt wird unabhängig davon korrekt verarbeitet welches Format es liest<br>Suchmaschinen achten auf die Schlüsselwörter im Titel-Tag.<br><strong>Erweiterung der Techniken</strong><br>Hier übernehmen wir Methode C und verwenden sie, um mit etwas einfachem CSS zu experimentieren Wir werden die Einzigartigkeit des Titel-Tags voll ausnutzen. Wir können den Titel-Tag mit großer Sicherheit verwenden, da der Titelinhalt unabhängig vom Browser und Gerät korrekt verarbeitet werden kann es hoch und bring es auf die Straße (wenn du es mitbringen kannst. Wenn du mit einem HTML-Tag auf die Straße gehst...)<br><strong>Einfacher Stil</strong><br>Mit CSS, das einfachste und einfachste Der Effekt besteht darin, verschiedene Schriftarten für den Titel festzulegen und diese dann auf alle <h1>-Tags anzuwenden (wenn Sie ein externes Stylesheet verwenden, können Sie den Stil auf die gesamte Website anwenden). Wenn Sie später die gesamte Website ändern möchten, müssen Sie für jede <h1>-Farbe nur ein paar CSS-Regeln ändern, und die Auswirkungen der Änderungen sind sofort sichtbar, oder? <br>Lassen Sie uns den supercoolen Titel sagen:<br><span class="code"><h1>Supercooler Seitentitel</h1></span><br>Lassen Sie uns CSS verwenden, um Farbe, Schriftart und Größe zu ändern:<br> <span class="code">h1 {<br>Schriftfamilie: Arial, serifenlos;<br>Schriftgröße: 24px;<br>Farbe: #369;<br> }</span><br>Genau wie wir es gerade getan haben Was ich gesagt habe, ist sehr einfach. Alle <h1> auf der gesamten Seite sind auf die Größe 24 Pixel und die blaue Schriftart Arial (oder die Standard-Serifenschrift) eingestellt, wie in Abbildung 2-2 gezeigt: <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/d403782309c7ce2ffc51499ef1aa3159-1.gif"> <br>Abbildung 2-2: Beispiel für einen Titelstil<br>Als nächstes fügen wir einen 1 Pixel breiten grauen Rahmen unter dem Titeltext hinzu (Abbildung 2-3):<br><span class="code">h1 {<br> Schriftfamilie : Arial, serifenlos;<br> Schriftgröße: 24px;<br> Farbe: #369;<br> padding-bottom: 4px;<br> border-bottom: 1px solid #999;<br> } </span><br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-2.gif"><br>Abbildung 2-3: Beispiel für einen Titelstil mit grauem unteren Rand <br> Wir haben einige weitere innere Flecken am unteren Rand des Textes gelassen, damit der untere Rand keine Schwierigkeiten beim Atmen hat. Da es sich bei den Titelbeschriftungen um Elemente auf Blockebene handelt, füllt der Rand nicht nur den unteren Rand des Textes aus, sondern erstreckt sich weiter nach rechts, bis er die gesamte Seitenbreite ausfüllt. <br> Es ist auch erwähnenswert, dass wir Verwenden Sie die Abkürzung „border“ – also in einer Zeile. Die Deklaration definiert auch Breite, Stil und Farbe. Sie können andere Einstellungen ausprobieren, um zu sehen, welche anderen Effekte es gibt.<br>
#p#<br><strong>Hinzufügen eines Hintergrunds</strong><br>Der Hintergrund kann dem Titel einen subtilen Effekt verleihen. Solange wir die Hintergrundfarbe und etwas Leerraum hinzufügen, können wir einen frischen und frischen Effekt erzeugen ohne Bilder zu verwenden. Zum Beispiel: <br><span class="code">h1 {<br>Schriftfamilie: Arial, serifenlos;<br>Schriftgröße: 24px;<br>Farbe: #fff;<br> padding: 4px;<br>background-color: #696;<br> }</span><br>Wir ändern den Text im Titel in Weiß, lassen einen 4-Pixel-Innenraum um ihn herum frei und ändern den Hintergrund Zum Beispiel: Wie in Abbildung 2-4 dargestellt, verläuft ein breiter grüner Streifen in der Farbe eines Billardtisches über die gesamte Seite und trennt die beiden Absätze. <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-3.gif"><br>Abbildung 2- 4: Festlegen des inneren Patches und der Hintergrundfarbe Titelbeispiel <br><strong>Hintergrund und Rahmen</strong><br> Fügen Sie einfach einen dünnen Rahmen unter dem Titel und einen hellen Hintergrund hinzu, und Sie können einen dreidimensionalen Effekt erstellen, ohne ihn zu verwenden ein Bild. .<br>Dieses CSS ist dem oben genannten sehr ähnlich, ändert nur ein paar Farben und fügt unten einen 2-Pixel-Rand hinzu<br><span class="code">h1 {<br>Schriftfamilie: Arial, sans -serif; <br> Schriftgröße: 24px;<br> Farbe: #666;<br> Innenabstand: 4px;<br> Hintergrundfarbe: #ddd;<br> Rand unten: 2px einfarbig #ccc;<br> } </span><br>Durch die Verwendung derselben Farbe mit unterschiedlicher Helligkeit können Sie einen realistischen dreidimensionalen Effekt erzeugen, wie in Abbildung 2-5 gezeigt: <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-4.gif"><br>Abbildung 2-5: Einstellung der Hintergrund und der untere Rand Der Titel <br><strong>Kachelhintergrund</strong><br>Wenn Sie Bilder verwenden, können Sie kreativer sein. Lassen Sie uns mit Photoshop ein kleines Bild im Format 10x10 mit einem schwarzen Rand am oberen Rand erstellen. Dann ist das Folgende der Grauverlauf von oben nach unten (wie in Abbildung 2-6 dargestellt): <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-5.jpg"><br>Abbildung 2-6 Kleines Bild, erstellt mit Photoshop<br>Wir können CSS verwenden, um dieses kleine Bild unten in unserer Schriftart <h1> einzufügen:<br><span class="code">h1 {<br> - Familie: Arial, serifenlos;<br> Schriftgröße: 24px;<br> Farbe: #369;<br> Polsterung unten: 14px;<br> Hintergrund: url(10x10.gif) wiederholen-x unten ; <br> }</span><br>Stellen Sie „repeat-x“ ein, damit der Browser das Hintergrundbild nur in horizontaler Richtung anordnet (das umgekehrte „repeat-y“ dient dazu, es in vertikaler Richtung anzuordnen), und wir legen „In Reihenfolge“ fest Klicken Sie auf das Bild am unteren Rand des Titels und fügen Sie einige untere innere Patches hinzu, um den Abstand zwischen dem Bild und dem Text anzupassen (Abbildung 2-7) <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-6.jpg"><br>Abbildung 2-7: Beispiel für einen Titel festlegen mit gekacheltem Hintergrund<br><strong>Symbol zum einfachen Ersetzen</strong><br>Wir können auch das cssdebackground-Attribut verwenden, um ein kleines Symbol links vom Text zu setzen, um die Methode der Hartcodierung des Bild-Tags zu ersetzen . Fügen Sie dem Titel ein kleines dekoratives Symbol hinzu, um den Anzeigeeffekt der Website in Zukunft sehr einfach zu ändern. Sie müssen nur eine CSS-Regel ersetzen, um den Anzeigeeffekt der gesamten Website zu ändern .<br>Der Code ist ungefähr derselbe wie der gekachelte Hintergrund oben: <br><span class="code">h1 {<br>Schriftfamilie: Arial, serifenlos;<br>Schriftgröße: 24px;<br>Farbe : #369;<br> padding-left: 30px;<br> background: url(icon.gif) no-repeat 0 50%;<br> }</span><br>Wir lassen auf der linken Seite ein zusätzliches Leerzeichen des Textes, um zu verhindern, dass wir über das gewünschte Symbol nachdenken, und legen Sie dann „No-Repeat“ fest, um anzugeben, dass das Hintergrundbild nicht gekachelt wird (wie in Abbildung 2-8 gezeigt). Gleichzeitig möchten wir, dass das Symbol positioniert wird bei 0 Pixeln links und gegenüber der vertikalen Mittellinie. <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-7.jpg"><br>Abbildung 2-8: Beispiel für einen Titel mit Symbolsatz<br>
#p#<br><strong>Einfach zu aktualisieren</strong><br>Stellen wir uns ein Szenario vor: Auf einer Website mit 100 Seiten verwenden wir nicht die obige Methode, sondern verwenden das <img alt="Auszeichnungssprache – Titel_HTML/Xhtml_Webseitenproduktion" >-Tag, um zu schreiben Die Symbole neben jedem Titel sind in den Website-Stil integriert. Nach ein paar Wochen plant der Eigentümer der Website, den Website-Stil zu ändern, und die neue Symbolgröße unterscheidet sich von der alten. Ups! Sie müssen zurückgehen und die <img alt="Auszeichnungssprache – Titel_HTML/Xhtml_Webseitenproduktion" >-Tags ändern, um den Pfad des neuen Symbols zu aktualisieren. Denken Sie darüber nach, welche Auswirkungen diese Ereignisse auf das Projektbudget und den Druck auf die Fertigstellungsfrist haben werden! <br>Wenn Sie diese nicht sehr wichtigen, dekorativen Symbole in eine CSS-Datei integrieren, dauert es nur wenige Minuten, um alle Symbole auf der gesamten Website auf einmal zu ersetzen, und Sie erhalten ein völlig neues Aussehen Ich bin in der Lage, nach und nach die Vorteile der Trennung von strukturellen Markup- und Anzeigeeffekten zu verstehen. <br><strong>Chamäleon-Effekt</strong><br> Die folgende Technik steht etwas im Widerspruch zu dem, was ich gerade gesagt habe, aber ich denke, dass diese Technik in gewisser Weise nützlich ist In manchen Fällen ist es sehr nützlich. Dies ist eine Technik, die ich im April 2003 häufig beim Standard-Refactoring für die Website des Fast Company-Magazins (www.fastcompany.com) verwendet habe. <br> Zu diesem Zeitpunkt hatten wir < auf der Website Neben dem ;h3>-Tag werden viele kleine Symbole im Format 13 x 13 verwendet, etwa so: <br><span class="code"><h3>
<img src="http://images.fastcompany.com/icon/first_imp.gif" style="max-width:90%" style="max-width:90%" alt="Auszeichnungssprache – Titel_HTML/Xhtml_Webseitenproduktion"> ERSTER EINDRUCK</h3></span><br>Es gibt zwei Gründe, warum wir uns entschieden haben, das Symbol so in die Webseite zu schreiben Je nach Art des Titels werden verschiedene Symbole verwendet (Buchclub ist ein Buch, Tageszitate sind Zitate usw.). Der zweite Grund ist, dass wir die Farbe der gesamten Website jeden Monat ändern, um sie an das aktuelle Titelthema anzupassen Natürlich ist diese Ersetzungsarbeit aufgrund der Verwendung von CSS sehr einfach. <br> Damit das Symbol zusammen mit anderen Seitenelementen seine Farbe ändert (sodass wir das Symbol nicht ständig für neue Farben erstellen müssen Zeit) verwenden wir nur zwei Symbole in zwei Farben: Weiß und Transparent (die Hintergrundfarbe wird mit Ausnahme jeder Änderung angezeigt). Abbildung 2-9 ist das Symbol, das vor der Einführung auf der Homepage platziert wird: <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-8.jpg"><br>Abbildung 2-9: 13X13 transparentes Symbol (vergrößert) <br> Um den transparenten Teil mit Farbe zu füllen, haben wir ein einfaches CSS-Hintergrundattribut verwendet, um die Farbe festzulegen hinter dem Diagramm und nicht hinter dem Titeltext erscheinen, haben wir den CSS-Selektor verwendet, um diese Regel nur für Bilder innerhalb des <h3>-Tags zu verwenden, um den gewünschten Effekt zu erzielen: <br><span class="code">h3 img; <br>Hintergrund: #696;<br> }</span><br>Ce code CSS signifie que toutes les balises <img alt="Auszeichnungssprache – Titel_HTML/Xhtml_Webseitenproduktion" > dans la balise <h3> définiront l'arrière-plan sur vert. La couleur d'arrière-plan sera affichée à travers des pixels transparents, mais la partie blanche sera toujours blanche. Vous devez modifier cette règle CSS et la changer en une couleur différente, et vous pouvez instantanément changer la couleur de chaque icône du site Web, comme par magie <br><strong>Aligner les balises <img alt="Auszeichnungssprache – Titel_HTML/Xhtml_Webseitenproduktion" ></strong><br>. Afin d'aligner correctement l'icône et le texte (nous voulons qu'il soit centré verticalement), nous ajoutons cette règle CSS : <br><span class="code">h3 img {<br> background: #696;<br> vertical-align: middle ;<br> ></span><br>Cette règle centrera verticalement l'icône et le contenu du texte <h3> La figure 2-20 est le titre du jeu : <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-9.gif"><br>Figure 2- 10. : Un exemple d'utilisation de CSS comme icône et d'ajout d'une couleur d'arrière-plan <br> Cet exemple peut également illustrer un autre concept important : la couleur d'arrière-plan spécifiée avec CSS apparaîtra derrière l'icône spécifiée ou l'icône CSS sur n'importe quelle page <br> Exemple pour. Par exemple, revenons à l'exemple "icône facilement mise à jour" et ajoutons-y une couleur d'arrière-plan : <br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font -size: 24px ;<br> couleur : #fff;<br> padding-left : 30px;<br> background : #696 url(transparent_icon.gif) no-repeat 0 50%;<br> }</span><br>Maintenant transparent_icon .gif sera affiché au-dessus de la couleur d'arrière-plan définie précédemment dans la même règle (Figure 2-11) — dans cet exemple, la couleur d'arrière-plan est #696, qui est le vert de la table de billard.<br> <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-10.jpg"> <br>Figure 2-11 Exemple de titre avec image d'arrière-plan et jeu de couleurs d'arrière-plan<br>Cette petite astuce est très utile lorsque vous ajoutez de petits coins arrondis et décorez des icônes sur des pages colorées. dans le fichier CSS, et ils peuvent être facilement remplacés lorsque vous prévoyez de les mettre à jour à l'avenir. Si vous y réfléchissez davantage maintenant, vous pouvez économiser beaucoup de travail à l'avenir <br><strong>Résumé</strong><.>J'espère qu'en comparant les méthodes couramment utilisées, vous pourrez découvrir les avantages d'utiliser correctement les balises de titre. Qu'il s'agisse d'un navigateur visuel, non visuel ou d'un autre appareil, vous pourrez comprendre correctement la signification des titres précédents et les afficher dans. de manière appropriée, les moteurs de recherche les indexeront également, et vous pourrez facilement appliquer et modifier les effets que vous devez afficher avec CSS.
</.>
</h3>
</h3>
</h3>
</h1>
</h1>
</h1>
</h1></b></span>
</h6>
</h1>
</h1>
</h1>
</h3>
</h3>
</h2>
</h1>
