第5章 CSS3新特性

1、响应式Web设计 HTML5+CSS3实战,第5章 CSS3新特性 软件工程教研室 主讲：罗良夫,目录,CSS概述 CSS规则 CSS技巧 断字 在CSS中创建分支 新CSS3选择符 CSS3结构化伪类 CSS自定义属性和变量 CSS calc CSS Level4选择符 Web排版 CSS3的新颜色格式及透明度,5.1 CSS概述,CSS是Cascading Style Sheet（层叠样式表）的缩写，控制网页的样式和布局，允许将样式信息与网页内容分离的一种标记性语言。 CSS不需要编译,属于浏览器解释型语言) CSS3可用任何文本编辑工具来编写,5.1 CSS概述,CSS3是CSS（层叠样

2、式表）技术的升级版本，CSS3分成多个模块 主要包括 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面,5.1 CSS概述,CSS参考手册,5.2 CSS规则,CSS规则： .round /*选择符*/ border-radius:10px; /*声明*/ 浏览器支持情况： ,属性名：属性值,5.2 CSS规则,将样式表加的网页方法： 内联方式：在html标记内使用的style定义 例：文本 内部样式块对象：标记里插入一个块 例： bodybackground:#fff;color:#000; pfont-size:14px; ,5.2 CSS规则,外部样式表 例

3、： ,独立的CSS文件,5.3 CSS技巧,响应式多列布局： 例1 固定列数： main column:4; /*指定列数*/ main column:12em; /*指定列宽*/,5.4 断字,断字: word-wrap:break-word; 截短文本： 例2,5.4 断字,text-overflow:ellipsis;/*省略号代替截短的文本*/,5.4 断字,white-space: nowrap；/*设置如何处理元素内的空白*/,5.4 断字,水平滚动面板：水平空间足够时，显示所有商品，空间不够时，可以左右滚动 例3 :before:在元素前添加新内容 :afger:在元素后添加新内

4、容,5.5 在CSS中创建分支,创建分支方法： CSS，支持的浏览器不多 JavaScript，兼容性更好,5.5 在CSS中创建分支,CSS分支语法：特性查询support 语法: support（属性：值） 属性：值; ,IE11以前的版本 Safari不支持这个特性,5.5 在CSS中创建分支,例： support(dispaly:flex) /*支持的情况*/ .Item display:inline-flex; support not(dispaly:flex)/*不支持的情况*/ .Item display:inline-block; ,5.5 在CSS中创建分支,组合条件： an

5、d:并且 or:或者 例: P91,5.5 在CSS中创建分支,Modernizr：检测浏览器特性的JavaScript库 使用方法： P92 渐进增强思想：从最简单可用代码、最基本功能、支持能力最低的设备开始到复杂,5.6 新CSS3选择符,CSS3属性选择符：属性名=”值” 例： imgalt. data-sausage. imgalt=”sausages”,5.6 新CSS3选择符,CSS3子字符串匹配属性选择符 以.开头： 例： imgalt=”film”. ,alt属性值中 以film开头的,5.6 新CSS3选择符,包含：* 例： will i get data-ingredien

6、ts*=”will”.,5.6 新CSS3选择符,以结尾：$ 例： Will I get selected? data-ingredients$=”jam”.,5.6 新CSS3选择符,属性选择符的注意事项： 以空格分隔的属性选择符: 例: data-film=”film”. 是否包含多个子字符串： data-film*=”awful”data-film*=”film” ,5.6 新CSS3选择符,HTML5中允许包含数字开头的ID与类 CSS中不允许包含数字开头的选择符 可以用属性选择符选择 例： id=10,5.7 CSS结构化伪类,CSS结构化伪类：根据元素间位置的选择符 :last-c

7、hild：匹配列表中最后一项 例:P96 div:last-child. 类似：:first-child，only-child,only-of-type,5.7 CSS结构化伪类,nth-child：选择间隔的元素 例： .nav-Link:nth-child(odd). .nav-Link:nth-child(even).,选择奇数个,选择偶数个,5.7 CSS结构化伪类,nth-child(整数表达式):选择某一个，或依据表达式选择 例： nth-child(2):选择第2项 nth-child(2n+3):从第3项开始，每隔2项选择一个， 即：3，(3+2),(5+2),5.7 CSS结

8、构化伪类,nth-last-child:从末尾往前开始计算 nth-of-type(整数表达式)：选择相同标记 例： Example5-6,5.7 CSS结构化伪类,:not：取反 例: Example5-7,5.7 CSS结构化伪类,:empty：空元素 例： Example5-8 ：first-line:选择第一行，目标大小随着视口变化而变化,5.8 CSS自定义属性和变量,自定义属性：存储信息，可在CSS或JavaScript中使用 语法格式： -属性名：值; 例： :root -MainFont:宋体,黑体; ;,:root引用文档最外层元素 HTML中是,5.8 CSS自定义属性和变

9、量,引用自定义属性：var(自定义属性名) 例： .Titlefont-family:var(-MainFont);,5.9 CSS calc,calc函数( )：根据父元素大小计算尺寸 例： width:calc(50%-10px);,父元素宽度的50%-10px,5.10 CSS level4选择符,：has：包含 例： a:not( has(figcaption) padding:1rem; ,给不包含figcaption的a标签添加内边距,5.10 CSS level4选择符,：has：包含 例： a:has(figcaption) padding:1rem; ,给包含figcapti

10、on的a标签添加内边距,5.10 CSS level4选择符,相对视口的长度： vw:视口宽度 vh:视口高度 vmain:视口中的最小值， vw/vh中较小值 vmax:视口中的最大值， vw/vh中较大值,视口的百分比,5.11 Web排版,font-face:引用Web字体 例：Example5-10 格式： font-face font-family:fontname; src:url(地址1); src:url(地址2); ,属性值越靠下 优先级越高,5.12 CSS3的新颜色格式及透明度,RGB:包含红、绿、蓝三色的颜色系统 例： .redness color:#fe0208; .redness color:rgb(254,2,8); ,红:fe 绿:02 蓝:08,范围：0255,5.12 CSS3的新颜色格式及透明度,HSL(Hue Saturation Lightness):色相，饱和度，亮