Klicken Sie hier, um zur Spalte Wulin.com HTML Tutorial zurückzukehren.
Oben: Markup -Sprache - Sprechen Sie erneut über die Liste
Originalquelle Kapitel 9 Lite -Tags
Zuvor haben wir immer wieder erwähnt, dass strukturierte Inhalte Struktur- und Entwurfsdetails klassifizieren und Tags optimieren können. Was sollen wir tun? Wir können XHTML und CSS verwenden, die den Standards anstelle von Tabellen und Bildern entsprechen, um das von uns benötigte Layout zu erstellen.
Wenn Sie Standardtechnologie verwenden, um Websites zu erstellen (insbesondere Websites, die stark auf CSS angewiesen sind), entwickeln wir häufig eine schlechte Angewohnheit, nämlich zusätzliche Tags und Klassenattribute hinzuzufügen, und die Technologie benötigt sie überhaupt nicht.
Durch die Verwendung von Nachkommensauswahlern in CSS können wir unnötige Eigenschaften von <Div>, <span> und Klassifizierung beseitigen. Vereinfachte Tags bedeuten, dass Seiten schneller und leichter aufrechterhalten werden. In diesem Kapitel werden wir verschiedene einfache Möglichkeiten diskutieren, diese Aufgabe zu erfüllen. Wie kann ich Tags zum Erstellen einer Website mit Standardtechnologie optimieren?
Vereinfachte Tags sind ein wichtiges Thema, das es wert ist, diskutiert zu werden. Beim Erstellen einer Website ist einer der enormen Vorteile, die durch das Schreiben in legitimem XHTML und das Festlegen von Displayeffekten mit CSS erzielt werden können. Der kurze Code repräsentiert eine schnellere Download-Geschwindigkeit. Dies ist definitiv der Schlüssel für Benutzer, die ein 56-km-Dial-up verwenden, um auf das Internet zuzugreifen. Der kurze Code repräsentiert auch die Anforderungen an die Serienspeicher und reduziert den Bandbreitenverbrauch, wodurch der Chef und den Systemmanager glücklich sein kann.
Das Problem ist, dass die ledigliche Bestätigung, dass die Seite der W3C -Standardspezifikation entspricht, nicht bedeutet, dass der im Inhalt verwendete Code verkürzt wird. Natürlich können Sie dem Tag -Inhalt, der den Standards entspricht, verschiedene unerwünschte Tags hinzufügen. Ja, es entspricht den Standards, aber es hat möglicherweise viele unnötige Code hinzugefügt, um CSS zu erleichtern.
Hab keine Angst! Hier gibt es einige Tipps, die es Ihnen ermöglichen, präzise zu entwerfen und Standard -Tag -Inhalte zu haben, aber auch ausreichende Funktionen im CSS -Stil zu behalten. Dann lernen wir ein paar einfache Tipps, um Tags zu optimieren. Erbschalter
Hier sehen wir uns zwei Möglichkeiten, um die Seitenleiste (einschließlich Informationen, Links und andere Dinge) auf einer persönlichen Website zu markieren. Das Sachen aller guten Sachen in ein <div> mit einer ID ist eine Seitenleiste, damit sie später in ein Browserfenster platziert werden kann (im zweiten Teil wird CSS -Layout/Typ -Funktionalität besprochen). Methode A: Happy Classification
<div id = Seitenleiste>
<H3 class = Sideheading> Über diese Seite </h3>
<p> Dies ist meine Seite. </p>
<H3 class = Sideheading> Meine Links </h3>
<ul class = sidelinks>
<li class = link> <a href = archives.html> Archives </a> </li>
<li class = link> <a href = über.html> Über mich </a> </li>
</ul>
</div>
Ich habe auf vielen Websites mit dem Tag methodische Inhalte ähnlich wie bei der Methode A gesehen. Wenn der Designer die Kraft von CSS zum ersten Mal entdeckte, ist es einfach, überfordert zu werden und eine Klasse für jedes Tag anzugeben, das einen besonderen Stil erstellen möchte.
Im vorherigen Beispiel denken wir vielleicht, dass <h3> class = Sideheading angibt, um ihnen zu helfen, Stile zu geben, die sich von anderen Titeln auf der Seite unterscheiden. Das Angeben der Klasse für <ul> und <li> ist auch aus dem gleichen Grund. Klassifizierung CSS
Wenn Sie den Stil angeben, möchten wir, dass der Titel orange dreht, die Serifenschrift mit einer hellgrauen Kante unten verwenden, und die nicht ordnungsgemäße Liste der Seitenverinks muss das kleine Punktsymbol entfernen und das Listenelement in fett gedruckt werden.
Der von der Methode A erforderliche CSS -Inhalt sieht folgt aus:
.sideheading {
Schriftfamilie: Georgia, Serif;
Farbe: #C63;
Border-Bottom: 1PX Solid #CCC;
}
.Sidelinks {
Typ-Typ-Typ: Keine;
}
.Link {
Schriftgewicht: fett;
}
Wir können auf die in den Tags festgelegten Klassennamen (Klassen) verweisen, um spezielle Stile für diese Tags anzugeben, und Sie können sich sogar vorstellen, dass andere Teile der Seite auf diese Weise organisiert sind: Navigationsleisten, Ende der Seite und Inhaltsbereich. Jedes Tag ist überfüllt, um die volle Kontrolle darüber zu haben.
Ja, es funktioniert, aber es gibt eine einfache Möglichkeit, diese Klassenattribute zu speichern und gleichzeitig Ihr CSS zu lesen und organisierter. Schauen Sie sich die Methode B. Methode B: Natürliche Wahl an
<div id = Seitenleiste>
<h3> über diese Seite </h3>
<p> Dies ist meine Seite. </p>
<h3> Meine Links </h3>
<ul>
<li> <a href = archives.html> Archive </a> </li>
<li> <a href = über.html> Über mich </a> </li>
</ul>
</div>
Methode B ist kurz und präzise! Aber warte, wohin gehen die Kategorien? Nun ... Sie werden bald feststellen, dass wir sie nicht wirklich brauchen, hauptsächlich, weil wir diese Tags in eine <div> -Verziehung mit einem einzigartigen Namen stopfen (in diesem Fall, Seitenleiste).
Hier wird der Erbschalter verwendet. Wir müssen nur die Tags, die sich innerhalb der Seitenleiste befinden, mit dem Labelnamen direkt angeben, um diese unnötigen Klassifizierungseigenschaften zu entfernen. Geben Sie CSS vor und nach der Beziehung mit dem Inhalt an.
Schauen wir uns den gleichen Stil wie die Methode A an, aber diesmal verwenden wir den Erbschalter, um das Tag in der Seitenleiste anzugeben.
#sideBar H3 {Schriftfamilie: Georgia, Serif;
Farbe: #C63;
Border-Bottom: 1PX Solid #CCC;
}
#sidebar ul {Typ-Typ-Typ: Keine;
}
#sidebar li {Schriftgewicht: fett;
}
Wenn Sie sich auf die #SideBar -ID beziehen, können Sie einen speziellen Stil für die darin enthaltenen Tags angeben. Beispielsweise setzen nur die <H3> -Tags in <div id = SideBar> die oben genannten CSS -Regeln fest.
Diese Methode zur Angabe von Stilen basierend auf der Beziehung zwischen dem Inhalt zuvor und nachher ist der Schlüssel zum Verkürzen des Inhalts. Nach dem Entwerfen der semantischen Struktur für den Inhalt müssen normalerweise keine Klassifizierungsattribute zum Etikett hinzugefügt werden. Es wird nicht nur in der Seitenleiste verwendet
Wir zeigen nur einen Absatz der Seite (dh der Seitenleiste) an, aber dieser Ansatz kann auf die gesamte Seitenstruktur angewendet werden. Teilen Sie den Tag -Inhalt einfach in mehrere Absätze nach der Logik (vielleicht #Nav, #Content, #sideBar, #Foter) auf, und verwenden Sie dann den Erbschalter, um spezielle Stile für die Tags in diesem Absatz zu erstellen.
Nehmen wir beispielsweise an, dass die Absätze #Content und #SideBar innerhalb der Seite das <h3> -Tag verwenden, und Sie möchten, dass sie die Serif -Schriftart verwenden. Sie möchten jedoch, dass die <h3> eines Absatzes in Lila angezeigt wird und der andere orange.
Dies erfordert keine Tag -Änderung sowie Klassifizierungseigenschaften. Wir können Regeln für alle <h3> -Tags angeben, die von einem globalen Stil geteilt werden sollen, und dann den Erbschalter verwenden, um die Farbe gemäß der Position des Tags festzulegen.
H3 {
Schriftfamilie: Georgia, Serif; / * Alle H3s serif */
}
#Content H3 {
Farbe: lila;
}
#sideBar H3 {
Farbe: Orange;
}
Geben Sie an, dass alle <h3> -Tags Senif -Schriftarten verwenden und die Farben ausgewählt werden müssen, um Lila oder Orange gemäß dem Inhaltskontext zu verwenden. Zu diesem Zeitpunkt müssen wir die Freigabegeln nicht wiederholen (in diesem Beispiel Schriftfamilie), sodass der Inhalt des CSS verkürzt und die doppelten Regeln in mehreren Aussagen daran gehindert werden können.
Wir können nicht nur den zusätzlichen Markierungsraum reduzieren, den das Klassenattribut benötigt, sondern die CSS -Struktur wird auch aussagekräftiger, was es uns leichter macht, ihren Inhalt zu lesen und nach den Seitensegmenten zu organisieren. Es wird auch sehr einfach, bestimmte Regeln zu ändern, was besonders für große und komplexe Artensettings offensichtlich ist, da Sie zu diesem Zeitpunkt möglicherweise gleichzeitig Hunderte von CSS -Regeln haben.
Wenn Sie beispielsweise in diesem Beispiel die Freigaberegeln zu jeder Deklaration hinzufügen und alle <h3> durch ohne Serifenschriften später ersetzen möchten, müssen Sie drei Orte ändern, und es gibt keine Möglichkeit, dies gleichzeitig zu tun. Je weniger Klassifikationen, desto bessere Wartung
Zusätzlich zur Verringerung des verwendeten Quellcoderaums repräsentiert das Ersetzen redundanter Kategorien durch Vererbungsauswahlern auch die zukünftige Leichtigkeit der zu erweiterten Markierung von Inhalten.
Nehmen wir beispielsweise an, dass Sie möchten, dass die Links in der Seitenleiste rot werden, anstatt Blau wie den Rest der Seite zu verwenden. Sie erstellen also eine rote Klasse, die dem Anker -Tag wie folgt hinzufügt:
<div id = Seitenleiste>
<h3> über diese Seite </h3>
<p> Dies ist meine Seite. </p>
<h3> Meine Links </h3>
<ul>
<li> <a href = archives.html class = rot> Archive </a> </li>
<li> <a href = über.html class = rot> Über mich </a> </li>
</ul>
</div>
Um diese Links in Rot zu verwandeln (unter der Annahme, dass die voreingestellte Verbindung Farbe nicht rot ist), müssen ein CSS wie folgt:
A: link.red {
Farbe: Rot;
}
Diese Aktionen sind in Ordnung und können normal funktionieren. Aber was ist, wenn Sie Ihre Meinung in Zukunft ändern und diese Links zu Grün ändern möchten? Oder praktischer, dass Ihr Chef gelegentlich sagt, dass das Rot in diesem Jahr veraltet ist. Ändern Sie also diese Seitenleiste zu Grün! Kein Problem, Sie müssen nur die rote Klasse in CSS ändern und sie erledigen, aber das Klassenattribut im Markierungsinhalt ist immer noch rot. Offensichtlich entspricht dies nicht vollständig mit der Semantik, genau wie die Verwendung anderer Farben als Klassifizierungsname.
Dies ist kein guter Ort, um Display -Effekte als Klassifizierungsname zu verwenden. Wenn wir jedoch überhaupt keine Klassifizierung angeben, können wir bei der Behandlung der Klassifizierung viel Aufwand (und Code) sparen und die Inhaltsemantik vernünftiger machen. Wir können auch Links zu diesen Seitenleisten mit Vererbungswählern auswählen und nach Bedarf Stile angeben.
Der Tag -Inhalt entspricht genau der Methode B, und die CSS, die zum Festlegen der Link in der Seitenleiste erforderlich ist, sind wie folgt:
#sidebar li a: link {Farbe: Rot;
}
Grundsätzlich bedeutet dies, dass nur die Anker -Tags, die das HREF -Attribut im <li> -Tag in <div id = SideBar> verwenden, auch rot angezeigt werden sollten.
Jetzt behalten wir kurze und flexible Tagging -Inhalte, und zukünftige Updates erfordern nur CSS, unabhängig davon, ob der Link rot, grün, fett oder Kursivschrift wird.
Schauen wir uns als nächstes einen weiteren Weg, um Tags zu optimieren: Unnötige <Div> -Tags zu beseitigen und direkt vorhandene Tags auf Blockebene zu verwenden.
Vorherige Seite 1 2 3 Nächste Seite Lesen Sie den vollständigen Text