Example tutorial on the combined use of H5 and CSS3
Y2J
Release： 2017-05-24 13:31:03
Original
2332 people have browsed it
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 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
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:
p 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.
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 {}
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
The above is the detailed content of Example tutorial on the combined use of H5 and CSS3. For more information, please follow other related articles on the PHP Chinese website!
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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
