[互联网]不错的教程--CSS+DIV_教程范本02.ppt
《[互联网]不错的教程--CSS+DIV_教程范本02.ppt》由会员分享,可在线阅读,更多相关《[互联网]不错的教程--CSS+DIV_教程范本02.ppt(97页珍藏版)》请在三一文库上搜索。
1、第五章 样式表,统一网站风格、制作基本特效,CSS样式表,2,主要内容,一、样式表(CSS)的基本概念 二、CSS与HTML文档的结合方法 三、CSS属性的理解与应用 四、CSS样式的单位 五、CSS样式在网页中的应用 六、CSS的高级应用,CSS样式表,3,一、CSS的基本概念,1、编写CSS样式的方法 使用CSS编辑器 如Dreamweaver、Frontpage等都会自带CSS编辑器。 使用超文本编辑器 如Dreamweaver、Frontpage等超文本编辑器均可编辑样式表; 记事本,CSS样式表,4,一、CSS的基本概念,2、基本语法,选择符属性: 值,选择符属性1: 值1; 属性2
2、: 值2 ;,单一选择符的复合样式声明应该用“;”隔开,为便于阅读也可以分行写。,几乎所有的HTML标记符形式都可以作为选择符。, CSS例子 H1 font-size:x-large; color:red H2 font-size:large; color:blue ,5-1.htm,H1 font-size:x-large; color:red H2 font-size:large; color:blue,CSS样式表,5,一、CSS的基本概念,3、CSS样式的组合、继承和关联性 样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。 例如:段落元素p、单元格元素td和类c1可以
3、使用相同样式:,p,td,.c1font-size:12pt;font-family:黑体;color:red,5-2.htm,CSS样式表,6,一、CSS的基本概念,样式的继承:若子元素未定义,则它将继承上级元素的样式的定义。但存在少数属性不能继承,见P119。, CSS例子 ,5-3.htm,CSS样式表,7,一、CSS的基本概念,样式表的关联性: 样式表的关联性指在某些样式定义中,可以定义某样式仅在某个特定元素范围内才有效。 例如:,p bfont-size:12pt;font-family:黑体;color:red,b元素仅在p元素作用范围内会套用上述的样式设定。 而在其他地方不具有这
4、些属性。,5-4.htm,CSS样式表,8,一、CSS的基本概念,4、注释 CSS文字的注释形式与C语言类似。,pfont-size:12pt /*P标签的样式定义*/,CSS样式表,9,一、CSS的基本概念,5、选择符 样式表的基本语法形式:,selectorproperty1:value1; property2:value2;,需要应用的样式的内容,样式的属性,样式的属性的值,Select的五种合法的类别:HTML标记符、用户定义的类Class、用户定义的ID、虚类和虚元素 P119,CSS样式表,10,选择符的类别,HTML标记符 应用比较多,注意继承性、组合性和关联性(P119)的应用
5、。 用户定义的类选择符 可以使用任何名称命名类。 里所有的元素都可以定义“类”。 语法如下:,selector.classnameproperty1:value1; property2:value2; .classnameproperty1:value1; property2:value2;,例5-5.htm,1、 两种定义形式的区别? 2、在标签中使用类选择符样式的使用方式如何?,CSS样式表,11,选择符的类别,ID选择符 应用的形式基本与类选择符类似,定义时用“#”替代”.”。 因此应用时一般选取其中的一种。见P120例子。 虚类和虚元素 在html的页面元素中没有这种属性,故称其为虚类
6、,仅在IE5.0以上的浏览器版本才支持虚类选择符。 语法如下:,页面元素名:元素虚属性名样式表内容,CSS样式表,12,a:link color: #000000 a:visited color: #cccccc a:hover color: #000000; font-style:italic a:active color: #aaaaaa,:link color: #000000 :visited color: #cccccc :hover color: #000000; font-style:italic :active color: #aaaaaa,例5-6.htm,CSS样式表,13
7、,二、CSS与HTML文档的结合方法,HTML与样式表有多种结合方法 内联样式:在标记符内定义 外联样式 使用标记符链接到外部的样式文件 使用CSS的import标记符来导入样式文件 在HTML标签中直接加入样式表的定义。,CSS样式表,14,二、CSS与HTML文档的结合方法,内联样式:在标记符内定义,在本网页内起作用。,CSS样式表,15,二、CSS与HTML文档的结合方法,外联样式:使用标记符链接到外部的样式文件,凡链接的网页都起作用 1、定义外部样式文件,用记事本或者Dreamweaver,编辑完后文件扩展名应为”.css”; 2、建立HTML网页文档; 3、在网页文档中使用标签将前面
8、的样式表文档链接到网页中。,例5-7.htm,CSS样式表,16,二、CSS与HTML文档的结合方法,外联样式:使用import导入外部的样式文件,凡在导入该样式表的网页都起作用 1、定义外部样式文件,用记事本或者Dreamweaver,编辑完后文件扩展名应为”.css”; 2、建立HTML网页文档; 3、在网页文档中import导入前面的样式表。,例5-8.htm,CSS样式表,17,二、CSS与HTML文档的结合方法,在HTML标签中直接加入样式表的定义 若在个别标签需要作样式调整,可使用这种方式。 使用标签的“Style”属性来定义样式。, 被定义的样式文本在此处。 ,例5-8.htm,
9、CSS样式表,18,三、CSS属性的理解与应用,样式表的5类常用属性:详见P126 字体属性 P126:字体、字号、行距等。 颜色及背景属性 P127:背景颜色、背景图片等。 文本属性:P128 区块属性 P128:边框粗细等。 分级属性 P128:各组件的字距、行距、缩排等。 鼠标属性 P130:鼠标形状等。 详见帮助文件,CSS属性,CSS样式表,19,字体属性,Font-family:指定文字的字体 H1font-family:华文彩云 Font-style:指定文字是否加粗或使用斜体。取值:normal(正常)、oblique(偏斜体)、italic(斜体) Font-size:指定文
10、字的大小。 Font:上述样式属性的综合表示法。 Pfont: bold 16pt,CSS样式表,20,颜色及背景属性,Color:颜色 Background-color:指定背景颜色 H1background-color:#000800 Background-image:指定Html组件的背景图片,值为url或none。 Bodybackground-image:url(image1.jpg),CSS样式表,21,文本属性,Text-decoration:设置底线、顶线、闪烁等文字效果。值为none,underline,overline,line-through,blink. Text-al
11、ign:指定文字的对齐方式。值为:left,right,center,justify,CSS样式表,22,区块属性,定义边界,取值为:长度|百分比|auto 上边界:margin-top;下边界:margin-bottom 左边界:margin-left:右边界:margin-right P.narrow margin-right: 50% 定义边框: Border-color Border-width Border-style,CSS样式表,23,分级属性,List-style-type:指定项目符号或编号 允许值:disc | circle | square | decimal | low
12、er-roman | upper-roman | lower-alpha | upper-alpha | none List-style-image:指定项目符号的图形文件名称,值为url或none LI.square list-style-type: square UL.plain list-style-type: none OL list-style-type: upper-alpha /* A B C D E etc. */ OL OL list-style-type: decimal /* 1 2 3 4 5 etc. */ OL OL OL list-style-type: lowe
13、r-roman /* i ii iii iv v etc. */,CSS样式表,24,鼠标属性,让鼠标移到不同对象上面,显示不同形状。 Cursor属性,取值如下 Auto:自动按默认显示 Crosshair:“” Hand:手形 Text:文本I形 Wait:等待 ,CSS样式表,25,练习:,1、若要在网页上使用使用统一的页面风格: 背景为浅蓝灰色(#cdcdfe), 文本为深蓝色(#000066), 所有网页都不留边(Margin), 且列表项目、表格及段落文本中的字体均为10.5pt;颜色:绿色;文本对齐:居中;字体:楷体,Times New Roman;文字格式:加粗。,CSS样式表
14、,26,练习:,2、编辑一个外联样式表,它使所有网页中表格的文本显示为如下风格: 文字大小:10.5pt; 颜色:绿色; 文本对齐:居中; 字体:楷体 文字格式:加下划线,CSS样式表,27,练习:,3、在上题中,若有一个网页中的某个表格要采取不同的显示方式:如 颜色:蓝色; 字体:黑体,Arial Black 其他与上题相同,应在该页上使用什么样式表?,CSS样式表,28,练习:,4、定义一个类选择符,样式为: 文字大小:12pt; 颜色:绿色; 文本对齐:居中; 字体:楷体,Times New Roman 文字格式:加粗 并在多个页面元素中引用此类样式。,CSS样式表,29,练习:,5、定
15、义一个伪类选择符,使超链接具有一下特效: (1)超链接没有下划线; (2)当鼠标指向超链接时,文字从10pt变成12pt,文字加粗; (3)超链接文本在单击前是蓝色,在单击后是灰色,并变成斜体。,CSS样式表,30,课堂练习:,定义一个内联样式,使网页中的所有段落显示效果如下: 字的大小:12px 字的颜色:0000ff 对齐方式为居中 背景颜色:gray,CSS样式表,31,四、CSS样式的单位,定义长度:符号 数值 单位(P132) 绝对长度单位:cm,mm,in,pt(印刷点数),pc等。 相对长度单位:px(像素),em,ex。 百分比单位 百分比值总是相对于另一个值来说的,参照值一般
16、是该元素本身的字体尺寸。 样式的单位,CSS样式表,32,四、CSS样式的单位,定义颜色 rgb函数:rgb(R,G,B) R、G、B可用百分比值表示,也可用0255的整数值表示。 使用十六进制数组:#RRGGBB 直接使用颜色名。,color: rgb(100%,0,0) color: rgb(255,0,0) color: #FF0000 color:red,CSS样式表,33,五、CSS样式在网页中的应用,1、在网页中创建样式,分别创建下列三种样式 标签选择符 类选择符 ID选择符 2、在网页中导入、链入样式表文件,CSS样式表,34,五、CSS样式在网页中的应用,CSS样式表,35,六
17、、用CSS样式制作一些特殊效果,1、给文字设置图形背景:利用层 2、文字间的重叠效果:利用两个层 3、首字放大 P:first-letter,例5-10.htm,CSS样式表,36,七、样式表的高级应用,1、CSS的滤镜属性 (filter) 的应用 2、应用滤镜制作常见特效 文字特效 鼠标特效 图像特效 3、利用css进行页面布局,滤镜实例,CSS样式表,37,1、CSS的滤镜属性 (filter) 的应用,样式表滤镜的构成 标记FILTER : 滤镜名(属性名属性值,属性名属性值,); 例如:p filter : alpha(opacity=80,style=1 ); 静态滤镜的种类(IE
18、4.0以上版本) Alpha 让对象呈现渐变半透明效果 Blur 让对象产生风吹模糊的效果 DropShadow 让对象有一个下落式的阴影 Glow 在对象的周围产生光晕而模糊的效果 ,CSS样式表,38,Chroma 让图像中的某一颜色变成透明色 FlipH 让HTML对象水平转换 FlipV 让HTML对象垂直转换 Wave 让HTML对象产生水平或是垂直方向上的正弦波形 Shadow 让对象产生阴影效果 Mask 利用一个HTML对象在另一个对象上产生图像的遮罩 Light 在HTML元件上放置一个光影 Gray 把一个彩色的图象变成灰色调图象 Invert 让对象产生照片底片的效果 X
19、Ray 让对象轮廓突出显示,1、CSS的滤镜属性 (filter) 的应用,CSS样式表,39,(1) Alpha让对象呈现渐变半透明效果,1、CSS的滤镜属性 (filter) 的应用,p filter:alpha(opacity=80,style=0,starX=2,finishX=4);,filter: alpha(属性=属性值),0表示全图统一同一透明度,应用在层或表格或图片中有效。,CSS样式表,40,(2) Blur让对象产生模糊的效果 P158,1、CSS的滤镜属性 (filter) 的应用,filter: blur(属性=属性值),p filter:blur(add=1,dir
20、ection=60,strength=2);,CSS样式表,41,(3) DropShadow让对象有一个下落式的阴影 ,1、CSS的滤镜属性 (filter) 的应用,p filter:dropshadow(color=#ff0080,offX=2,offY=2,positive=0); color:#00ff11,filter: dropshadow(属性=属性值),CSS样式表,42,(4) Glow在对象的周围产生光晕而模糊的效果 参数如下: COLOR:指定发光的颜色。 STRENGTH:发光强度的表现,也指光晕的厚度;其大小可以从1到255之间的任何整数来指定这个强度。 例如:,1
21、、CSS的滤镜属性 (filter) 的应用,p filter:glow(color=#880088,strength=3);,CSS样式表,43,(5)Chroma让图像中的某一颜色变成透明色 参数如下: COLOR属性:用来指定要变为透明色的颜色,通过该属性值的设定,我们可以来过滤某图象中的指定颜色。 例如: (6)FlipH让HTML对象水平转换(没有参数) FlipV让HTML对象垂直转换(没有参数) 例如:,1、CSS的滤镜属性 (filter) 的应用,p filter:chroma(color=#0000fe);,p filter:filph,CSS样式表,44,(7)Wave让
22、HTML对象产生水平或是垂直方向上的正弦波形 参数如下: add:是一个布尔值,它用来决定是否将原始图象加入最后的效果之中。0:不使用原图;1:使用 freq:是指波纹的频率,也就是指定在对象上一共需要产生多少个完整的波纹。 phase:用来设置正弦波的偏移量,也就是决定波形的形状,其属性值的取值范围为从0到360度。 lightstrength:对于波纹增强光影的效果,其取值范围为从0到100。 strength:用来决定波形振幅的大小。,1、CSS的滤镜属性 (filter) 的应用,CSS样式表,45,(8) Shadow让对象产生阴影效果 参数如下: color:设置阴影的颜色。 di
23、rection:设置投影的方向,取值范围为度到度,其中0度代表垂直向上,然后每45度为一个单位,该属性的默认值是向左的270度。 例如:,1、CSS的滤镜属性 (filter) 的应用,p filter:shadow(color=#00ff00,direction=45);,CSS样式表,46,(9) Mask利用一个对象在另一个对象上产生图像的遮罩 作用:该滤镜能够利用一个HTML对象在另一个对象上产生图像的遮罩 ,可以为对象建立一个覆盖于表面的膜,其效果就象戴者有色眼镜看物体一样,一般适用于图象对象。 参数:color属性用来指定要被遮罩的颜色。,1、CSS的滤镜属性 (filter) 的
24、应用,CSS样式表,47,(10) Light在HTML元件上放置一个光影 (没有参数) 作用:该滤镜能够使html对象产生一种模拟光源的投射效果。一旦为对象定义了light滤镜属性,那么就可以调用它的方法来设置或者改变属性。 light可用的方法有: MoveLight 移动光源 Changcolor 改变光的颜色 AddAmbient 加入包围的光源 AddPoint 加入点光源 Clear 清除所有的光源 AddCone 加入锥形光源 Changstrength 改变光源的强度,1、CSS的滤镜属性 (filter) 的应用,CSS样式表,48,(11) Gray把一个彩色的图象变成灰色
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 互联网 不错 教程 CSS DIV_ 范本 02
链接地址:https://www.31doc.com/p-1998428.html