Web编程基础第3章CSS样式.ppt

正文 正文 正文 谢 谢 Thanks for listening. 第3章 CSS样式 目标 -*- 了解CSS的特点及优势 掌握CSS的基本语法及样式规则 掌握类选择器和ID选择器的定义方式 掌握CSS选择符的组合定义 掌握CSS的继承特性 掌握样式表的引用方式及优先级 掌握伪类及伪对象的使用方式 掌握CSS样式中常用的属性设置 CSS的概念 CSS（Cascading Style Sheets，层叠样式表） -*- 单纯使用HTML在排版和界面效果上具有局限性 CSS解决了网页界面排版的难题 HTML的标签：定义网页的内容 CSS：网页内容如何显示 样式规则 样式规则 样式表由样式规则组成，这些规则用于定义文档的样式，即告诉浏览器如何显示文档。 样式规则由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。 selector是选择符，最普通的选择符就是HTML标签的名称。 property1、property2和propertyN为属性名； value是为对应属性名指定的值； 每对属性名/属性值后一般要跟一个分号（括号内只有一对名/值的情况除外） 示例：3.1 CSSBaseEG1.html -*- selector { property1：value; property2：value; ...... propertyN：value; } 选择符 选择符用于指定需要修饰的元素 常用的选择符主要有三类 HTML选择符 ID选择符 类选择符 -*- HTML选择符 HTML选择符 使用HTML标签作为选择符，指定页面中此类元素的样式 任何HTML标签都可以作为选择符 -*- P {text-indent: 3em} Table {border: 1px solid red} p标签的样式 table标签的样式 类选择符 类选择符 使用类选择符，可以把相同的元素分类定义为不同的样式 示例：3.2 ClassCssEG1.html 也可以不指定HTML元素，直接用“.”加上类名称，这样可以使不同的元素共享同样的样式，提高了代码的灵活度和复用度 示例：3.3 ClassCssEG2.html -*- selector.classname{property1：value;...} .classname{property1：value;...} ID选择符 ID选择符 通过ID选择符为某个单一元素定义单独的样式 示例：3.4 CSSBaseEG2.html -*- #IDName{ property1：value;...} IDName指定元素的ID 组合选择符 选择符的组合 当有多个选择符需要设置相同的属性和属性值时，可以用逗号将选择符隔开进行组合定义，即一次性设置多个选择符的属性和属性值，这样可以减少样式重复定义 示例：3.5 SelectorGroupEG.html 包含选择符是另外一种形式的组合定义 -*- selector1, selector2,...{property1：value;...} table a { font-size: 12px } table 和 a之间没有通过逗号隔开，该样式定义的是：在表格内的链接的文字大小为12象素，而表格外的链接的文字仍为默认大小 样式表的继承 样式表的继承是指内部元素自动具有外部元素的样式 示例：3.6 inherEG.html -*- div p ABCD /p /div p元素为div元素的内部元素，所以文字“ABCD”将使用div上规定的样式。当内部元素与外部元素的统一样式不一致时，将采用内部样式 使用样式表-1 CSS的使用方式有以下几种： 内嵌样式（Inline Style） 内部样式表（Internal Style Sheet） 外部样式表（External Style Sheet） 内嵌样式 内嵌样式是指将CSS语句混合在HTML标签中使用的方式，CSS语句只对其所在的标签有效，内嵌样式通过所在标签的style属性声明 示例代码如下： -*- h1 style=color:green;font-size:38px;font-family:impactCSS样式/h1 使用样式表-2 内部样式表 内部样式表是指在HTML的style标签中声明样式的方式。内部样式表通过style标签声明，只对所在的网页有效 示例：3. 1 CSSBaseEG1.htm