Detaillierte Erläuterung der HTML5-CSS3-Anwendungs-_HTML5-Tutorialfähigkeiten

Webdesigner können mit HTML4 und CSS2.1 einige coole Dinge erreichen. Wir können die logische Struktur von Dokumenten vervollständigen und inhaltsreiche Websites erstellen, ohne das alte tabellenbasierte Layout zu verwenden. Wir können unserer Website ein schönes und subtiles Design hinzufügen, ohne Inline-Tags zu verwenden. Tatsächlich haben uns unsere aktuellen Designfähigkeiten weit von dieser schrecklichen Ära der Browserkriege, proprietären Protokolle und dieser hässlichen Webseiten voller Flackern, Scrollen und Blitzen entfernt.

Obwohl wir mittlerweile häufig HTML4 und CSS2.1 verwenden, können wir es noch besser machen! Wir können unseren Code umstrukturieren und unseren Seitencode semantischer gestalten. Wir können die Menge an Styling-Code reduzieren, der Seiten ein schönes Aussehen verleiht, und sie skalierbarer machen. Jetzt warten HTML5 und CSS3 sehnsüchtig auf uns. Mal sehen, ob sie unser Design wirklich auf die nächste Stufe bringen können...

In der Vergangenheit verwendeten Designer häufig tabellenbasierte Layouts ohne jegliche Semantik. Aber am Ende akzeptierten intelligente Designer dank Innovatoren wie Jeffrey Zeldman und Eric Meyer langsam das relativ semantischere

-Layout anstelle des Tabellenlayouts und begannen, externe Stylesheets aufzurufen. Aber leider erfordert komplexes Webdesign viele unterschiedliche Tag-Strukturcodes, wir nennen es „

-Suppe“-Syndrom. Vielleicht kennen Sie den folgenden Code:

Code kopierenDer Code lautet wie folgt:

Div Soup Demonstration

Lorem ipsum text bla bla.

> ;

Lorem ipsum text bla bla.

Lorem ipsum text bla bla.

Tags: HMTL, code, demo

class=" aside">

Tangential Information

Inhalt"> ;

Lorem ipsum Text bla bla bla.

Lorem ipsum Text bla bla bla.

Lorem ipsum text bla bla.

Obwohl dies etwas zurückhaltend ist, kann das obige Beispiel dennoch veranschaulichen, dass die Verwendung von HTML4 zum Codieren eines komplexen Designs immer noch zu aufgebläht ist (tatsächlich ist xHTML1.1 nichts weiter als das). Aber das Spannende ist, dass HTML5 das „

-Suppe“-Syndrom löst und uns einen neuen Satz struktureller Elemente bietet. Diese neuen HTML5-Elemente verfügen über eine detailliertere Semantik, um diese bedeutungslosen

-Tags zu ersetzen, und bieten gleichzeitig „natürliche“ CSS-Hooks für CSS-Aufrufe.

Das Folgende ist ein Beispiel für eine HTML5-Lösung:





Code kopieren


Der Code lautet wie folgt:

Div Suppenvorführung

Gepostet am 11. Juli 2009

Lorem ipsum Text bla bla bla.

Lorem ipsum Text bla bla bla.

Lorem ipsum Text bla bla bla.

Tags: HMTL, Code, Demo

Tangentiale Informationen

Lorem ipsum Text bla bla bla.

Lorem ipsum Text bla bla bla.

Lorem ipsum Text bla bla bla.

Tags: HMTL, Code, Demo

正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的

标签.这种语义化的特性不仅提升了我们网页的质量和语义事实上, CSS3也是可以然通过我们忽略掉所有class和id 的.

跟class属性说再见，欢迎整洁的标签　　

     5的能量,我们将得到更多的对文档代码的控制权,有了CSS3的能量，我们的控制权将趋于无穷大！

　　即使没有那些高级的CSS选择器,我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾class和id这类属性.像以往的DIV布局,我们在css中可能要这样调用: div #news    {}

复制代码

代码如下:

div.section {}
div .article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

我们再来看看基于HTML5的实例: Abschnitt {}

复制代码

代码如下:

article {}
header {}
Fußzeile {}
beiseite {}

Das ist ein Fortschritt, aber es gibt noch einige Probleme, die gelöst werden müssen. In der

-Instanz müssen wir das Element auf der Seite über das Klassen- oder ID-Attribut aufrufen. Diese Logik ermöglicht es uns, Stile auf jedes Element im Dokument anzuwenden, sei es als Ganzes oder einzeln. Im

-Beispiel lassen sich beispielsweise die Elemente .section und .content einfach positionieren. Im HTML5-Beispiel gibt es jedoch viele Abschnittselemente im eigentlichen Dokument. Eigentlich könnten wir einige spezifische Attributselektoren hinzufügen, um diese verschiedenen Abschnittselemente aufzurufen, aber zum Glück habe ich jetzt nicht ein paar erweiterte CSS-Selektoren, um auf verschiedene Abschnittselemente abzuzielen.

Verwenden Sie Klasse und ID nicht, um HTML-5-Elemente zu finden

Schauen wir uns nun an, wie man eine Instanz eines HTML5-Seitenelements findet, ohne Klasse und ID zu verwenden. Wir können drei CSS-Selektoren verwenden, um Elemente in der Instanz zu finden und zu identifizieren. Wie folgt:

Nachkommenselektor: [CSS 2.1]: EF
Geschwisterselektor: [CSS 2.1]: E F
Kinderselektor: [CSS 2.1]: E > F

Sehen wir uns an, wie man die Abschnittselemente im Dokument positioniert, ohne Klasse und ID zu verwenden:

Suchen Sie das äußerste -Element

Da es sich bei unserem Beispiel nicht um einen vollständigen Satz HTML5-Code handelt, gehen wir davon aus, dass sich unter dem Element

ein Element

befindet. In diesem Fall können wir den äußersten
finden, wie im folgenden Code gezeigt:

Code kopieren

Der Code lautet wie folgt:

Körpernavigationsabschnitt {}

Suchen Sie das nächste -Element

Als einziges unmittelbares Teilmengenelement unter dem äußersten

-Element kann dieses

-Element wie folgt positioniert werden:

Code kopieren

Der Code lautet wie folgt:

Abschnitt>Abschnitt {}

Positionieren Sie das

-Element

Es gibt viele Möglichkeiten, das Element

zu finden, aber die einfachste Methode ist natürlich der Nachkommenselektor:

Code kopieren

Der Code lautet wie folgt:

Abschnitt Abschnitt Artikel {}

Positionierung der Elemente

,

Diese drei Elemente erscheinen jeweils an zwei Stellen, eines im

-Element, das andere im

-Element. Dieser Unterschied ermöglicht es uns, jedes Element leicht zu lokalisieren.

Code kopierenDer Code lautet wie folgt:

Artikelkopf {}
Artikelabschnitt {}
Artikelfußzeile {}

Oder gemeinsam definieren:

Code kopierenDer Code lautet wie folgt:

Abschnitt Abschnittsüberschrift {}
Abschnitt Abschnitt Abschnitt {}
Abschnitt Abschnitt Fußzeile {}

Bisher haben wir CSS2.1-Selektoren verwendet, um alle Klassen und IDs auszuschließen. Warum müssen wir also immer noch CSS3 verwenden? Ich freue mich, dass du gefragt hast...

Erweiterte Positionierung von HTML5-Elementen mit CSS3

Obwohl wir CSS2.1-Selektoren verwendet haben, um alle Klassen und IDs auszuschließen, gibt es offensichtlich viele komplexere Situationen, für deren Lösung erweiterte CSS3-Selektoren erforderlich sind. Lassen Sie uns anhand des folgenden Beispiels lernen, wie Sie CSS3 verwenden, um Seitenelemente zu positionieren, ohne nutzlose Klassen- und ID-Attribute zu verwenden.

Suchen Sie alle Beiträge mithilfe einer eindeutigen Beitrags-(Beitrags-)ID

Wordpress stellt uns für jeden Beitrag eine Quellcode-Ausgabe zur Verfügung, die die ID enthält. Diese Informationen werden normalerweise zur Navigation und/oder zum Verständnis der Absicht des Materials verwendet, aber CSS3 kann diese eindeutigen IDs verwenden, um diese Beiträge zu gestalten. Natürlich könnten Sie wie üblich das Attribut „class="post" zu jedem Beitrag hinzufügen, aber das würde den Zweck unserer Übung zunichte machen (und es würde auch keinen Spaß machen). Mit dem „Substring Match Selector“ können wir alle Protokolle und ihre verschiedenen Elemente finden, wie unten gezeigt.

Code kopierenDer Code lautet wie folgt:

article[id*=post-] {} /* Alle Protokolle suchen*/
article[id*=post-] header h1 {} /* Suchen alle Protokolle h1-Tag*/
article[id*=post-] section p {} /* Suchen Sie das p-Tag in allen Protokollen*/

Wir können Kommentarelemente und ihre untergeordneten Elemente weiterhin auf die gleiche Weise positionieren.

Code kopieren

Der Code lautet wie folgt:

Artikel[id*=Kommentar -] { } /* Alle Kommentare suchen*/
article[id*=comment-] header h1 {} /* h1-Tags in allen Kommentaren suchen*/
article[id*=comment-] Abschnitt p { } / * p-Tags in allen Kommentaren suchen*/

Suchen Sie nach bestimmten Abschnitten oder Artikeln

Es gibt viele Blogs mit einer großen Menge an Protokollen und Kommentaren, die aus

-Elementen bestehen. Um bestimmte

-Elemente zu finden, müssen wir uns an den leistungsstarken „:nth-child“-Selektor wenden:

Code kopieren

Der Code lautet wie folgt:

section:nth-child( 1) { } /* Wählen Sie den ersten */
article:nth-child(1) {} /* Wählen Sie den ersten

/* Wählen Sie den zweiten */
article:nth-child(2) {} /* Wählen Sie den zweiten

In ähnlicher Weise können wir den Selektor „:nth-last-child“ verwenden, um einige Elemente in umgekehrter Reihenfolge zu finden.

Code kopieren

Der Code lautet wie folgt:Abschnitt:nth-last- child(1 ) {} /* Wählen Sie den letzten */

article:nth-last-child(1) {} /* Wählen Sie den letzten

section:nth-last-child(2) {} /* Vorletztes auswählen

*/

article:nth-last-child(2) {} /* Vorletztes auswählen */

Verwenden Sie mehr Möglichkeiten, bestimmte Elemente auszuwählen

Eine weitere Möglichkeit, bestimmte Elemente in HTML5 auszuwählen (z. B. Kopfzeile, Abschnitt und Fußzeile), besteht darin, den Selektor „:only-of-type“ zu nutzen. Da diese HTML5-Elemente an vielen Stellen oft mehr als einmal vorkommen, ist diese Methode praktisch, wenn wir ein Tag finden möchten, das nur einmal unter dem übergeordneten Element vorkommt. Wir möchten beispielsweise das einzige Element in einem bestimmten Element auswählen, beispielsweise den folgenden Code:

Code kopieren

Der Code lautet wie folgt:

Suchen Sie dieses Abschnittselement

section> und das section-Element

Wir können einfach den folgenden einzeiligen Selektor verwenden:






Code kopieren


Der Code lautet wie folgt:

Abschnitt>Abschnitt:nur- vom Typ {}

Auch hier können Sie hartnäckig jedem Element ein ID-Attribut hinzufügen, aber Sie verlieren die Skalierbarkeit, Wartbarkeit und absolute Einfachheit des Codes, wenn Sie die Struktur von der Präsentation entkoppeln. Mit CSS3 können wir fast alle Seitenelemente, die keine ID- und Klassenattribute haben, schnell und einfach finden.

Zusammenfassung Ich glaube, dass HTML5 und CSS3 mit der Zeit immer beliebter werden und unsere Web-Frontends noch besser machen werden. (Text/Onimusha)