18CSS语法规则教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）

《18CSS语法规则教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）》由会员分享，可在线阅读，更多相关《18CSS语法规则教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）（21页珍藏版）》请在装配图网上搜索。

1、单击此处编辑母版标题样式,,单击此处编辑母版文本样式,,第二级,,第三级,,第四级,,第五级,,*,,*,单击此处编辑母版标题样式,,单击此处编辑母版文本样式,,第二级,,第三级,,第四级,,第五级,,*,,*,单击此处编辑母版标题样式,,单击此处编辑母版文本样式,,第二级,,第三级,,第四级,,第五级,,*,,*,18CSS语法规则教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）,CSS,语法规则,静态网站制作教学资源课件,CSS,语法规则,CSS,规则由两个主要的部分构成：选择器，以及一条或多条声明。如：,，,h2 {color:#0000ff; font-size

2、:12px;},h2,是选择器，即要定义的,样,式名称，这里直接是,HTML,标签,h2,，,color,和,font-size,是属性，,#0000ff,和,12px,是属性的值。,样式的种类：,,外部样式表,,内部样式表（位于,,标签内部）,,内联样式（在,HTML,元素内部）,样式的种类,层叠次序,,,当一个,HTML,元素被不止一个样式定义时，所有的样式会层叠成一个新的虚拟样式，其中内联样式（在,HTML,元素内部）优先于内部样式表和外部样式表中的样式声明。,,,内部样式表和内联样式中的样式信息保存在当前网页中，只能被当前网页使用。外部样式表文件的扩展名为“,css,”，将样式设置保存

3、在一个外部文件中，可以将样式附加到多个网页，提高创建网站的效率。,,单击“窗口”菜单中的“,CSS,样式”命令或按“,Shift+F11,”快捷键，将打开“,CSS,样式”面板,CSS,样式面板分为上下两个部分，上边列出了所有样式的名称，,body,为,html,中的标签，“,.daohang,”是我们自己定义的文本样式，下边列出了该,CSS,样式的具体内容。,使用,CSS,样式面板,实例,13,：,对文字创建并应用内部样式，应用样式前的文字如图,2.75,,应用样式后的文字如图,2.76,所示。,在“,CSS,”面板中，单击右下角的“新建CSS 规则”按钮 ，打开“新建,CSS,规则”对话框

4、，先在对话框的“选择器类型”选项区中选择“类”，“选择器名称”框里输入,CSS,样式的名称“,.para,”，在“规则定义”选项区中选择“仅对该文档”，这里先创建一个内部样式，如图,2.77,所示，单击“确定”按钮，打开“,CSS,样式定义对话框”。,在“分类”选项区中选择“类型”，在右侧的“字体”列表中选择“宋体”，在“大小”列表中选择“,12,” ，在“行高”列表中输入“,24px,”。在“颜色”列表中选择黑色，即“＃,000000,”。在“修饰”复选框中选择“无”,。,,单击“确定”按钮，就可以在“样式”面板中看到“,.para,”样式，如图,2.79,所示，在代码视图中可以看到在,,和

5、,,标签间多了如下代码，即内嵌样式代码是存放在文件头里的。,,,,.para {,,font-family: ",宋体,";,,font-size: 12px;,,line-height: 24px;,,color: #000000;,,text-decoration: none;,,},,,,选择要应用样式的文本，单击如图,2.80,所示的“,CSS,”属性面板中的“目标规则”列表中选择刚创建的“,.para,”样式，就可以对所选的文本中应用刚创建的样式。,,使用样式,实用技巧：,如果我们要给网页中的主要文字定义样式，应该在“新建,CSS,规则”对话框中选择“标签”、“,body,”，将主要

6、文字的样式直接定义在,body,标签中，这样网页中输入的文字都会直接套用,body,中的样式。,实例,14,：,创建外部样式表文件，制作如图,2.81,所示的列表效果,单击“,CSS,样式”面板右下角“新建CSS 样式”按钮 ，打开“新建,CSS,规则”对话框，选择“类”，在名称框中输入“,.array_ul_1,”，选择定义规则在“新建样式表文件”，单击“确定”按钮，打开“将样式表文件另存为”对话框,。,选择保存位置为站点根文件夹下的“,CSS,”文件夹，输入文件名为“,main,”，如图,2.83,所示，单击“确定”按钮。,在“类型”中设置字体为“宋体”，大小为“,12px,”，行高为“,

7、18px,”，如图,2.84,所示。,在“方框”中设置“宽”为“,300px,”，如图,2.85,所示。,在“边框”中设置下边框线为“虚线”，宽度为“,1px,”，其余框线不设置，如图,2.86,所示。,在“列表”中浏览选择“,images,”文件夹下的“,article_common.gif,”做为项目符号图像。,单击“确定”按钮后回到工作窗口，选择“代码”视图，可以在,,和,,之间多了一行代码：,,,将光标移到要制作列表的位置，单击属性面板中“项目列表”按钮,,，输入第一行文本“社会热点问题大扫描：节能减排问题”。,,选中刚制作的列表文字，在,CSS,属性面板的“目标规则”中选择“,arr

8、ay_ul_1,”，其他各行重复以上操作即可。,实例,15,：,附加外部样式表文件,单击“,CSS,样式”面板的右下角“附加样式表”按钮，,打开,“,链接外部样式表,”,对话框，单击“浏览”按钮，找到素材包中的“,shili16_css,”文件夹中的“,main.css,”，由于该外部样式表文件不存放在本地站点中，因此将弹出如图,2.89,所示的对话框，选择“是”将该样式表文件复制到本地站点的“,CSS,”文件夹中。（注意：最好是先将该外部样式表文件素材包中复制到本地站点根文件夹的,CSS,文件夹中，这样就不会出现系统提示）,,,将,“,添加为,”,选择,“,链接,”,，,,单击,“,确定,”,按钮，当前网页文档就可以直接使用,CSS,文件中的样式了。,,