网页设计与制作_第七章讲稿.ppt

《网页设计与制作教程》 作者：孟显勇 北京理工大学出版社 第七章 CSS基础 目前主流网页设计技术是使用HTML语言的标签定义页面结构，使用CSS样式表定义页面的布局和样式。 早期HTML语言通过增加大量定义格式的标签和属性，来实现样式和格式的定义，这样使代码变得越来越复杂，但效果并不理想。 例如，将文本转换成图像，或过多的使用表格实现排版。因此，HTML语言将原来大量的格式定义的工作都交由CSS样式表来处理，因为，CSS可以实现丰富的样式定义和精确的页面对象排版。 7.1 CSS简介 CSS（Cascading Style Sheets）称为层叠样式表单，CSS按代码的位置可以分为三种：内联样式表、内部样式表、外部样式表。 CSS主要对布局、字体、颜色、背景等页面元素的样式实现更加精确的控制。通过修改CSS样式文件，就可以实现整个站点内引用此格式的页面的样式同时更新，即实现页面格式的集中控制和管理。 CSS具有很好的浏览器和平台兼容性。 使用CSS可以实现精确的样式定义，并且样式定义代码简练，执行效率高。HTML语言和CSS样式结合可以使页面结构和格式定义分离，HTML语言定义页面结构和内容，CSS来定义页面的格式。 7.1.1 CSS分类 内联样式表内联样式表是由标签的style属性定义的样式，HTML绝大多数标签都具有style属性，通过style属性可以对网页对象的格式进行定义。 内联样式定义的格式只对此标签修饰对象有效。例如，代码段：B style=“color:#FF0000; font-size:18px”标签style属性定义样式/B，对B标签的style属性进行定义，设置文字颜色为红色，字体大小为18px。  7.1.1 CSS分类 内部样式表内部样式表是使用STYLE标签在文档头部分的HEAD/HEAD标签中对格式进行定义，内部样式表定义的样式可以被本页面的标签引用。 程序【例7-1】在STYLE标签中定义H1和P标签的样式，页面中所有H1和P标签都可以引用定义的样式，H1标签修饰的文字显示红色、宋体，P标签修饰的文字显示绿色、字体大小为18px。 7.1.1 CSS分类 内部样式表 HTMLHEADSTYLEH1 { color:#FF0000; font-family:宋体 }P { color:#00FF00; font-size:18px}/STYLE/HEADBODYH1标题样式定义/H1P 分段样式定义/P/BODY/HTML 7.1.1 CSS分类 外部样式表外部样式表是将样式定义代码单独放到一个独立的文件中，使用样式定义的页面都可以引用此样式定义文件，样式文件的扩展名为.css。当样式定义的文件内容发生改变时所有引用页面都会自动更新，实现集中样式定义和控制。 7.1.1 CSS分类 外部样式表 定义独立的外部样式表style.css，程序（style.css）代码如下：p.redp { color:#FF0000; font-size:18px}p.greenp { color:#00FF00; font-size:16px} 7.1.1 CSS分类 外部样式表 引用页面程序（ch7-2.html）代码如下：htmlheadtitleCSS样式定义/titlelink href=style.css rel=stylesheet type=text/css/headbody p class=greenp定义段落文字为绿色，16px/pp class=redp定义段落文字为红色，18px/p/body/html 7.1.2 CSS基本语法 CSS是定义页面格式的标准，具有严格的语法规范，CSS语法主要由三部分组成：选择器、属性和属性值。 CSS语法如下：语法： selector { property: value; property: value;}选择器 { 属性：属性值; 属性： 属性值 } 7.1.2 CSS基本语法 选择器 选择器就是想要对其样式定义的HTML标签，对HTML标签样式定义后，页面内引用该标签的格式都会按照样式表定义的样式显示效果。 7.1.2 CSS基本语法 属性和属性值CSS的属性定义的是标签的属性，例如，字体颜色，字体大小，页边空白等。例如，定义选择器body的字体、大小和颜色，属性font-family定义字体；属性 font-size定义大小；属性color定义文本颜色。属性与属性值用冒号隔开，当定义多个属性和属性值时，用分号隔开每个属性。 定义属性代码段如下： body { font-family: 宋体;font-size: 20px; color: #FF0000; }  7.