Adobe-Dreamweaver教程课件-第6章-CSS样式表.ppt

上传人(卖家):晟晟文业 文档编号:4372126 上传时间:2022-12-03 格式:PPT 页数:24 大小:679.15KB
下载 相关 举报
Adobe-Dreamweaver教程课件-第6章-CSS样式表.ppt_第1页
第1页 / 共24页
Adobe-Dreamweaver教程课件-第6章-CSS样式表.ppt_第2页
第2页 / 共24页
Adobe-Dreamweaver教程课件-第6章-CSS样式表.ppt_第3页
第3页 / 共24页
Adobe-Dreamweaver教程课件-第6章-CSS样式表.ppt_第4页
第4页 / 共24页
Adobe-Dreamweaver教程课件-第6章-CSS样式表.ppt_第5页
第5页 / 共24页
点击查看更多>>
资源描述

1、第6章 CSS样式表入门本章介绍的主要内容有:CSS样式表简介创建CSS样式表的方法 内部CSS样式表的应用 链接外部CSS样式表 在代码视图编辑CSS样式表 能给人赏心悦目、工工整整的感觉内容和形式的分离便于站点的维护 简练代码,缩短浏览器加载的时间DW很多地方是基于CSS的6.1 CSS样式表基础6.1.1 认识CSSCSS是Cascading Style Sheets(层叠样式表)的简称 1CSS样式的类型(选择器的类型)类样式:(可应用于页面任何标签)。HTML标签样式:重定义HTML标签样式。高级样式:(重新定义特定元素组合的格式,td h2 ,重定义包含特定id属性的标签格式,#m

2、ystyle)。内联样式表 外部样式表 2CSS规则CSS格式设置规则由两部分组成:选择器和声明 h1 font-size:16 pixels;font-family:宋体;font-weight:bold;在这个CSS规则中,h1是选择器,介于大括号之间的所有内容都是声明块。各个声明由两部分组成:属性(如font-family)和值(如16 pixels)。6.1.2 对样式表操作的三种方式1第一种方式执行【窗口】【CSS 样式】命令,打开【CSS 样式】面板 2第二种方式3第三种方式在空白处右击6.1.3“CSS样式”面板样式表文件名CSS规则列表属性和属性值列表工具按钮栏在Dreamwe

3、aver中,“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。类别视图6.2 新建CSS规则和应用CSS样式6.2.1 定义样式表选项在【CSS样式】面板上,单击【新建CSS规则】按钮,打开【新建CSS规则】对话框。1【定义在】选项(1)【新建样式表文件】(2)【仅对该文档】2【选择器类型】选项(1)【类(可应用于任何标签)】(2)【标签(重新定义特定标签的外观)】(3)【高级(ID、伪类选择器等)】3【名称】文本框 在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同,这里可以输入或者选择 不同的名称。6.

4、2.2 在网页中应用样式1在【属性】面板选择应用样式2利用【标签选择器】选择样式3使用右键快捷菜单(套用)4清除样式6.3 创建和应用CSS样式 6.3.1 控制浏览器中的文字大小:“稳定性”6.3.2 设置行间距:使不大不小,美观 6.3.3 为图片加上边框效果:可随意设置边框颜色6.3.4 利用“自定义样式表”改变鼠标指针的形态hand:是大家所熟悉的手型。crosshair:是十字型。text:是平时鼠标移动到文本上的样式。wait:是等待的效果。default:是默认的那种效果。help:是带问号的鼠标样式。e-resize:是向右的箭头。ne-resize:是向右上方的箭头。n-re

5、size:是向上的箭头。nw-resize:是向左上方的箭头。w-resize:是向左的箭关。sw-resize:是向左下的箭头。s-resize:是向下的箭头。se-resize:是向右下方的箭头。auto:是系统自动的效果。6.3.5 利用有关链接的样式表修改链接的格式a:link定义了链接文字的样式。a:visited浏览者已经访问过的链接样式。a:hover 定义了鼠标悬浮在链接文字上时的样式。a:active 定义链接被激活时的样式,即鼠标已经单击了链接,但页面还没有跳转时。6.3.6 控制页面背景图像的样式执行【修改】【页面属性】命令,弹出【页面属性】对话框。通过重新定义body标

6、签的CSS规则来控制网页的背景图像。6.3.7 利用自定义样式表制作项目图标 定义一个类控制器,设置这个CSS规则的“列表”属性,然后将CSS规则应用在HTML文档的ul或者ol标签上。6.3.8 CSS样式滤镜的应用下面是各个滤镜的意义:Alpha:设置透明度。Blur:建立模糊效果Chroma:把指定的颜色设置为透明。DropShadow:建立一种偏移的影像轮廓,即投射阴影。FlipH:水平反转。FlipV:垂直反转。Glow:为对象的外边界增加光效。Grayscale:降低图片的彩色度。Invert:将色彩、饱和度及亮度值完全反转建立底片效果。Light:在一个对象上进行灯投影。Mask

7、:为一个对象建立透明膜。Shadow:建立一个对象的固体轮廓,即阴影效果。Wave:在X轴和Y轴方向用正弦波纹打乱图片。Xray:只显示对象的轮廓举例说明:Blur(Add=true,Direction=135,Strength=10)6.4 外部CSS样式表6.4.1 建立外部CSS样式表文件并定义文字和段落样式6.4.2 定义表格样式通过重新定义table标签控制网页中的表格的外观。6.4.3 定义超级链接样式 通过定义a:link 和a:hover 两个高级样式来控制网页中的超级链接的外观。6.4.4 定义特殊段落的样式 网页中经常会有一些特殊段落,比如程序代码等,为了让这些特殊段落和其

8、他段落区分开来,本小节再定义一个特殊段落的样式。6.4.5 链接外部CSS样式表 在【CSS样式】面板上单击【附加样式表】按钮,在弹出的【链接外部样式表】对话框中的【添加为】单选项中选择【链接】,然后单击“浏览”按钮,选择创建的外部样式表文件“mycss.css”。6.4.6 在网页中应用外部CSS样式表(1)因为控制超链接和表格的CSS规则,是用相应的标签重新定义得到的,所以网页中的超链接和表格会自动应用样式。(2)我们可以将.text样式应用到标签上,这样网页中的文字都被.text这个样式控制外观。(3)对于网页中的程序代码段落,可以用.teshu样式来控制外观。6.5 在【代码视图】手动

9、添加和编辑CSS6.5.1 CSS样式表的标记和语句格式1内联样式表的代码结构CSS样式代码样式表的代码一般格式:样式表名称属性1:属性1值;属性2:属性2值;2类选择器的CSS代码结构应用类标识符样式时,都是通过class属性的设置实现的:class=myCSS_Class在“代码视图”下,通过手动添加代码,编辑某个HTML标签的class属性,就可以让这个HTML标签控制范围内的元素应用类选择符样式。3ID选择器的CSS代码结构应用ID选择器样式时,都是通过HTML标签的id属性的设置实现的:id=myCSS_ID“ID属性是HTML标签的一个重要属性,一个网页中的标签的ID属性值不能重复

10、,因此在利用ID属性应用标识选择符CSS样式时,只能应用于一个标签。如果应用于多个标签,就会造成标签的ID属性冲突。4链接外部样式表的代码结构网页文档链接了外部CSS样式文件后,在代码视图中,可以观察到head标签中增加了一行类似于下面的代码:这就是链接外部CSS样式文件的代码。6.5.2 通过编辑CSS代码改变网页滚动条的外观在网页代码和之间插入下面的代码:body SCROLLBAR-FACE-COLOR:#3333FF;/立体滚动条凸出部分的颜色SCROLLBAR-HIGHLIGHT-COLOR:#505050;/滚动条空白部分的颜色SCROLLBAR-SHADOW-COLOR:#fc2

11、400;/立体滚动条阴影的颜色SCROLLBAR-ARROW-COLOR:#666666;/上下按钮上三角箭头的颜色SCROLLBAR-BASE-COLOR:#333333;/滚动条的基本颜色SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48;/立体滚动条强阴影的颜色 6.5.3 从CSS模板创建CSS文件 选择【文件】|【新建】命令,在弹出的【新建文档】对话框中,选择【示例中的页】,在【示例文件夹】列表中选择【CSS样式表】,然后在对应的列表框中选择【完整设计:Georgia,红色/黄色】(这是Dreamweaver自带的一个CSS模板),然后单击【创建】按钮。1新建CSS文件2修改CSS样式

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 办公、行业 > 各类PPT课件(模板)
版权提示 | 免责声明

1,本文(Adobe-Dreamweaver教程课件-第6章-CSS样式表.ppt)为本站会员(晟晟文业)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!


侵权处理QQ:3464097650--上传资料QQ:3464097650

【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。


163文库-Www.163Wenku.Com |网站地图|