HTML5 + CSS3 detailed description _ html5 tutorial skills-

Now, HTML5 and CSS3 are waiting for you, let's see if they can really bring our design to the next level. Web designers can use HTML4 and CSS2.1 to do something cool. We can complete the logical structure of the document and create a website with rich content without using the old table-based layout. We can avoid using inner links.
Add beautiful and delicate style styles to the Website Based on tags. In fact, our current design capabilities have moved us away from the terrible age of browser wars, proprietary protocols, and ugly web pages that are full of flashing, rolling, and flashing.

Although HTML4 and CSS2.1 are already widely used, we can do better! We can reorganize the structure of our code and make our page code more semantic. We can reduce the amount of code that brings beautiful page styles and make them more scalable. Now HTML5 and CSS3 are waiting for you. Let's see if they can really bring our design to the next height...

Once, designers often used table-based la s without any semantics. However, in the end, I would like to thank the innovative idea like Jeffrey Zeldman and Eric Meyer. SMART designers gradually accept relatively more semantic

The layout replaces the table layout and begins to call the external style table. However, unfortunately, complex web page design requires a large number of different tag structure code. We call it"

-Soup syndrome. You may be familiar with the following code:

The Code is as follows:

Div Soup Demonstration

Posted on July 11th, 2009

Lorem ipsum text blah.

Lorem ipsum text blah.

Lorem ipsum text blah.

Tangential Information

Lorem ipsum text blah.

Lorem ipsum text blah.

Lorem ipsum text blah.

Tags: HMTL, code, demo

Despite this reluctance, the above example still shows that HTML 4 is too bloated after coding a complex design (in fact, xHTML1.1 is also so ). However, we are excited that HTML5 solves the"

-Soup syndrome brings us a new set of structural elements. These new HTML5 elements have more detailed semantics to replace those with no Semantics

And provides a "natural" CSS hook for CSS calls.

The following is an example of the HTML5 solution:

The Code is as follows:

Div Soup Demonstration

Posted on July 11th, 2009

Lorem ipsum text blah.

Lorem ipsum text blah.

Lorem ipsum text blah.

Tags: HMTL, code, demo

Tangential Information

Lorem ipsum text blah.

Lorem ipsum text blah.

Lorem ipsum text blah.

Tags: HMTL, code, demo

As we have seen, HTML5 allows us to replace a large number of meaningless code tags with a lot of more semantic Structured code labels.

Label. 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 by CSS in code. In fact, CSS3 can ignore all classes and IDs.

Say goodbye to class attributes. Welcome to neat labels.　

Combined with HTML5 with new semantic tags, CSS3 provides powerful power for web designers. With HTML5 energy, we will gain more control over the document code. With CSS3 energy, our control will become infinitely infinite!

Without those advanced CSS selectors, we can still use powerful HTML5 bars to call different containers without the class and id attributes. Like the previous DIV layout, we may need to call the following in css: p # news {}

The Code is as follows:

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

Let's take a look at HTML5-based instances: section {}

The Code is as follows:

Article {}
Header {}
Footer {}
Aside {}

This is an improvement, but some problems still need to be solved. In

In the instance, we need to call the elements in the page through the class or id attribute. This logic will allow us to apply styles to any element in the document, whether overall or individual. For example

In the instance, The. section and. content elements are easy to locate. However, in HTML5 instances, there are many section elements in the actual document. In fact, we can add some specific attribute selectors to call those different section elements, but I am not able to use a small number of advanced CSS selectors to locate different section elements.

Positioning HTML-5 elements without class and id

Next let's take a look at how to locate an HTML5 page element instance without using the class and id. We can use three CSS selectors to locate and identify elements in the instance. As follows:

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

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

Locate the outermost layer

Element

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

Element and The element is a sibling element. In this way, we can locate the outermost layer as the code below
Now:

The Code is as follows:

Body nav + section {}

Locate next

Element

As the outermost layer

The unique subset element under the element. The element may be located like this:

The Code is as follows:

Section> section {}

Positioning Element

There are many ways to locate elements, but the simplest method is the descendant selector:

The Code is as follows:

Section article {}

Positioning

, And Element

These three elements appear in both places. One is in the element, and the other is in the element. This difference allows us to easily locate each element.

The Code is as follows:

Article header {}
Article section {}
Article footer {}

Or define them together:

The Code is as follows:

Section header {}
Section {}
Section footer {}

So far, we have used the CSS2.1 selector to exclude all classes and IDs. So why do we still need to use CSS3? I'm glad you asked this question...

Use CSS3 for advanced positioning of HTML5 Elements

Although we have used the CSS2.1 selector to exclude all classes and IDs, it is clear that there are still many more complex cases that need to be solved by the advanced selector of CSS3. Let's take a look at the example to learn how to use CSS3 to locate page elements without using useless class and id attributes.

Use a unique log (post) ID to locate all logs

Wordpress provides us with a source code output that contains the ID of each log. This information is usually used for navigation and/or understanding the intent of the data, but CSS3 can use these unique IDs to define the style of these logs. Of course, you can also add attributes such as class = "post" for each log as usual, but this is in conflict with the intent of our practice (plus it does not have any fun ). With the "substring matching selector", we can locate all logs and their different elements as follows.

The Code is 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 {}/* locate the p tag in all logs */

We can still use the same method to locate the comment elements and their child elements.

The Code is as follows:

Article [id * = comment-] {}/* locate all comments */
Article [id * = comment-] header h1 {}/* locate the h1 tag in all comments */
Article [id * = comment-] section p {}/* locate the p tag in all comments */

Locate specified sections or articles)

There are a lot of blog logs and comments, HTML 5 will change them from

Or an element. To locate the specified Or element, we need to use the powerful ": nth-child" selector:

The Code is as follows:

Section: nth-child (1) {}/ * select the first

*/
Article: nth-child (1) {}/ * select the first one */
Section: nth-child (2) {}/ * select the second */
Article: nth-child (2) {}/ * select the second one */

Similarly, we can use the ": nth-last-child" selector to locate some elements in reverse order.

The Code is as follows:

Section: nth-last-child (1) {}/ * select the last

*/
Article: nth-last-child (1) {}/ * select the last one */

Section: nth-last-child (2) {}/ * select the second to last

*/
Article: nth-last-child (2) {}/ * select the second to last */

Select a specified element in more ways

Another method for selecting specific elements (such as header, section, and footer) in HTML5 is to take advantage of the ": only-of-type" selector. Because these HTML5 elements usually appear more than once in many places, this method is very convenient when we want to locate the tag that appears only once under the parent element. For example, we want to select only one element in an element, as shown in the following code:

The Code is as follows:

Locate this section element


Locate this section element


However, this section element is not located.
And this section element

We can only use the following row selector:

The Code is as follows:

Section> section: only-of-type {}

Once again, you can stubbornly add ID attributes for each element, but you will lose the scalability, maintainability, and absolute conciseness of the Code. CSS3 allows us to quickly and conveniently locate almost all page elements without ID and class attributes.

Summary

I believe that with time advances and more browser support, HTML5 and CSS3 will become more and more popular. They will bring more endless energy to web designers and bring our web Front-end to a higher level. (Text/ghost warriors)