Home >Web Front-end >H5 Tutorial >Detailed explanation of HTML5 CSS3 application _html5 tutorial skills

Detailed explanation of HTML5 CSS3 application _html5 tutorial skills

WBOYOriginal: 2016-05-16 15:48:211469browse

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:

Lorem ipsum text blah blah blah.

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.

正如我们所见，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

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)

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 websockets full-duplex communication detailed learning example_html5 tutorial skillsNext article：HTML5 websockets full-duplex communication detailed learning example_html5 tutorial skills

Detailed explanation of HTML5 CSS3 application _html5 tutorial skills

Div Soup Demonstration

Tangential Information

Div Soup Demonstration

Related articles