第8讲：页面布局 中小型网站建设与管理 教学课件.pptVIP

中小型网站建设与管理 第7讲：CSS网页布局 吴纯 想一想这个网页如何编写？ 这就是它的HTML代码 html head title这样编写网页也太累了吧/title /head body p align=centerfont color=#0000FF开展爱国主义教育和综合素质教育/font/p p align=centerfont color=#0000FF世纪职专2008年冬季拔河比赛/font/p p align=centerfont color=#0000FF2008年秋季新生军训汇演/font/p p align=centerfont color=#0000FF世纪职专向四川地震灾区捐款仪式/font/p p align=centerfont color=#0000FF欢天喜地闹新春--《周日晚八点》/font/p p align=centerfont color=#0000FF世纪职专奖学金发放场面/font/p p align=centerfont color=#0000FF2007年新生军训汇报表演/font/p /body /html p/p表示一个段落，在这个网页中，每个段落的文字样式都是一样的，要是能对它们进行批量设置就好了...... 一、CSS简介 CSS是Cascading Style Sheets的英文缩写,即层叠样式表。CSS是用于网页布局与网页美化的。 CSS的控制范围：文字格式、链接样式、图片显示规则、表格属性、背景图片......几乎网页上所有内容都可以通过设定CSS进行“批量”设置！ 简单的CSS实例 我们刚才说的那个网页，如果使用CSS，就非常简单明了！ html head title是不是变得很轻松/title style type=text/css p {color:#0000FF; text-align:center; } /style /head body p开展爱国主义教育和综合素质教育/p p世纪职专2008年冬季拔河比赛/p p2008年秋季新生军训汇演/p p世纪职专向四川地震灾区捐款仪式/p p欢天喜地闹新春--《周日晚八点》/p p世纪职专奖学金发放场面/p p2007年新生军训汇报表演/p /body /html 二、CSS的编写规则 CSS选择符就是CSS样式的名字,想在网页中使用CSS，就要把网页中的HTML标签与CSS对应起来！这时就通过CSS选择符来指定某个标签使用某个CSS样式. CSS的编写格式： style type=text/css 选择符{声明1;声明2;} /style 什么是CSS声明？ CSS声明是由属性,冒号(:),属性值和分号(;)组成的。 例如：color:#FF3300;font-size:12px; 如果有多个声明，可以写在一行，也可以分行写，效果都是一样的。 多个选择符 假如我们想设置段落的样式，又想设置链接的样式，这样就需要设定多个选择符。 选择符{声明;声明;} 选择符{声明;声明;} 选择符{声明;声明;} 选择符的声明太多，怎么办？ 一般我们可以这样写： 选择符{声明1;声明2;声明3;} 如果选择符的声明太多，可以这样写： 选择符 { 声明1; 声明2; 声明3; } 三、设定链接样式 style type=text/css a {font-size:16pt; } a:link {color:#0000FF;text-decoration:underline;} a:visited {color:#5C5C5C;text-decoration:none;} a:hover {color:#FF0000;text-decoration:underline;font-size:20pt;} /style a { } 指定链接的在以下情况下的共用样式 a:link { } 链接正常情况下的样式 a:visited { } 链接点击后的样式 a:hover { } 把鼠标放在链接上，链接的样式 在网页中的所有链接将会采用这个样式！ 多个选择符共用一组声明 选择符1 { 声明1; 声明2; } 选择符2 { 声明1; 声明2; } 选择符3 { 声明1; 声明2; 声明3; } 作 业 建立一个表格：宽600、高300、三行两列，单元格文字大小16pt、颜色黑色。 第一列单元格放置链接，鼠标放上去颜色为红色、大小为20pt。 要求通过CSS实现以下效果。