What modules does css3 include?

The modules included in css3 are: 1. List module, used to add styles to HTML lists; 2. Multi-column layout, which extends the block layout mode to make it easier to define multi-column text; 3. Color module , providing a variety of ways to define colors, such as color names, rgb(), hsl(), etc.; 4. Media queries, allowing CSS to operate on different devices.

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

CSS3 is an upgraded version of CSS (Cascading Style Sheets) technology. It was formulated in 1999. On May 23, 2001, W3C completed the working draft of CSS3, which mainly includes box model, list module and hyperlink method. , language module, background and border, text effects, multi-column layout and other modules

A major change in the evolution of CSS is the W3C's decision to divide CSS3 into a series of modules.

As early as 2001, W3C completed the draft specification of CSS3. A new feature of the CSS3 specification is that it is divided into several independent modules.

• On the one hand, dividing it into several smaller modules is more conducive to timely updating and publishing of specifications, and timely adjustment of module content. These modules can be implemented and released independently, which also lays the foundation for future expansion of CSS. .

• On the other hand, due to limitations of supported devices and browser manufacturers, devices or manufacturers can selectively support some modules and a subset of CSS3, which is beneficial to CSS3 promotion.

The following is the specification of each module of CSS3 as of January 2021:

Color representation method supported by CSS3

Represented by the English name of the color. The English name represents a color, but the representation is very limited and difficult to remember and query.
is represented by hexadecimal color. The principle of the three primary colors of color and light can be looked up in the table.
is represented by rgb (r, g, b). The principle of three primary colors of light, red, green and blue.
Represented by hsl (Hue, Saturation, Lightness). Hue Saturation Brightness.
Represented by rgba (r, g, b, a). The principle of three primary colors of light, red, green, blue and transparency. a ∈ [0, 1], 0 represents complete transparency.
Represented by hsla (Hue, Saturation, Lightness, alpha). Hue, saturation, brightness and transparency. alpha ∈ [0, 1], 0 represents complete transparency.

CSS Multi-Column Layout Extends the block layout mode to make it easier to define multiple columns of text. If a line is too long, people have trouble reading the text; if it takes the eyes too long to move from the end of one line to the beginning of the next, they lose the line they are on. Therefore, to make the most of a large screen, authors should place columns of text of varying widths side by side, like a newspaper.

With the rapid popularity of mobile devices, users no longer just browse Web content through traditional computer systems, more and more users are beginning to Use smartphones, tablets or other devices of various sizes to browse web content. In order to ensure that users using different devices can have a good experience, media queries are needed.

Media query is one of the most important functions of CSS style sheets. The so-called media query refers to distinguishing various devices (such as computers, mobile phones, tablets) based on different media types (device types) and conditions. , Braille devices, etc.) and define different CSS styles for them respectively. Media queries allow CSS to more accurately act on different devices or different conditions on the same device, so that all users can get a good user experience.

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */ @media screen and (max-width: 992px) { body { background-color: blue; } } /* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */ @media screen and (max-width: 600px) { body { background-color: olive; } }

(Learning video sharing:

,web front-end)

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