(8.3)--8.3学习CSS样式表的简单应用.pdf

《(8.3)--8.3学习CSS样式表的简单应用.pdf》由会员分享，可在线阅读，更多相关《(8.3)--8.3学习CSS样式表的简单应用.pdf（7页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、任务三：学习CSS样式表的简单应用【例题】HTML标签的简单应用，在网页中若使每个段落的文字用深灰色(#999)显示，那么HTML源代码就要写成：段落1段落2段落3段落4CSS样式表的简单应用如果想把段落字体改为红色(#F00)，则必须对每段文字颜色的代码进行修改，这非常麻烦。而CSS样式表是怎么解决这个问题的呢？【例8.3】CSS样式表的简单应用，只需在和之间添加如下CSS代码：pcolor:#999;所有段落文字处不用设置任何字体颜色即呈现为深灰色，如果要改成红色，只需将上述代码中的颜色代码如下#999修改为#F00即可。CSS样式表的简单应用在Dreamweaver中网页是基于CSS进行

2、构造的。从下面的页面属性和文本样式的设置可以说明这一点：【例题】页面属性的设置。单击“窗口”菜单下的“属性”菜单，然后在网页标签中选中任意对象，确保屏幕底部出现“属性面板”。新建一个页面，然后单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，如图所示，在此做如下设置：CSS样式表的简单应用1)“外观”选项卡：设置字体“大小”为12像素、“背景图像”为images/bg.gif、“重复”为no-repeat、页边距均为0。2)“链接”选项卡：设置文本链接特效，设置“链接颜色”为深灰色(#999)、“变换图像链接”(即鼠标经过时的颜色)为红色(#F00)、“已访问链接”为深灰色(#99

3、9)、“活动链接”为深灰色(#999)、“下划线样式”为始终无下划线。这些设置会自动生成CSS代码，在和中出现，CSS样式会自动应用于网页。body,td,th font-size:12px;body background-image:url(images/bg.gif);background-repeat:no-repeat;margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;a:link color:#999;text-decoration:none;a:visited text-decoration:none;color:#999;a:hover text-decoration:none;color:#F00;a:active text-decoration:none;CSS样式表的简单应用【例题】文本样式的设置。如果想修改特定的文本样式，选中文本，在“属性”面板中选中“CSS”进行文本样式的设置，如设置字体“大小”为16像素、颜色为#fc0，字体局中对其，如图所示。p color:#FC0;font-size:16px;text-align:center;CSS样式表的简单应用THANKS