What is the meaning of css3

CSS3 is an upgraded version of CSS (Cascading Style Sheet) technology, which refers to "Cascading Style Sheet Level 3". It adds many powerful new features based on CSS2.1 to help developers solve Some real-world problems, and no more non-semantic tags, complex JavaScript scripts, and images.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

CSS3 is an upgraded version of CSS (Cascading Style Sheets) technology, which refers to "Cascading Style Sheets Level 3". It was formulated in 1999. On May 23, 2001, W3C completed the working draft of CSS3 , a CSS3 development roadmap was formulated in this draft, which lists all modules in detail and plans to gradually standardize them in the future.

CSS3 is the latest version of the CSS specification. It adds many powerful new features based on CSS2.1 to help developers solve some practical problems and no longer requires non-semantic tags and complex tags. JavaScript scripts and images. For example, CSS3 supports rounded corners, multiple backgrounds, transparency, shadows, animations, charts, and more.

CSS3 specification is divided into modules

CSS1 and CSS2.1 are both single specifications, among which CSS1 mainly defines the basic structure of web page objects. Styles, such as fonts, colors, backgrounds, borders, etc. CSS2 adds advanced concepts such as floating, positioning, advanced selectors (such as sub-selectors, adjacent selectors, universal selectors, etc.).

One of the major changes in the evolution of CSS is the W3C's decision to break CSS3 into a series of modules. Browser vendors innovate quickly at the pace of CSS, so by taking a modular approach, elements in the CSS3 specification can move forward at different speeds because different browser vendors only support given features. But different browsers support different features at different times, which also complicates cross-browser development.

CSS3 is divided into multiple modules, each module has its own specifications. The advantage of this is:

• The entire CSS3 specification will not be released due to There are some disputes that affect the advancement of other modules.

• For the browser, you can decide which CSS functions are supported based on your needs.

• For W3C developers, targeted updates can be made as needed, making the overall specification more flexible and able to be revised in a timely manner, making it easier to expand new technology-specific .

New features of CSS3

The CSS3 specification is not a completely new ground, it integrates part of the content of CSS2.1. However, many additions and revisions have been made on its basis.

Compared with CSS1 and CSS2, CSS3 has undergone revolutionary upgrades, and is not limited to the revision and improvement of local functions. Although the browser's support for many new features of CSS3 is not perfect, it still allows Users see the development direction and mission of future web page styles.

CSS3 has many new features. Here is a brief list of practical features that are widely supported by browsers.

1. Improve the selector

CSS3 selector is enhanced based on CSS2.1, which allows designers to specify specific HTML elements in tags. No need to use redundant classes, IDs or JavaScript scripts.

Advanced selectors are very useful if you want to design clean, lightweight web page tags and better separate structure and performance. It can reduce the number of adding a large number of class and id attributes in tags and make it easier for designers to maintain style sheets.

2. Improve visual effects

The most common effects in web pages include rounded corners, shadows, gradient backgrounds, translucency, picture borders, etc. Such visual effects are achieved in CSS by relying on designers to create images or JavaScript scripts.

Some new features of CSS3 can be used to create some special visual effects. The following chapters will show you how these new features achieve these visual effects.

3. Improve the background effect

If the background in CSS brings too many restrictions to you, then CSS3 will bring revolutionary changes.

CSS3 is no longer limited to the use of background colors and background images. Several new attribute values ​​have been added to the new features, such as background-origin, background-clip, and background-size; in addition, you can also add a Set multiple background images on the element.

In this way, if you want to design a more complex page effect, you no longer need to use some redundant tags to assist the implementation. For example, to achieve the sliding door effect in CSS, you basically need to add 2 or 3 additional tags to assist the implementation, but these new features in CSS3 can achieve the same effect in one tag.

4. Improve the box model

The box model is the top priority in CSS. The box model in CSS2 can only implement some basic functions. For some special The functions need to be implemented based on JavaScript. In CSS3, this has been greatly improved, and designers can achieve it directly through CSS3.

For example, the flexible box in CSS3, this attribute will introduce a new layout concept to everyone, which can easily realize various layouts, especially the layout on the mobile terminal, its function is even more powerful.

5. Enhance the background function

CSS3 allows the background attribute to set multiple attribute values, such as background-image, background-repeat, background-size, background-position, background-origin, background-clip, etc., so that you can add multiple layers of background images to an element. If you want to design complex web page effects (such as rounded corners, background overlap, etc.), you don't need to add multiple useless tags to the HTML document to optimize the web page document structure.

6. Add shadow effect

There are two main types of shadows: text-shadow and box-shadow.

Text shadows already exist in CSS, but are not widely used. CSS3 continues this feature and provides a new definition that provides a new cross-browser solution to make text look more eye-catching.

The implementation of box shadow is a bit miserable in CSS2. In order to achieve such an effect, new tags and pictures need to be added, and the effect is not necessarily perfect. CSS3's box-shadow will break this situation and make it easy to add a box shadow to any element.

7. Adding multi-column layout and flexible box model layout

CSS3 introduces several new modules to create multi-column layout more conveniently.

The Multi-column Layout module describes how to split a simple block into multiple columns like a newspaper or magazine.

The Flexible Box Layout module allows blocks to be aligned horizontally and vertically, and allows blocks to adapt to the screen size, relative to CSS floating layout, inline-block layout, and absolute positioning. In terms of layout, it appears more convenient and flexible.

The disadvantage is: these two modules are not supported in some browsers, but with the development of technology, mainstream browsers will actively support them.

8. Improve Web Fonts and Web Font Icons

Browsers have many restrictions on Web fonts, and Web Font icons are more luxurious for designers. CSS3 reintroduces @font-face, which is undoubtedly a good thing for designers.

@font-face is a way to link fonts on the server. These embedded fonts can become safe fonts for the browser. You no longer have to worry about the problem that users cannot display properly without these fonts. Say goodbye to them. The era of design that uses pictures instead of special fonts.

9. Enhanced color and transparency functions

The introduction of CSS3 color module enables the creation of page effects no longer limited to RGB and hexadecimal modes. . CSS3 adds several new color modes: HSL, HSLA, and RGBA. In web design, it is easy to make a color lighter or darker. Among them, HSLA and RGBA also add transparency channels, which can easily change the transparency of any element.

In addition, you can also use the opacity attribute to make the element transparent. From now on, creating transparency no longer relies on images or JavaScript scripts.

10. Added rounded corners and borders function

Rounded corners are the most commonly used attribute in CSS3. The reason is very simple: rounded corners are more beautiful than straight lines, and There will be no conflict with the design. The difference from making rounded corners with CSS is that CSS3 does not need to add any tag elements and images, nor does it need to borrow any JavaScript scripts. It can be done with just one attribute.

For borders, CSS is limited to setting the line type, thickness, and color of the border. If you need a special border effect, you can only use a background image to imitate it. The border-image property of CSS3 enriches the styles of element borders. You can also use this property to achieve background-like effects, twisting, stretching, and tiled borders, etc.

11. Add transformation operation

In the CSS2 era, deforming an element was an unattainable idea. In order to achieve such an effect, you need to write A lot of JavaScript code. CSS3 introduces a transformation property that can manipulate the position and shape of web objects in 2D or 3D space, such as rotation, distortion, scaling or displacement.

12. Add animation and interactive effects

CSS3 transition (transition) feature can realize some simple animation effects in web page production, making some effects more Streamlined and smooth.

The CSS3 animation (animation) feature can achieve more complex style changes and some interactive effects without using any Flash or JavaScript script code.

13. Improve media characteristics and responsive layout

CSS3 media characteristics can implement a responsive (Responsive) layout, so that the layout can be based on the user's display terminal or device Feature selection corresponds to the style file, so that it has different layout effects under different display resolutions or devices, especially on mobile terminals, which is an ideal approach.

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the meaning of css3. For more information, please follow other related articles on the PHP Chinese website!