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:

##1999.06.22 - 2018.06.19Color ModuleRecommendedcss-color-3#1999.06.25 - 2014.03.201999.08.03 - 2018.11.06#2001.04.04 - 2012.06.19##2001.05.17 - 2020.12.22 Text moduleCandidate recommendationcss-text-3##2001.07.13 - 2021.02.11##2001.07.13 - 2019.06.062001.07.26 - 2020.12.22Background and Border ModuleCandidate Recommendationcss-backgrounds- 3List module##2002.05.15 - 2020.08.27Inline layout moduleWorking Draftcss-content-3##2004.02.24 - 2014.10.14Hyperlink display moduleWorking group notescss3-hyperlinks2005.12.15 - 2015.03.26Template Layout ModuleWorking Group Notescss-template-3##2006.06.12 - 2014.05.132008.08.01 - 2014.10.14##2009.07.23 - 2020.12.17Box arrangement moduleWorking Draft#2013.04.18 - 2020.06.03Overflow moduleWorking Draftcss-overflow-32014.02.20 - 2020.12.18Display type moduleCandidate recommendationcss-display-3For example:

Time	Name	Last status	Module
1999.01.27 - 2019.08.13	Text modification module	Candidate recommendation	css-text-decor-3
##1999.06.22 - 2018.10.18	Pagination media module	Working Draft	css-page-3
1999.06. 23 - 2019.10.15	Multi-column layout	Working draft	css-multicol- 1
Namespace module	Recommended	css-namespaces-3
Selector	Recommended	selectors-3
Media Inquiries	Recommended	##css3-mediaqueries
Cascading and Inheritance	Recommended	css-cascade-3
Value and unit module	Candidate recommendations	css-values-3
Basic box model	Candidate recommendation	css-box-3	##2001.07.31 - 2018.09.20
Font module	Recommended	css-fonts-3	##2001.09.24 - 2020.12.22
			##2002.02.20 - 2020.11.17
Working Draft	css-lists-3
Working draft	##css-inline-3	2002.08.02 - 2018.06.21	Basic User Interface Module
Recommended	css-ui-3	##2003.05.14 - 2019.08.02	Generate Content Module
##2003.08.13 - 2019.07.16	Grammar module	Candidate recommendations	css-syntax-3
Pagination media module Generate Content	Working Draft	css-gcpm-3
Marquee Module	Working Group Notes	css3 -marquee
Image module	Candidate recommendation	css-images-3	##2010.12.02 - 2019.12.10
Writing Modes	Recommended	css-writing-modes-3	2011.09.01 - 2020.12.08
Conditional Rule Module	Candidate Recommendation	css3-conditionalr	2012.02.07 - 2020.05.19
Positioning Layout Module	Working Draft	css-position-3	2012.02.28 - 2018.12.04
Fragment module	Candidate recommendation	css- break-3	##2012.06.12 - 2020.04.21
		css-align-3
2012.09.27 - 2020.12.18	Width and Height Size Module	Working Draft	css-sizing-3
2012.10.09 - 2017.12.14	##Counter style	Candidate recommendation	css-counter-styles-3

css3 color module

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.

CSS3 Multi-Column Layout

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.

css3 Media Query

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:

css video tutorial

, 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!