1 / 75

答疑时间:周二下午 答疑地点:信息技术系(行政楼 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

Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

  5. 5.3 应用CSS样式的4种方式 【例5.1】(P98)选择符的应用

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

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

  8. 5.3 应用CSS样式的4种方式 5.3.3 嵌入外部样式表 语法: <link type ="text/css"rel=stylesheet href= "外部样式文件名" > 语法: <style type="text/css"> <!-- @import url("外部样式表文件名"); --> </style> 5.3.4 链接外部样式表

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

  10. 5.4 样式表应用案例 5.4.1 直接定义HTML标记中的style属性 【例5.2】(P99)直接在HTML标记中插入style属性,只能控制该处的样式。

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

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

  13. 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; }

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

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

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

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

  18. 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>

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

  20. 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;}

  21. 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%);}

  22. 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(全部小写);}

  23. 设置标题CSS样式1 <html> <head> <title>CSS控制Title1</title> <style> <!-- h1 { font-family: Arial, sans-serif; font-size: 28px; color: #369; padding-bottom:4px; /*下方补白*/ border-bottom:1px solid #999999; /*线条*/ } --> </style> </head> <body> <h1>Super Title CSS</h1> </body> </html>

  24. 设置标题CSS样式2 <html> <head> <title>CSS控制Title2</title> <style> <!-- h1 { font-family: Arial, sans-serif; font-size: 28px; color: #FFFFFF; padding:4px; /*四周补白*/ background-color:#ddd; border-bottom:3px solid #aaa;/*底边框*/ } --> </style> </head> <body> <h1>Super Title CSS</h1> </body> </html>

  25. 设置标题CSS样式3 <html> <head> <title>CSS控制Title3</title> <style> <!-- h1 { font-family: Arial, sans-serif; font-size: 28px; color: #369; padding-bottom:10px; /*底部补白*/ background:url(img/01.jpg) repeat-x bottom; } --> </style> </head> <body> <h1>Super Title CSS</h1> </body> </html>

  26. 设置标题CSS样式4 (选做) <html> <head> <title>CSS控制Title4</title> <style> <!-- h1 { font-family: Arial, sans-serif; font-size: 28px; color: #369; padding-left:32px; /*左侧补白*/ background:url(img/icon.gif) no-repeat 0 50%; } --> </style> </head> <body> <h1>Super Title CSS</h1> </body> </html>

  27. 设置标题CSS样式5 (选做) <html> <head> <title>CSS控制Title5</title> <style> <!-- body{ background-color:#000000; } h1 { font-family: Arial, sans-serif; font-size: 28px; color: #369; } h1 img { background: #f22; /* gif背景色 */ vertical-align: middle; } --> </style> </head> <body> <h1><img src="img/bg.gif" border="0"> Super Title CSS</h1> </body> </html>

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

  29. CSS文字样式 • 首字放大 <html> <head> <title>首字放大</title> <style> <!-- body{ background-color:black; } /* 背景色 */ p{ font-size:15px; /* 文字大小 */ color:white; } /* 文字颜色 */ p span{font-size:60px; /* 首字大小 */ float:left;/* 首字下沉 */ padding-right:5px; /* 与右边的间隔 */ font-weight:bold; /* 粗体字 */ font-family:黑体; /* 黑体字 */ color:yellow; } /* 字体颜色 */ --> </style> </head> <body> <p><span>中</span>秋节是远古……方才大兴。</p> <p>北宋……之欢。</p> </body> </html>

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

  31. 设置图片4边框(选做) <html> <head><title>分别设置4边框</title> <style> <!-- img{border-left-style:dotted; /* 左点画线 */ border-left-color:#FF9900; /* 左边框颜色 */ border-left-width:5px; /* 左边框粗细 */ border-right-style:dashed; border-right-color:#33CC33; border-right-width:2px; border-top-style:solid; /* 上实线 */ border-top-color:#CC00FF; /* 上边框颜色 */ border-top-width:10px; /* 上边框粗细 */ border-bottom-style:groove; border-bottom-color:#666666; border-bottom-width:15px; } --></style> </head> <body> <img src="grape.jpg"></body> </html>

  32. 合并各CSS值(选做) <html> <head> <title>合并各CSS值</title> <style> <!-- img.test1{ border:5px double #FF00FF; /* 将各个值合并 */ } img.test2{ border-right:5px double #FF00FF; border-left:8px solid #0033FF; } --> </style> </head> <body> <img src="peach.jpg" class="test1"> <img src="peach.jpg" class="test2"> </body> </html>

  33. 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>

  34. 图片竖直对齐(选做) <html> <head> <title>竖直对齐</title> <style type="text/css"> <!-- p{ font-size:15px; } img{ border: 1px solid #000055; } --> </style> </head>

  35. 图片竖直对齐(选做) <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>

  36. 图文混排(选做) <html><head><title>图文混排</title> <style type="text/css"> <!-- body{background-color:bb0102; /* 页面背景颜色 */ margin:0px; /*设置所有外边距属性*/ padding:0px; } /*设置所有内边距属性*/ img{float:left;/* 文字环绕图片 */ /*margin-right:50px; /* 右侧距离 */ /*margin-bottom:25px; } /* 下端距离 */ p{ color:#FFFF00; /* 文字颜色 */ margin:0px; padding-top:10px; padding-left:5px; padding-right:5px; } span{float:left;/* 首字放大 */ font-size:85px; font-family:黑体; margin:0px; padding-right:5px;} --></style> </head>

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

  38. 网页:八仙过海(选做)

  39. 用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; }

  40. 用CSS设置网页中的背景

  41. 例:添加多个背景图片(选做) <style> <!-- body{ background-image:url(bg7.jpg);/* 页面大背景 */ background-repeat:no-repeat; padding:0px; margin:0px; background-attachment:fixed; } /*背景图片不随滚动轴移动*/ div{ background-image:url(bg8.gif); /* 左侧小图标背景 */ background-repeat:repeat-y; /* 竖直方向重复 */ background-position:5px 0px; padding-left:110px; padding-top:10px; padding-right:10px; padding-bottom:15px; } h1{ font-family:黑体; text-decoration:underline; } --> </style>

  42. 背景综合应用一:我的个人主页(选做)

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

  44. 背景综合应用二《念奴娇· 赤壁怀古》 <html> <head> <title>念奴娇 赤壁怀古</title> <style> <!-- body{ background:url(bg9.jpg) no-repeat center top; /* 页面背景 */ margin:0px; padding:0px; text-align:center; } div.content{ height:260px; writing-mode:tb-rl; /* 竖排版文字 */ width:620px; text-align:left; border:3px solid #666666; line-height:30px; padding-top:15px; padding-right:8px; background: url(bg10.jpg) no-repeat; } /* 文字部分背景 */ --> </style> </head>

  45. 背景综合应用二《念奴娇· 赤壁怀古》 <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>

  46. 表格样式(选做) <html><head><title>年度收入</title> <style> <!-- body{ background-color:#ebf5ff; /* 页面背景色 */ margin:0px; padding:4px; text-align:center; } /* 居中对齐(IE有效) */ .datalist{ color:#0046a6; /* 表格文字颜色 */ background-color:#d2e8ff; /* 表格背景色 */ font-family:Arial; } /* 表格字体 */ .datalist caption{ font-size:18px; /* 标题文字大小 */ font-weight:bold; } /* 标题文字粗体 */ .datalist th{ color:#003e7e; /* 行、列名称颜色 */ background-color:#7bb3ff; } /* 行、列名称的背景色 */ --> </style> </head><body> <table border="1" class="datalist"> …

  47. 隔行变色表格(选做) .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;} /* 隔行变色 */

  48. 隔行变色表格(选做)

  49. 表格样式——日历(选做) <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;}

  50. 表格样式——日历(选做) .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>

More Related