Klicken Sie hier, um zur HTML-Tutorial-Spalte des Web Teaching Network zurückzukehren.
Oben: Auszeichnungssprache – Reden wir noch einmal über Listen
Originalquelle
Kapitel 9 Vereinfachte Tags
Zuvor haben wir wiederholt erwähnt, dass strukturierte Inhalte Struktur- und Designdetails klassifizieren und Tags vereinfachen können. Wie können wir standardkonformes XHTML und CSS verwenden, um Tabellen und Bilder zu erstellen, die wir benötigen?
Klicken Sie hier, um zur Spalte „Script House HTML Tutorial“ zurückzukehren.
Oben: Auszeichnungssprache – Reden wir noch einmal über die Liste
Originalquelle
Kapitel 9 Tags vereinfachen
Wir haben bereits erwähnt, dass strukturierte Inhalte Struktur- und Designdetails klassifizieren und Tags vereinfachen können. Wie können wir standardkonformes XHTML und CSS verwenden, um Tabellen und Bilder zu erstellen, um das benötigte Layout zu erstellen? .
Wenn wir Standardtechnologien zum Erstellen von Websites verwenden (insbesondere Websites, die stark auf CSS angewiesen sind), entwickeln wir häufig die schlechte Angewohnheit, redundante Tags und Klassenattribute hinzuzufügen. Die Technologie erfordert diese überhaupt nicht.
Durch die Verwendung von Nachkommen Durch die Verwendung von CSS-Selektoren können wir redundante
- und Kategorieattribute eliminieren, sodass die Seite schneller zu lesen und einfacher zu warten ist .
Wenn Sie eine Website mit Standardtechnologie optimieren, ist die Optimierung von Tags ein wichtiges Thema, das eine Diskussion wert ist. Schreiben Sie sie in legalem XHTML und verwenden Sie CSS, um den Anzeigeeffekt festzulegen Sie können Tags optimieren. Kurzcodes stehen für schnellere Download-Geschwindigkeiten, was für Benutzer, die einen 56K-DFÜ-Internetzugang verwenden, von entscheidender Bedeutung ist. Kurzcodes stellen auch einen Serverplatzbedarf und einen geringeren Bandbreitenverbrauch dar, was Chefs und Systemadministratoren erschweren kann glücklich.
Das Problem besteht darin, dass die einfache Bestätigung, dass die Seite den W3C-Standards entspricht, nicht bedeutet, dass der im Inhalt verwendete Code gekürzt wird. Natürlich können Sie dem markierten Inhalt, der den Standards entspricht, verschiedene unnötige Tags hinzufügen. Ja, es entspricht den Standards, aber möglicherweise wurde viel redundanter Code hinzugefügt, um das Entwerfen von CSS zu erleichtern.
Keine Angst! Hier sind einige Techniken, mit denen Sie einfaches, standardkonformes Markup entwerfen können Lassen Sie uns als Nächstes ein paar einfache Techniken zum Optimieren von Tags erlernen.
Geerbter Selektor
Hier sehen wir uns zwei Möglichkeiten an, die Seitenleiste (einschließlich Informationen, Links und anderen Dingen) auf einer persönlichen Website zu markieren. Fassen Sie alle guten Dinge in einer mit der ID „Seitenleiste“ zusammen
in, damit Sie es später irgendwo im Browserfenster platzieren können (CSS-Layout/Typografie-Funktionalität wird in Teil 2 besprochen).
Methode A: Glückliche Klassifizierung
Über diese Site
Meine Links
Ich habe eine ähnliche Methode A auf vielen Websites von Designern gesehen Entdecken Sie zunächst die Leistungsfähigkeit von CSS. Es ist leicht, es zu übertreiben und für jedes Tag, das einen speziellen Stil entwickeln möchte, eine Klasse anzugeben Die Angabe von class=sideheading für
erfolgt aus dem gleichen Grund.
Wenn wir den Stil der Kategorie CSS
angeben, gehen wir davon aus, dass der Titel orange sein soll, Serifenschriftarten verwendet werden sollen und am unteren Rand ein hellgrauer Rand hinzugefügt werden soll, während in der ungeordneten Liste „Seitenlinks“ die kleinen Punktsymbole entfernt werden müssen. und ändern Sie die Listenelemente in Fett.
Der für Methode A erforderliche CSS-Inhalt sieht folgendermaßen aus:
.sideheading {font-family: Georgia, serif;
color : #c63;
border-bottom: 1px solid #ccc;
}
.sidelinks {
list-style-type: none;
}
.link {
Schriftstärke: fett ;
}
Wir können spezielle Stile für diese Tags angeben, indem wir auf die in den Tags angegebenen Kategorienamen (Klassen) verweisen. Sie können sich sogar vorstellen, dass andere Teile der Die Seite ist folgendermaßen organisiert: Navigationsleiste, Fußzeile und Inhaltsbereich. Jedes Tag wird mit einer unordentlichen Kategorie hinzugefügt, sodass Sie die vollständige Kontrolle darüber haben. Ja, es funktioniert, aber es gibt eine einfache Möglichkeit zum Speichern Wenn Sie diese Kategorieattribute (Klasse) verwenden und gleichzeitig Ihr CSS leichter lesbar und organisierter machen, schauen Sie sich dann Methode B an.
Methode B: Natürliche Wahl
Über diese Website
Dies ist meine Website.
Meine Links
Methode B ist kurz und bündig! Aber Moment, wo sind all die Kategorien geblieben? Na ja... Sie werden bald feststellen, dass wir sie nicht wirklich brauchen, vor allem, weil wir diese Tags in einem einzigen Tag mit einem eindeutigen Namen zusammengepfercht haben Name (Dieses Beispiel ist die Beziehung von
der Seitenleiste).
Hier kommt der Vererbungsselektor ins Spiel. Wir müssen nur die Tags in der Seitenleiste direkt mit dem Tag-Namen angeben, um diese redundante Klassifizierung zu entfernen Attribute.
CSS mit Inhaltskontext angeben
Sehen wir uns den gleichen Stil wie Methode A an, aber dieses Mal verwenden wir den Vererbungsselektor, um das Tag in der Seitenleiste anzugeben.
#sidebar h3 {
Schriftfamilie: Georgia, Serif;
Farbe: #c63;
Rand unten: 1 Pixel einfarbig #ccc;
}
#sidebar ul {
list-style-type: none;
}
#sidebar li {
Schriftstärke: fett;
}
Durch Bezugnahme auf die #sidebar-ID können Sie einen speziellen Stil für die darin enthaltenen Tags festlegen. Beispielsweise kann nur das Tag
innerhalb von
und möchten, dass die Schriftarten in Lila und im anderen in Orange angezeigt werden . Wir können die für alle -Tags gemeinsamen Regeln hinzufügen und dann die Vererbungsauswahl entsprechend der Position des Tags festlegen >h3 {
Schriftfamilie: Georgia, Serif; /* Alle h3s sollen Serifen sein */ }#content h3 {
Farbe: lila;
}
#sidebar h3 {
color: orange;
}
Gibt an, dass alle -Tags Senif-Schriftarten verwenden und die Farbe je nach Inhaltskontext lila oder orange sein muss Gleichzeitig müssen wir die Freigaberegeln (in diesem Beispiel die Schriftfamilie) nicht wiederholen, wodurch der Inhalt des CSS gekürzt und doppelte Regeln in mehreren Deklarationen verhindert werden.
Wir können nicht nur den zusätzlichen Markup-Platz reduzieren, der dafür erforderlich ist Klassenattribut, aber auch die CSS-Struktur wird aussagekräftiger, was es für uns einfacher macht, den Inhalt zu lesen, einfacher nach Seitensegmenten zu organisieren und es wird sehr einfach, bestimmte Regeln zu ändern. Dies ist besonders offensichtlich bei großen und komplexen Layouts, weil Sie dann möglicherweise gleichzeitig Hunderte von CSS-Regeln haben.
Wenn Sie in diesem Beispiel beispielsweise die Freigaberegel zu jeder Deklaration hinzufügen und später alle Ich muss es ändern. Es gibt keine Möglichkeit, dies an drei Stellen gleichzeitig zu tun.
Weniger Kategorien sind besser zu verwalten
Zusätzlich zur Reduzierung des benötigten Quellcodeplatzes bedeutet das Ersetzen redundanter Kategorien durch geerbte Selektoren auch, dass der Markup-Inhalt in Zukunft problemlos erweitert werden kann
Nehmen wir zum Beispiel an, dass Sie möchten Um die Seitenleiste zu erstellen, werden die darin enthaltenen Links rot statt blau wie der Rest der Seite. Sie erstellen also eine rote Klasse und fügen sie wie folgt zum Anker-Tag hinzu:
Über diese Website
Dies ist meine Website.
Meine Links
- class="red"
>Archives
< li>class="red">Über mich
< ;/ p>
Und um diese Links in Rot umzuwandeln (vorausgesetzt, die Standard-Linkfarbe ist nicht Rot), ist CSS wie dieses erforderlich:
a:link.red {
color: red;
}
An diesen Aktionen ist nichts auszusetzen und sie können normal funktionieren, aber wenn Sie Ihre ändern Denken Sie daran, was ist, wenn Sie diese Links in Grün ändern möchten? Oder realistischer: Ihr Chef sagt gelegentlich: „Rot ist dieses Jahr veraltet. Ändern Sie diese Links in der Seitenleiste in Grün.“ Kein Problem, Sie müssen nur Rot ändern im CSS Die Klasse ist fertig, aber das Klassenattribut im Markup-Inhalt ist offensichtlich nicht vollständig semantisch, genau wie die Verwendung anderer Farben als Kategorienamen.
Dies ist kein guter Ort, um Anzeigeeffekte zu verwenden Wenn wir die Kategorie jedoch überhaupt nicht angeben, können wir viel Aufwand (und Code) bei der Verarbeitung der Kategorien sparen und gleichzeitig die Inhaltssemantik sinnvoller gestalten. Wir können auch den Vererbungsselektor verwenden , um diese Seitenleisten-Links auszuwählen und den Stil nach Bedarf anzugeben.
Der Markup-Inhalt ist genau der gleiche wie bei Methode B, und das zum Festlegen des Seitenleisten-Links erforderliche CSS sieht folgendermaßen aus:
#sidebar li a:link {
color: red;
}
Grundsätzlich bedeutet dies „nur die
- -Tags innerhalb von
verwendet das href-Attribut. Anker-Tags sollten weiterhin in Rot angezeigt werden.
Derzeit behalten wir kurze und flexible Markup-Inhalte bei und zukünftige Updates erfordern nur die Verwendung von CSS, unabhängig davon, ob der Link rot sein soll , grün, fett oder kursiv, kein Problem.
Als nächstes schauen wir uns eine andere Möglichkeit an, Tags zu vereinfachen: Entfernen Sie unnötige
-Tags und verwenden Sie direkt vorhandene Tags auf Blockebene.
#P#
Unnötiges
Zusätzlich zur Reduzierung der zur Angabe von Stilen erforderlichen Klassifizierungsattribute gibt es eine weitere einfache Möglichkeit, Tags zu optimieren: Das heißt, wenn das
-Tag Elemente auf Blockebene enthält, ersetzen Sie
p>Entfernen Sie es und sehen Sie sich als nächstes diese beiden Beispiele an.
Methode A: Verwenden Sie
Dies ist eine sehr kleine Navigationsleiste, die nur aus einer ungeordneten Liste besteht list's
gibt nav als ID an.
Aber
ist ein Element auf Blockebene, genau wie , warum nicht einfach die ID dafür angeben?
Methode B: Entfernen
- Über
Methode B zeigt, dass ul direkt verwendet werden kann und das überflüssige
verworfen wird. Alle Positionierungen, internen und externen Patches und andere Stileinstellungen können auch < ul> , so einfach wie die Zuweisung zu
, Sie können also einen Teil des Tag-Quellcodes sehen, nämlich, dass diese Methode nur verwendet wird wenn die Navigation nichts anderes als
enthält. Dies gilt nur, wenn darin Tags enthalten sind, z. B. normalerweise nicht für die Platzierung in geeignet, sollte als Outsourcing-Tag verwendet werden. Für die Beispiele von Methode A und Methode B ist jedoch die ungeordnete Liste das einzige konnotative Tag , also ist es sinnvoll,
wegzuwerfen. Ist es tatsächlich wichtig, dass es ein vorhandenes Element auf Blockebene gibt, das verwendet werden kann? Markup-Code ist nicht schwer zu erstellen.
Andere Beispiele
Eine andere Situation, in der
weggeworfen werden kann, ist im Fall der Auslagerung des
}
Dies ändert die gesamte Liste in große Schriftarten und orangefarbene Fettschrift. Dann wird für jede Ebene der verschachtelten Struktur das
#sitemap {
Schriftgröße: 140%;
Schriftstärke: fett;
Farbe: #f63;
}
#sitemap li ul {
Schriftgröße: 90 %;
Farbe: #000;
}
Das vorherige CSS führt dazu, dass alle Elemente der obersten Ebene in großen, orangefarbenen und fetten Schriftarten angezeigt werden, während die inneren verschachtelten Listen in schwarzer Schriftart mit 90 % Schriftart (in diesem Fall 90 % von 140 %) angezeigt werden. Das Ergebnis siehe Abbildung 9-2.
Abbildung 9-2 Stile für Listenelemente der obersten Ebene angeben
Wir müssen keine kleinere Schriftart für die dritte Ebene angeben, da dies der Fall ist automatisch 90 % von 90 % verwenden (Ein wenig verwirrend, aber es funktioniert!)
Jede Ebene der Liste hat jetzt eine automatisch reduzierte Schriftgröße, gefolgt von einigen Punkten.
Passen Sie das Punktsymbol
an, um den Standardstil zu entfernen, und verwenden Sie das Hintergrundattribut, um den Elementen der dritten Ebene dekorative Punktsymbole hinzuzufügen. Entfernen Sie zuerst den Standardlistenstil für alle
- -Tags Gibt endoskopische Bilder an. Zur weiteren Differenzierung wird auch für die dritte Ebene die Schriftart „font-weight:normal“ festgelegt – wobei der fette Einstellungswert der Liste
#sitemap {
“ überschrieben wird : 140 %;
Schriftstärke: fett;
Farbe: #f63;
}
#sitemap li {
list -style: none; /* schaltet Aufzählungszeichen aus */
}
#sitemap li ul {
Schriftgröße: 90 %;
Farbe: #000 ;
}
/* Dritte Ebene*/
#sitemap li ul li ul li {
Schriftstärke: normal;
padding-left: 16px;
Hintergrund: url(bullet.gif) no-repeat 0 50%;
}
Abbildung 9-3 ist die fertige Website-Karte mit benutzerdefinierten Punktsymbolen und gewöhnlichen Schriftarten auf der dritten Ebene. Auf der linken Seite wurde ein innerer Patch mit 16 Pixeln hinzugefügt, um Platz für das zu lassen dekoratives Punktbild, das angezeigt werden soll (und außerdem etwas zusätzlichen Leerraum lässt). Außerdem weist es den Browser an, das Bild von 0 Pixeln auf der linken Seite und 50 % darüber anzuzeigen, wodurch die linke Seite des Bildes grundsätzlich ausgerichtet und in der Mitte ausgerichtet wird Obwohl wir hier die vertikale Ausrichtung in Pixeln angeben können, kann das Punktbild dennoch die korrekte Anordnung beibehalten, wenn sich die Textgröße ändert.
Abbildung 9-3 Die dritte Das Ebenenprojekt fügt ein benutzerdefiniertes kleines Punktbild hinzu
Fügen Sie einen Rand hinzu
Fügen Sie dann links von der Liste der zweiten Ebene einen gepunkteten Rand hinzu, um unsere Sitemap zu vervollständigen. Dies kann die Leser weiter daran erinnern, dass zum Projekt der obersten Ebene Unterprojekte gehören um nur einen gepunkteten Rand zur Liste der zweiten Ebene hinzuzufügen. Um diesen Effekt zu erzielen, werden diese Regeln hinzugefügt:
#sitemap {
Schriftgröße: 140 %;
Schriftstärke: fett;
Farbe: #f63;
}
#sitemap li {
list-style: none; /* schaltet Aufzählungszeichen aus */
}
#sitemap li ul {
margin: 6px 15px;
padding: 0 15px;
Schriftgröße: 90 %;
Farbe: #000;
Rand links: 1 Pixel gepunktet #999;
}
/* für Dritte -level */
#sitemap li ul li ul {
border: none;
}
#sitemap li ul ul li
Wir haben den äußeren Patch der zweiten Ebene leicht angepasst und einen gepunkteten Rand hinzugefügt. Nach dieser Regel haben wir border:none verwendet, um den Rand der dritten Ebene zu entfernen , Rahmen- und Bildlisteneffekt.
Abbildung 9-4 Fertiger Listenstil, mit gepunkteten Kanten zur zweiten Ebene hinzugefügt
Beim Entwerfen von Listen wie Umrissen ist das Verschachteln von hilfreich -Strukturierte, einfach zu gestaltende Lösung. Durch die Zuweisung einer eindeutigen ID-Verzögerung an die oberste Ebene können wir die Aufgabe, jede Ebene einzeln zu gestalten, auf CSS übertragen, ohne redundante Anzeige-Tags hinzuzufügen weit über dieses einfache Beispiel hinaus. Abbildung 9-5 zeigt die Wirkung desselben CSS, angewendet auf eine etwas größere Sitemap. Da CSS Stile basierend auf der Hierarchie angibt, wird der Beschriftungsinhalt genau gleich geschrieben, das Projekt wählt automatisch aus der entsprechende Stil entsprechend den verschiedenen Verschachtelungsebenen.
Abbildung 9-5 Eine erweiterte Version der Sitemap, erstellt mit CSS und verschachtelten Listen
Fazit
Zu Beginn dieses Kapitels haben wir zwei Möglichkeiten zur Optimierung des Tag-Quellcodes untersucht: Die eine besteht darin, geerbte Selektoren zu verwenden, und die andere darin, überflüssige
-Tags zu entfernen.
Integrierte Selektoren sind nicht vorhanden die Verwendung redundanter Klassifizierungsattribute, die das Lesen markierter Quellcodes erschweren, während das Entfernen des
-Tags, das direkt eindeutige Elemente auf Blockebene enthält, es uns ermöglicht, so viel Bytes wie möglich zu sparen, und es auch einfacher macht, den Quellcode zu erstellen Code mit komplexen Layouts.
Die Verwendung dieser Vorgehensweisen scheint nur ein paar Bytes einzusparen, aber sobald Sie anfangen, diese Vorgehensweisen auf Ihre gesamte Website anzuwenden, beginnen sich die Einsparungen zu summieren, und Sie können es sich als eine weitere Möglichkeit vorstellen, flexibel zu schreiben , strukturiertes Markup.
Zusätzlich zur Optimierung des Tag-Quellcodes haben wir uns auch angesehen, wie Vererbungsselektoren zum Stylen von Sitemaps mithilfe verschachtelter Listen verwendet werden können, ohne dass dies erforderlich ist Verwenden Sie ein zusätzliches Klassifizierungsattribut, das spart noch einmal ein paar Bytes und erleichtert zukünftige Aktualisierungen und Neugestaltungsarbeiten.
Es lebe der optimierte Tag-Code!
Dieses Buch „Teil I beginnt mit der Tag-Syntax“ ist hoffentlich zu Ende Diese einfachen Aussagen können Ihnen Inspiration geben
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
