css3包含哪些模块

css3包含哪些模块,第1张

css3包含哪些模块

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-31999.06.22 - 2018.10.18分页媒体模块工作草案css-page-31999.06.23 - 2019.10.15多列布局工作草案css-multicol-11999.06.22 - 2018.06.19颜色模块推荐css-color-31999.06.25 - 2014.03.20命名空间模块推荐css-namespaces-31999.08.03 - 2018.11.06选择器推荐selectors-32001.04.04 - 2012.06.19媒体查询推荐css3-mediaqueries2001.05.17 - 2020.12.22文本模块候选推荐css-text-32001.07.13 - 2021.02.11级联和继承推荐css-cascade-32001.07.13 - 2019.06.06取值和单位模块候选推荐css-values-32001.07.26 - 2020.12.22基本盒子模型候选推荐css-box-32001.07.31 - 2018.09.20字体模块推荐css-fonts-32001.09.24 - 2020.12.22背景和边框模块候选推荐css-backgrounds-32002.02.20 - 2020.11.17列表模块工作草案css-lists-32002.05.15 - 2020.08.27行内布局模块工作草案css-inline-3 2002.08.02 - 2018.06.21基本用户界面模块推荐css-ui-32003.05.14 - 2019.08.02生成内容模块工作草案css-content-32003.08.13 - 2019.07.16语法模块候选推荐css-syntax-32004.02.24 - 2014.10.14超链接显示模块工作组笔记css3-hyperlinks2005.12.15 - 2015.03.26模板布局模块工作组笔记css-template-32006.06.12 - 2014.05.13分页媒体模块生成内容工作草案css-gcpm-32008.08.01 - 2014.10.14Marquee模块工作组笔记css3-marquee2009.07.23 - 2020.12.17图像模块候选推荐css-images-32010.12.02 - 2019.12.10书写模式推荐css-writing-modes-32011.09.01 - 2020.12.08条件规则模块候选推荐css3-conditionalr2012.02.07 - 2020.05.19定位布局模块工作草案css-position-32012.02.28 - 2018.12.04片段模块候选推荐css-break-32012.06.12 - 2020.04.21盒子排列模块工作草案css-align-32012.09.27 - 2020.12.18宽高大小模块工作草案css-sizing-32012.10.09 - 2017.12.14计数器风格候选推荐css-counter-styles-32013.04.18 - 2020.06.03溢出模块工作草案css-overflow-32014.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;
  }
}

(学习视频分享:css视频教程、web前端)

以上就是css3包含哪些模块的详细内容,

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/950060.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-18
下一篇 2022-06-16

发表评论

登录后才能评论

评论列表(0条)

保存