1CSS3入门及选择器技巧.ppt

CSS3入门 ——CSS3选择器 课程回顾 内容提要 CSS3 简介 CSS3 选择器 CSS3 色彩模式 CSS3 文本设置 CSS3 简介 CSS3 简介 CSS3是CSS技术的一个升级版本，是由Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems等许多Web界巨头联合组成的一个名为“CSS Working Group”的组织共同协商策划的。 CSS3技术概况 选择器 边框、阴影、倒影、渐变、蒙版、旋转、变形... 布局 动画 常用选择器 选择器 描述 E F E元素内的第一级子元素F 子元素选择器 选择器 描述 E + F E元素后面的第一个兄弟元素F E ~ F 所有在E元素之后的兄弟元素F 兄弟选择器 常用选择器 选择器 描述 E[att] 有属性att的所有E元素 E[att=val] 属性att的值是val的元素 E[att^=val] 属性att的值以val开头的元素 E[att$=val] 属性att的值以val结尾的元素 E[att*=val] 属性att的值包含val字符串的元素 属性选择器 常用选择器 选择器 描述 E:enabled 匹配表单中可用的元素 E:disabled 匹配表单中禁用的元素 E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素 UI元素状态伪类选择器 常用选择器 选择器 描述 E::first-line 选择第一行 E::first-letter 选择第一个字符 E::selection 用来改变浏览网页选中文本的默认效果 基本上只有 background 、color 有效果 伪元素选择器 常用选择器 选择器 描述 E:first-child 选择第一个子元素E E:last-child 选择最后一个子元素E E:nth-child(n) 选择一个或多个特定的子元素 （第一个编号为1） E:nth-last-child(n) 选择一个或多个特定的子元素，从最后一个子元素开始算 E:nth-of-type(n) 选择指定的元素，仅匹配使用同种标签的元素 E:nth-last-of-type(n) 选择指定的元素，从元素的最后一个开始计算，仅匹配使用同种标签的元素 结构性伪类 常用选择器 选择器 描述 E:first-of-type 匹配父元素下使用同种标签的第一个子元素 E:last-of-type 匹配父元素下使用同种标签的最后一个子元素 E:only-child 匹配父元素下仅有的一个子元素 E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素 E:empty 匹配一个不包含任何子元素的元素 ( 文本节点也被看作子元素 ) E:not(s) 匹配不符合当前选择器的任何元素( 反选 ) 结构性伪类 选择器练习 1 2 3 4 5 6 7 8 9 0 :nth-child(2n) :nth-child(3n) :nth-child(2n+1) :nth-child(3n+2) 色彩模式 RGBA语法：rgba(r,g,b,opacity) r代表红 -------- 0-255 g代表绿 -------- 0-255 b代表蓝 -------- 0--255 opacity为不透明度 -------- 0-1 实例：background:rgba(255,0,0,0.3); IE6 7 8不支持 色彩模式 除了 RGBA，CSS3 还可使用HSL（色相、饱和度、亮度）模式来声明颜色。HSL模式基于一个360°的色相环，第一个数字代表色相，60°时为黄色，120°时为绿色，180°时为青色，240°时为蓝色，300°时为洋红色，360°时为红色。所以前面提到的HSL颜色色相为315，所以很容易看出它介于洋红（300°）和红（360°）之间。其后的两个值分别表示饱和度和亮度，值为百分比，用于改变基础的色相。如果想要更加饱满的颜色，则第二个值使用一个高一点的百分比即可。最后一个值控制亮度，可在0%的全黑到100%的全白之间变化。因此，定义了HSL 颜色值之后，在它的基础上创建类似颜色就很方便，只需要修改饱和度和亮度的百分比值即可。例如，我们的红色导航链接可以使用HSLA颜色值来定义： nav ul li:nth-child(odd) a {color: hsla(359, 99%, 50%,0.8);} 文本设置 改变文字书写顺序 （css2内容） direction : rtl | ltr rtl 从右到左排列 ltr 从左到右排列 unicode-bidi:bidi-override; 重排