5.1 CSS3概述-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元5 CSS3新特性 5.1 CSS3概述 PART 01 CSS3的发展史 主要内容 CONTENTS PART 04 CSS3的颜色表示 PART 03 CSS3浏览器兼容性 PART 05 CSS3的长度单位 PART 02 CSS3的模块化 2 CSS3的发展史 1996.12 2004.02 1998.05 至今 CSS1 CSS2.1 CSS2 CSS3 较为全面地规定了文档的显示样式 选择器 样式属性 伪类属性 保存方式 目前通用的版本，删除了部分不被浏览器所支持的属性。 扩充并改进了更多强大的属性 更多强大的选择器 增强了位置模型 布局、表格样式 引入媒体类型 扩展伪类属性 添加光标样式 完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经支持其中绝大部分特性。 CSS3的发展史 　　如同人类的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。目前CSS3的最终标准还没有确定。 CSS3的模块化 　　 CSS3规范被划分为若干个独立的模块。一方面利于规范及时更新和发布，另一方面设备和厂商可以有选择地支持一部分模块的内容。 2002.05.15 Line模块 2002.11.07 Lists模块 2002.11.07 Border模块 2003.05.14 Generated and Replace Content模块 2003.08.13 Presentation Levels模块 2003.08.13 Syntax模块 2004.02.24 Hyperlink Presentation模块 2004.12.06 Speech模块 2005.12.15 Cascading and Inheritance模块 2007.08.09 Basic Box模块 2007.09.05 Grid Positioning模块 2009.03.20 Animations模块 2009.03.20 3D Transforms模块 2009.06.18 Fonts模块 2009.08.04 视图模块 TO BE CONTINUED… CSS3浏览器兼容性 一个对Web新特性进行浏览器兼容情况查询的网站 https://caniuse.com CSS3浏览器兼容性 -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -ms-transform:rotate(-5deg); -o-transform:rotate(-5deg); transform:rotate(-5deg); 常用浏览器私有前缀 CSS3的颜色表示 3位或6位16进制值表示的颜色代码：3位各用1位表示红绿蓝三原色的值，6位各用2位表示红绿蓝的值。 #rgb / #rrggbb 使用CSS预定义的颜色关键词，如red、lightblue等。 英文单词 r,g,b三个参数都是0-255的值，依次表示红、绿、蓝颜色的成分。 rgb(r,g,b)函数 CSS3之前颜色表示方法 CSS3的颜色表示 hsl模式基于一个 360度的色相环。h参数代表色调，取值介于0~360之间，s和l参数分别表示饱和度和亮度，值为百分比。 hsl(h,s,l)函数 前3个参数同rgb()函数，增加的参数a表示‘透明度’，取值0~1。 rgba(r,g,b,a)函数 前3个参数同hsl ()函数，增加的参数a表示‘透明度’，取值0~1。 hsla(h,s,l,a)函数 【案例5.1.1】CSS3的颜色表示方法 CSS3新增颜色表示函数 CSS3的长度单位 单位 类型 简介 px 绝对单位 像素（Pixel），是相对于屏幕分辨率的，一般windows用户使用的分辨率是96像素/英寸，mac用户使用的分辨率是72像素/英寸。 in 绝对单位 英寸（Inch），1in =2.54cm cm 绝对单位 厘米（Centimeter），1cm = 1/2.54in mm 绝对单位 毫米（Millimeter），1mm = 0.1cm pt 绝对单位 点（Point）， 1pt = 1/72in pc 绝对单位 派卡（Pica），1pc = 12pt CSS3支持的绝对长度单位 CSS3的长度单位 单位 类型 简介 % 相对单位 相对于父元素的相同属性的大小 em 相对单位 相对于父元素的字体大小 rem 相对单位 相对于根元素（html元素）的字体大小 ex 相对单位 当前字体环境中 x 字母的高度 ch 相对单位 当前字体环境中 0 数字的高度 vw 相对单位 1% 视口（浏览器可