Detailed explanation of HTML5 CSS3 application _html5 tutorial skills

Web designers can accomplish some cool stuff using HTML4 and CSS2.1. 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 flickers, scrolls, and flashes.

Although we now commonly use HTML4 and CSS2.1, 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 table-based layouts without any semantics. 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:

Copy code

The code is as follows:

Div Soup Demonstration

Posted on July 11th, 2009

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL, code, demo

Tangential Information

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL, code, demo

Although this is a bit reluctant, the above example can still illustrate that using HTML4 to code a complex design is still too bloated (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 those meaningless

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

The following is an example of an HTML5 solution:

Copy code

The code is as follows:

Div Soup Demonstration

Posted on July 11th, 2009

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL, code, demo

Tangential Information

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL, code, demo

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

标签。这种语义化的特性不仅提升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有class和id 的。

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

      结合了富有新的语义化标记的HTML5，CSS3为web设计师们的网页提供了神一般的力量。有了HTML5的能量，我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！

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

复制代码

代码如下:

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

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

复制代码

代码如下:

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

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

instance, 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 easily positioned. 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 few advanced CSS selectors to target different section elements now.

Do not use class and id to locate HTML-5 elements

Now let’s take a look at how to locate an instance of an HTML5 page element without using 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
Child selector: [CSS 2.1]: E > F

Let’s take a look at how to position 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 shown in the following code:

Copy code

The code is as follows:

body nav section {}

Locate the next

element

As the only immediate subset element under the outermost

element, this

element may be positioned like this:

Copy code

The code is as follows:

section>section {}

Position the

element

There are many ways to locate the

element, but the simplest method is of course the descendant selector:

Copy code

The code is as follows:

section section article {}

Positioning the

,

and

elements

These three elements appear in two places respectively, one is in the

element, the other is in the

element. This difference allows us to easily locate each element.

Copy code

The code is as follows:

article header {}
article section {}
article footer {}

Or define together:

Copy code

The code is as follows:

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

So far, we have used CSS2.1 selectors to exclude all classes and ids. So why do we still need to use CSS3? I'm glad you asked...

Advanced positioning of HTML5 elements using CSS3

Although we have used CSS2.1 selectors to exclude all classes and ids, there are obviously many more complex situations that require CSS3 advanced selectors to solve. Let's learn how to use CSS3 to position page elements without using useless class and id attributes by completing the following example.

Locate all posts using a unique post (post) ID

Wordpress provides us with a source code output for each post that includes the ID. This information is typically used for navigation and/or understanding the intent of the material, but CSS3 can utilize these unique IDs to style these posts. Of course, you could add the class="post" attribute to each post as usual, but that would defeat the purpose of our exercise (plus it wouldn't be any fun). Using the "Substring Match Selector", we can locate all logs and their different elements as shown below.

Copy code

The code is as follows:

article[id*=post-] {} /* Locate all logs*/
article[id*=post-] header h1 {} /* Locate all logs h1 tag*/
article[id*=post-] section p {} /* Locate the p tag in all logs*/

We can still position comment elements and their children in the same way.

Copy code

The code is as follows:

article[id*=comment-] { } /* Locate all comments*/
article[id*=comment-] header h1 {} /* Locate h1 tags in all comments*/
article[id*=comment-] section p {} / * Locate p tags in all comments*/

Locate some specified sections or articles

There are many blogs with a large volume of logs and comments. HTML 5 will consist of

or

elements. In order to locate specific

or

elements, we have to turn to the powerful ":nth-child" selector:

Copy code

The code is as follows:

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

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

*/
section:nth-child(2) { } /* Select the second

*/
article:nth-child(2) {} /* Select the second

*/

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

Copy code

The code is as follows:

section:nth-last-child(1 ) {} /* Select the last

*/
article:nth-last-child(1) {} /* Select the last

*/

section:nth-last-child(2) {} /* Select the second to last

*/
article:nth-last-child(2) {} /* Select the second to last

*/

Use more ways to select specific elements

Another way to select specific elements in HTML5 (such as header, section and footer) is to take advantage of the ":only-of-type" selector. Since these HTML5 elements often appear more than once in many places, this method is convenient when we want to locate a tag that only appears once under the parent element. For example, what we want to select is the only element in a certain element, such as the following code:

Copy code

The code is as follows:

Locate this section element

Locate this section element

But do not position this section element

We can just use the following one line selector:

Copy code

The code is as follows:

section>section:only-of-type {}

Again, you can stubbornly add an ID attribute to each element, but you will lose the scalability, maintainability and absolute simplicity of the code by decoupling structure from presentation. CSS3 does allow us to quickly and easily locate almost all page elements that do not have ID and class attributes.

Summary

I believe that as time goes by and more browsers support it, HTML5 and CSS3 will become more and more popular. They will bring more unlimited energy to web designers and make our web front-end even better. steps. (Text/Onimusha)