Shulou(Shulou.com)05/31 Report--

This article mainly explains "what module does css3 contain". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what module css3 contains.

Css3 contains modules are: 1, the list module, for adding styles to the HTML list; 2, multi-column layout, which extends the block layout mode, in order to more easily define multiple columns of text; 3, the color module, provides a variety of ways to define colors, such as color name, rgb (), hsl (), etc.; 4, media query, so that CSS can act on different devices.

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

CSS3 is an updated version of CSS (cascading style sheets) technology, which was developed in 1999. On May 23,2001, W3C completed the working draft of CSS3, which mainly includes box model, list module, hyperlink mode, language module, background and frame, text special 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, the W3C completed the draft specification of CSS3. A new feature of CSS3 specification is that it is divided into several independent modules.

On the one hand, divided into a number of smaller modules is more conducive to timely update and release of the specification, timely adjust the content of the module, these modules are implemented and released independently, but also laid the foundation for the future expansion of CSS.

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

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

time

Name

Final state

Module

1999.01.27-2019.08.13

Text modification module

Candidate recommendation

Css-text-decor-3

1999.06.22-2018.10.18

Paging media module

Working draft

Css-page-3

1999.06.23-2019.10.15

Multi-column layout

Working draft

Css-multicol-1

1999.06.22-2018.06.19

Color module

Recommend

Css-color-3

1999.06.25-2014.03.20

Namespace module

Recommend

Css-namespaces-3

1999.08.03-2018.11.06

Selector

Recommend

Selectors-3

2001.04.04-2012.06.19

Media inquiry

Recommend

Css3-mediaqueries

2001.05.17-2020.12.22

Text module

Candidate recommendation

Css-text-3

2001.07.13-2021.02.11

Cascading and inheritance

Recommend

Css-cascade-3

2001.07.13-2019.06.06

Value and unit module

Candidate recommendation

Css-values-3

2001.07.26-2020.12.22

Basic box model

Candidate recommendation

Css-box-3

2001.07.31-2018.09.20

Font module

Recommend

Css-fonts-3

2001.09.24-2020.12.22

Background and border module

Candidate recommendation

Css-backgrounds-3

2002.02.20-2020.11.17

List module

Working draft

Css-lists-3

2002.05.15-2020.08.27

Inline layout module

Working draft

Css-inline-3

2002.08.02-2018.06.21

Basic user interface module

Recommend

Css-ui-3

2003.05.14-2019.08.02

Generate content module

Working draft

Css-content-3

2003.08.13-2019.07.16

Grammar module

Candidate recommendation

Css-syntax-3

2004.02.24-2014.10.14

Hyperlink display module

Working group notes

Css3-hyperlinks

2005.12.15-2015.03.26

Template layout module

Working group notes

Css-template-3

2006.06.12-2014.05.13

Paging media module generates content

Working draft

Css-gcpm-3

2008.08.01-2014.10.14

Marquee module

Working group notes

Css3-marquee

2009.07.23-2020.12.17

Image module

Candidate recommendation

Css-images-3

2010.12.02-2019.12.10

Writing mode

Recommend

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

Box arrangement module

Working draft

Css-align-3

2012.09.27-2020.12.18

Width, height and size module

Working draft

Css-sizing-3

2012.10.09-2017.12.14

Counter style

Candidate recommendation

Css-counter-styles-3

2013.04.18-2020.06.03

Overflow module

Working draft

Css-overflow-3

2014.02.20-2020.12.18

Display type module

Candidate recommendation

Css-display-3

For example:

Css3 color module

Color representation supported by CSS3

It is expressed by the English name of color. The English name represents a color, but it is limited and difficult to remember and query.

Expressed in hexadecimal colors. Color light tricolor principle, you can look up the table.

Denoted by rgb (r, g, b). Color light tricolor principle, red + green + blue.

Expressed by hsl (Hue, Saturation, Lightness). Hue + saturation + brightness.

Denoted by rgba (r, g, b, a). Color light tricolor principle, red, green, blue + transparency. A ∈ [0,1], 0 represents complete transparency.

Expressed by hsla (Hue, Saturation, Lightness, alpha). Hue, saturation, brightness + transparency. Alpha ∈ [0,1], 0 represents complete transparency.

CSS3 multi-column layout

CSS multi-column layout extension block layout mode to make it easier to define multi-column text. If a line is too long, it is troublesome for people to read the text; if it takes too long for eyes to move from the end of one line to the beginning of the next line, they will lose their line. Therefore, in order to make the best use of the big screen, the author should put the text columns of different widths side by side, just like newspapers.

Css3 Media query

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

Media query is one of the most important functions of CSS stylesheets. Media query refers to distinguishing different devices (such as computers, mobile phones, tablets, Braille devices, etc.) and defining different CSS styles for them according to different media types (device types) and conditions. Media query allows CSS to act more accurately on different devices or different conditions of the same device, so that all users can get a good user experience.

/ * set the background color to blue on screens less than or equal to 992 pixels * / @ media screen and (max-width: 992px) {body {background-color: blue;}} / * on screens of 600 pixels or less, set the background color to olive * / @ media screen and (max-width: 600px) {body {background-color: olive }} Thank you for your reading, the above is the content of "what module does css3 contain". After the study of this article, I believe you have a deeper understanding of what module css3 contains, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.