第05讲 CSS3入门与基础.ppt

第05章 CSS3入门与基础 1 CSS3是什么 3 CSS3控制页面样式 2 CSS3常用选择器 1 CSS3是什么 CSS的全称是“Cascading Style Sheet”，是层叠样式表的意思，通常也被称为“风格样式表（Style Sheet）”，是用来进行网页风格设计的。 CSS3是CSS的最新版本，由Adobe，Apple，Google，HP，IBM，Microsoft，Opera，Sun等多家公司和机构联合组成的“CSS Working Group”组织共同推出。 CSS3诞生之前CSS经历了CSS1，CSS2.0，CSS2.1几个版本。通过结合使用HTML5和CSS3，可以使页面呈现出最佳效果。 2 CSS3常用选择器 CSS3选择器最主要的作用就是，将样式表与网页元素进行绑定，即使用CSS3选择器可以将对应样式附加在各个网页元素上。 1. 属性选择器 属性选择器是基于元素的属性来匹配的，最常用的就是id属性。在同一个页面中id属性值必须是唯一的，由于这一特性，使得开发人员能够通过id属性精确定位到某个网页元素，以便对其进行相关设置。 CSS2属性选择器应用格式 应用格式 说明 应用示例 E[attr]{rules} 选择具有attr属性的E元素，并应用rules指定的样式 （1）*[title] {color:red;}将选择所有包含title属性的元素，并将其颜色设置为红色； （2）a[href] {color:red;}将选择所有包含href属性的a元素，并将超链接文字颜色设置为红色； （3） a[href][title] {color:red;}将选择所有包含href和title属性的a元素，并将超链接文字颜色设置为红色 E[attr=value]{rules} 选择具有attr属性且属性值等于value的E元素，并应用rules指定的样式 a[href=] {color: red;}将选择所有包含href属性，且属性值为“”的a元素，并将超链接文字颜色设置为红色 E[attr~=value]{rules} 选择具有attr属性且属性值为用空格分隔的多个字符列表，其中任一字符等于value的E元素，并应用rules指定的样式。这里的value不能包含空格 span[title~=big]{color:red;}将选择所有包含title属性，且属性值为空格分隔的多个字符，其中任一字符为big的span元素，并将元素内文字颜色设置为红色。例如span title=”big bang”/span和span title=”bang big”/span都会被该选择器选中。 E[attr|=value]{rules} 选择具有attr属性且属性值为用连字符分隔的字符列表，且以value开始的E元素，并应用rules指定的样式 span[title|=”big”]{color:red;}将选择所有包含title属性，且属性值以“big”开头的所有span元素，并将元素内文字颜色设置为红色。 CSS3新增属性选择器应用格式 应用格式 说明 应用示例 E[attr^=value]{rules} 选择所有包含属性attr且属性值以value开头的E元素，并应用rules样式 span[title^=big]{color:red;}将选择所有包含title属性且属性值以big开头的span元素，并将文字颜色设置为红色 E[attr$=value]{rules} 选择所有包含属性attr且属性值以value结尾的E元素，并应用rules样式 span[title$=big]{color:red;}将选择所有包含title属性且属性值以big结尾的span元素，并将文字颜色设置为红色 E[attr*=value]{rules} 选择所有包含属性attr且属性值任意位置包含value的E元素，并应用rules样式 span[title*=big]{color:red;}将选择所有包含title属性且属性值包含big的span元素，并将文字颜色设置为红色 3. 类选择器 类选择器允许开发人员以一种独立于文档元素的方式来指定样式，即可以不考虑具体页面设计直接设计元素样式。该选择器可以单独使用，也可以与其他元素结合使用。 类选择器的应用方式为，在元素内部添加class属性，并将对应的样式类设置为class的属性值。 4. 伪类选择器 伪类选择器主要用于向指定的选择器添加特殊效果，比较常用的CSS伪类包括如下几种 （1）锚伪类，应用于超链接元素，通过锚伪类的设置，超链接文字的不同状态都可以不同的方式显示。 （2）first-child、last-child、nth-child、nth-l