Path to css3 practice (1): My view of css3

Source: Internet
Author: User

The full name of CSS is Cascading Style Sheets, which means Cascading Style Sheets. By setting up style sheets, you can control the display attributes of DOM elements in hmtl. Cascading Style Sheets allow users to more effectively control the appearance of webpages. Using Cascading Style Sheets, you can expand the ability to precisely specify the location, appearance, and create special effects of webpage elements.

The official website of CSS W3 is: Ghost.

Next, let's summarize the content of this series:

1. Box Model)

2. Color)

3. backgrouds and borders)

4. Text Effects)

5. 2D and 3D conversions (2D/3D transformations)

6. Animation)

7. Multi-column layout (multiple column layout)

8. User Interface)

9. selectors)

Every time I talk about a function attribute, I will attach a good example to deepen my understanding of css3. The content listed above is only the content that I want to talk about at present. In the future, as the series goes deeper, more content may be introduced, when I learn some new effects (2D/3D transformations & gradient) of css3, it is more like defining the appearance of rich media (flash & sliverlight). Besides, while talking about css3, I will talk about the content of previous CSS versions.

Although css3 has not yet been officially released, its rules are very detailed. The release is only a matter of time. Due to the inconsistent support of various browsers, and we want to design the web page must be compatible with the browser, refer to this URL (http://www.w3schools.com/cssref/css3_browsersupport.asp) to view the current support of various browsers on css3.

The following table shows various browser prefixes.

Browser Prefix
Internet Explorer -MS-
Firefox -Moz-
Google Chrome -WebKit-
Safari -WebKit-
Opera -O--XV-(-XV-for voice-related)

If you are developing simplified Chinese Web pages, the browser compatibility is worse, because there are many "sets of sub-browsers" in China (that is, the kernels of other browsers, but only changed some appearances ), these browsers basically use the IE kernel, and the document rendering mode (at least the default) is IE7. There may be some more popular domestic browsers or IE6 models, these situations are really tragic for front-end designers in China, so I dare say that the technical application of Chinese websites is much slower than that of foreign websites for many years. The same is true for other aspects of the IT industry, many new IT technologies and new ideas are used in China only after they become popular in foreign countries. For example, group buying websites, alas, Chinese people have been imitating them all the time...

After talking about this, we will show an example of the css3 button to stimulate the Netizen's interest in css3:

These effects are produced using border-radius, box-shadow, and gradient (only supported by Moz and WebKit) of css3. Of course, they are viewed in browsers that support css3, I have tested the effect on the following pages:

Ie9, firefox4 or above, Google Chrome 10 or above, safari5 or above, and opera10.5 or above.

In the next chapter, I will explain in detail the box model and border.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.