HTML5 CSS3 Brief Tutorial

HTML5 CSS3 Brief tutorial

Although we are now generally using the HTML4 and CSS2.1, but we can do better! We can reorganize the structure of our code and make our page code more semantic-rich. We can reduce the amount of code that gives the page a beautiful look style and give them a higher level of scalability. Now,HTML5 and CSS3 are eager to wait for everyone, the following brother Lian HTML5 training to see if they really can make our design to the next height ...

Say goodbye to <div>, Welcome to semantic tagging

once, designers frequently used table -based layouts without any semantics. But ultimately thanks to innovators like Jeffrey Zeldman and Eric Meyer , smart designers are slowly accepting a relatively more semantic <div> layout instead table Layout, and begins calling an external style sheet. But unfortunately , complex web design requires a lot of different tag structure code, which we call "<div>-soup" syndrome. Perhaps you are familiar with the following code :

<divid="news">

<divclass="section">

<divclass="article">

<divclass="header">

<p>posted on July 11th,2009</p>

</div>

<divclass="content">

<p>lorem ipsum text blah blahblah.</p>

<p>lorem ipsum text blah blahblah.</p>

<p>lorem ipsum text blah blahblah.</p>

</div>

<divclass="footer">

<P>TAGS:HMTL, code, demo</p>

</div>

</div>

<divclass="aside">

<divclass="header">

</div>

<divclass="content">

<p>lorem ipsum text blah blahblah.</p>

<p>lorem ipsum text blah blahblah.</p>

<p>lorem ipsum text blah blahblah.</p>

</div>

<divclass="footer">

<P>TAGS:HMTL, code, demo</p>

</div>

</div>

</div>

</div>

Although this is somewhat reluctant, the above example can be used to illustrate the use of HTML4 is still too bloated to code a complex design (in fact xHTML1.1) . But the excitement is thatHTML5 solves the "<div>-soup" syndrome and brings us a new set of structured elements. These new HTML5 elements have more granular semantics in place of those without semantic <div> tags, and also provide "natural" for CSS tuning CSS Hooks. The following is an Example of a solution for the brother Www.lampbrother.net HTML5 Course:

<section>

<section>

<article>

<p>posted on July 11th,2009</p>

<section>

<p>lorem ipsum text blah blahblah.</p>

<p>lorem ipsum text blah blahblah.</p>

<p>lorem ipsum text blah blahblah.</p>

</section>

<footer>

<P>TAGS:HMTL, code, demo</p>

</footer>

</article>

<aside>

<section>

<p>lorem ipsum text blah blahblah.</p>

<p>lorem ipsum text blah blah blah.</p>

<p>lorem ipsum text blah blahblah.</p>

</section>

<footer>

<P>TAGS:HMTL, code, demo</p>

</footer>

</aside>

</section>

</section>

as we have seen, HTML5 allows us to replace a large number of meaningless <div> tags with a number of more semantically structured code tags . This semantic feature not only improves the quality and semantics of our web pages, but also reduces the class and ID attributes that have been used in the code to be called by CSS . In fact,CSS3 is also able to ignore all classes and IDs by US .

as we have seen, HTML5 allows us to replace a lot of meaningless, more semantically structured code tags with

tags. This semantic feature not only improves the quality and semantics of our web pages, but also reduces the class and ID attributes that have been used in the code to be called by CSS . In fact,CSS3 is also able to ignore all classes and IDs by US .

combined with the rich new semantic markup HTML5,CSS3 provides the Web designer's Web page with the power of God. With the energy of HTML5 , we will get more control over the document code, with the CSS3 Energy, our control will tend to infinity!

even without those high-level CSS Selectors, we can still call different containers through a powerful HTML5 bar without having to bother with class and ID properties. Like the previous DIV layout, we might want to call this in CSS:

Div#news {}

div.section{}

div.article{}

Div.header {}

div.content{}

Div.footer {}

Div.aside {}

Let's take a look. Based on examples of HTML5:

Section {}

Article {}

Header {}

Footer {}

aside {}

This is an improvement, but there are still some problems to be solved. In the <div> instance, we need to invoke the element in the page through the class or ID property. This logic will allow us to apply the style to any element in the document, whether as a whole or as an individual. For example, in <div> instances,. Section and . Content elements are easy to locate. However , in a HTML5 instance, there are many section elements in the actual document . In fact, we can add some specific property selectors to invoke the different section elements, but thankfully, I can not now use a small number of advanced CSS selectors to locate the various The section element.

locating HTML-5 elements without using class and ID

Let's take a look at how to locate An instance of the HTML5 page element without using class and ID , and we can use three CSS selectors to locate and discern the elements in the instance. as follows :

* descendant selector : [CSS 2.1]: EF

* Brother selector : [CSS 2.1]: E + F

* child element selector : [CSS 2.1]: e> F

Let's take a look at how to navigate through the section elements in the document without using class and ID:

position the outermost <section> element

Considering that our example is not a complete set of HTML5 Code, so we assume that there is a <nav> element with the <section> element under the <body> element is the sibling element. That way, we can position the outermost <section> in the following code :

Body Nav+section {}

Locate the next <section> element

as the only direct subset element under the outermost <section> element, this <section> element may be positioned like this :

1

Section>section {}

positioning <article> elements

There are many ways to position the <article> element, but the simplest method is of course the descendant selector :

Section section article {}

positioning , <section>, and <footer> elements

these three elements appear in two places, one in the <article> element and the other in the <aside> element. This difference allows us to easily locate each element.

Article Header {}

Article section {}

Article Footer {}

or define together :

Section section header {}

Section sections Section {}

Section section Footer {}

so far, we have used The CSS2.1 selector excludes all class and ID. So why do we need to use CSS3 ? I'm glad you can ask .

Use CSS3 Advanced positioning of HTML5 elements

Although we have used The CSS2.1 selector excludes all classes and IDs, andthere are obviously many more complicated situations that require CSS3 's advanced selectors to solve. Let's take a look at some examples to find out how to position page elements with CSS3 without using the useless class and ID attributes .

use a unique log (POST) ID locates all logs

WordPress provides us with a source code output for each log that contains an ID. This information is typically used to navigate and / or understand the intent of the data, but CSS3 can use these unique IDs to define the sample of these logs . Of course, you can add properties like class= "POST" to each log as usual , but this is in conflict with our intention to practice ( plus it's not a bit fun ). Using the substring matching selector, we can locate all the logs and their different elements as follows.

article[id*=post-]{}/* locate all logs */

Article[id*=post-] Header h1 {}/* locate the H1 tag in all logs */

Article[id*=post-] section p {}/* locates the P tag in all logs */

I'm not still able to use the same way to position comments on elements and their child elements.

article[id*=comment-]{}/* position All comments */

Article[id*=comment-] Header h1 {}/* to locate the H1 tag in all comments

Article[id*=comment-] section p {}/* locates the P tag in all comments */

to locate some specified areas (section) or article (article)

There are a lot of blogs with very large amount of log and commentary, HTML 5 will make them consist of <section> or <article> elements. In order to locate the specified <section> or <article> elements, we will instead use the powerful ": Nth-child" selector :

Section:nth-child (1) {}/* Select the first <section> */

Article:nth-child (1) {}/* Select the first <article> */

Section:nth-child (2) {}/* Select second <section> */

Article:nth-child (2) {}/* Select second <article> */

again, we can use the ": Nth-last-child" selector to locate some elements of the reverse order.

Section:nth-last-child (1) {}/* Select last <section> */

Article:nth-last-child (1) {}/* Select last <article> */

Section:nth-last-child (2) {}/* Select penultimate <section> */

Article:nth-last-child (2) {}/* Select penultimate <article> */

Use more ways to select the specified element

a different option The way to specify elements ( such as header, section, and footer) in HTML5 is to take advantage of ": Only-of-type" The advantages of the selector. Since these HTML5 elements often appear more than once in many places, this is handy when we want to locate labels that have only been present once in the parent element. For example, we want to select the only element that has a tangent in an element , such as the following code :

< section>

<section></section>

<section>

<section> Locate this section element </section>

</section>

<section>

<section> Locate this section element </section>

</section>

<section>

<section> But does not locate this section element </section>

<section> and this section element </section>

</section>

<section></section>

</section>

We can use only the following line selector :

Section>section:only-of-type {}

Summarize

I believe that with the advancement of time and the support of more browsers, HTML5 and CSS3 will be more and more popular, they will bring more energy to web designers, let our Web front-end (www.lampbrother.net ) to a further step.

HTML5 CSS3 Brief Tutorial