DW第九CSS样式.ppt

扩展的CSS支持 在Dreamweaver 8中，CSS面板设计成了统一的面板，我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式。 样式问题 样式冲突： 当两种样式作用于同一个对象，且样式设置不同时，会产生冲突。 冲突时，显示最内部的样式 注意问题 应用： 一篇网页文档可以先设置body标签样式，指定文字样式（固定大小、颜色、行距等） 其次可指定table（td)标签样式，进一步指定表格中文字的样式。 如果某些网页元素有具体要求，可重定义其标签。 指定超级链接的样式 当有网页元素（如某段文本）有特殊要求时(如颜色).可直接在属性检查器中修改. 当有网页元素（如某段文本）有特殊要求时(如大小)，可为其定义自定义样式，只对此处应用. Dreamweaver课件 第九讲 使用CSS美化网页 主要内容(P206) CSS简介 创建 应用 编辑 调用外部样式表 CSS简介 CSS: Cascading Style Sheet 层叠样式表/级联样式表 作用: 定义网页元素的样式.使用它可以对网页中的布局元素，如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。还可定位一些特殊的HTML的属性，如滤镜、特效等。CSS样式不仅可以在一个页面中使用，而且可以用于其他多个页面。 HTML与CSS入门 HTML是超文本标记语言（Hypertext Markup Language）的缩写，它能独立于各种操作系统平台，可以在浏览器中解释执行。 CSS层叠样式表主要有两大优点，一个是可以对网页元素施加更多的控制，二是可以批量更新网页。 为什么要学习HTML HTML语言是网页制作的基础，我们使用Dreamweaver设计网页的过程，也就是制作HTML文件的过程。 有利于提高网页制作效率和优化网页代码。 有利于网页排错 。 有利于快速提高自己的网页制作水平 适度掌握一些HTML语言的知识是非常有益的，其原因如下： HTML的基本结构（P206） HTML语言的核心是标签。我们在浏览网页时看到的文字、图像、动画等在HTML文档中都是用标签来描述的。一个完整的HTML文档由html标签开始并由/html标签结束，所有的HTML代码都应写在html标签与/html标签之间。 ＣＳＳ层叠样式表 HTML头 HTML体 完整的ＨＴＭＬ文档 这种是在页面内直接引用样式表的方法，把样式表信息包括在style和/style标记中，如果要使样式表在整个页面中产生作用，该标记及内容应放到head的/head中 CSS样式的定义 CSS样式定义由两部分组成：选择器和声明，其中，选择器是样式的名称（如TR或P），而声明则用于定义样式元素。声明由两部分组成：属性和值。 HTML标签样式 自定义样式（类样式） CSS选择器样式 选择器 声明 声明 声明 创建和使用CSS样式表 熟悉“CSS样式”面板 在Dreamweaver 8中，可以借助“CSS样式”面板来新建、删除、编辑和应用样式，以及附加外部样式表等。 单击可切换到所有“文档”模式 显示类别视图 显示列表视图 只显示设置属性 删除选定样式 编辑选定样式 新建样式 将外部样式表文件链接到当前文件或将其中的CSS样式导入到当前文档 样式类型与使用方法（P208) 1．类样式 类样式又称自定义样式，它可应用于文档中任何文本。但需要用户手动进行应用。与当前文档关联的所有类样式都显示在“CSS 样式”面板中（样式名称前有一个句点“.”），以及文本属性面板的“样式”列表中。 创建 (1).类样式（自定义样式）: 作用: 定义某个特定对象的样式 步骤: 在名字输入框中输入.name 在弹出的样式表属性定义对话框中设置. 设置完成后在样式面板上会出现此样式名称. 应用: 选中要应用样式的对象,单击面板上的样式名即可. 掌握： 文字常用9pt大小,20px间距(类型/大小、行高) 精确首行缩进(区块/文字缩进) 光标/滤镜(扩展/光标、过滤器) 注意: 如果对一段文本应用,最好放在p../p中. 2．标签样式 用来重定义HTML标签的格式。例如，创建table标签样式后，所有用table标签设置了格式的文本都将立即更新。 创建 （2）重定义HTML标签： 作用： 对HTML标签的重新定义。 步骤： 在标签列表中选择要重新定义的标签 设置. 设置完成后自动应用。 掌握： 背景图像平铺问题（重定义body标签） 表单元素样式（input) 表格table(td)、图像img等。 3．选择器样式 选择器样式又称高级样式，该样式是对某些特定的标记组合进行重新定义，如所有包含了