文本课件说明phpcss.pptxVIP

CSS3-01 主讲: 邮箱: 微博: 课前复习 TABLE表格相关标签有那些？ FROM表单相关标签有哪些？ IFRAME行内标签的属性？ 预习检查 本章任务 CSS3的介绍与新特性简述，优点 CSS3的选择器 CSS3的新属性 CSS3的盒子模型 CSS3+HTML5的布局方式 CSS3+HTML5 响应式布局实现方式 1. CSS3的简介 什么是层叠样式表： CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。 CSS2.1是目前被使用最广泛的版本，而目前还在开发中的CSS3具有更吸引人的特性。 2. CSS3选择器 2.1 基本选择器 2.2 层级选择器 2.3 属性选择器 2.4 结构性伪类选择器 2.5 状态伪类选择器 2.6 其他选择器 2.1 基本选择器 .class 类选择器 #id ID选择器 * 通配符 TagName 标签选择器 2.2 层级选择器 div,p 组合选择器 divp 选择所有作为div元素的子元素p div+p 选择紧贴在div元素之后p元素 div~p 选择div元素后面的所有兄弟元素p 2.3 属性选择器 [attribute]选择具有attribute属性的元素。 [attribute=value]选择具有attribute属性且属性值等于value的元素。 [attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表，其中一个等于value的元素。 [attribute|=value]选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素。 [attibute^=value]匹配具有attribute属性、且值以valule开头的E元素 [attribute$=value]匹配具有attribute属性、且值以value结尾的E元素 [attribute*=value]匹配具有attribute属性、且值中含有value的E元素 2.4 结构性伪类选择器 :first-letter设置对象内的第一个字符的样式。 :first-line设置对象内的第一行的样式。 :before设置在对象前（依据对象树的逻辑结构）发生的内容。 :after设置在对象后（依据对象树的逻辑结构）发生的内容。 :lang(language)匹配使用特殊语言的E元素。 :element1~element2: first-of-type匹配同类型中的第一个同级兄弟元素 :last-of-type匹配同类型中的最后一个同级兄弟元素 2.4 结构性伪类选择器 :only-of-type匹配同类型中的唯一的一个同级兄弟元素 :only-child匹配父元素仅有的一个子元素 :nth-child(n)匹配父元素的第n个子元素 :nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素 :last-child()匹配父元素的最后一个子元素 :root匹配元素在文档的根元素。在HTML中，根元素永远是HTML :empty匹配没有任何子元素（包括text节点）的元素 2.5 状态伪类选择器 :link 设置超链接a在未被访问前的样式。 :visited 设置超链接a在其链接地址已被访问过时的样式 :active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 :hover 设置元素在其鼠标悬停时的样式 :focus 设置元素在其鼠标悬停时的样式 :target 匹配相关URL指向的E元素 2.5 状态伪类选择器 :enabled 匹配用户界面上处于可用状态的元素 :disabled 匹配用户界面上处于禁用状态的元素 :checked 匹配用户界面上处于选中状态的元素 :not(selector)匹配不含有selector选择符的元素 ::selection 设置对象被选择时的样式 2.6 其他选择器 E:not(s) ： {attribute} 匹配所有不匹配简单选择符s的元素E p:not(.bg) {background-color:#00FF00;}