Example tutorial on the combined use of H5 and CSS3-H5 Tutorial-php.cn

Now, HTML5 and CSS3 are eagerly waiting for everyone. Let’s see if they can really bring our design to the next level.

Web designers can use HTML4 and CSS2. 1 Finished something cool. We can complete the logical structure of documents and create content-rich websites without using the old table-based layout. We can add beautiful and subtle styling to our website without using inline and
tags. In fact, our current design capabilities have taken us far away from that terrible era of browser wars, proprietary protocols, and those ugly web pages full of flashes, scrolls, and flashes.

Although we have commonly used HTML4 and CSS2.1 now, we can do better! We can restructure our code and make our page code more semantic. We can reduce the amount of styling code that gives pages a beautiful look and make them more scalable. Now, HTML5 and CSS3 are eagerly waiting for everyone. Let’s see if they can really bring our design to the next level...

In the past, designers often used the The table has no semantic layout. But in the end, thanks to innovators like Jeffrey Zeldman and Eric Meyer, smart designers slowly accepted the relatively more semantic

layout instead of the table layout, and began to call external style sheets. But unfortunately, complex web design requires a lot of different tag structure code, we call it "

-soup" syndrome. Maybe you are familiar with the following code:

The code is as follows:

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

Copy after login

Although this is a bit reluctant, the above example can still illustrate the use of HTML4 for a Complex designs are still too bloated after being coded (in fact, xHTML1.1 is nothing more than that). But what’s exciting is that HTML5 solves the “

-soup” syndrome and gives us a new set of structural elements. These new HTML5 elements have more detailed semantics to replace the meaningless

tags, and at the same time provide "natural" CSS hooks for CSS calls.

The following is an example of an HTML5 solution:

The code is as follows:

<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>

Copy after login

As we can see, HTML5 allows us to use many more semantic structures Use code tags to replace a large number of meaningless

tags. This semantic feature not only improves the quality and semantics of our web pages, but also greatly reduces the class and id attributes that must be called for CSS in the code. In fact, CSS3 also allows us to ignore all classes and ids.

Say goodbye to class attributes and welcome neat tags　

Combined with HTML5 rich in new semantic tags, CSS3 provides web designers with magic for their web pages. General strength. With the power of HTML5, we will get more control over the document code. With the power of CSS3, our control will be infinite!

Even without those advanced CSS selectors, we can still call different containers through powerful HTML5 clauses without bothering with attributes such as class and id. Like the previous p layout, we may have to call it like this in css: p#news {}

The code is as follows:

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

Copy after login

Let’s take a look at an example based on HTML5: section {}

The code is as follows:

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

Copy after login

This is progress, but there are still some problems that need to be solved. In the

example, we need to call the element in the page through the class or id attribute. This logic will allow us to apply styles to any element in the document, whether as a whole or individually. For example, in the

example, the .section and .content elements are easy to locate. But in the HTML5 example, there will be many section elements in the actual document. Actually we could add some specific attribute selectors to call those different section elements, but thankfully I don't have a handful of advanced CSS selectors to target the different section elements now.

Locating HTML-5 elements without using class and id

Let’s take a look at how to locate an instance of HTML5 page elements without using class and id. We can use three A CSS selector to locate and identify elements within an instance. As follows:

Descendant selector: [CSS 2.1]: EF
Sibling selector: [CSS 2.1]: E + F
Child element selector: [CSS 2.1]: E > F

Let’s take a look at how to locate the section elements in the document without using class and id:

Locate the outermost

element

Considering that our example is not a complete set of HTML5 code, we assume that there is a

element under the element and the

element is a sibling element. In this case, we can locate the outermost

as in the following code:

The code is as follows:

body nav+section {}

定位下一个

元素