第11章CSS层叠样式表_第1页
第11章CSS层叠样式表_第2页
第11章CSS层叠样式表_第3页
第11章CSS层叠样式表_第4页
第11章CSS层叠样式表_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

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

文档简介

第11章

CSS层叠样式表

（6课时）了解CSS概念、作用和优点掌握CSS的类型及CSS冲突的处理掌握使用CSS控制页面布局教学目标：教学重难点：要将页面整体布局好，必须熟悉使用CSS控制页面布局1、CSS的概念：CSS是CascadingStyleSheets(层叠样式表)的简称.利用它可以对网页中的文本内容进行精确的格式化控制.2、为什么要应用CSS：弥补HTML对网页格式化功能的不足，例如：段落间距，行距等；字体变化和大小；页面格式的动态更新；排版定位等。一、CSS的介绍3、应用CSS样式的优点：

将格式和结构分离；以前所未有的能力控制页面布局；制作体积更小、下载更快的网页；将许多网页同时更新，比以前更快更容易；浏览器将成为更友好的界面。二、CSS的类型：1、类样式：用户可以在文档的任何区域或文本中应用类样式。如果将类样式应用于一整段文字，那么会在相应的标签中出现Class属性，该属性值即为类样式名称。如果将类样式表应用于部分文字上，那么会出现<Span>和</Span>标签，并且其中包含有Class属性。

2、标签样式：定义的层叠样式表将只应用于选择的标签。3、高级样式：为特殊的组合标签定义层叠样式表，使用ID作为属性，以保证文档具有惟一可用的值。常用的有4种：a:link：设定正常状态下链接文字的样式。a:active：设定鼠标单击时链接的外观。a:visited：设定访问过的链接文字的样式。a:hover：设定鼠标放置在链接文字之上时，文字的外观。三、创建CSS样式表文件及基本写法：在<Head></Head>内的实现并以<Style>开始</Style>束。在Body内的实现在文件外的调用，是一个单独的文件：<linkrel=“stylesheet

href=“style.css”type=“text/css”>四、CSS的属性1、类型属性、背景属性、区块属性、边框属性、方框属性、列表属性、定位属性、扩展属性2、CSS滤镜的使用：1、Alpha滤镜：用来设置对象的透明度。Alpha(Opacity=?,Finishopacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)Opacity:设置透明度的级别范围是0--100FinishOpacity:设置渐变的透明的效果，用来指定结束时的透明度，范围是0—100

Style:设置渐变透明的样式0(统一形状)1(线形)2(放射状)3(长方形)

StartX和StartY代表渐变透明效果的开始X和Y坐标

FinishX和FinishY代表渐变透明效果结束X和Y坐标2、Blur滤镜用来设置对象的模糊程度

Blur(Add=?,Direction=?,Strength=?)

Add设置是否单方向模糊，此参数是布尔值，true(1)或false(0)Direction设置模糊的方向0:代表垂直向上，然后每45度为一个单位,默认为270度.

Strength代表模糊的像素值

3、Chroma滤镜

将指定的颜色设置为透明

Chroma(color=?)color指要设置为透明的颜色4、DropShadow滤镜产生阴影效果

DropShadow(color=?,offx=?,offY=?,Positive=?)color指定阴影的颜色

offx指定阴影相对于元素在水平方向的偏移量

offY指定阴影相对于元素在垂直方向的偏移量

Positive是布尔值0表示建立内阴影1表示建立外阴影7、Gray滤镜作用是去掉图象的色彩，显示灰度图象

8、Invert滤镜反转(Intert)图象的颜色，产生类似底片的效果9、shadow滤镜该滤镜可以建立对象的阴影效果

shadow(Color=?,Direction=?)color为阴影的颜色，

Direction是设置投影的方向,0代表向上,45为一个单位,默认值为225.10、Wave滤镜产生波纹效果Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)Add表示是否显示对象0表示不显示非0表示显示对象

Freq用来设置波动的个数

LightStrength设置波浪效果的光照强度，从0--1000表示最弱，100表示最强总结：

本章重点介绍了在Dreamweaver中CSS样式的使用方法，CSS在网页制作方面是一项非常重要的技术，请同学们根据不同的需要将CSS技术应用到网页页面中更进一步地对页面美化及文本格式进行精确定制。课堂作业：打开CSS样式面板的快捷键是________。下列关于CSS样式与HTML样式的不同之处说法正确的是_____。A、HTML样式格式只影响应用它的文本或使用所选HTML样式创建的文本。B、CSS样式只可以设置文本字体样式C、HTML可以设置网页背

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

温馨提示

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

最新文档

评论

0/150

提交评论