网页前端-CSS3.0-基础分析.ppt

网页前端-CSS3.0 网页前端开发系列课程 CSS3.0选择器 CSS3.0选择器 CSS3.0选择器 CSS3.0选择器 CSS3.0边框属性 CSS3.0边框属性 CSS3.0背景属性 CSS3.0文本属性 CSS3.0颜色属性 CSS3.0颜色属性 CSS3.0颜色属性 CSS3.0颜色属性 CSS3.0颜色属性 CSS3.0用户界面属性 CSS3.0用户界面属性 CSS3.0基础盒模式属性 CSS3.02D转换属性 CSS3.03D转换属性 CSS3.03D转换属性 * WEB DESIGN CSS的发展历程 CSS1 作为一项W3C推荐，CSS1发布于 1996 年 12 月 17 日。CSS1提供有关字体、颜色、位置和文本属性的基本信息。1999 年 1 月 11 日，此推荐被重新修订。 CSS2 作为一项 W3C 推荐，CSS2发布于 1999 年 1 月 11 日。CSS2.0是一套全新的样式表结构，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一样，CSS2.0推荐的是一套内容和表现效果分离的方式。 CSS3 被w3c推荐的产品，是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等、动画特效等，这些模块从2001年到今天都处在开发和完善之中，是下一代WEB标准。 后代级别选择器 选择器 :only-child :nth-child(n) 例子 p:only-child p:nth-child(2) :nth-last-child(n) p:nth-last-child(2) :last-child p:last-child 例子描述 匹配属于父元素中唯一的p 元素。只有一个标签时。 匹配父元素中的第2个p子 元素。n 可以是数字、关键词或公式Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）如果是公式，n从0开始递增。 同上，从最后一个子元素开始计数。 选择属于其父元素最后一个子元素每个 p 元素。 :root :root 选择文档的根元素。 :empty p:empty 选择没有子元素的每个 p 元素（包括文本节点）。 同辈级别选择器 选择器 element1~element2 :first-of-type 例子 p~ul p:first-of-type :last-of-type p:last-of-type 匹配同级兄弟元素中的最后一个p 元素 例子描述 选择前面有 p 元素的每个 ul 元素。 匹配同级兄弟元素中的第一个p 元素 属性选择器 选择器 :nth-of-type(n) :nth-last-of-type(n) 例子 p:nth-of-type(2) p:nth-last-of-type(2) 例子描述 匹配同类型中的第n个同级兄弟元素p，n 可以是数字、关键词或公式。Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1 ） 同上，但是从最后一个元素开始计数。 选择器 [attribute|=value] [attribute$=value] [attribute^=value] [attribute] [attribute=value] [attribute~=value] [attribute*=value] 例子 例子描述 [lang|=en] 选择 lang 属性值以 en 开头的所有元素。必须是用-连接起来的词。 a[src$=.pdf] 选择其 src 属性以 .pdf 结尾的所有 a 元素。 a[src^=https] 选择其 src 属性值以 https 开头的每个 a 元素。 [target] 选择带有 target 属性所有元素。 [target=_blank] 选择 target=_blank 的所有元素。 [title~=flower] 选择 title 属性包含单词 flower 的所有元素。用空格连接的内容。 a[src*=abc] 选择其 src 属性中包含 abc 子串的每个 a 元素。 UI伪类选择器 选择器 :enabled :disabled :checked :not(selector) ::selection 例子 例子描述 input:enabled 选择每个启用的 input 元素。 input:disabled 选择每个禁用的 input 元素 input:checked 选择每个被选中的 inpu