《Dreamweaver 8中文版网页制作 机房上课版 教学课件 PPT 作者 王正成 第11讲CSS样式表》由会员分享,可在线阅读,更多相关《Dreamweaver 8中文版网页制作 机房上课版 教学课件 PPT 作者 王正成 第11讲CSS样式表(20页珍藏版)》请在金锄头文库上搜索。
1、第十讲 CSS样式表 1、认识样式表 2、应用样式表 3、CSS滤镜,1、认识样式表,1CSS样式表概念 2创建CSS样式 3样式表类型 4CSS规则定义 5. CSS样式结构,1.1.CSS样式表概念,什么是CSS?CSS英文全称是Cascading Style Sheets,中文意思是层叠样式表,简称样式表或者CSS。CSS技术由W3C(World Wide Web Consortium,全球广域网协会)推荐使用,1996年批准了CSS1标准,随后又颁布了CSS2标准,样式表得到了更多的充实,目前绝大多数都是用的CSS2标准。 CSS样式表是一系列格式规则的集合,它可以控制网页内容的外观,
2、使得网页内的各文本、图像、表格等对象具有统一的风格,省去了为每个对象单独设置格式的繁琐。使用CSS样式,不仅可以控制一个网页中内容的格式,还可以同时控制多个网页中的内容格式。当CSS样式发生变动时,页面中所有应用该样式的对象的格式都会自动发生改变。 通过CSS技术可以有效地对网页布局、字体、颜色、背景和其他对象的显示效果做精准的控制。同时使用CSS可以避免页面中同类对象格式的重复设置,提高了工作效率,减少了页面的负担 。,1.2创建CSS样式,执行【窗口】/【CSS样式】命令,展开【CSS样式】面板,在【CSS样式】面板中单击新建CSS规则按钮 ,打开【新建CSS规则】对话框,在【选择器类别】
3、中选择类型,然后在【名称】选项框中输入名称,单击“确定”按钮后打开定义规则对话框,在【分类】列表中选择【类型】后设置具体的样式内容,如下图所示。,1.3样式表类型,样式表根据使用的对象不同,分为3个类别。 【类(可用于任何标签)】:可以创建自定义名称的CSS样式,可将样式规则属性应用于任何页面元素上。所有类样式均以句点 (.) 开头, 【标签(重新定义特定标签的外观)】:可对HTML标签进行重新定义、规范或者扩展其属性,如body,h1,h2,h3,ul,li等标签。当创建或更改CSS样式时,所有使用该进行格式化的对象都自动更新。 【高级(ID、伪类选择器等)】:该选项会对标签组合或者是含有特
4、定ID属性的标签应用样式。当html中出现用id的元素时,可以使用这个id来设置样式,使用方法与类相似。伪类常用的有a:link,a:visited,a:hover,a:active,分别用来定义链接未点击时、点击后、鼠标移过、激活状态下的样式。,1.4CSS规则定义,在代码窗口中编写CSS样式,对新手来说是很困难的事,在Dreamweaver 8 中可以通过可视化的窗口【CSS规则定义】对话框来创建具体的CSS样式,此处提供了8个类别的样式设置,如图11-8所示。 【类型】:主要用于定义页面中文本的字体、大小、颜色、样式和修饰等。 【背景】:主要用于定义页面元素的背景色和背景图像。 【区块】
5、:主要用于控制页面元素的间距,对齐方式等。 【方框】:设置页面中方框的宽、高,四周的填充、边界的粗细。 【表框】:设置网页元素的边框效果。 【列表】:控制列表内的各项元素。 【定位】:为元素设置精准的位置,通过它可以让网页元素浮动。 【扩展】:用于设置打印的分页符和视觉效果。,1.5CSS样式结构,CSS样式结构主要有选择器和声明两部分组成。选择器是标识格式元素的术语(如 P、H1、类名或 ID),声明用于定义元素样式。声明由两部分组成:属性(如font-size)和值(如10px)。 右面的图中,body、.text、h1都是选择器,介于括号 之间的所有内容都是声明,其中body和h1是标签
6、样式,.text是自定义的类样式。,声明,声明,属性值,属性,选择器,选择器,选择器,2、 应用样式表知识,2.1 应用样式表 2.2 编辑样式表 2.3 删除样式表 2.4 附加外部样式表,2.1应用样式表,类样式可以应用于页面中的任何元素,与当前文档相关联的所有类样式都显示在【CSS样式】面板中。如果是文本元素则在文本属性面板的【样式】下拉列表中显示所有与文本有关的类样式;若是表格或图像等元素则在对应的属性面板的【类】下拉列表中显示与当前元素相关的类样式。要使用样式时,先选中对象然后直接在下拉列表中选择样式即可。 标签样式建立好之后,如果在HTML中使用这些标签的,标签里面的内容就将按照定
7、义好的样式出现。 高级样式创建好之后,若当html中出现用id的元素时,可以使用这个id来设置样式,使用方法与类相似。对于伪类选择器同标签样式一样,设置好之后就自动更新样式 。,2.2编辑样式表,展开【CSS样式】面板,在样式列表列表中选中需要编辑的样式,单击鼠标右键,在右键快捷菜单中选择【编辑】命令,打开定义规则对话框,再重新编辑CSS样式 ,如有图所示。,2.3删除样式表,在【CSS样式】面板的样式列表中选中需要删除的样式,单击鼠标右键,在右键快捷菜单中选择【删除】命令项即可 ,如有图所示。,2.4附加外部样式表,在【CSS样式】面板中单击附加样式表按钮 ,打开【链接外部样式表】对话框 ,
8、选择好样式表文件后,返回【链接外部样式表】对话框 ,选择附加方式,然后“确定”即可。,附加外部样式表有两种方式【链接】和【导入】。 【链接】:链接方式在HTML代码中自动生成一个link href标签,并引用指定样式表的URL,将其定义的CSS规则添加到当前网页。本例的link href标签格式如下: 【导入】:导入方式将附加样式表的CSS规则嵌入到当前网页的HTML代码中,并且在标签之间,如同在代码视图编写CSS规则一样。 如果附件样式表规则条目较多,一般采用【链接】方式,较为方便。,3、 CSS滤镜,3.1 CSS滤镜的类型 3.2 光晕字效果 3.3 图片翻转效果,3.1 CSS滤镜类型
9、,CSS滤镜分为静态滤镜和动态滤镜两大类,其中静态滤镜主要是使元素对象产生各种特殊的静态效果。动态滤镜主要分为混合转换滤镜和显示转换滤镜两种,主要用于处理图像之间的淡入和淡出的效果。 静态滤镜主要有如下几个类型。 Alpha滤镜:用于改变页面元素的透明度,可使对象呈现半透明的效果。 Blur滤镜:可以使元素对象显示出风吹模糊的效果。 Wave滤镜:可以是页面对象在垂直方向上产生波浪变形效果。 Chroma滤镜:可以将图片或者文字中的某种颜色变成透明。 Dropshadow滤镜:为页面对象添加下落式的阴影效果。,Fliph、FlipV滤镜:FlipH使对象产生水平翻转效果;FlipV使对象产生垂
10、直翻转效果。 Glow滤镜:使对象的外廓产生光晕效果,一般用于文本对象。 Gray滤镜:使一个彩色图片的彩色变为灰色调。 Invert滤镜:使图片产生照片底片的效果。 Light滤镜:模拟灯光的投射效果。 Mask滤镜:利用一个对象在另一个对象上产生图像的遮罩效果。 Shadow:添加有渐进感的阴影效果。 X-ray:类似X光的效果,使图片只显示其轮廓。,3.2 光晕字效果,利用Dreamweaver8 的Glow滤镜可以制作出光晕字的特殊效果 。Glow有两个参数:Color决定光晕的颜色,可用十六进制代码,也可用颜色单词表示;Strength表示发光的强度,取值范围是0255。,3.2 图片翻转,利用FlipV滤镜来产生垂直翻转效果 , FlipV没有参数。,讲课结束 下课休息,