《18CSS语法规则教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt》由会员分享，可在线阅读，更多相关《18CSS语法规则教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt（21页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、18CSS语法规则教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）CSS语法规则静态网站制作教学资源课件静态网站制作教学资源课件CSS语法规则 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。如：，h2 color:#0000ff;font-size:12px;h2 是选择器，即要定义的样式名称，这里直接是HTML 标签h2，color 和 font-size 是属性，#0000ff 和 12px 是属性的值。样式的种类：样式的种类：外部样式表内部样式表（位于 标签内部）内联样式（在 HTML 元素内部）样式的种类层叠次序层叠次序 当一个 HTML 元素被
2、不止一个样式定义时，所有的样式会层叠成一个新的虚拟样式，其中内联样式（在 HTML 元素内部）优先于内部样式表和外部样式表中的样式声明。内部样式表和内联样式中的样式信息保存在当前网页中，只能被当前网页使用。外部样式表文件的扩展名为“css”，将样式设置保存在一个外部文件中，可以将样式附加到多个网页，提高创建网站的效率。单击“窗口”菜单中的“CSS样式”命令或按“Shift+F11”快捷键，将打开“CSS样式”面板CSS样式面板分为上下两个部分，上边列出了所有样式的名称，body为html中的标签，“.daohang”是我们自己定义的文本样式，下边列出了该CSS样式的具体内容。使用CSS样式面板
3、实例实例13：对文字创建并应用内部样式，应用样式前的文字如图2.75,应用样式后的文字如图2.76所示。1.在“CSS”面板中，单击右下角的“新建CSS 规则”按钮，打开“新建CSS规则”对话框，先在对话框的“选择器类型”选项区中选择“类”，“选择器名称”框里输入CSS样式的名称“.para”，在“规则定义”选项区中选择“仅对该文档”，这里先创建一个内部样式，如图2.77所示，单击“确定”按钮，打开“CSS样式定义对话框”。2.在“分类”选项区中选择“类型”，在右侧的“字体”列表中选择“宋体”，在“大小”列表中选择“12”，在“行高”列表中输入“24px”。在“颜色”列表中选择黑色，即“000
4、000”。在“修饰”复选框中选择“无”。3.单击“确定”按钮，就可以在“样式”面板中看到“.para”样式，如图2.79所示，在代码视图中可以看到在和标签间多了如下代码，即内嵌样式代码是存放在文件头里的。.para font-family:宋体;font-size:12px;line-height:24px;color:#000000;text-decoration:none;选择要应用样式的文本，单击如图2.80所示的“CSS”属性面板中的“目标规则”列表中选择刚创建的“.para”样式，就可以对所选的文本中应用刚创建的样式。使用样式实用技巧：实用技巧：如果我们要给网页中的主要文字定义样式，
5、应该在“新建CSS规则”对话框中选择“标签”、“body”，将主要文字的样式直接定义在body标签中，这样网页中输入的文字都会直接套用body中的样式。实例实例14：创建外部样式表文件，制作如图2.81所示的列表效果1.单击“CSS样式”面板右下角“新建CSS 样式”按钮，打开“新建CSS规则”对话框，选择“类”，在名称框中输入“.array_ul_1”，选择定义规则在“新建样式表文件”，单击“确定”按钮，打开“将样式表文件另存为”对话框。2.选择保存位置为站点根文件夹下的“CSS”文件夹，输入文件名为“main”，如图2.83所示，单击“确定”按钮。3.在“类型”中设置字体为“宋体”，大小为
6、“12px”，行高为“18px”，如图2.84所示。4.在“方框”中设置“宽”为“300px”，如图2.85所示。5.在“边框”中设置下边框线为“虚线”，宽度为“1px”，其余框线不设置，如图2.86所示。6.在“列表”中浏览选择“images”文件夹下的“article_common.gif”做为项目符号图像。7.单击“确定”按钮后回到工作窗口，选择“代码”视图，可以在和之间多了一行代码：8.将光标移到要制作列表的位置，单击属性面板中“项目列表”按钮，输入第一行文本“社会热点问题大扫描：节能减排问题”。9.选中刚制作的列表文字，在CSS属性面板的“目标规则”中选择“array_ul_1”，其他各行重复以上操作即可。实例实例15：附加外部样式表文件1.单击“CSS样式”面板的右下角“附加样式表”按钮，打开“链接外部样式表”对话框，单击“浏览”按钮，找到素材包中的“shili16_css”文件夹中的“main.css”，由于该外部样式表文件不存放在本地站点中，因此将弹出如图2.89所示的对话框，选择“是”将该样式表文件复制到本地站点的“CSS”文件夹中。（注意：最好是先将该外部样式表文件素材包中复制到本地站点根文件夹的CSS文件夹中，这样就不会出现系统提示）2.将“添加为”选择“链接”，3.单击“确定”按钮，当前网页文档就可以直接使用CSS文件中的样式了。