"CSS3 Latest Edition Reference Manual" is the official CSS3 online reference learning manual. This CSS3 online development manual contains various CSS3 properties, syntax, definitions, usage methods, example operations, etc. It is indispensable for web front-end learners and developers. Check manual documents online! Note: CSS3 is an upgraded version of CSS technology. CSS3 language development is developing towards modularization. These modules include: box model, list module, hyperlink method, language module, background and border, text effects, multi-column layout, etc.
CSS3 is an upgraded version of CSS (Cascading Style Sheet) technology. It was formulated in 1999. On May 23, 2001, W3C completed the working draft of CSS3, which mainly includes box model, list module, hyperlink method, and language module. , background and border, text effects, multi-column layout and other modules.
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 adopting a module 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 makes cross-browser development complicated.
Tips: Before continuing to learn CSS3, you need to have a basic understanding of CSS, HTML knowledge.
CSS is used to control the style and layout of web pages. CSS3 is the latest CSS standard.
CSS3 Language Basics
The syntax of CSS3 is based on the original version of CSS. It allows users to specify specific HTML elements in tags without using redundant class, ID or JavaScript.
Most of the CSS selectors are not newly added in CSS3, but have not been widely used in previous versions.
If you want to try to achieve a clean, lightweight tag and better separation of structure and performance, advanced selectors are very useful, they can reduce the number of classes in the tag and number of IDs and makes it easier for designers to maintain style sheets.
Create and run the first CSS3 instance
Instance
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>Run the instance»
Click the "Run Instance" button to view the online instance
Isn’t it very simple and interesting! The principle of CSS3 is the same as that of CSS. It is to customize the selectors of the style sheet in the web page, and then reference these selectors in large numbers in the web page.
Tips: Our CSS3 tutorial will help you learn step by step the new features in CSS3 and how to control the style and layout of multiple web pages at the same time. If you have any questions, please go to the PHP Chinese website CSS3Community to ask your question, and enthusiastic netizens will answer it for you.
Advantages of CSS3
Reduce development costs and maintenance costs
Before the emergence of CSS3, developers had to A rounded corner effect often requires adding additional HTML tags and using one or more images to complete, while using CSS3 only requires one tag and can be completed using the border-radius property in CSS3.
In this way, CSS3 technology can free people from the work of drawing, cutting and optimizing images.
If you need to adjust the curvature or color of the fillet later, using CSS2.1, you need to draw and cut the image from scratch to achieve it. Using CSS3, you only need to modify the border-radius attribute value to quickly complete the modification. .
The animation features provided by CSS3 allow developers to stay away from JavaScript when implementing some dynamic buttons or dynamic navigation, so that developers do not need to spend a lot of time writing scripts or looking for suitable script plug-ins to adapt. Some dynamic website effects.
Improve page performance
Many CSS3 techniques become "replacements" for images by providing the same visual effects, in other words, When developing for the web, reducing redundant tag nesting and the number of images used means users will have to download less content and pages will load faster.
In addition, fewer images, scripts and Flash files can reduce the number of HTTP requests when users visit the website, which is one of the best ways to improve page loading speed. Using CSS3 to create a graphical website does not require any images, which greatly reduces the number of HTTP requests and improves the page loading speed.
For example, CSS3 animation effects can reduce HTTP requests for JavaScript and Flash files, but may require the browser to perform a lot of work to complete the rendering of this animation effect, which may cause the browser to respond slowly. User churn.
Therefore, you need to think carefully when using some complex special effects. In fact, many CSS3 technologies can greatly improve page performance under any circumstances.
CSS3 will be fully backwards compatible, so no design modifications are necessary to make them continue to work. Web browsers will also continue to support CSS2.
What this CSS3 tutorial manual covers
This CSS3 tutorial manual covers all new CSS3 features, including rounded corner effects, graphical borders, block shadows and text shadows, and implementation using RGBA Introduction and running examples of new features such as transparency effects, gradient effects, custom fonts using @Font-Face, multiple background images, text or image deformation processing (rotation, scaling, tilting, movement), multi-column layout, media queries, etc.
Tips: Each chapter of this tutorial contains many CSS3 examples. You can directly click the "Run Example" button to view the running results online. These examples will help you better understand and use the new CSS3 features.
Other CSS3 related learning reference resources
In addition to the knowledge expansion on the right side of this page, the following resources are also selected for everyone
Latest chapter
- CSS3 多媒体查询实例 2016-10-18
- CSS3 多媒体查询 2016-10-18
- CSS3 弹性盒子 2016-10-18
- CSS3 框大小 2016-10-18
- CSS 分页 2016-10-18
- CSS 按钮 2016-10-18
- CSS 图片 2016-10-18
- CSS3 用户界面 2016-10-18
Related courses
- Quick introduction to web front-end development 2021-12-10
- The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] 2022-09-30
- Gulp Getting Started Video Tutorial 2022-04-18
- Brothers in Arms Gao Luofeng CSS3 video tutorial 2022-04-20
- AngularJS development web application basic example video tutorial 2022-04-18
- Ajax full contact 2022-04-13
- MUI framework basic video tutorial 2022-04-13
- Online training class trial class 2019-01-10