Adobe-Dreamweaver教程课件-第6章-CSS样式表_第1页
Adobe-Dreamweaver教程课件-第6章-CSS样式表_第2页
Adobe-Dreamweaver教程课件-第6章-CSS样式表_第3页
Adobe-Dreamweaver教程课件-第6章-CSS样式表_第4页
Adobe-Dreamweaver教程课件-第6章-CSS样式表_第5页
已阅读5页，还剩43页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第6章CSS样式表入门本章介绍的主要内容有：CSS样式表简介创建CSS样式表的方法内部CSS样式表的应用链接外部CSS样式表在代码视图编辑CSS样式表第6章CSS样式表入门本章介绍的主要内容有：1为何要用CSS样式表？能给人赏心悦目、工工整整的感觉内容和形式的分离便于站点的维护简练代码，缩短浏览器加载的时间DW很多地方是基于CSS的为何要用CSS样式表？26.1CSS样式表基础6.1.1认识CSSCSS是CascadingStyleSheets（层叠样式表）的简称1．CSS样式的类型(选择器的类型)类样式：（可应用于页面任何标签）。HTML标签样式：重定义HTML标签样式。高级样式：（重新定义特定元素组合的格式，tdh2,重定义包含特定id属性的标签格式，#mystyle）。内联样式表外部样式表2．CSS规则CSS格式设置规则由两部分组成：选择器和声明h1{font-size:16pixels;font-family:"宋体";font-weight:bold;}在这个CSS规则中，h1是选择器，介于大括号{}之间的所有内容都是声明块。各个声明由两部分组成：属性（如font-family）和值（如16pixels）。6.1CSS样式表基础6.1.1认识CSSCSS是Cas36.1.2对样式表操作的三种方式1．第一种方式执行【窗口】→【CSS样式】命令，打开【CSS样式】面板2．第二种方式3．第三种方式在空白处右击6.1.2对样式表操作的三种方式1．第一种方式执行【窗口】46.1.3“CSS样式”面板样式表文件名CSS规则列表属性和属性值列表工具按钮栏在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。类别视图6.1.3“CSS样式”面板样式表文件名CSS规则列表属性56.2新建CSS规则和应用CSS样式6.2.1定义样式表选项在【CSS样式】面板上，单击【新建CSS规则】按钮，打开【新建CSS规则】对话框。1．【定义在】选项（1）【新建样式表文件】（2）【仅对该文档】2．【选择器类型】选项（1）【类（可应用于任何标签）】（2）【标签（重新定义特定标签的外观）】（3）【高级（ID、伪类选择器等）】3．【名称】文本框在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同，这里可以输入或者选择不同的名称。6.2新建CSS规则和应用CSS样式6.2.1定义样式表66.2.2在网页中应用样式1．在【属性】面板选择应用样式2．利用【标签选择器】选择样式3．使用右键快捷菜单(套用)4．清除样式6.2.2在网页中应用样式1．在【属性】面板选择应用样式27Css样式定义的分类说明类型对文字的字体、大小、颜色、效果等基本样式进行设置。背景对元素的背景进行设置，一般对页面、表格、区域的设置区块设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等方框设置对象的边界、间距、高度、宽度和漂浮方式等边框设置对象边框的宽度、颜色及样式列表设置列表样式、列表项图像和位置定位相当与对象放在一个层里来定位，它相当于HTML的DIV标记扩展设置打印网页时或者是对象视觉显示效果Css样式定义的分类说明类型对文字的字体、大小、颜86.3创建和应用CSS样式6.3.1控制浏览器中的文字大小：“稳定性”6.3.2设置行间距：使不大不小，美观6.3.3为图片加上边框效果：可随意设置边框颜色6.3创建和应用CSS样式6.3.1控制浏览器中的文字96.3.4利用“自定义样式表”改变鼠标指针的形态hand：是大家所熟悉的手型。crosshair：是十字型。text：是平时鼠标移动到文本上的样式。wait：是等待的效果。default：是默认的那种效果。help：是带问号的鼠标样式。e-resize：是向右的箭头。ne-resize：是向右上方的箭头。n-resize：是向上的箭头。nw-resize：是向左上方的箭头。w-resize：是向左的箭关。sw-resize：是向左下的箭头。s-resize：是向下的箭头。se-resize：是向右下方的箭头。auto：是系统自动的效果。6.3.4利用“自定义样式表”改变鼠标指针的形态hand：106.3.5利用有关链接的样式表修改链接的格式a:link——定义了链接文字的样式。a:visited——浏览者已经访问过的链接样式。a:hover——定义了鼠标悬浮在链接文字上时的样式。a:active——定义链接被激活时的样式，即鼠标已经单击了链接，但页面还没有跳转时。6.3.5利用有关链接的样式表修改链接的格式a:link—116.3.6控制页面背景图像的样式执行【修改】→【页面属性】命令，弹出【页面属性】对话框。通过重新定义body标签的CSS规则来控制网页的背景图像。6.3.6控制页面背景图像的样式执行【修改】→【页面属性】126.3.7利用自定义样式表制作项目图标定义一个类控制器，设置这个CSS规则的“列表”属性，然后将CSS规则应用在HTML文档的ul或者ol标签上。6.3.7利用自定义样式表制作项目图标定义一个类控136.3.8CSS样式滤镜的应用下面是各个滤镜的意义：Alpha：设置透明度。Blur：建立模糊效果Chroma：把指定的颜色设置为透明。DropShadow：建立一种偏移的影像轮廓，即投射阴影。FlipH：水平反转。FlipV：垂直反转。Glow：为对象的外边界增加光效。Grayscale：降低图片的彩色度。Invert：将色彩、饱和度及亮度值完全反转建立底片效果。Light：在一个对象上进行灯投影。Mask：为一个对象建立透明膜。Shadow：建立一个对象的固体轮廓，即阴影效果。Wave：在X轴和Y轴方向用正弦波纹打乱图片。Xray：只显示对象的轮廓举例说明:Blur(Add=true,Direction=135,Strength=10)6.3.8CSS样式滤镜的应用下面是各个滤镜的意义：146.4外部CSS样式表6.4.1建立外部CSS样式表文件并定义文字和段落样式6.4外部CSS样式表6.4.1建立外部CSS样式表文件156.4.2定义表格样式通过重新定义table标签控制网页中的表格的外观。6.4.2定义表格样式通过重新定义table标签控制网页中166.4.3定义超级链接样式通过定义a:link和a:hover两个高级样式来控制网页中的超级链接的外观。6.4.3定义超级链接样式通过定义a:link和176.4.4定义特殊段落的样式网页中经常会有一些特殊段落，比如程序代码等，为了让这些特殊段落和其他段落区分开来，本小节再定义一个特殊段落的样式。6.4.4定义特殊段落的样式网页中经常会有一些特殊186.4.5链接外部CSS样式表在【CSS样式】面板上单击【附加样式表】按钮，在弹出的【链接外部样式表】对话框中的【添加为】单选项中选择【链接】，然后单击“浏览”按钮，选择创建的外部样式表文件“mycss.css”。6.4.5链接外部CSS样式表在【CSS样式】面板196.4.6在网页中应用外部CSS样式表（1）因为控制超链接和表格的CSS规则，是用相应的标签重新定义得到的，所以网页中的超链接和表格会自动应用样式。（2）我们可以将.text样式应用到<body>标签上，这样网页中的文字都被.text这个样式控制外观。（3）对于网页中的程序代码段落，可以用.teshu样式来控制外观。6.4.6在网页中应用外部CSS样式表（1）因为控制超链接206.5在【代码视图】手动添加和编辑CSS6.5.1CSS样式表的标记和语句格式1．内联样式表的代码结构CSS样式代码样式表的代码一般格式：样式表名称{属性1:属性1值;属性2:属性2值;……}2．类选择器的CSS代码结构应用类标识符样式时，都是通过class属性的设置实现的：class="myCSS_Class"在“代码视图”下，通过手动添加代码，编辑某个HTML标签的class属性，就可以让这个HTML标签控制范围内的元素应用类选择符样式。6.5在【代码视图】手动添加和编辑CSS6.5.1CSS213．ID选择器的CSS代码结构应用ID选择器样式时，都是通过HTML标签的id属性的设置实现的：id="myCSS_ID“ID属性是HTML标签的一个重要属性，一个网页中的标签的ID属性值不能重复，因此在利用ID属性应用标识选择符CSS样式时，只能应用于一个标签。如果应用于多个标签，就会造成标签的ID属性冲突。

4．链接外部样式表的代码结构网页文档链接了外部CSS样式文件后，在代码视图中，可以观察到head标签中增加了一行类似于下面的代码：<linkhref="mycss.css"rel="stylesheet"type="text/css"/>这就是链接外部CSS样式文件的代码。3．ID选择器的CSS代码结构应用ID选择器样式时，都是通过226.5.2通过编辑CSS代码改变网页滚动条的外观在网页代码<head>和</head>之间插入下面的代码：<style>body{SCROLLBAR-FACE-COLOR:#3333FF;//立体滚动条凸出部分的颜色SCROLLBAR-HIGHLIGHT-COLOR:#505050;//滚动条空白部分的颜色SCROLLBAR-SHADOW-COLOR:#fc2400;//立体滚动条阴影的颜色SCROLLBAR-ARROW-COLOR:#666666;//上下按钮上三角箭头的颜色SCROLLBAR-BASE-COLOR:#333333;//滚动条的基本颜色SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48;//立体滚动条强阴影的颜色}</style>6.5.2通过编辑CSS代码改变网页滚动条的外观在网页代码236.5.3从CSS模板创建CSS文件选择【文件】|【新建】命令，在弹出的【新建文档】对话框中，选择【示例中的页】，在【示例文件夹】列表中选择【CSS样式表】，然后在对应的列表框中选择【完整设计：Georgia,红色/黄色】（这是Dreamweaver自带的一个CSS模板），然后单击【创建】按钮。1．新建CSS文件2．修改CSS样式6.5.3从CSS模板创建CSS文件选择【文件】|24第6章CSS样式表入门本章介绍的主要内容有：CSS样式表简介创建CSS样式表的方法内部CSS样式表的应用链接外部CSS样式表在代码视图编辑CSS样式表第6章CSS样式表入门本章介绍的主要内容有：25为何要用CSS样式表？能给人赏心悦目、工工整整的感觉内容和形式的分离便于站点的维护简练代码，缩短浏览器加载的时间DW很多地方是基于CSS的为何要用CSS样式表？266.1CSS样式表基础6.1.1认识CSSCSS是CascadingStyleSheets（层叠样式表）的简称1．CSS样式的类型(选择器的类型)类样式：（可应用于页面任何标签）。HTML标签样式：重定义HTML标签样式。高级样式：（重新定义特定元素组合的格式，tdh2,重定义包含特定id属性的标签格式，#mystyle）。内联样式表外部样式表2．CSS规则CSS格式设置规则由两部分组成：选择器和声明h1{font-size:16pixels;font-family:"宋体";font-weight:bold;}在这个CSS规则中，h1是选择器，介于大括号{}之间的所有内容都是声明块。各个声明由两部分组成：属性（如font-family）和值（如16pixels）。6.1CSS样式表基础6.1.1认识CSSCSS是Cas276.1.2对样式表操作的三种方式1．第一种方式执行【窗口】→【CSS样式】命令，打开【CSS样式】面板2．第二种方式3．第三种方式在空白处右击6.1.2对样式表操作的三种方式1．第一种方式执行【窗口】286.1.3“CSS样式”面板样式表文件名CSS规则列表属性和属性值列表工具按钮栏在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。类别视图6.1.3“CSS样式”面板样式表文件名CSS规则列表属性296.2新建CSS规则和应用CSS样式6.2.1定义样式表选项在【CSS样式】面板上，单击【新建CSS规则】按钮，打开【新建CSS规则】对话框。1．【定义在】选项（1）【新建样式表文件】（2）【仅对该文档】2．【选择器类型】选项（1）【类（可应用于任何标签）】（2）【标签（重新定义特定标签的外观）】（3）【高级（ID、伪类选择器等）】3．【名称】文本框在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同，这里可以输入或者选择不同的名称。6.2新建CSS规则和应用CSS样式6.2.1定义样式表306.2.2在网页中应用样式1．在【属性】面板选择应用样式2．利用【标签选择器】选择样式3．使用右键快捷菜单(套用)4．清除样式6.2.2在网页中应用样式1．在【属性】面板选择应用样式231Css样式定义的分类说明类型对文字的字体、大小、颜色、效果等基本样式进行设置。背景对元素的背景进行设置，一般对页面、表格、区域的设置区块设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等方框设置对象的边界、间距、高度、宽度和漂浮方式等边框设置对象边框的宽度、颜色及样式列表设置列表样式、列表项图像和位置定位相当与对象放在一个层里来定位，它相当于HTML的DIV标记扩展设置打印网页时或者是对象视觉显示效果Css样式定义的分类说明类型对文字的字体、大小、颜326.3创建和应用CSS样式6.3.1控制浏览器中的文字大小：“稳定性”6.3.2设置行间距：使不大不小，美观6.3.3为图片加上边框效果：可随意设置边框颜色6.3创建和应用CSS样式6.3.1控制浏览器中的文字336.3.4利用“自定义样式表”改变鼠标指针的形态hand：是大家所熟悉的手型。crosshair：是十字型。text：是平时鼠标移动到文本上的样式。wait：是等待的效果。default：是默认的那种效果。help：是带问号的鼠标样式。e-resize：是向右的箭头。ne-resize：是向右上方的箭头。n-resize：是向上的箭头。nw-resize：是向左上方的箭头。w-resize：是向左的箭关。sw-resize：是向左下的箭头。s-resize：是向下的箭头。se-resize：是向右下方的箭头。auto：是系统自动的效果。6.3.4利用“自定义样式表”改变鼠标指针的形态hand：346.3.5利用有关链接的样式表修改链接的格式a:link——定义了链接文字的样式。a:visited——浏览者已经访问过的链接样式。a:hover——定义了鼠标悬浮在链接文字上时的样式。a:active——定义链接被激活时的样式，即鼠标已经单击了链接，但页面还没有跳转时。6.3.5利用有关链接的样式表修改链接的格式a:link—356.3.6控制页面背景图像的样式执行【修改】→【页面属性】命令，弹出【页面属性】对话框。通过重新定义body标签的CSS规则来控制网页的背景图像。6.3.6控制页面背景图像的样式执行【修改】→【页面属性】366.3.7利用自定义样式表制作项目图标定义一个类控制器，设置这个CSS规则的“列表”属性，然后将CSS规则应用在HTML文档的ul或者ol标签上。6.3.7利用自定义样式表制作项目图标定义一个类控376.3.8CSS样式滤镜的应用下面是各个滤镜的意义：Alpha：设置透明度。Blur：建立模糊效果Chroma：把指定的颜色设置为透明。DropShadow：建立一种偏移的影像轮廓，即投射阴影。FlipH：水平反转。FlipV：垂直反转。Glow：为对象的外边界增加光效。Grayscale：降低图片的彩色度。Invert：将色彩、饱和度及亮度值完全反转建立底片效果。Light：在一个对象上进行灯投影。Mask：为一个对象建立透明膜。Shadow：建立一个对象的固体轮廓，即阴影效果。Wave：在X轴和Y轴方向用正弦波纹打乱图片。Xray：只显示对象的轮廓举例说明:Blur(Add=true,Direction=135,Strength=10)6.3.8CSS样式滤镜的应用下面是各个滤镜的意义：386.4外部CSS样式表6.4.1建立外部CSS样式表文件并定义文字和段落样式6.4外部CSS样式表6.4.1建立外部CSS样式表文件396.4.2定义表格样式通过重新定义table标签控制网页中的表格的外观。6.4.2定义表格样式通过重新定义table标签控制网页中406.4.3定义超级链接样式通过定义a:link和a:hover两个高级样式来控制网页中的超级链接的外观。6.4.3定义超级链接样式通过定义a:link和416.4.4定义特殊段落的样式网页中经常会有一些特殊段落，比如程序代码等，为了让这些特殊段落和其他段落区分开来，本小节再定义一个特殊段落的样式。6.4.4定义特殊段落的样式网页中经常会有一些特殊426.4.5链接外部CSS样式表在【CSS样式】面板上单击【附加样式表】按钮，在弹出的【链接外部样式表】对话框中的【添加为】单选项中选择【链接】，然后单击“浏览”按钮，选择创建的外部样式表文件“mycss.css”。6.4.5链接外部CSS样式表在【CSS样式】面板436.4.6在网页中应用外部CSS样式表（1）因为控制超链接和表格的CSS规则，是用相应的标签重新定义得到的，所以网页中的超链接和表格会自动应用样式。（2）我们可以将.text样式应用到<body>标签上，这样网页中的文字都被.text这个样式控制外观。（3）对于网页中的程序代码段落，可以用.teshu样式来控制外观。6.4.6在网页中应用外部CSS样式表（1）因为控制超链接446.5在【代码视图】手动添加和编辑CSS6.5.1CSS样式表的标记和语句格式1．内联样式表的代码结构CSS样式代码样式表的代码一般格式：样式表名称{属性1:属性1值;属性2:属性2值;……}2．类选择器的CSS代码结构应用类标识符样式时，都是通过class属性的设置实现的：class="myCSS_Class"在“代码视图”下，通过手动添加代码，编辑某个HTML标签的class属性，就可以让这个HTML标签控制范围内的元素应用类选择符样式。6.5在【代码视图】手动添加和编辑CSS6.5.1CS

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论