1、样式单CSS,主要内容,HTML复习 CSS简介 HTMLCSS CSS基本属性 CSS滤镜,HTML块元素,. . .,. . . . .,HTML列表元素,Unordered lists无序列表.Ordered lists有序列表. ,Definition lists定义列表. . . . . ,HTML表格元素, . . .,align colspan rowspan valign border cellspacing cellpadding,border,cellspacing,cellpadding,Frameset和frame,Frames ,HTML表单元素, ,样式单的出现,1
2、995晚期，由W3C提出，包括 CSS1（1996） 大部分浏览器都支持 CSS2（1998） 个别浏览器支持 CSS3（2000）,1 层叠样式表的特点,弥补HTML对网页格式化功能的不足 排版定位 把网页上的内容结构和格式控制相分离 简化了网页的格式代码 修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，同一个样式单可应用于多个文档 使文档适合很多设备，而不只是桌面系统 文档可更快的下载（各种样式字体，不用GIF图像）,2 CSS样式单如何加入HTML,输入式样式单：import url(URL) 外联式样式单：标记 内联式样式单：标记 嵌入式样式单：style属性,2.1
3、 嵌入式样式表：Style属性,直接在标签内定义 CSS实例 特点:使用简单、显示直观，但是无法发挥样式表的优势 举例,Formatting with CSS: DIV and SPANIntroduction to HTML/CSSThis page is formatted with CSS specification. This page is formatted with CSS specification.效果,2.2 内联式样式表：标记,添加在HTML的里：,标记特性:特性值;,p font-size: 12pt; font-style: italic; color: green;
4、,与此样式相关的元素/标记,以分号分隔的特性列表,特性,特性值,空格或换行无影响，大小写不敏感 举例1 例2,例子：css,样式级联表的设计HTML/CSS简介该主页通过样式级联表的设定进行显示。CSS 在进行主页设计时，对样式提供了集中的管理方法。通过CSS，使显示样式独立于显示内容。列表,2.3 外联式样式表：标记,特点：适合大型网站的CSS样式定义 举例 mystyle.css,2.4 输入式样式表：import url(URL),样式单实施的优先级,嵌入式 style属性 内联式 标记 外联式 输入式 import url(URL),BODY background: white;Hel
5、lo. 同时使用,3 指定样式实施的方法,标记特性:特性值; /4 .类名特性:特性值; /3 #ID名特性:特性值; /1 标记.类名特性:特性值; /2,CSS与标记对应的三种方式,标记选择符 PBACKGROUND:YELLOW; 类选择符 样式前使用. ID选择符 样式前使用# ID适用于单个元素, 即文档中同一id值只应该出现一次(尽管当前浏览器不一定严格检查) 同一CLASS值可用于多个元素, 使它们具有同样风格。,例class_id,Formatting with CSS: CLASS and IDDIV.style1 font-size:24pt; font-weight:bo
6、ldDIV.style2 font-size:24pt;font-style:italicSPAN.test font-weight:boldSPAN#freaky color:green; font-size:90pt;font-style:italicThis is a big bold DIV.This is a big italic DIV. This is a normal paragraph with an odd SPAN stuck in the middle of it, as well as a bold bump and another bold bump in the
7、middle of it. This is another big bold DIV.,在单独文件中的风格说明, DIV.style1 font-size:24pt; font-weight:bold DIV.style2 font-size:24pt;font-style:italic SPAN.test font-weight:bold SPAN#freaky color:green; font-size:90pt;font-style:italic,Formatting with CSS: CLASS and ID, LINKThis is a big bold DIV.This is
8、a big italic DIV. This is a normal paragraph with an odd SPAN stuck in the middle of it, as well as a boldbump and another bold bump in the middle of it. This is another big bold DIV.,4 CSS基本属性,CSS基本属性 滤镜 声音,CSS基本属性 字体 背景 区块(定位) 盒子（box） 边框（border） 列表 定位与扩展,字体font-family (serif, fantasy, monospace.)
9、字号font-size (small, medium, large, 150%) 样式font-style(normal, italic, oblique) 字号变化font-variant (normal , small-caps) 文字粗细font-weight (normal, bold, bolder,lighter) 大小写text-transform 行高line-height 文字修饰text-decoration 颜色color font：18,4.1字体属性,.1 字体族font-family,font-family 默认值：由浏览器决定body font-family: “
10、Nuptial BT“;font-size: 300%; text-align: center ,h1 font-family: Georgia, Times New Roman, Garamond, Times, serif p font-family: Verdana, Arial, Helvetica, sans-serif ,.2 字体尺寸font-size,font-size: （14）绝对大小：xx-small/x-small/medium/large/x-large/xx-large 相对大小：larger/smaller 数值单位 百分比,设置字体尺寸,font-size:数值
11、单位单位 pt 1pt1/72英寸 em 是上一级元素字体大小的比例 px pixel像素body font-size: 140%,p font-size:90%h1 font-size:20pt;h2 font-size:1.5em;h3 font-size: 150%blockquote font-size: 70%b font-size:20px,.3 字体样式font-style,font-style: normal/italic/obliquep font-style: normal em font-style: italic; ,.4 字体粗细font-weight,font-we
12、ight: normal/bold/bolder/lighter/100900h1font-weight: bolderh2font-weight:300h3font-weight: lighterh4font-weight: 900,.5 使文本成为大写或小写,text-transform: uppercase/lowercasespan text-transform: uppercase; font-size: 50%,.6 文本修饰text-decoration,text-decoration:none/underline/overline/line-through/blinka:hov
13、er,a:link,a:visited,a:activetext-dcoration:none超级链接例,.7 行高line-height,line-height: x%如： ,.8 前景色color,color：颜色值h1color:red h2color:#f05678 h3color:rgb(255,0,0),色彩background-color: 颜色值 图片background-image: url(URL) /图像优先于背景色 重复方式background-repeat: repeat/repeat-x/repeat-y/no-repeat background-attachmen
14、t: scroll/fixed 位置background-position: 百分比/长度/top/center/right/left background: 15,4.2 背景属性,body background-image：url(x.gif); background-repeat：repeat-x; background-color： #ffffff ,字母间距letter-spacing: normal/长度 单词间距word-spacing: normal/长度 文字对齐text-align: left/right/center/justify 垂直对齐方式vertical-alig
15、n: top/middle/bottom. display: none /block /inline /list-item,4.3 区块属性,h1letter-spacing: 0.1em td word-spacing: -0.2em p.center text-align: center img vertical-align: text-bottom,width/height: 长度/百分比 padding- top/right/left/bottom : 长度/百分比/auto margin- top/right/left/bottom : 长度/百分比/auto float: left
16、/right/none clear: none/left/right/both,4.4 盒子属性,内容,margin,border,padding,margin举例,空白边margin举例1 body margin-left: 10%; margin-right: 10%; 举例2(top,bottom) body margin-left: 10%; margin-right: 10%; h1 margin-top: 10%; margin-bottom: 5%; ,textarea float: left br.x clear:left 应用前 应用后,宽度高度border- top/rig
17、ht/left/bottom -width: thin/medium/thick/值 颜色border-color: 风格border-style: dotted、dashed、solid、double、groove、ridge、inset、outset border-top/right/left/bottom:宽度、样式、颜色(13),4.5 边框属性,p padding-left: 40px td border-width: thin p border-width: 16；border-style:inset,list-style-position: inside/outside list
18、-style-type: disc/circle. list-style-image: url(URL) list-style: (13)ul list-style-position: inside ,4.6 列表属性,position: absolute/relative/static left/top: 值 width/height: 值 z-index: 值 /值越大越在前面 visibility: visible/hidden/inherit overflow: visible/hidden/scroll/auto clip: rect(top,left,bottom.right),4
19、.7 定位属性,.clip clip: rect(20px,120px,120px,20px)带滚动条的表格 table-css,扩展属性 cursor:打印 page-break-before: /用于打印网页 page-break-after: /用于打印网页filter:,5 CSS滤镜,CSS滤镜 图形字体 滚动文字,5.1CSS滤镜,CSS适用控件,DIV与SPAN必须指定矩形区域的高度和宽度或者它的绝对定位，IMG必须通过指定“src”属性说明图片的来源。否则它的滤镜效果就会被忽略。 如果一个已定位的元素嵌入到一个未定位的元素中时，它的滤镜效果就会被忽略,alpha透明,alpha
20、属性 设置透明度filter：alpha（opacity=opcity，finishopacity=finishopacity， style=style，startX=startX，startY=startY，finishX=finishX， finishY=finishY） Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 Style参数指定了透明区域的形状特征。其中0：统一形状；1：线形；2：放射状；3：长方形。 StartX和StartY
21、代表渐变透明效果的开始坐标 finishX和finishY代表渐变透明效果的结束坐标。,alpha透明,要透明的区域，可以是点、线、面，但它们必须是指定的矩形空间，如div span table 矩形空间高度、长度或绝对位置必需是已知的。,alpha透明,wave波动,filter:wave(add=true,freq=1,lightstrength=50,phase=0,strength=5) add=true，即打乱对象，取0不打乱。 freq=1：在对象上产生多少个完整的波纹，即频率。 lightstrength=50：强度0-100。 phase=0：正弦波初值，即偏移量0-100。
22、strength=5：振幅。,wave波动,Shadow阴影,filter: shadow(color=#cccccc,direction=135) color=#000000，为阴影颜色，颜色使用16进制6位数，即RGB方式 direction=135，为阴影方位角，向上为0，顺时针0-360，45为一单位。现135，向右下,阴影Shadow,Glow光晕,filter:Glow(Color=#D83303, Strength=10) Color=#D83303为发光颜色，即RGB方式。 Strength=10为强度，0-255，数值越大，光晕范围越大。,光晕Glow,blur属性 filt
23、er:blur(add=1,direction=135,strength=8) add:在模糊时是否显示原对象。 add=0：不显示原对象，某些图象使用效果较好; add=1：显示原对象，文字使用效果较好。默认值为1。 direction模糊方位角，向上为0，顺时针0-360，45为一单位，默认值270向左 Strength模糊半径，整数表示，默认值5px,blur模糊,blur模糊,dropshadow偏移,filter:dropshadow(color=#000000,offx=3,offy=3,positive=1) color=#000000为投影颜色，即RGB方式 offx和offy
24、表示在x和y方向投影的偏移量 positive=1为非透明象素建立投影，positive=0为透明象素建立投影 偏移量也可取负值，如(12,-7)，(-5,-5),dropshadow偏移,Shadow+Dropshadow滤镜,联合制作阴影,要注意shadow的角度与dropshadow()中的投影偏移的横纵坐标要一致 shadow()中的direction=135 则dropshadow()中的offx=3 offy=3 或offx=10 offy=10 shadow()中的direction=45 则dropshadow()中的offx=3 offy=-3 或offx=10 offy=-
25、10 shadow()中的direction=315 则dropshadow()中的offx=-3 offy=3 或offx=-10 offy=10,Shadow+Dropshadow滤镜,阴影颜色与背景颜色的选择必须有对比，有反差，而且要协调。 阴影颜色与背景颜色实质上作用在不同的“层”上的，如在同一层使用两种颜色，将会无法显示效果。建议使用表格来制作 以表格的背景色作为阴影效果背景色 在单元格 中使用阴影颜色效果,复合滤镜实验,Blur与Shadow,注意shadow()与blur()中的direction应适当调整，不一定要一致，有时两者相反，3D立体效果反而更强烈。,Blur与Shad
26、ow,Glow与Shadow,光晕阴影颜色与背景颜色的选择必须有对比，有反差，而且要协调 可视化滤镜只能作用在HTML的空间元素上,Glow与Shadow,Glow+Shadow+Dropshadow,shadow的角度与dropshadow()中的投影偏移的横纵坐标要一致 阴影颜色与背景颜色的选择必须有对比，有反差，而且要协调,Glow+Shadow+Dropshadow,无参数滤镜,水平翻转滤镜FlipH() 垂直翻转滤镜FlipV() 灰度滤镜gray() 彩色翻转底片滤镜Invert() X光片滤镜Xray() Filter:fliph(),无参数与单参数滤镜,单参数滤镜,掩膜遮罩滤镜
27、Mask() Filter:Mask(color=所选颜色) color为指定使用什么颜色作为掩膜。将可见的像素遮蔽，并将看不见的像素以指定的颜色显示。 抽色透明滤镜Chroma() Filter:Chroma(color=指定颜色) color是惟一的参数，表示要变成透明的（即要抽掉的）颜色。通过这些区域可以看见图片底下的颜色、文字、图片等。,混合转换滤镜-淡入淡出 Filter:BlendTrans(duration=3) duration=淡入淡出的时间，以秒为单位 显示转换滤镜 Filter:RevealTrans(duration=3,transition=0) duration=转
28、换的时间（秒） transition=转换的方式代码，0-23,页面转换滤镜,页面转换滤镜,光源滤镜探照灯,filter: light(enabled=1) 探照灯其实就是使用了Light滤镜的addcone 增加锥形光的方法 addcone(x1,y1,z1,x2,y2,R,G,B,strength,spread) x1,y1:锥形光的起源位置 z1：光源在三维空间Z轴高度，值越大，锥形光越接近圆 x2,y2：照射到的位置，如与光源相同，且结合较大Z值，可成为圆 R,G,B：颜色：红，黄，绿分别取0-255 strength：光线强度0-100 spread：光照幅度夹角0-90。,探照灯,
29、光源滤镜探照灯往返,探照灯的往返 moveLight(lightnumber,x,y,z,fAbsolute) lightnumber:指定要变动的光线的编码。 x,y,z:要变动的坐标值，是绝对坐标，还是相对坐标，由fAbsolute的值决定。 fAbsolute:是一个布尔标记： 如为非零值，x,y,z为改变成的新的绝对坐标值，即光线直接移动到x,y,z位置。 如为零值，x,y,z为改变的相对坐标，即在原坐标基础上增加以上x,y,z，将光线移到该位置。,探照灯往返,光源滤镜变色,变色 ChangeColor(lightnumber,r,g,b,fAbsolute) lightnumber:
30、指定要改变颜色的光线的编码 r,g,b：指定一个被改变的新颜色 fAbsolute：是一个布尔标记： 如为非零值，r,g,b为改变成的绝对新颜色值， 如为零值，r,g,b为改变成的相对新颜色值，即在原色值基础上加上以上r，g，b值。,变色,5.2 图标字体,Windows中所带的图标字体组成。它们是Wingdings，Webdings，HolidayPi BT，Signs，.等,图标字体,5.3 滚动字幕marquee,align 文本对齐方式 left 左对齐 middle 居中 right 右对齐 bgcolor 背景颜色 width 字幕宽度 height 字幕高度 scrollamount 滚动速度 scrolldelay 两次显示之间延迟多少毫秒 loop 重复次数 infinite 连续，无限次 数字 重复次数,direction 滚动方向 left 向左 right 向右 up 向上 down 向下 behavior 滚动方式 scroll 卷动（走马灯） slide 滑动 alternate 交替往返 hspace 字幕左右空白 vspace 字幕上下空白,滚动字幕,
