《网站设计》第9章 CSS层叠样式表的应用

9.1关于CSS样式表 9.2创建新的CSS样式 9.3【CSS样式】面板的使用

团购合买资源类别：文库，文档格式：PPT，文档页数：25，文件大小：476KB

第9章CSS层叠样式表的应用 91关于CSS样式表 92刨建新的CSS样式 93【CSs样式】面板的使用

第9章 CSS层叠样式表的应用 9.1 关于CSS样式表 9.2 创建新的CSS样式 9.3 【CSS样式】面板的使用

9.1关于CSS样式表回用CSS的优点一控制页面中的每个元素(精确定位) 对HTML语言处理样式的最好补充把内容和格式处理相分离,减少工作量目录上一页下一页退出

9.1 关于CSS样式表一、使用CSS的优点 1．控制页面中的每一个元素（精确定位）。 2．对HTML语言处理样式的最好补充。 3．把内容和格式处理相分离，减少工作量

9.1关于CSS样式表、CS的类型自定义CSS样式自定义CSS样式(也称为类样式),可以将样式属性设置为任何文本范围或文本块 HTM标签样式 HTM标签样式,用于重新定义特定标签,如H的格式创建或更改H标签的CS样式时,所有用H标签设置了格式的文本都立即更新 CSS选择器样式 aCSS选择器样式重定义特定标签组合的格式(如每当H2 标题出现在表格单元格内时都应用dh2),或重定义包目录含特定i属性的所有标签的格式上一页下一页退出

9.1 关于CSS样式表二、CSS的类型自定义CSS样式 ◼ 自定义CSS样式（也称为类样式），可以将样式属性设置为任何文本范围或文本块。 HTML标签样式 ◼ HTML标签样式，用于重新定义特定标签，如H1的格式。创建或更改H1标签的CSS样式时，所有用H1标签设置了格式的文本都立即更新。 CSS选择器样式 ◼ CSS选择器样式重定义特定标签组合的格式（如每当H2 标题出现在表格单元格内时都应用td h2），或重定义包含特定id属性的所有标签的格式

9.1关于CSS样式表、CSs样式在网页文档中的3种存在方式外部文件方式外部CS样式文件,是一系列存储在一个单独的外部文件cs文件(并非HIM文件)中的 CSS样式。 CSS文件的引用是在HM的head t页)其中的 Style. css文件应为已编好的样式表文件。下一页退出

9.1 关于CSS样式表三、 CSS样式在网页文档中的3种存在方式 1．外部文件方式 ◼ 外部CSS样式文件，是一系列存储在一个单独的外部文件.css文件（并非HTML文件）中的 CSS样式。 ◼ CSS文件的引用是在HTML的标签之间编写下列语句：其中的Style.css文件应为已编好的样式表文件

9.1关于CSS样式表、CSS样式在网页文档中的3种存在方式 2.内部文档头方式内部(或嵌入式)CSS样式表,是一系列包含在HTML文档head部分的sty1e标签内的C式将风格直接定义在文档头之间如: 样式表的具体内容目录上一页下一页退出

9.1 关于CSS样式表三、 CSS样式在网页文档中的3种存在方式 2.内部文档头方式 ◼ 内部（或嵌入式）CSS样式表，是一系列包含在HTML文档head部分的style标签内的CSS样式。 ◼ 将风格直接定义在文档头之间，如：

9.1关于CSS样式表、"CSS样式在网页文档中的3种存在方式 3.直接插入式直接插入式很简单,只需在每个HM标签后书写CSS属性即可例如:规定一个 Table标志中的字为红色,字体大小为10pt,则可书写如下: 目录上一页下一页退出

9.1 关于CSS样式表三、 CSS样式在网页文档中的3种存在方式 3.直接插入式 ◼ 直接插入式很简单，只需在每个HTML标签后书写CSS属性即可。 ◼ 例如：规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下：

92 Dreamweaver中创建新的cSS样式无在页面属性”申设置页而屈性链接字体:(同页面字体大小链接颜色):#0900变换图像链接): 已访问链接):#36活动链接():□r0 下划线样式①:[好终有下划线 L确定取消应用」』帮助00 目录切换到“代码”视图,可以看到对“页面属性”进上一页行的设置,变成了一段CSS样式代码,嵌在文档头之间下一页退出

9.2 Dreamweaver中创建新的CSS样式 1. 在“页面属性”中设置切换到“代码”视图，可以看到对“页面属性”进行的设置，变成了一段CSS样式代码，嵌在文档头之间

92 Dreamweaver中创建新的cSS样式文本编辑 Dreamweaver mX2004在属性检查器中增加了“样式”选项,这一选项的功能是在设计页面时进行添加字体、设置颜色、大小等样式操作时,“样式”中套用样式; 如果套用的Cs样式不是文字,而是表格同样可以在属性面板中设置CSS。在属性目录面板中都有一个类别( Class),在这里上一页就可以设计表格的CSs样式。下一页退出

9.2 Dreamweaver中创建新的CSS样式 2. 文本编辑 Dreamweaver MX 2004在属性检查器中增加了“样式”选项，这一选项的功能是在设计页面时进行添加字体、设置颜色、大小等样式操作时，“样式”中套用样式；如果套用的CSS样式不是文字，而是表格，同样可以在属性面板中设置CSS。在属性面板中都有一个类别（Class），在这里就可以设计表格的CSS样式

93【CSs样式】面板的使用 CSS样式面板【窗口】【CSS样式】命令 v设计 ss样式M祥式行为 G应用样式C编辑样式万无CSS样式编辑样式目录附加样式上一页删除样式下一页新建样式退出

9.3 【CSS样式】面板的使用 1、CSS样式面板 ◼ 【窗口】｜【CSS样式】命令附加样式新建样式编辑样式删除样式

93【CSs样式】面板的使用徊CSS样式面板窗口】|【CSS样式】命令在“CSS样式”面板的底部有4个功能按钮,它们各自的作用是: 【附加样式表】按钮:可调出“链接外部样式表”对话框,从中选择要链接到或导入到当前文档中的外部样式表【新建CS样式】按钮:单击后可弹出“新建CSS样式对话框,使用“新建CS样式”对话框可以选择要创建的样式类型。 a【编辑样式表】按钮:单击后可弹出“CS样式定义” 目录对话框。编辑当前文档或外部样式表中的何样式除CSS样式】按钮:删除“CS5样式”面板中的所上一页选样式,并从应用该样式的所有元素中删除样式下一页退出

9.3 【CSS样式】面板的使用 3. CSS样式面板 ◼ 【窗口】｜【CSS样式】命令 ◼ 在“CSS样式”面板的底部有4个功能按钮，它们各自的作用是：【附加样式表】按钮：可调出“链接外部样式表”对话框，从中选择要链接到或导入到当前文档中的外部样式表。【新建CSS样式】按钮：单击后可弹出“新建CSS样式” 对话框，使用“新建CSS样式”对话框可以选择要创建的样式类型。【编辑样式表】按钮：单击后可弹出“CSS样式定义” 对话框。编辑当前文档或外部样式表中的任何样式。【删除CSS样式】按钮：删除“CSS样式”面板中的所选样式，并从应用该样式的所有元素中删除样式

点击进入文档下载页（PPT格式）

共25页，试读已结束，阅读完整版请下载

点击下载（PPT格式）

浏览记录