css3包含的模块有:1、列表模块,用于给HTML列表添加样式;2、多列布局,它扩展块布局模式,以便更容易地定义多列文本;3、颜色模块,提供多种定义颜色的方式,例颜色名、rgb()、hsl()等;4、媒体查询,让CSS可以作用于不同的设备。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。
早在2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块。
一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些模块独立实现和发布,也为日后CSS的扩展奠定了基础。
另外一方面,由于受支持设备和浏览器厂商的限制,设备或者厂商可以有选择的支持一部分模块,支持CSS3的一个子集,这样有利于CSS3的推广。
以下为截至2021年1月,CSS3各模块的规范情况:
时间 |
名称 |
最后状态 |
模块 |
---|---|---|---|
1999.01.27 - 2019.08.13 |
文本修饰模块 |
候选推荐 |
css-text-decor-3 |
1999.06.22 - 2018.10.18 |
分页媒体模块 |
工作草案 |
css-page-3 |
1999.06.23 - 2019.10.15 |
多列布局 |
工作草案 |
css-multicol-1 |
1999.06.22 - 2018.06.19 |
颜色模块 |
推荐 |
css-color-3 |
1999.06.25 - 2014.03.20 |
命名空间模块 |
推荐 |
css-namespaces-3 |
1999.08.03 - 2018.11.06 |
选择器 |
推荐 |
selectors-3 |
2001.04.04 - 2012.06.19 |
媒体查询 |
推荐 |
css3-mediaqueries |
2001.05.17 - 2020.12.22 |
文本模块 |
候选推荐 |
css-text-3 |
2001.07.13 - 2021.02.11 |
级联和继承 |
推荐 |
css-cascade-3 |
2001.07.13 - 2019.06.06 |
取值和单位模块 |
候选推荐 |
css-values-3 |
2001.07.26 - 2020.12.22 |
基本盒子模型 |
候选推荐 |
css-box-3 |
2001.07.31 - 2018.09.20 |
字体模块 |
推荐 |
css-fonts-3 |
2001.09.24 - 2020.12.22 |
背景和边框模块 |
候选推荐 |
css-backgrounds-3 |
2002.02.20 - 2020.11.17 |
列表模块 |
工作草案 |
css-lists-3 |
2002.05.15 - 2020.08.27 |
行内布局模块 |
工作草案 |
css-inline-3 |
2002.08.02 - 2018.06.21 |
基本用户界面模块 |
推荐 |
css-ui-3 |
2003.05.14 - 2019.08.02 |
生成内容模块 |
工作草案 |
css-content-3 |
2003.08.13 - 2019.07.16 |
语法模块 |
候选推荐 |
css-syntax-3 |
2004.02.24 - 2014.10.14 |
超链接显示模块 |
工作组笔记 |
css3-hyperlinks |
2005.12.15 - 2015.03.26 |
模板布局模块 |
工作组笔记 |
css-template-3 |
2006.06.12 - 2014.05.13 |
分页媒体模块生成内容 |
工作草案 |
css-gcpm-3 |
2008.08.01 - 2014.10.14 |
Marquee模块 |
工作组笔记 |
css3-marquee |
2009.07.23 - 2020.12.17 |
图像模块 |
候选推荐 |
css-images-3 |
2010.12.02 - 2019.12.10 |
书写模式 |
推荐 |
css-writing-modes-3 |
2011.09.01 - 2020.12.08 |
条件规则模块 |
候选推荐 |
css3-conditionalr |
2012.02.07 - 2020.05.19 |
定位布局模块 |
工作草案 |
css-position-3 |
2012.02.28 - 2018.12.04 |
片段模块 |
候选推荐 |
css-break-3 |
2012.06.12 - 2020.04.21 |
盒子排列模块 |
工作草案 |
css-align-3 |
2012.09.27 - 2020.12.18 |
宽高大小模块 |
工作草案 |
css-sizing-3 |
2012.10.09 - 2017.12.14 |
计数器风格 |
候选推荐 |
css-counter-styles-3 |
2013.04.18 - 2020.06.03 |
溢出模块 |
工作草案 |
css-overflow-3 |
2014.02.20 - 2020.12.18 |
显示类型模块 |
候选推荐 |
css-display-3 |
例如:
css3 颜色模块
CSS3支持的颜色表示方法
用颜色英文名称表示。英文名称代表一种颜色,但表示很有限且不易记忆和查询。
用十六进制的颜色表示。色光三原色原理,可以查表。
用 rgb (r, g, b) 表示。色光三原色原理,红色 + 绿色 + 蓝色。
用 hsl (Hue, Saturation, Lightness) 表示。色调 + 饱和度 + 亮度。
用 rgba (r, g, b, a) 表示。色光三原色原理,红色、绿色、蓝色 + 透明度。a ∈ [0, 1],0代表完全透明。
用 hsla (Hue, Saturation, Lightness, alpha) 表示。色调、饱和度、亮度 + 透明度。alpha ∈ [0, 1],0代表完全透明。
CSS3多列布局
CSS多列布局 扩展块布局模式,以便更容易地定义多列文本。如果一行太长,人们阅读文本很麻烦; 如果眼睛从一行的终点移动到下一个行的开始需要太长时间,它们就会丢失它们所在的行。因此,为了最大限度地利用大屏幕,作者应该将宽度不等的文本列并排放置,就像报纸一样。
css3 媒体查询
随着移动设备的快速普及,用户不再只是通过传统的电脑系来浏览 Web 内容,越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容,为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。
媒体查询是 CSS 样式表最重要的功能之一,所谓媒体查询指的就是根据不同的媒体类型(设备类型)和条件来区分各种设备(例如:电脑、手机、平板电脑、盲文设备等),并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件,让所有用户都能得到很好的用户体验。
/* 在小于或等于 992 像素的屏幕上,将背景色设置为蓝色 */ @media screen and (max-width: 992px) { body { background-color: blue; } } /* 在 600 像素或更小的屏幕上,将背景色设置为橄榄色 */ @media screen and (max-width: 600px) { body { background-color: olive; } }
以上是css3包含哪些模块的详细内容。更多信息请关注PHP中文网其他相关文章!