css3 is an upgraded version of css cascading style sheet technology, which means "cascading style sheet three levels"; css3 adds many functions on the basis of css2.1 to help developers solve some practical problems , mainly including box model, list module, hyperlink mode, language module, background and border, text effects, multi-column layout and other modules.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
CSS3 is an upgraded version of CSS (Cascading Style Sheet) technology, which refers to "Cascading Style Sheet Level 3" and is added on the basis of CSS2.1 It has many powerful new features to help developers solve some practical problems, and no longer requires non-semantic tags, complex JavaScript scripts and images.
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. CSS1 mainly defines the basic styles of web page objects, such as fonts, colors, backgrounds, borders, etc. CSS2 added advanced concepts like floating, positioning, advanced selectors like subselectors, 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 specification. The advantage of this is:
The release of the entire CSS3 specification will not affect other parts due to disputes in some parts. Module advancement.
For browsers, you can decide which CSS functions are supported according to 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 specifications.
The CSS3 specification is not a completely new one. It integrates part of the content of CSS2.1, but has made many additions and revisions 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.
CSS3 selector is enhanced based on CSS2.1, which allows designers to specify specific HTML elements in tags without using redundant classes and IDs. Or JavaScript script.
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.
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.
If the background in CSS brings you too many restrictions, 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.
The box model is a top priority in CSS. The box model in CSS2 can only implement some basic functions, and some special 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.
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 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.
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.
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.
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.
The introduction of the CSS3 color module makes it possible to no longer be limited to RGB and hexadecimal modes when creating page effects. 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.
Rounded corners are the most commonly used property in CSS3. The reason is simple: rounded corners are more beautiful than straight lines and will not 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.
In the CSS2 era, deforming an element was an unattainable idea. In order to achieve such an effect, a large amount of JavaScript code needs to be written. 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.
CSS3 transition (transition) feature can achieve some simple animation effects in web page production, making certain 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.
CSS3 media characteristics can implement a responsive (Responsive) layout, so that the layout can select the corresponding style file according to the user's display terminal or device characteristics, thereby It is ideal to have different layout effects under different display resolutions or devices, especially on mobile terminals.
(Learning video sharing:css video tutorial)
The above is the detailed content of What does css3 mean?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
