HTML+CSS+JavaScript第五章幻灯片.pptVIP

设置边框的颜色，同样可以选择设置单条边框颜色或者统一设置4个边框的颜色。可以选用的边框颜色属性有5个，设置边框颜色的语法格式如下： border-color：颜色关键字|RGB值 border-top-color：颜色关键字|RGB值 border-left-color：颜色关键字|RGB值 border-right-color：颜色关键字|RGB值 border-bottom-color：颜色关键字|RGB值 这里的颜色属性值和前面介绍的颜色属性值相同，可以使用颜色关键字或RGB值。 5.5.3 边框颜色 定义样式.p1设置4个边框颜色均为蓝色，样式.p2设置上边框颜色为红色、左边框为蓝色、下边框为黑色、右边框为绿色。样式代码如下： .p1{border-style:solid;border-width:thick;border-color:blue;} .p2{border-style:solid;border-width:thick;border-top-color:red;border-left-color:#0000ff;border-bottom-color:black;border-right-color:#00ff00;} 网页中元素应用这些样式后，在浏览器中的显示效果如图5-20所示。 【例5-20】 图5-20 设置边框颜色 在学习了CSS的基本应用之后，就可以对网页中的各个元素有效地进行样式控制了，下面通过制作古诗《静夜思》的介绍网页，将前面学到的基本应用应用到实例中。 【例5-21】制作古诗《静夜思》的介绍网页，使用链接的外部样式表将定义好的CSS样式插入网页中，对比使用样式表和不使用样式表前后的样式差异。 5.6 CSS应用实例 未使用样式表的网页代码如下： html head title综合实训/title /head body p静夜思/p p《静夜思》是伟大诗人李白的作品，表达的是思乡之情。这首诗虽然只有区区二十个字，但就流传的广泛程度来说，还没有一篇作品可以与之比肩，它几乎是全世界华人耳熟能详的一首名篇。我国流传的《静夜思》是明朝版本，与宋朝版本个别字有出入。/p hr size=“1” table width=“100%” border=“0” cellpadding=“0” cellspacing=“0” tr td align=“center”img src=“images/poem.jpg” width=“149” height=“191”/td td align=“center” valign=“bottom” pbr床前明月光，br疑是地上霜。br举头望明月，br低头思故乡。brbr /p/td /tr /table /body /html 未使用样式表时的显示效果如图5-21所示： 图5-21 未使用CSS的《静夜思》介绍网页显示效果 1.制作初始网页 图5-21 未使用CSS的《静夜思》介绍网页显示效果 使用样式表控制网页元素样式的网页代码如下： html head title综合实训/title link href=“css.css” rel=“stylesheet” type=“text/css”/ /head body class=“bg” p class=“title”静夜思/p p class=“intro”《静夜思》是伟大诗人李白的作品，表达的是思乡之情。这首诗虽然只有区区二十个字，但就流传的广泛程度来说，还没有一篇作品可以与之比肩，它几乎是全世界华人耳熟能详的一首名篇。我国流传的《静夜思》是明朝版本，与宋朝版本个别字有出入。/p hr size=“1” table width=“100%” border=“0” cellpadding=“0” cellspacing=“0” tr td align=“center”img src=“images/poem.jpg” width=“149” height=“191”/td td align=“center” valign=“bottom” p class=“poem”br床前明月光，br疑是地上霜。br举头望明月，br低头思故乡。brbr /p/td /tr /table /body /html 2.为网页应用样式表 （1）网页背景： .bg{background-image:url(images\bg.gif); background-repeat: repeat-x} （2）诗歌标题： .title{font-family:黑体; font-size:25px;font-weight:bold;text-align:left; text-decoration: underline} （3）诗歌介绍