第5章 CSS3新特性

武汉传媒学院武汉传媒学院目录•CSS概述•CSS规则•CSS技巧•断字•在CSS中创建分支•新CSS3选择符•CSS3结构化伪类•CSS自定义属性和变量•CSScalc•CSSLevel4选择符•Web排版•CSS3的新颜色格式及透明度武汉传媒学院5.1CSS概述•CSS是CascadingStyleSheet（层叠样式表）的缩写，控制网页的样式和布局，允许将样式信息与网页内容分离的一种标记性语言。•CSS不需要编译,属于浏览器解释型语言)•CSS3可用任何文本编辑工具来编写武汉传媒学院5.1CSS概述•CSS3是CSS（层叠样式表）技术的升级版本，CSS3分成多个模块•主要包括•选择器•盒模型•背景和边框•文字特效•2D/3D转换•动画•多列布局•用户界面武汉传媒学院5.1CSS概述•CSS参考手册武汉传媒学院5.2CSS规则•CSS规则：.round{/*选择符*/border-radius:10px;/*声明*/}•浏览器支持情况：属性名：属性值武汉传媒学院5.2CSS规则•将样式表加的网页方法：•内联方式：在html标记内使用的style定义例：pstyle=color:#f00;文本/p•内部样式块对象：head标记里插入一个style块例：stylebody{background:#fff;color:#000;}p{font-size:14px;}/style武汉传媒学院5.2CSS规则•外部样式表例：linkrel=stylesheethref=main.css/独立的CSS文件武汉传媒学院5.3CSS技巧•响应式多列布局：例1•固定列数：main{column:4;}/*指定列数*/main{column:12em;}/*指定列宽*/武汉传媒学院5.4断字•断字:word-wrap:break-word;•截短文本：例2武汉传媒学院5.4断字•text-overflow:ellipsis;/*省略号代替截短的文本*/值描述clip修剪文本ellipsis显示省略符号来代表被修剪的文本string用给定的字符串来代表被修剪的文本武汉传媒学院5.4断字•white-space:nowrap；/*设置如何处理元素内的空白*/值描述normal默认。空白会被浏览器忽略pre空白会被浏览器保留nowrap文本不会换行，文本会在在同一行上继续，直到遇到br标签为止pre-wrap保留空白符序列，但是正常地进行换行pre-line合并空白符序列，但是保留换行符inherit从父元素继承white-space属性的值武汉传媒学院5.4断字•水平滚动面板：水平空间足够时，显示所有商品，空间不够时，可以左右滚动例3•::before:在元素前添加新内容•::afger:在元素后添加新内容武汉传媒学院5.5在CSS中创建分支•创建分支方法：•CSS，支持的浏览器不多•JavaScript，兼容性更好武汉传媒学院5.5在CSS中创建分支•CSS分支语法：特性查询@support•语法:@support（属性：值）{属性：值;……}IE11以前的版本Safari不支持这个特性武汉传媒学院5.5在CSS中创建分支•例：@support(dispaly:flex)/*支持的情况*/.Item{display:inline-flex;}@supportnot(dispaly:flex)/*不支持的情况*/.Item{display:inline-block;}武汉传媒学院5.5在CSS中创建分支•组合条件：•and:并且•or:或者例:P91武汉传媒学院5.5在CSS中创建分支•Modernizr：检测浏览器特性的JavaScript库•使用方法：scriptsrc=”/js/libs/modernizr-2.8.3-custom.min.js/scriptP92•渐进增强思想：从最简单可用代码、最基本功能、支持能力最低的设备开始到复杂武汉传媒学院5.6新CSS3选择符•CSS3属性选择符：[属性名=”值”]例：img[alt]{...}[data-sausage]{...}img[alt=”sausages”]武汉传媒学院5.6新CSS3选择符•CSS3子字符串匹配属性选择符•以...开头：^•例：img[alt^=”film”]{...}imgsrc=””alt=”film-ace”imgsrc=””alt=”film-rubblish”alt属性值中以film开头的武汉传媒学院5.6新CSS3选择符•包含：*•例：pdata-ingredients=”williget/p[data-ingredients*=”will”]{...}武汉传媒学院5.6新CSS3选择符•以……结尾：$•例：pdata-ingredients=”sconesjam”WillIgetselected?/p[data-ingredients$=”jam”]{...}武汉传媒学院5.6新CSS3选择符•属性选择符的注意事项：•以空格分隔的属性选择符:~•例:[data-film~=”film”]{...}spandata-film=”awfulfilm”•是否包含多个子字符串：[data-film*=”awful”][data-film*=”film”]{}spandata-film=”awfulrougefilm”武汉传媒学院5.6新CSS3选择符•HTML5中允许包含数字开头的ID与类•CSS中不允许包含数字开头的选择符•可以用属性选择符选择•例：[id=10]武汉传媒学院5.7CSS结构化伪类•CSS结构化伪类：根据元素间位置的选择符•:last-child：匹配列表中最后一项•例:P96div:last-child{...}•类似：:first-child，only-child,only-of-type武汉传媒学院5.7CSS结构化伪类•nth-child：选择间隔的元素•例：.nav-Link:nth-child(odd){...}.nav-Link:nth-child(even){...}选择奇数个选择偶数个武汉传媒学院5.7CSS结构化伪类•nth-child(整数[表达式]):选择某一个，或依据表达式选择•例：nth-child(2):选择第2项nth-child(2n+3):从第3项开始，每隔2项选择一个，即：3，(3+2),(5+2)……武汉传媒学院5.7CSS结构化伪类•nth-last-child:从末尾往前开始计算•nth-of-type(整数[表达式])：选择相同标记例：Example5-6武汉传媒学院5.7CSS结构化伪类•:not：取反例:Example5-7武汉传媒学院5.7CSS结构化伪类•:empty：空元素•例：Example5-8•：first-line:选择第一行，目标大小随着视口变化而变化武汉传媒学院5.8CSS自定义属性和变量•自定义属性：存储信息，可在CSS或JavaScript中使用•语法格式：--属性名：值;例：:root{--MainFont:'宋体','黑体';};:root引用文档最外层元素HTML中是html武汉传媒学院5.8CSS自定义属性和变量•引用自定义属性：var(自定义属性名)•例：.Title{font-family:var(--MainFont);武汉传媒学院5.9CSScalc•calc函数()：根据父元素大小计算尺寸•例：width:calc(50%-10px);父元素宽度的50%-10px武汉传媒学院5.10CSSlevel4选择符•：has：包含例：a:not(has(figcaption)){padding:1rem;}给不包含figcaption的a标签添加内边距武汉传媒学院5.10CSSlevel4选择符•：has：包含例：a:has(figcaption){padding:1rem;}给包含figcaption的a标签添加内边距武汉传媒学院5.10CSSlevel4选择符•相对视口的长度：•vw:视口宽度•vh:视口高度•vmain:视口中的最小值，vw/vh中较小值•vmax:视口中的最大值，vw/vh中较大值视口的百分比武汉传媒学院5.11Web排版•@font-face:引用Web字体例：Example5-10•格式：@font-face{font-family:'fontname';src:url(地址1);src:url(地址2);}属性值越靠下优先级越高武汉传媒学院5.12CSS3的新颜色格式及透明度•RGB:包含红、绿、蓝三色的颜色系统•例：.redness{color:#fe0208;}.redness{color:rgb(254,2,8);}红:fe绿:02蓝:08范围：0~255武汉传媒学院5.12CSS3的新颜色格式及透明度•HSL(HueSaturationLightness):色相，饱和度，亮度•多个相近的颜色：修改饱和度和亮度武汉传媒学院5.12CSS3的新颜色格式及透明度•HSL色轮：武汉传媒学院5.12CSS3的新颜色格式及透明度•alpha通道：在RGB、HSL后面加上不透明度值•例：color:hsla(359,99%,50%,0.5)color:rgba(255,10,2,0.8)0:完全透明1：完全不透明