css3包含哪些模块

css3包含的模块有:1、列表模块,用于给HTML列表添加样式;2、多列布局,它扩展块布局模式,以便更容易地定义多列文本;3、颜色模块,提供多种定义颜色的方式,例颜色名、rgb()、hsl()等;4、媒体查询,让CSS可以作用于不同的设备。

css3包含哪些模块

本教程操作环境: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包含哪些模块的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2932390.html

(0)
上一篇 2025年3月11日 20:20:23
下一篇 2025年3月2日 18:49:49

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在css3中可实现缩放效果的是什么属性

    在css3中可实现缩放效果的是transform属性。transform属性可以和scaleX()函数实现水平方向的缩放效果、可以和scaleY()函数实现垂直方向的缩放效果、可和“scale(x,y)”函数实现水平方向和垂直方向同时缩放。…

    2025年3月11日
    200
  • css3如何实现鼠标点击图片放大

    实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。 本教…

    2025年3月11日
    200
  • css3中select的用法是什么

    在css3中,select用于在“user-select”属性中规定是否能选取元素的文本;该属性可以阻止在浏览器中双击选中文本的行为,默认情况下该属性是允许选中元素文本的,语法为“元素{user-select:属性值;}”。 本教程操作环境…

    2025年3月11日
    200
  • css3动画效果有变形吗

    css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。 本教…

    2025年3月11日
    200
  • tweenmax能改变css3属性吗

    tweenmax能改变css3属性。tweenmax中内置的CSSPlugin可以用于制作css动画,设置动画参数就可以改变css属性,语法为“TweenMax.to(指定动画的对象,动画持续时间,{进行动画改变的css属性});”。 本教…

    2025年3月11日
    200
  • css3中渐变怎么改变角度

    在css3中,可以用“linear-gradient”函数来改变渐变的角度,该函数用于创建一个表示两种或多种颜色线性渐变的图片,第一个参数用于设置渐变的角度或方向,语法为“颜色属性:linear-gradient(渐变角度,颜色&#8230…

    2025年3月11日
    200
  • css3动画和jquery动画有什么区别

    css3动画和jquery动画的区别:1、css3可以设置3d动画,jquery不能实现3d动画;2、css的2d矩阵动画效率较高,其他属性动画效率低,jquery利用margin和left、top模拟的矩阵动画效率低,其他属性动画效率高。…

    2025年3月11日
    200
  • css3支持哪些浏览器内核

    css3支持的浏览器内核:1、Webkit,私有属性前缀是“-webkit-”;2、Gecko,私有属性前缀是“-moz-”;3、Presto,私有属性前缀是“-o-”;4、KHTML,私有属性前缀是“-khtml-”;5、Trident。…

    2025年3月11日
    200
  • css3怎么设置鼠标划过字体会改变

    在css3中,可用“:hover”选择器和“font-style”属性设置鼠标划过字体改变,“:hover”可设置元素在鼠标划过时的样式,“font-style”属性可设置字体样式,语法“p:hover{font-style:字体样式}”。…

    2025年3月11日
    200
  • css3中media媒体查询器的用法是什么

    在css3中,media媒体查询用于针对不同的媒体类型或者设备定义不同的样式,可以针对不同的屏幕尺寸或者分辨率设置不同的样式,语法为“@media not|only 媒体类型 and (…){CSS样式代码}”。 本教程操作环境…

    2025年3月11日
    200

发表回复

登录后才能评论