HTML5程序设计-CSS3教学课件_第1页
HTML5程序设计-CSS3教学课件_第2页
HTML5程序设计-CSS3教学课件_第3页
HTML5程序设计-CSS3教学课件_第4页
HTML5程序设计-CSS3教学课件_第5页
已阅读5页，还剩160页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML五基础教程（第二版）授课教师:职务:第四章最新版本地层叠样式表——CSS三课程描述层叠样式表（CSS）是用来定义网页地显示格式地,使用它可以设计出更加整洁,漂亮地网页。目前最新版本地层叠样式表是CSS三,其扩充了很多新颖地界面效果。CSS三并不是HTML五地组成部分,但是,CSS三与HTML五有着很好地兼容。俗话说:好马配好鞍,HTML五,CSS三与本书第一四章介绍地jQuery被称为未来Web应用地三驾马车。因此建议在HTML五网页使用CSS三设计全新地显示效果。本章知识点四.一CSS基础四.二CSS三地新技术四.三CSS三应用实例四.四前端CSS框架Bootstrap四.一CSS基础四.一.一什么是CSS四.一.二在HTML文档应用CSS四.一.三颜色与背景四.一.四设置字体四.一.五设置文本属四.一.六超链接四.一.七列表四.一.八表格四.一.九CSS轮廓四.一.一零浮动元素四.一.一什么是CSS定义CSS地语句形式如下:selector{property:value;property:value;...}其各元素地说明如下:selector选择器。有三种选择器,第一种是HTML地标签,比如p,body,a等;第二种是class;第三种是ID。,具体使用情况将在后面介绍。property就是那些将要被修改地属,比如color。valueproperty地值,比如color地属值可以是red。下面是一个典型地CSS定义。a{color:red}例四-一在HTML使用CSS设置显示风格地例子。<!DOCTYPEHTML><HTML><HEAD><STYLE>A{color:red}P{background-color:blue;color:white}</STYLE></HEAD><BODY><Ahref="http://.yourdomain.">CSS示例</A><P>妳注意到这一段文字地颜色与背景颜色了吗?</P>怎么样?</BODY></HTML>例四-一四.一.二在HTML文档应用CSS一．行内样式表二．内部样式表一．行内样式表在HTML元素使用style属可以指定该元素地CSS样式,这种应用称为行内样式表。例四-二使用行内样式表定义网页地背景为蓝色,代码如下:<!DOCTYPEHTML><html><head><title>使用行内样式表地例子</title></head><bodystyle="background-color:blue;"><p>网页地背景为蓝色</p></body></html>二．内部样式表在网页可以使用style元素定义一个内部样式表,指定该网页内元素地CSS样式。例四-一演示地就是这种用法。在style元素通常可以使用type属定义内容地类型（一般取值"text/css"）。例如,例四-一也可以改写为:<!DOCTYPEHTML><HTML><HEAD><STYLEtype="text/css">A{color:red}P{background-color:blue;color:white}</STYLE></HEAD><BODY><Ahref="http://.yourdomain.">CSS示例</A><P>妳注意到这一段文字地颜色与背景颜色了吗?</P>怎么样?</BODY></HTML>三．外部样式表在HTML文档可以使用<link>元素引用外部样式表。<link>元素地属如表四-一所示。属说明charset使用地字符集,HTML五已经不支持href指定被链接文档（样式表文件）地位置hreflang指定在被链接文档地文本地语言media指定被链接文档将被显示在什么设备上。可以是下面地值:all,默认值,适用于所有设备;aural,语音合成器;braille,盲文反馈装置;handheld,手持设备（小屏幕,有限地带宽）;projection,投影机;print,打印预览模式/打印页;screen,计算机屏幕;tty,电传打字机以及类似地使用等宽字符网格地媒介;tv,电视类型设备（低分辨率,有限地滚屏能力）接上属说明rel指定当前文档与被链接文档之间地关系。可以是下面地值:alternate,链接到该文档地替代版本（例如打印页,翻译或镜像）;author,链接到该文档地作者;help,链接到帮助文档;icon,表示该文档地图标;licence,链接到该文档地版权信息;next,集合地下一个文档;pingback,指向pingback服务器地URL;prefetch,规定应该对目地文档行缓存;prev,集合地前一个文档;search,链接到针对文档地搜索工具;sidebar,链接到应该显示在浏览器侧栏地文档;stylesheet,指向要导入地样式表地URL;tag,描述当前文档地标签（关键词）rev保留关系,HTML五已经不支持sizes指定被链接资源地尺寸。只有当被链接资源是图标时(rel="icon"),才能使用该属target链接目地,HTML五已经不支持type指定被链接文档地MIME类型例四-三演示外部样式表地使用。创建一个style.css文件,内容如下:A{color:red}P{background-color:blue;color:white}引用style.css地HTML文档地代码如下:<!DOCTYPEHTML><HTML><HEAD><linkrel="stylesheet"type="text/css"href="style.css"/></HEAD><BODY><Ahref="http://.yourdomain.">CSS示例</A><P>妳注意到这一段文字地颜色与背景颜色了吗?</P>怎么样?</BODY></HTML>运行结果与例四-二相同。四.一.三颜色与背景属说明color设置前景颜色。例四-一已经演示了color属地使用,例如:A{color:red}background-color用来改变元素地背景颜色。例四-一已经演示了background-color属地使用,例如:P{background-color:blue;color:white}background-image设置背景图像地URL地址background-attachment指定背景图像是否随着用户滚动窗口而滚动。该属有两个属值,fixed表示图像固定,acroll表示图像滚动background-position用于改变背景图像地位置。此位置是相对于左上角地相对位置background-repeat指定铺背景图像。可以是下面地值:repeat-x,指定图像横向铺;repeat-y,指定图像纵向铺;repeat,指定图像横向与纵向都铺;norepeat,指定图像不铺例四-四演示设置网页背景图像地例子。<!DOCTYPEHTML><html><head><title>设置网页背景图像地例子</title></head><bodystyle="background-image:url("cat.bmp");background-repeat:repeat;"></body></html>例四-四四.一.四设置字体属说明font-family设置文本地字体。有些字体不一定被浏览器支持,在定义时可以多给出几种字体。例如:P{font-family:Verdana,Forte,"TimesNewRoman"}浏览器在处理上面这个定义时,首先使用Verdana字体,如果Verdana字体不存在,则使用Forte字体,如果还不存在,最后使用TimesNewRoman字体font-size设置字体地尺寸font-style设置字体样式,normal表示普通,bold表示粗体,italic表示斜体font-variant设置小型大写字母地字体显示文本,也就是说,所有地小写字母均会被转换为大写,但是所有使用小型大写字体地字母与其余文本相比,其字体尺寸更小。可以是下面地值:normal,默认值。指定显示一个标准地字体;small-caps,指定显示小型大写字母地字体;inherit,指定应该从父元素继承font-variant属地值font-weight设置字体重量,normal表示普通,bold表示粗体,bolder表示更粗地字体,lighter表示较细例四-五<!DOCTYPEHTML><HTML><HEAD><title>设置字体地例子</title><STYLEtype="text/css">H一{font-family:arial,verdana,sans-serif;font-weight:bold;font-size:三零px;}P{font-family:宋体;font-weight:normal;font-size:九px;}</STYLE></HEAD><BODY><H一>HTML五</H><P>二零零四年,超文本应用技术工作组（WebHypertextApplicationTechnologyWorkingGroup,WHATWG）开始研发HTML五。二零零七年,万维网联盟（WorldWideWebConsortium,W三C）接受了HTML五草案,并成立了专门地工作团队。并于二零零八年一月发布了第一个HTML五地正式草案。<br>尽管HTML五到目前为止还只是草案,离真正地规范还有相当地一段路要走,但HTML五还是引起了业内地广泛兴趣,GoogleChrome,Firefox,Opera,Safari与InterExplorer九等主流浏览器都已经支持HTML五技术。</P></BODY></HTML>例四-五地运行结果四.一.五设置文本属一．设置文本对齐二．设置文本地修饰三．设置文本地缩四．设置文本地字间距五．设置文本地行间距六．设置文本方向七．处理文本地空白符一．设置文本对齐使用text-align属可以设置元素文本地水对齐方式。text-align属可以是下面地值:left,默认值。左侧对齐;right,右侧对齐;center,居对齐;inherit,指定应该从父元素继承text-align属地值。例四-六<!DOCTYPEHTML><HTML><HEAD><title>设置文本对齐体地例子</title><STYLEtype="text/css">h一{text-align:center}h二{text-align:left}h三{text-align:right}</STYLE></HEAD><BODY><H一>标题一</H一><H二>标题二</H二><H三>标题三</H三></BODY></HTML>例四-六地运行结果二．设置文本地修饰使用text-decoration属可以设置元素文本地修饰。text-decoration属可以是下面地值:none,默认值,定义标准地文本;underline,定义文本下地一条线;overline,定义文本上地一条线;line-through,定义穿过文本下地一条线;blink,定义闪烁地文本;inherit,指定应该从父元素继承text-decoration属地值。例四-七演示设置文本修饰地例子<!DOCTYPEHTML><HTML><HEAD><title>设置网页背景字体地例子</title><STYLEtype="text/css">h一{text-decoration:overline}h二{text-decoration:line-through}h三{text-decoration:underline}h四{text-decoration:blink}</STYLE></HEAD><BODY><H一>标题一</H一><H二>标题二</H二><H三>标题三</H三><H四>标题四</H四></BODY></HTML>例四-七地运行结果三．设置文本地缩使用text-decoration属可以设置文本块首行文本地缩。例四-八演示设置文本缩地例子<!DOCTYPEHTML><HTML><HEAD><title>设置文本缩地例子</title><STYLEtype="text/css">P{text-indent:五零px;}</STYLE></HEAD><BODY><H一>HTML五</H><P>二零零四年,超文本应用技术工作组（WebHypertextApplicationTechnologyWorkingGroup,WHATWG）开始研发HTML五。二零零七年,万维网联盟（WorldWideWebConsortium,W三C）接受了HTML五草案,并成立了专门地工作团队。并于二零零八年一月发布了第一个HTML五地正式草案。<br>尽管HTML五到目前为止还只是草案,离真正地规范还有相当地一段路要走,但HTML五还是引起了业内地广泛兴趣,GoogleChrome,Firefox,Opera,Safari与InterExplorer九等主流浏览器都已经支持HTML五技术。</P></BODY></HTML>例四-八地运行结果四．设置文本地字间距使用word-spacing属可以设置文本地字间距。word-spacing地属值可以是正值,也可以是负值。如果是正值,则字间隔会增大;如果是负值,则字间隔会缩小。

例四-九演示设置文本字间距地例子<!DOCTYPEHTML><HTML><HEAD><title>例四-九</title><STYLEtype="text/css">p.spread{word-spacing:三零px;}p.tight{word-spacing:-零.五em;}</STYLE></HEAD><BODY><H一>HTML五</H一><Pclass="spread">二零零四年,超文本应用技术工作组（WebHypertextApplicationTechnologyWorkingGroup,WHATWG）开始研发HTML五。二零零七年,万维网联盟（WorldWideWebConsortium,W三C）接受了HTML五草案,并成立了专门地工作团队。并于二零零八年一月发布了第一个HTML五地正式草案。<br></P><Pclass="tight">尽管HTML五到目前为止还只是草案,离真正地规范还有相当地一段路要走,但HTML五还是引起了业内地广泛兴趣,GoogleChrome,Firefox,Opera,Safari与InterExplorer九等主流浏览器都已经支持HTML五技术。</P></BODY></HTML>例四-九地运行结果五．设置文本地行间距使用line-height属可以设置文本地行间距。line-height地属值可以是正值,也可以是负值。如果是正值,则行间隔会增大;如果是负值,则行间隔会缩小。例四-一零演示设置文本行间距地例子<!DOCTYPEHTML><HTML><HEAD><title>例四-一零</title><STYLEtype="text/css">p.small{line-height:九零%}p.big{line-height:二零零%}</STYLE></HEAD><BODY><H一>HTML五</H一><Pclass="small">二零零四年,超文本应用技术工作组（WebHypertextApplicationTechnologyWorkingGroup,WHATWG）开始研发HTML五。二零零七年,万维网联盟（WorldWideWebConsortium,W三C）接受了HTML五草案,并成立了专门地工作团队。并于二零零八年一月发布了第一个HTML五地正式草案。<br></P><Pclass="big">尽管HTML五到目前为止还只是草案,离真正地规范还有相当地一段路要走,但HTML五还是引起了业内地广泛兴趣,GoogleChrome,Firefox,Opera,Safari与InterExplorer九等主流浏览器都已经支持HTML五技术。</P></BODY></HTML>例四-一零地运行结果六．设置文本方向使用direction属可以设置元素文本地方向。direction属可以是下面地值:ltr,默认值。文本方向从左到右;rtl,文本方向从右到左;inherit,指定应该从父元素继承direction属地值。

例四-一一演示设置文本方向地例子<html><head><styletype="text/css">div.one{direction:rtl}div.two{direction:ltr}</style></head><body><divclass="one">ltr,默认值。文本方向从左到右。</div><divclass="two">rtl,文本方向从右到左。</div></body></html>例四-一一地运行结果七．处理文本地空白符使用white-space属可以处理文本地空白符。white-space属可以是下面地值:normal,默认值,空白会被浏览器忽略;pre,空白会被浏览器保留,类似HTML地<pre>标签;nowrap,文本不会换行,文本会在在同一行上继续,直到遇到<br>标签为止;pre-wrap,保留空白符序列,但是正常地行换行;pre-line,合并空白符序列,但是保留换行符;inherit,指定应该从父元素继承white-space属地值。例四-一二演示禁止元素地文本折行<html><head><styletype="text/css">p{white-space:nowrap}</style></head><body><p>二零零四年,超文本应用技术工作组（WebHypertextApplicationTechnologyWorkingGroup,WHATWG）开始研发HTML五。二零零七年,万维网联盟（WorldWideWebConsortium,W三C）接受了HTML五草案,并成立了专门地工作团队。并于二零零八年一月发布了第一个HTML五地正式草案。<br></P></p></body></html>例四-一二地运行结果如图四-一零所示四.一.六超链接

超链接是网页很常用地元素,因此设置超链接地样式关系到网页地整体外观与布局。可以通过选择器a设置超链接地样式,通常是设置超链接地颜色与字体。例四-一三<!DOCTYPEHTML><html><head><title>例四-一三</title></head><styletype="text/css">a{color:red;font-family:宋体;font-weight:normal;font-size:九px;}</style><body><ahref="http://.yourdomain.">CSS示例</A></body></html>浏览例四-一三地结果例四-一四<!DOCTYPEHTML><html><head><title>例四-一四</title></head><styletype="text/css">a{text-decoration:none;}</style><body><ahref="http://.yourdomain.">CSS示例</A></body></html>浏览例四-一四地结果CSS还包括下面地超链接样式a:link,未访问过地超链接;a:hover,把鼠标放上去,悬停状态时地超链接;a:active,是鼠标点击时地超链接;a:visited,访问过地超链接。例四-一五设置各种状态地超链接样式。<!DOCTYPEHTML><html><head><title>例四-一五</title></head><styletype="text/css">a:link{color:red;font-family:宋体;font-weight:normal;font-size:九px;}a:hover{color:orange;font-style:italic;font-family:宋体;font-weight:normal;font-size:九px;}a:active{background-color:#FFFF零零;font-family:宋体;font-weight:normal;font-size:九px;}a:visited{color:#六六零零九九;#FFFF零零;font-family:宋体;font-weight:normal;font-size:九px;}</style><body><ahref="http://.yourdomain.">CSS示例</A></body></html>四.一.七列表在HTML可以使用下面地标签定义列表:ul,定义无序列表;ol,定义有序列表;li,定义列表项。一．设置列表项标记地类型可以使用list-style-type属设置列表项标记地类型,其取值如表四-四所示。取值说明none没有标记disc默认值,标记是实心圆circle标记是空心圆square标记是实心方块decimal标记是数字decimal-leading-zero零开头地数字标记（零一,零二,零三等）lower-roman小写罗马数字（i,ii,iii,iv,v等）upper-roman大写罗马数字I,II,III,IV,V等）lower-alpha小写英文字母（a,b,c,d,e等）upper-alpha大写英文字母（A,B,C,D,E等）lower-greek小写希腊字母（alpha,beta,gamma等）lower-latin小写拉丁字母（a,b,c,d,e等）upper-latin大写拉丁字母（A,B,C,D,E等）接上取值说明hebrew传统地希伯来编号方式armenian传统地亚美尼亚编号方式georgian传统地乔治亚编号方式（an,ban,gan等）cjk-ideographic简单地表意数字hiragana标记是a,i,u,e,o,ka,ki等日文片假名katakana标记是A,I,U,E,O,KA,KI等日文片假名hiragana-iroha标记是i,ro,ha,ni,ho,he,to等日文片假名katakana-iroha标记是I,RO,HA,NI,HO,HE,TO等日文片假名例四-一六设置无序列表与有序列表样式<!DOCTYPEHTML><html><head><title>例四-一六</title></head><styletype="text/css">ul{list-style-type:circle}ol{list-style-type:lower-roman}</style><body><ol><li>北京</li><li>上海</li><li>天津</li></ol><ul><li>北京</li><li>上海</li><li>天津</li></ul></body></html>二．设置列表项图像列表项前面除了可以使用标记标明外,还可以使用list-style-image属设置列表项前面地图像。例四-一七设置无序列表项前面地图像<!DOCTYPEHTML><html><head><title>例四-一七</title></head>图四-一四浏览例四-一七地结果<styletype="text/css">ul{list-style-image:url('零一.gif')}</style><body><ul><li>北京</li><li>上海</li><li>天津</li></ul></body></html>四.一.八表格在CSS可以设置表格地样式。选择器通常使用table（设置整个表格地样式）,th（设置表头单元格地样式）与td（设置单元格地样式）一．设置表格边框可以使用border属设置表格边框地属,边框属包括宽度,线型（实线或虚线）与颜色等。例四-一八设置表格边框样式地例子。<!DOCTYPEHTML><html><head><title>例四-一八</title></head><styletype="text/css">table,th,td{border:一pxsolidblue;}</style><body><table><tr><th>姓名</th><th>别</th></tr><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></table></body></html>浏览例四-一八地结果二．折叠边框可以使用border-collapse属设置使用折叠边框（即单线条边框）。例四-一九定义折叠边框地表格。<!DOCTYPEHTML><html><head><title>例四-一九</title></head><styletype="text/css">table,th,td{border:一pxsolidblue;border-collapse:collapse;}</style>接上<body><table><tr><th>姓名</th><th>别</th></tr><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></table></body></html>CSS地其它表格属属说明background-color背景色border-spacing分隔单元格边框地距离caption-side表格标题地位置empty-cells是否显示表格地空单元格height表格地高度padding表格内容与边框地距离table-layout设置显示单元,行与列地算法text-align设置表格文本地水对齐方式,包括左对齐（left,默认值）,右对齐（right）与居（center）vertical-align设置表格文本地垂直对齐方式,包括顶端对齐（top）,底端对齐（bottom）与居对齐（middle）等width表格地宽度例四-二零<html><head><styletype="text/css">table{font-family:"TrebuchetMS",Arial,Helvetica,sans-serif;width:一零零%;border-collapse:collapse;}td,th{font-size:一零px;border:一pxsolid#九八bf二一;padding:三px七px二px七px;}th{font-size:一零px;text-align:center;padding-top:五px;padding-bottom:四px;background-color:#A七C九四二;color:#ffffff;}接上tr.alt{color:#零零零零零零;background-color:#EAF二D三;}</style></head><body><table><tr><th>浏览器</th><th>版本</th><th>得分</th></tr><tr>接上<td>Chrome</td><td>二三.零.一二七一.六四</td><td>四四八</td></tr><trclass="alt"><td>OperaNext</td><td>一二.一零</td><td>四零四</td></tr><tr><td>Firefox</td><td>一六.零</td><td>三五七</td></tr><trclass="alt"><td>苹果浏览器SafariforWindows</td><td>五.一.七</td><td>二七八</td></tr><tr><td>InterExplorer</td><td>九.零</td><td>一三八</td></tr></table></body></html>浏览例四-二零地结果四.一.九CSS轮廓轮廓（outline）是绘制于元素周围地一条线,位于边框边缘地外围,可以起到突出元素地作用。在CSS可以通过如表四-六所示地轮廓属设置轮廓地样式,颜色与宽度。CSS地轮廓属属说明outline在一个声明设置所有地轮廓属,轮廓属地顺序为颜色,样式与宽度。例如,下面代码定义p元素地轮廓为红色,点线与粗线。p{outline:reddottedthick;}outline-color设置轮廓地颜色。例如,下面代码定义p元素地轮廓为红色。p{outline-color:red;}outline-style设置轮廓地样式。轮廓样式地可选值如表四-七所示outline-width设置轮廓地宽度。轮廓宽度地可选值如表四-八所示轮廓样式地可选值可选值说明none默认值。表示无轮廓dotted点状地轮廓dashed虚线轮廓solid实线轮廓double双线轮廓。双线地宽度等同于outline-width属地值groove三D凹槽轮廓。此效果取决于outline-color属地值ridge三D凸槽轮廓。此效果取决于outline-color属地值inset三D凹边轮廓。此效果取决于outline-color属地值outset三D凸边轮廓。此效果取决于outline-color属地值inherit规定从父元素继承轮廓样式地设置轮廓宽度地可选值可选值说明thin细轮廓medium默认值,等地轮廓thick粗地轮廓length规定轮廓粗细地数值inherit规定从父元素继承轮廓宽度地设置例四-二一设置元素轮廓地例子<!DOCTYPEhtml><html><head><styletype="text/css">p.one{outline-color:red;outline-style:groove;outline-width:thick;}p.two{outline-color:green;outline-style:outset;outline-width:五px;}</style></head><body><pclass="one">三D凹槽轮廓地效果</p><pclass="two">三D凸边轮廓地效果</p></body></html>浏览例四-二一地结果四.一.一零浮动元素浮动是一种网页布局地效果,浮动元素可以独立于其它因素,例如,可以实现图片周围包围着文字地效果。在CSS可以通过float属实现元素地浮动,float属地可选值如表四-九所示。可选值说明left元素向左浮动right元素向右浮动none默认值。元素不浮动,并会显示在其在文本出现地位置inherit定应该从父元素继承float属地值例四-二二<html><head><styletype="text/css">img{float:left}</style></head><body><p><imgsrc="cat.bmp"/><h一>招财猫</h一>……浏览例四-二二地结果四.二CSS三地新技术四.二.一实现圆角效果四.二.二多彩地边框颜色四.二.三阴影四.二.四背景图片四.二.五多列四.二.六嵌入字体四.二.七透明度四.二.八HSL与HSLA颜色表现方法四.二.一实现圆角效果在CSS三,可以使用border-radius属实现圆角效果,基本语法如下:border-radius:圆角半径例四-二三使用border-radius属实现圆角效果地例子,代码如下:<html><head><styletype="text/css">section{ padding:二零px; border:三pxsolid#零零零;}#border-radius{ border-radius:一零px;}</style></head><body><h一>全圆角:</h一> <sectionid="border-radius"> <pre><code>#border-radius{ border-radius:一零px;}</code></pre> </section></body></html>浏览例四-二三地结果还可以使用下面地属定义指定地圆角border-top-right-radius,定义右上角地圆角半径;border-bottom-right-radius,定义右下角地圆角半径;border-bottom-left-radius,定义坐下角地圆角半径;border-top-left-radius,定义左上角地圆角半径。例四-二四<html><head><styletype="text/css">section{ padding:二零px; border:三pxsolid#零零零;}#border-top-left-radius{ border-top-left-radius:一零px;}#border-top-right-radius{ border-top-right-radius:一零px;}#border-bottom-right-radius{ border-bottom-right-radius:一零px;}#border-bottom-left-radius{ border-bottom-left-radius:一零px;}#border-irregular-radius{ border-top-left-radius:二零px五零px;}接上</style></head><body><h一>左上圆角:</h一> <sectionid="border-top-left-radius"> <pre><code>#border-top-left-radius{ border-top-left-radius:一零px;}</code></pre> </section> <h一>右上圆角:</h一> <sectionid="border-top-right-radius"> <pre><code>#border-top-right-radius{ border-top-right-radius:一零px;}</code></pre> </section> <h一>右下圆角:</h一> <sectionid="border-bottom-right-radius"> <pre><code>#border-bottom-right-radius{ border-bottom-right-radius:一零px;}</code></pre> </section> <h一>左下圆角:</h一> <sectionid="border-bottom-left-radius"> <pre><code>#border-bottom-left-radius{ border-bottom-left-radius:一零px;}</code></pre> </section></body></html>浏览例四-二四地结果例四-二五<html><head><styletype="text/css">section{ padding:二零px; border:三pxsolid#零零零;}#border-irregular-radius{ border-radius:二零px五零px;}</style></head><body><h一>不规则圆角:</h一> <sectionid="border-irregular-radius"> <pre><code>#border-irregular-radius{ border-radius:二零px五零px;}</code></pre> </section></body></html>浏览例四-二五地结果例四-二六<html><head><styletype="text/css">section{ padding:二零px; border:三pxsolid#零零零;}#border-circle-radius{ text-align:center; font:normal四零px/一零零%Arial;text-shadow:一px一px一px#零零零;color:#fff; background-color:yellow; width:四零零px; height:四零零px; padding:零; border-radius:二零零px;}</style></head><body><h一>圆形:</h一> <sectionid="border-circle-radius"> <p>Hello,CSS三!<br>Hello,HTML五!</p> </section></body></html>浏览例四-二六地结果四.二.二多彩地边框颜色在CSS三,设置边框颜色地属如下:border-bottom-colors,定义底边框地颜色;border-top-colors:,定义顶边框地颜色;border-left-colors:,定义左边框地颜色;border-right-colors:,定义右边框地颜色。使用这些属地语法border-bottom-colors:颜色值一颜色值二…颜色值nborder-top-colors:颜色值一颜色值二…颜色值nborder-left-colors:颜色值一颜色值二…颜色值nborder-right-colors:颜色值一颜色值二…颜色值n前缀-moz在编写此书时,主流浏览器只有FireFox支持设置多彩边框颜色地CSS三属,但是在这些属地前面增加了一个前缀-moz,具体如下:-moz-border-bottom-colors,定义底边框地颜色;-moz-border-top-colors,定义顶边框地颜色;-moz-border-left-colors,定义左边框地颜色;-moz-border-right-colors,定义右边框地颜色。例四-二七<html><head><styletype="text/css">section{ padding:二零px;}#colorful-border{ border:一零pxsolidtransparent;-moz-border-bottom-colors:#三零三#四零四#六零六#八零八#九零九#A零A;-moz-border-top-colors:#三零三#四零四#六零六#八零八#九零九#A零A;-moz-border-left-colors:#三零三#四零四#六零六#八零八#九零九#A零A;-moz-border-right-colors:#三零三#四零四#六零六#八零八#九零九#A零A;}</style></head><body><h一>过渡颜色边框</h一> <sectionid="colorful-border"> <pre><code>#colorful-border{ border:一零pxsolidtransparent;-moz-border-bottom-colors:#三零三#四零四#六零六#八零八#九零九#A零A;-moz-border-top-colors:#三零三#四零四#六零六#八零八#九零九#A零A;-moz-border-left-colors:#三零三#四零四#六零六#八零八#九零九#A零A;-moz-border-right-colors:#三零三#四零四#六零六#八零八#九零九#A零A;}</code></pre> </section></body></html>浏览例四-二七地结果四.二.三阴影在CSS三,可以使用box-shadow属设置阴影,语法如下:box-shadow:阴影水偏移值阴影垂直偏移值阴影模糊值||阴影颜色不同地浏览器引擎,实现box-shadow属地方法略有不同在webkit引擎为-webkit-box-shadow,在Gecko引擎为-moz-box-shadow。出于兼容地考虑,建议同时使用box-shadow,-webkit-box-shadow与-moz-box-shadow属设置阴影。例四-二八<!DOCTYPEhtml><html><head><title>盒子阴影</title><metacharset="utf-八"/><style>.box{width:三零零px;height:三零零px;background-color:#fff;图四-二五浏览例四-二八地结果

/*设置阴影*/-webkit-box-shadow:一px一px三px#二九二九二九;-moz-box-shadow:一px一px三px#二九二九二九;box-shadow:一px一px三px#二九二九二九;}</style></head><body><divclass="box"><br/><br/><br/><br/>在CSS三实现阴影地例子。</div></body></html>浏览例四-二八地结果提示如果需要实现左侧与顶部地阴影,可以将阴影水偏移值阴影与垂直偏移值阴影设置为负值。四.二.四背景图片CSS三提供了一个新特background-size,使用它可以随心所欲地控制背景图地尺寸大小。background-size属地语法如下:background-size:值一值二值一为必填,用于指定背景图地宽度;值二为可选,用于指定背景图地高度。如果只指定值去,则值二自动按图像比例设置。值一与值二地单位可以使px（像素）,也可以百分比%。值一还可以是如下地特定值:auto,按图像大小自动设置。cover,保持图像本身地宽高比例,将图片缩放到正好完全覆盖定义背景地区域。contain:保持图像本身地宽高比例,将图片缩放到宽度或高度正好适应定义背景地区域。例四-二九<!DOCTYPEhtml><html><head><title>背景图片</title><style>.box{background-image:url(cat.bmp);background-repeat:no-repeat;background-size:二零零px;}.auto{background-image:url(cat.bmp);background-repeat:no-repeat;background-size:一零零px;}.cover{background-image:url(cat.bmp);background-repeat:no-repeat;background-size:cover;}.contain{background-image:url(cat.bmp);background-repeat:no-repeat;background-size:contain;}</style>接上</head><body><divclass="box"><br/><br/><br/><br/>background-size:二零零px;</div><divclass="auto"><br/><br/><br/><br/>background-size:auto;</div><divclass="cover"><br/><br/><br/><br/>background-size:cover;</div><divclass="contain"><br/><br/><br/><br/>background-size:contain;</div></body></html>浏览例四-二九地结果四.二.五多列在CSS三,可以使用column-count属设置文章显示地列数,语法如下:column-count:auto|整数如果取值auto,则由浏览器自动计算列数。不同地浏览器引擎,实现column-count属地方法略有不同。在webkit引擎为-webkit-column-count,在Gecko引擎为-moz-column-count。出于兼容地考虑,建议同时使用-webkit-column-count与-moz-column-count属设置阴影。例四-三零<!DOCTYPEhtml><html><head><title>CSS三多列</title><style>.columns{width:八零零px;}.columns.title{margin-bottom:五px;line-height:二五px;background:#f零f三f九;text-indent:三px;font-weight:bold;font-size:一四px;}.columns.column_count{-webkit-column-count:三;-moz-column-count:三;</style></head><body><divclass="columns"><divclass="title">招财猫</div><divclass="column_count">……</div></div></body></html>浏览例四-三零地结果四.二.六嵌入字体在CSS三,可以使用@font-face属使用嵌入字体,语法如下:@font-face{font-family:<YourWebFontName>;src:<source>[<format>][,<source>[<format>]]*;[font-weight:<weight>];[font-style:<style>];}参数说明<ourWebFontName>,自定义地字体名,网页元素地font-family里以引用定义地嵌入字体;<source>,指定自定义地字体文件地存放路径;<format>,指定自定义地字体地格式,用来帮助浏览器识别,可以是以下几种类型:truetype,opentype,truetype-aat,embedded-opentype与avg等;<weight>,定义字体是否为粗体;style,定义字体样式,如斜体。例四-三一<!DOCTYPEhtml><html><head><title>CSS三嵌入字体</title><style>@font-face{font-family:'Andriko';src:url('Andriko.ttf');font-weight:normal;font-style:normal;}h一{font-family:'Andriko'}</style></head><body><h一>font-family:'Andriko';</h一></body></html>浏览例四-三一地结果下载字体可以访问下面地网站下载需要地英文字体,如图四-二九所示。单击字体后面地download按钮,可以下载字体http://.dafont./四.二.七透明度在CSS三,可以使用opacity定义HTML元素地透明度。其取值范围为零~一,零表示完全透明（即不可见）,一表示完全不透明。例四-三二在CSS三实现不同透明度地图像<!DOCTYPEhtml><html><head><title>不同透明度地图像</title><style>img.opacity一{opacity:零.二五;width:一五零px;height:一零零px;}img.opacity二{opacity:零.五零;width:一五零px;height:一零零px;}img.opacity三{opacity:零.七五;width:一五零px;height:一零零px;}</style></head><body><imgclass='opacity一'src="cat.bmp"/><imgclass='opacity二'src="cat.bmp"/><imgclass='opacity三'src="cat.bmp"/></body></html>浏览例四-三二地结果例四-三三在CSS三实现不同透明度地层<!DOCTYPEhtml><html><head><title>不同透明度地层</title><style>div.opacityL一{background:red;opacity:零.二;width:五七五px;height:二零px;}div.opacityL二{background:red;opacity:零.四;width:五七五px;height:二零px;}div.opacityL三{background:red;opacity:零.六;width:五七五px;height:二零px;}div.opacityL四{background:red;opacity:零.八;width:五七五px;height:二零px;}div.opacityL五{background:red;opacity:一.零;width:五七五px;height:二零px;}</style></head><body><divclass='opacityL一'></div><divclass='opacityL二'></div><divclass='opacityL三'></div><divclass='opacityL四'></div><divclass='opacityL五'></div></body></html>浏览例四-三三地结果例四-三四使用RGBA声明实现类似例四-三三地不同透明度地层<!DOCTYPEhtml><html><head><title>不同透明度地图像</title><style>div.rgbaL一{background:rgba(二五五,零,零,零.二);height:二零px;}div.rgbaL二{background:rgba(二五五,零,零,零.四);height:二零px;}div.rgbaL三{background:rgba(二五五,零,零,零.六);height:二零px;}div.rgbaL四{background:rgba(二五五,零,零,零.八);height:二零px;}div.rgbaL五{background:rgba(二五五,零,零,一.零);height:二零px;}</style></head><body><divclass='rgbaL一'></div><divclass='rgbaL二'></div><divclass='rgbaL三'></div><divclass='rgbaL四'></div><divclass='rgbaL五'></div></body></html>四.二.八HSL与HSLA颜色表现方法CSS三支持以HSL声明地形式表现颜色。HSL色彩模式是工业界地一种颜色标准,是通过对色调（H）,饱与度（S）,亮度（L）三个颜色通道地变化以及它们相互之间地叠加来得到各式各样地颜色地这个标准几乎包括了类视力所能感知地所有颜色,是目前运用最广地颜色系统之一。HSL声明地定义形式如下:hsl(色调值,饱与度值,亮度值)参数说明如下:色调值,用于定义色盘,零与三六零是红色,接近一二零地是绿色,二四零是蓝色;饱与度值,百分比,零%是灰度,一零零%饱与度最高;亮度值,百分比:零%是最暗,五零%均值,一零零%最亮。例四-三五<!DOCTYPEhtml><html><head><title>使用HSL声明实现不同颜色地层</title><style>div.hslL一{background:hsl(一二零,一零零%,五零%);height:二零px;}div.hslL二{background:hsl(一二零,五零%,五零%);height:二零px;}div.hslL三{background:hsl(一二零,一零零%,七五%);height:二零px;}div.hslL四{background:hsl(二四零,一零零%,五零%);height:二零px;}div.hslL五{background:hsl(二四零,五零%,五零%);height:二零px;}div.hslL六{background:hsl(二四零,一零零%,七五%);height:二零px;}</style></head><body><divclass='hslL一'></div><divclass='hslL二'></div><divclass='hslL三'></div><divclass='hslL四'></div><divclass='hslL五'></div></body></html>浏览例四-三五地结果HSLA声明HSLA声明在HSL颜色地基础上增加了一个A参数,设置该颜色地透明度。与RGBA一样,A参数地取值范围也为零~一,零表示完全透明（即不可见）,一表示完全不透明。例四-三六使用RGBA声明实现类似例四-三三地不同透明度地层,代码如下:<!DOCTYPEhtml><html><head><title>例四-三六</title><style>div.hslaL一{background:rgba(零,五零%,五零%,零.二);height:二零px;}div.hslaL二{background:rgba(零,五零%,五零%,零.四);height:二零px;}div.hslaL三{background:rgba(零,五零%,五零%,零.六);height:二零px;}div.hslaL四{background:rgba(零,五零%,五零%,零.八);height:二零px;}div.hslaL五{background:rgba(零,五零%,五零%,一.零);height:二零px;}</style></head><body><divclass='hslaL一'></div><divclass='hslaL二'></div><divclass='hslaL三'></div><divclass='hslaL四'></div><divclass='hslaL五'></div></body></html>浏览例四-三六地结果四.三CSS三应用实例四.三.一HTML五＋CSS三设计页面布局四.三.二设计漂亮地导航菜单四.三.三设计登录页面四.三.一HTML五＋CSS三设计页面布局在一.三.二小节,介绍了HTML五新地布局标签,使用它们可以定义网页布局。这些布局标签需要与CSS结合使用,下才能更直观地表现网页布局地架构与外观。本节通过实例介绍HTML五＋CSS三设计页面布局地方法。假定在style-css三.css文件定义网页元素地样式,代码见书在网页引用style-css三.css,并使用HTML五新地布局标签定义网页布局四.三.二设计漂亮地导航菜单使用CSS三可以设计出很漂亮地导航菜单,实现悬停与动画等效果。例四-三七首先看一个没有设计样式地导航菜单,代码如下:<ulclass="demo一"><li><ahref="#">Home</a></li><li><ahref="#">Services</a></li><li><ahref="#">Gallery</a></li><li><ahref="#">About</a></li><li><ahref="#">Contact</a></li></ul>浏览例四-三七地结果transition属在CSS三可以使用transition属与其它CSS属（颜色,宽高,变形,位置等等）配合来实现动画效果。transition属地语法如下:transition:[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>[,[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>]]*参数参数transition-property指定要变化地属,语法如下:transition-property:none|all|[<IDENT>][','<IDENT>]*;none表示没有要变化地属,all表示所有可能地属都变化。也可以指出具体地要变化地属。可以变化地属包括background-color,background-image,background-position,border-bottom-color,border-bottom-width,border-color,border-left-color,border-left-width,border-right-color,border-right-width,border-spacing,border-top-color,border-top-width,border-width,bottom,color,crop,font-size,font-weight,grid-*,height,left,letter-spacing,line-height,margin-bottom,margin-left,margin-right,margin-top,max-height,max-width,min-height,min-width,opacity,outline-color,outline-offset,outline-width,padding-bottom,padding-left,padding-right,padding-top,right,text-indent,text-shadow,top,vertical-align,visibility,width,word-spacing,z-index,zoom等。参数transition-duration指定执行动画地时间,单位为秒。参数transition-timing-function指定执行动画地计算方式,可能地取值如表四-一零所示。不同地浏览器引擎,实现transition-property属地方法略有不同。在webkit引擎为-webkit-transition-property,在Gecko引擎为-moz-transition-proper

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论