答疑时间：周二下午答疑地点：信息技术系（行政楼 526 ）答疑网址： cc.sbs 李智敏

第五章 CSS 答疑时间：周二下午答疑地点：信息技术系（行政楼526）答疑网址： http://cc.sbs.edu.cn 李智敏

5.1 CSS简介 5.1.1 CSS作用 • HTML网页要展示的样式在标记内设定 <h2><font color=red>你好!</h2> • 　　样式分散在各个标记中，在更改样式时，需要逐个修改各个标记中的属性。 •  CSS • 把网页展现的样式从网页中独立出来集中管理，如果需要改变网页样式，只需要改变样式设定部分，HTML文件本身无须更改。

CSS 样式文件1 CSS 样式文件N CSS 样式文件 HTML 文件1 HTML 文件N HTML 5.1 CSS简介 5.1.2样式表的使用结构  多个网页文件共享样式文件  多个样式文件套用在一个网页文件上

5.2 定义样式格式 • 选择符{ 规则} • 例如：h1{ color:Blue;} • 选择符(Selector) • 样式要套用的对象，可以是HTML标记，如h1。在文件<h1>…</h1>标记之间的内容将全部继承h1的全部规则。 • 规则(Rule) • 是样式设定的内容，是用{}括起来的部分，如{ color:Blue;} 见P96-97表5-1至5-4CSS属性

5.3 应用CSS样式的4种方式 【例5.1】（P98）选择符的应用

5.3 应用CSS样式的4种方式 Class和id的区别： • ID用来定义页面中大的样式，如栏目划分，顶部，正文，底部等．CLASS用来定义一些比较细节的样式，如具体的一个菜单，一行文字等． • 一般一个对象在代码中拥有唯一的属性时建议使用ID

5.3 应用CSS样式的4种方式 5.3.1 直接定义style属性语法： <HTML 标记名称 style=“样式属性1：属性值1；样式属性2：属性值2；…” 5.3.2 在HTML文档内定义内部样式表语法： <style type="text/css">  </style> 见P98表5-5 选择符的定义与使用

5.3 应用CSS样式的4种方式 5.3.3 嵌入外部样式表语法: <link type ="text/css"rel=stylesheet href= "外部样式文件名" > 语法: <style type="text/css">  </style> 5.3.4 链接外部样式表

5.4 样式表应用案例 使用用CSS样式的4种方式显示界面

5.4 样式表应用案例 5.4.1 直接定义HTML标记中的style属性【例5.２】（P99）直接在HTML标记中插入style属性，只能控制该处的样式。

5.4 样式表应用案例 5.4.2 定义内部样式表把样式定义放在文档头部，<style></style>标记之间定义，整个页面都以该样式显示。【例5.3】（P100）定义内部样式表的应用

5.4 样式表应用案例 5.4.3 嵌入外部样式表当多个网页具有相同样式时，可以使用样式文件（样式文件的后缀是.css，）把设定的样式集中起来，并存成独立的样式文件，使多个网页共享该样式文件。也可以将样式分类，使一个网页套用多个样式文件。

5.4 样式表应用案例 【例5.4】（P100）定义内部样式表的应用两个样式文件： style1.css 保存文字的颜色 style2.css 保存文字的其它样式 •建立样式文件 style1.css文件代码清单： @CHARSET "UTF-8"; h1 { color:green;} style2.css文件代码清单下： @CHARSET "UTF-8"; h1 { text-align:center; font-style:italic; font-family:隶书; font-size:x-large; }

5.4 样式表应用案例 ex5_04.html文件代码清单下：

5.4 样式表应用案例 5.4.4 链接外部样式表在HTML文档的文件头中加入语句，建立与外部样式文件的链接。 <link rel=stylesheet type="text/css" href="样式文件的URL">

5.4 样式表应用案例 【例5.5】（P101）链接外部样式文件的HTML文件的页面代码

5.5 页面定位功能 • 精确地将网页元素定位在页面的某一个位置。 • 定位元素： • position三种设定方式：absolute/relative/static • (绝对位置/相对位置/静态位置)。 • • Absolute：对象绝对位置，原点窗口左上角 • • Relative：对象与代码中上一个对象相对位置 • • Static：静态位置，默认值，根据源代码位置顺序显示。 •  left:元素的左边距。 • top:元素的顶边距。 • width：元素的宽度。 • height：元素的高度。 • z-index：定义页面元素在Z轴上的位置， • Z轴的定义从后到前。

5.5 页面定位功能 【例5.6】（P102）制作一个页面，在页面中使文字有部分重叠 <html><head> <title>定位技术的应用</title> <style type="text/css"> span{font-size:28pt;font-family:"隶书"} span.level2{position:absolute;z-index:2;left:100;top:100;color:green} span.level1{position:absolute;z-index:1;left:103;top:103;color:red} span.level0{position:absolute;z-index:0;left:106;top:106;color:yellow} p.lev1{position:absolute;z-index:2;left:50;top:50;font-size:20pt;color:blue} p.lev2{position:absolute;z-index:-2;left:52;top:52;font-size:20pt;color:darkred} </style> </head> <body> //<span> 标签被用来组合文档中的行内元素 <span class="level2">Web技术应用基础</span> <span class="level1">Web技术应用基础</span> <span class="level0">Web技术应用基础</span> <p class="lev1">欢迎学习</span> <p class="lev2">欢迎学习</span> </body></html>

5.5 页面定位功能 <div>标记与<span>标记 • <div>（divsion）标记是一个区块标记即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片乃至章节、摘要和备注等各种HTML元素。 • <span>标记与<div>一样，其区别在于<div>是一个块级（block-level）元素，它包围的元素会自动换行。而<span>是一个行内元素（inline elements），在它的前后不会换行。 • <span>标记可以包含于<div>标记中，成为它的子元素，而反之则不成立。

Bookshop系统中Maincss.css代码清单（P103） a:active { text-decoration: none; color: #333333} //标签：击活状态 a:hover { text-decoration: underline; color: #FF3300}//标签：鼠标经过 a:visited { text-decoration: none; color: #0000FF} //标签：已访问 a:link { //标签：超链接 color: #FF9900; text-decoration: none;} //相关属性： line-through（中划线）、 none、 overline（上划线）、 underline .menufontcolor1 { //自定义：菜单栏字体 color: #333333;} .menufontcolor2 { color: #333333;} .forminput { //自定义：表单输入组件的大小 height: 18px; border: 1px dotted;} //dotted点线；dashed 是虚线 .formtext { //自定义：表单文本框的字体 border: 1px dotted;} .td { //标签：单元格大小字体等 border: 1px dotted; font-family: "宋体"; font-size: 12px; color: #333333; text-decoration: none;}

CSS文字样式 • HTNL中<font face="字体名称"> • CSS中 • 字体：P{font-family:黑体;Arial;宋体;sans-serif;} • 文字大小：P{font-size:0.5} • 绝对单位（其显示大小与浏览器、分辨率无关）：in（inch，英寸）/cm/mm/pt（印刷的点数，在一般的显示器中1pt相当于1/72inch）;pc（pica，1pc=12pt） • 相对单位（其显示大小与浏览器有关）：x-small;small;medium;large;x-large;xx-large • 其显示大小与显示器的大小及其分辨率有关：px；%；em（一个em是网页浏览器的基础文本尺寸的高度，一般来说1em=16px）。 • 文字颜色： h3{color:blue;} h3{color:#00f;} h3{color:#0000ff;} h3{color:rgb(0,0,255);} h3{color:rgb(0%,0%,100%);}

CSS文字样式 • 文字粗细 span{font-size:30px/200/bold/normal;} • 文字斜体 p{font-style:italic/normal/18px/oblique;} • 文字的下划线、顶划线和删除线 p.one{text-decoration:underline（下划线）/overline（顶划线）/line-through（删除线）/blink（闪烁，IE浏览器中不支持，Firefox支持）;} 几种效果可以叠加使用，例 p.one{text-decoration:underline overline;} • 英文字母大小写 p.two{text-transform:capitalize（单词首字母大写）/uppercase（全部大写）/lowercase（全部小写）;}

设置标题CSS样式1 <html> <head> <title>CSS控制Title1</title> <style>  </style> </head> <body> <h1>Super Title CSS</h1> </body> </html>

设置标题CSS样式2 <html> <head> <title>CSS控制Title2</title> <style>  </style> </head> <body> <h1>Super Title CSS</h1> </body> </html>

设置标题CSS样式3 <html> <head> <title>CSS控制Title3</title> <style>  </style> </head> <body> <h1>Super Title CSS</h1> </body> </html>

设置标题CSS样式4 （选做） <html> <head> <title>CSS控制Title4</title> <style>  </style> </head> <body> <h1>Super Title CSS</h1> </body> </html>

设置标题CSS样式5 （选做） <html> <head> <title>CSS控制Title5</title> <style>  </style> </head> <body> <h1><img src="img/bg.gif" border="0"> Super Title CSS</h1> </body> </html>

CSS文字样式 • 段落的水平对齐 P{text-align:left/right/center/justify（两端对齐）;} • 段落的垂直对齐方式 td{vertical-align:top/bottom/middle/10px/-10px;} • 行间距和字间距 P.second{line-height:1.5em;} /*行间距，相对数值，可为负数*/

CSS文字样式 • 首字放大 <html> <head> <title>首字放大</title> <style>  </style> </head> <body> <p><span>中</span>秋节是远古……方才大兴。</p> <p>北宋……之欢。</p> </body> </html>

CSS图片样式 • HTML中 <img src="a.jpg" border="5"> • CSS中 img.test1{ border-style:solid（实线）/dotted（点画线）/dashed（虚线）; border-color:#FF9900; /* 边框颜色 */ border-width:5px; /* 边框粗细 */ }

设置图片4边框（选做） <html> <head><title>分别设置4边框</title> <style> </style> </head> <body> <img src="grape.jpg"></body> </html>

合并各CSS值（选做） <html> <head> <title>合并各CSS值</title> <style>  </style> </head> <body> <img src="peach.jpg" class="test1"> <img src="peach.jpg" class="test2"> </body> </html>

CSS图片样式 • 图片缩放 img.test1{ width:70%; /* 相对宽度*/ height:110px; } /* 绝对高度 */ • 图片的对齐 • 水平对齐 <td style="text-align:left/center/right;"><img src=""></td> • 竖直对齐 • <p>竖直对齐<img src="donkey.jpg" style="vertical-align:5px;">方式: 5px</p> • <p>竖直对齐<img src="miki.jpg" style="vertical-align:-10px;">方式: -10px</p> • <p>竖直对齐<img src="donkey.jpg" style="vertical-align:baseline;">方式:baseline</p>

图片竖直对齐（选做） <html> <head> <title>竖直对齐</title> <style type="text/css">  </style> </head>

图片竖直对齐（选做） <body> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:baseline;">方式:baseline<img src="miki.jpg" style="vertical-align:baseline;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:bottom;">方式:bottom<img src="miki.jpg" style="vertical-align:bottom;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:middle;">方式:middle<img src="miki.jpg" style="vertical-align:middle;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:sub;">方式:sub<img src="miki.jpg" style="vertical-align:sub;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:super;">方式:super<img src="miki.jpg" style="vertical-align:super;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:text-bottom;">方式:text-bottom<img src="miki.jpg" style="vertical-align:text-bottom;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:text-top;">方式:text-top<img src="miki.jpg" style="vertical-align:text-top;">方式</p> <p>竖直对齐<img src="donkey.jpg" style="vertical-align:top">方式:top<img src="miki.jpg" style="vertical-align:top">方式</p> </body> </html>

图文混排（选做） <html><head><title>图文混排</title> <style type="text/css"> </style> </head>

图文混排（选做） <body> <img src="chunjie.jpg" border="0"> <p><span>春</span>节古时叫“元旦……流传下来。</p> <p>据《诗经》记载，……彻夜无停。”</p> <p>在我国古代……这一习惯称呼。</p> </body></html>

网页：八仙过海（选做）

用CSS设置网页中的背景 • 背景 body{background-color:#5b8a00; background-image:url(img/a3.jpg); background-repeat:repeat-x/repeat-y/no-repeat; background-position:bottom right; background-attachment:fixed; /*固定背景图片*/ } • 以上代码可以统一用一句background属性代替 body{ background:#5b8a00; url(img/a3.jpg); repeat-x;fixed; 300px 25px; }

用CSS设置网页中的背景

例：添加多个背景图片（选做） <style>  </style>

背景综合应用一：我的个人主页（选做）

背景综合应用二《念奴娇· 赤壁怀古》 • 注意： • 先将文字的背景色及内容删掉，得到文字部分的区域背景，将这部分背景取出，用Photoshop调整到合适的亮度和颜色，再将此文字部分的背景图片添加到文字块中。

背景综合应用二《念奴娇· 赤壁怀古》 <html> <head> <title>念奴娇赤壁怀古</title> <style>  </style> </head>

背景综合应用二《念奴娇· 赤壁怀古》 <body> <div style="height:90px;"></div> <div class="content"> 大江东去<br>浪淘尽<br>千古风流人物<br> 故垒西边人道是<br>三国周郎赤壁<br> 乱石穿空<br>惊涛拍岸<br>卷起千堆雪<br> 江山如画<br>一时多少豪杰<br> 遥想公谨当年<br>小乔初嫁了<br>雄姿英发<br> 羽扇纶巾谈笑间<br>强虏灰飞烟灭<br> 故国神游<br>多情应笑<br>我早生华发<br> 人生如梦<br>一尊还酹江月<br> </div> </body> </html>

表格样式（选做） <html><head><title>年度收入</title> <style>  </style> </head><body> <table border="1" class="datalist"> …

隔行变色表格（选做） .datalist{border:1px solid #0058a3; /* 表格边框*/ font-family:Arial; border-collapse:collapse;/* 边框重叠，单线边框 */ background-color:#eaf5ff; /* 表格背景色 */ font-size:14px; } .datalist caption{padding-bottom:5px; font:bold 1.4em; text-align:left; } .datalist th{ border:1px solid #0058a3; /* 行名称边框 */ background-color:#4bacff; /* 行名称背景色 */ color:#FFFFFF; /* 行名称颜色 */ font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; text-align:center; } .datalist td{ border:1px solid #0058a3; /* 单元格边框 */ text-align:left; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px; } .datalist tr.altrow{background-color:#c7e5ff;} /* 隔行变色 */

隔行变色表格（选做）

表格样式——日历（选做） <html><head> <title>Calendar</title> <style> <!-- .clmonth {border-collapse: collapse; width: 780px;} .clmonth caption { text-align: left; font: bold 130% Georgia, "Times New Roman"; padding-bottom: 6px;} .clmonth th { border: 1px solid #999999; border-bottom: none; padding: 2px 8px 2px 8px; background-color: #D3D2A0; color: #2F2F2F; font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif; width: 110px;} .clmonth td {border: 1px solid #AFAFAF; font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif; padding: 2px 4px 2px 4px; vertical-align: top;} .clmonth td.previous, .clmonth td.next { background-color: #F5F4E6; color: #A6A6A6;}

表格样式——日历（选做） .clmonth td.active {background-color: #B1CBE1; color: #2B5070; border: 2px solid #4682B4;} .clmonth ul {list-style-type: none; margin: 0; padding-left: 12px; padding-right: 6px;} .clmonth li {margin-bottom: 8px;} --> </style> </head> <body> <table class="clmonth"> …… <tr> <td class="previous">31</td> <td class="active">1 <ul> <li>五棵松摄影城买镜头</li> <li>完成微积分作业</li> </ul> </td> …… </tr> …… </table></body></html>

答疑时间：周二下午 答疑地点：信息技术系（行政楼 526 ） 答疑网址： cc.sbs 李智敏