Beispiel-Tutorial zur kombinierten Nutzung von H5 und CSS3

Der Code lautet wie folgt:

<section> 
      <article> 
        <header> 
            <h1>p Soup Demonstration</h1> 
            <p>Posted on July 11th, 2009</p> 
        </header> 
        <section> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </section> 
        <footer> 
            <p>Tags: HMTL, code, demo</p> 
        </footer> 
      </article> 
      <aside> 
        <header> 
            <h1>Tangential Information</h1> 
        </header> 
        <section> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
            <p>Lorem ipsum text blah blah blah.</p> 
        </section> 
        <footer> 
            <p>Tags: HMTL, code, demo</p> 
        </footer> 
      </aside> 
  </section> 
</section>

Wie wir sehen können, ermöglicht uns HTML5 Verwenden Sie viel mehr Semantik. Strukturierte Code-Tags ersetzen die zahlreichen bedeutungslosen

-Tags. Diese semantische Funktion verbessert nicht nur die Qualität und Semantik unserer Webseiten, sondern reduziert auch die Klassen- und ID-Attribute, die für CSS im Code aufgerufen werden müssen, erheblich. Tatsächlich erlaubt uns CSS3 auch, alle Klassen und IDs zu ignorieren.

Verabschieden Sie sich von Klassenattributen und begrüßen Sie nette Tags　

In Kombination mit HTML5, das reich an neuen semantischen Tags ist, bietet CSS3 Webdesignern Magie für ihre Webseiten. Mit der Leistungsfähigkeit von HTML5 erhalten wir mehr Kontrolle über den Dokumentcode. Mit der Leistungsfähigkeit von CSS3 wird unsere Kontrolle grenzenlos!

Auch ohne diese erweiterten CSS-Selektoren können wir immer noch verschiedene Container über leistungsstarke HTML5-Klauseln aufrufen, ohne uns um Attribute wie Klasse und ID kümmern zu müssen. Wie das vorherige p-Layout müssen wir es möglicherweise so in CSS aufrufen: p#news {}

Der Code lautet wie folgt:

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

Sehen wir uns das Beispiel an Basierend auf HTML5: Abschnitt {}

Der Code lautet wie folgt:

article {} 
header  {} 
footer  {} 
aside  {}

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

-Beispiel 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 sind beispielsweise die Elemente .section und .content leicht zu finden. 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 eine Handvoll erweiterter CSS-Selektoren, um auf verschiedene Abschnittselemente abzuzielen.

HTML-5-Elemente ohne Verwendung von Klasse und ID finden

Schauen wir uns an, wie man eine Instanz von HTML5-Seitenelementen ohne Verwendung von Klasse und ID findet. Dazu können wir drei A-CSS-Selektoren verwenden Lokalisieren und identifizieren Sie Elemente innerhalb einer Instanz. Wie folgt:

Nachkommenselektor: [CSS 2.1]: EF
Geschwisterselektor: [CSS 2.1]: E + F
Untergeordneter Elementselektor: [CSS 2.1]: E > >