A4CSS基础A4CSS基础.ppt

CSS基础 课程介绍 目标：掌握CSS的基础应用 内容：理解层叠样式表的作用及使用它的好处，了解 CSS的基本结构，掌握多种选择器用法，熟练 使用常用的样式属性 重点：选择器、常用样式属性 难点：选择器、常用样式属性 CSS基础 样式表概述 CSS的基本结构 选择器 常用的样式属性 CSS概述 CSS全称Cascading Style Sheets，就是“层叠样式表”。 它可以使页面上应用了相同层叠样式表的元素在浏览器中显示出来相同的结果，或是定义页面元素的属性。 CSS层叠样式表是一组样式的集合，我们可以定义许多的类来控制页面上不同元素的样式。 CSS优点 表现与结构分离 浏览器支持完善 提高页面浏览速度 继承性能优越（层叠处理） CSS基本结构 样式表由定义在style标记之间很多样式规则构成，每个样式规则包括选择器（selector）和声明两个部分 ,声明写在大括号之间，用来定义属性和属性值 。 语法： 选择器{ 属性：值} 选择器是指从网页的所有元素中选择目标元素，声明的样式将作用于目标元素。 属性是CSS样式控制的核心，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。 值是指属性的值，形式有两种，一种是指定范围的值;另一种为数值 选择器 选择器从网页的所有元素中选择目标元素，将声明的样式作用于目标元素 选择器分为以下几种类型： 标签选择器 类选择器 ID选择器 群组选择器 派生选择器 伪类选择器 属性选择器 通配选择器 选择器……标签选择器 标签选择器是直接将HTML标签作为选择器。 标签选择器一旦声明，那么网页上所有使用该标签的元素样式都是一样的。 选择器……类别选择器 类别选择器解决个别元素的不同样式，任何类选择器都适应于所有的HTML标签。类别选择器实现了样式的灵活共享 选择器…… ID选择器 ID选择器的使用方法与类别选择器基本相同。 不同之处在于ID选择器只能在HTML页面中使用一次。 id属性是HTML标签的通用属性，ID选择器就是通过引用标签的的id属性值为元素指定样式。 选择器……群组选择器 当几个元素都应用相同的样式属性时，可以将它们应用的样式属性集中定义到一个声明中，然后将对应的选择器的名称使用逗号连接，定义成一个样式规则，称为群组选择器，也称为并集选择器 。 选择器……派生选择器 派生选择器根据文档的上下文关系来确定某个标签的样式，包括后代选择器、子选择器、相邻兄弟选择器。 后代选择器：为某个元素内包含的元素设置样式，如对h1中包含的span进行样式设置 ，嵌套在内层的元素就称为外层元素的后代，span就可以称为h1的后代。 子元素选择器：子元素选择器相当于后代选择器的子集，是后代选择器的一种特例，它只针对某元素的直接子元素设置其样式，缩小了控制范围。 相邻兄弟选择器：相邻兄弟选择器是指为一个元素后的相邻元素设置样式，他们两者具有相同父元素。 选择器……伪类选择器 伪类选择器是一种特殊选择器，主要用来为某些选择器附加特殊效果。常用来设置链接文字的显示效果。 网页中的链接文字的默认效果是由IE浏览器定义的。 使用CSS中的锚伪类选择器可以将网页中链接的不同状态以不同的样式效果显示。包括四种状态: 未被访问状态，已被访问状态，活动状态，和鼠标悬停状态。 选择器……属性选择器 属性选择器是CSS2中新引入的选择器，浏览器可以根据元素的属性和属性值选择元素应用相应的样式规则。 1、匹配属性名 例如：div[id]{……} 2、匹配属性值 例如：img[alt=’图片’][title=’标题’]{……} 选择器……通配选择器 通配选择器使用“*”来表示，用来对页面中所有元素设置共有样式。 例如：*{color:red;} 另外通配选择器还可以和后代选择器搭配使用。 例如：h1 * {font-size:16px;} 选择器……选择器优先级 实际应用中常常将多种选择器结合起来使用，这就涉及到一个优先级的问题。通常来说，选择器越特殊，控制的范围越小，指向越精确，它的优先级就越高。 将某一个CSS样式规则转换成一个三位数，通过比较数字的大小来计算样式优先级的高低，既简单又准确。 百位数是该选择器上的id选择器的数量的总和； 十位数表示该选择器上的类选择器、伪类选择器和属性选择器的数量的总和; 个位数表示标签选择器的数量的总和; 如果两个选择器对应的数字相等，也就是具有同样的优先级，在样式表中后面的会将前面的覆盖，后边的那个起作用。 常用样式属性……文本属性 文本属性主要用来定义文本的外观 常用样式属性……字体属性 字体属性包括文本的字体类型、字体的大小、字体加粗和字体风格等。 常用样式属性……背景属