DIV+CSS CSS滤镜的应用
DIV+CSS定义及优势
DIV+CSS定义及优势Div+css 是什么?Div+css 是⼀种⽬前⽐较流⾏的⽹页布局技术Div 来存放需要显⽰的数据(⽂字，图表..) , css 就是⽤来指定怎样显⽰，从⽽做到数据和显⽰相互的效果Div+css 优势表现和内容相分离代码简洁，提⾼页⾯浏览速度易于维护和改版提⾼搜索引擎对⽹页的索引效率我们可以简单的这样理解div+css:div 是⽤于存放内容(⽂字,图⽚,元素)的容器。
css 是⽤于指定放在div中的内容如何显⽰,包括这些内容的位置和外观.2、“⽆意义”的HTML元素div和spanHTML只是赋予内容的⼿段，⼤部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然⽽div和span标签似乎没有任何内容上的意义，听起来就像⼀个泡沫做成的锤⼦⼀样⽆⽤。
但实际上，与CSS结合起来后，它们被⽤得⼗分⼴泛。
你所需要记住的是span和div是“⽆意义”的标签。
它们的存在纯粹是应⽤样式，所以当样式表失效时它就没有任何的作⽤它们被⽤来组合成⼀⼤块的HTML代码并赋予⼀定的信息，⼤部分⽤类属性class和标识属性id与元素联系起来。
span和div的不同之处在于span是内联的，⽤在⼀⼩块的内联HTML中。
⽽div（division）元素是块级的（简单地说，它等同于其前后有断⾏），⽤于组合⼀⼤块的代码，为HTML ⽂档内⼤块的内容提供结构和背景的元素，可以包含段落、标题、表格甚⾄其他部分，这使div便于建⽴不同集成的类。
div的起始标签和结束标签之间的所有内容都是⽤来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使⽤样式表格式化这个块来进⾏控制3、页⾯布局的盒⼦模型（1）盒⼦模型的相关属性margin（外边距/边界）border（边框）padding（内边距/填充）我们看图理解⼀下各属性作⽤：以上属性⼜分为上、右、下、左四个⽅向问题：页⾯元素的宽度width、⾼度height如何计算？答案：元素的实际占位尺⼨ = 元素尺⼨ + padding + 边框宽度⽐如：元素实际占位⾼度 = height属性 + 上下padding + 上下边框宽度（2）盒模型的层次关系我们通过⼀个经典的盒模型3D⽴体结构图来理解，如图：从上往下看，层次关系如下：第1层：盒⼦的边框(border)，第2层：元素的内容(content)、内边距(padding)第3层：背景图(background-image)第4层：背景⾊(background-color)第5层：盒⼦的外边距(margin)从这个层次关系中可以看出，当同时设置背景图和背景⾊时，背景图将在背景⾊的上⽅显⽰4、声明盒⼦模型的CSS属性例如：1 <html>2 <head>3 <title>盒⼦模型</title>4 <style>5 #box { /* ID为box的盒⼦模型 */6 width:200px; /* 盒⼦的宽度为200px */7 height:200px; /* 盒⼦的⾼度为200px */8 border:5px solid #ccc; /* 盒⼦边框实线各边宽5px */9 padding:10px; /* 盒⼦的4个内填充为10px */10 margin:20px; /* 盒⼦的4个外边距为10px */11 }12 </style>13 </head>14 <body>15 <div id="box"> <!-- 使⽤DIV声明⼀个盒⼦ -->16 内容区 <!-- 盒⼦内容可再嵌套个盒⼦ -->17 </div>18 </body>19 </html>⽔平居中和垂直居中⽔平居中包含两种情况：块级元素的⽔平居中：margin:0px auto;⽂字内容的⽔平居中：text-align: center;垂直居中：常见的单⾏⽂字的垂直居中可设置⽂字所在⾏的height与⾏⾼样式属性⼀致，⽐如：div{width: 400px;height: 400px;line-height: 400px;/*⾏⾼与div⾼度⼀致*/}5、和页⾯布局有关的CSS属性1 #box { /* 声明ID选择器，名称为box */2 position:absolute; /* 设置层的定位为绝对定位 */3 top:30px; /* 层距离顶点纵向坐标的距离为30个像素 */4 left:100px; /* 层距离左点横向坐标的距离为100个像素 */5 width:300px; /* 设置层的宽度为300个像素 */6 height:150px; /* 设置层的⾼度为150个像素 */7 overflow:auto; /* 当内容超出层的范围时显⽰滚动条 */8 z-index:1; /* 设置层的先后顺序为覆盖关系 */9 visibility:visible; /* ⽆论⽗层是否可见，⼦层都可见 */10 }6、盒⼦区块框的定位层模型--绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表⽰绝对定位)，这条语句的作⽤将元素从⽂档流中拖出来，然后使⽤left、right、top、bottom属性相对于其最接近的⼀个具有定位属性的⽗包含块进⾏绝对定位。
第7章 第2节 DIV+CSS布局网页 课件
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
CSS滤镜知识点
CSS滤镜知识点CSS滤镜是一种应用于HTML元素的视觉效果工具，通过改变元素的颜色、亮度、对比度等属性，能够实现各种各样的效果。
在本文中，我们将深入探讨CSS滤镜的相关知识点。
一、CSS滤镜简介CSS滤镜是一系列用于改变HTML元素的呈现方式的特效。
通过对图像或元素应用一系列滤镜效果，我们可以改变其外观和视觉效果，从而创造出更加丰富多样的界面效果。
二、常用的CSS滤镜属性1. filter属性filter属性是应用滤镜效果的关键属性，通过给元素添加filter属性来应用滤镜效果。
具体的滤镜效果是通过filter函数来定义的。
2. blur滤镜blur滤镜用于给元素添加模糊效果。
可以通过设置模糊半径来控制模糊程度，半径越大，模糊程度越高。
3. brightness滤镜brightness滤镜用于调整元素的亮度。
可以通过设置亮度的百分比来控制亮度的变化，例如brightness(150%)表示将元素的亮度增加50%。
4. contrast滤镜contrast滤镜用于调整元素的对比度。
可以通过设置对比度的百分比来控制对比度的变化，例如contrast(200%)表示将元素的对比度增加100%。
5. grayscale滤镜grayscale滤镜用于将元素转换为灰度图像。
可以通过设置灰度的百分比来控制灰度的变化，例如grayscale(50%)表示将元素的灰度程度设置为50%。
6. sepia滤镜sepia滤镜用于将元素转换为复古风格的棕色色调。
可以通过设置棕色的百分比来控制棕色的变化，例如sepia(80%)表示将元素的棕色程度设置为80%。
7. saturate滤镜saturate滤镜用于调整元素的饱和度。
可以通过设置饱和度的百分比来控制饱和度的变化，例如saturate(200%)表示将元素的饱和度增加100%。
8. hue-rotate滤镜hue-rotate滤镜用于旋转元素的色相。
可以通过设置旋转角度来控制色相的变化，例如hue-rotate(90deg)表示将元素的色相顺时针旋转90度。
DIV样式几个特殊效果实现
本文和大家重点讨论一下DIV样式中一些特殊效果的实现，比如cursor:它可以设置DIV 上光标的样式，clip:可以设置剪辑矩形，而DIV样式filter:可以实现滤镜效果，相信本文介绍一定会让你有所收获。
DIV样式中一些特殊效果1、cursor:设置DIV上光标的样式。
2、clip:设置剪辑矩形。
例：Code1.<div style="font:16px宋体;width:600px;height:200px;2.cursor:help;clip:rect(0px100px20px0px);line-height:20px;3.overflow:auto;background-color:Yellow;position:absolute">4.div样式测式howareyou.5.</div>6.说明：clip:rect(toprightbottomleft);设置上下左右的距离,但此时要把position指定为absolute。
看以上效果。
3、filter:此DIV样式可以实现滤镜效果。
例：Code7.<divstyle divstyle="width:450px;height:200px;background-color:Blue;">8.<divid divid=”tdiv”style="background-color:Yellow;9.filter:alpha(opacity=50);opacity:0.5;10.float:left;width:200px;height:200px;">11.</div>12.<divstyle divstyle="background-color:Yellow;width:200px;13.height:200px;float:left;">14.</div>15.</div>16.说明：设置透明度:opacity：value(FF专用,value的取值为0至1之间的小数)，filter:alpha(opacity=value)(IE专用，value取值：0至100)。
如何用CSS实现一个令人惊叹的淡入淡出效果
如何用CSS实现一个令人惊叹的淡入淡出效果CSS（Cascading Style Sheets）是一种用于网页样式设计的标记语言，通过它可以控制网页的布局、字体、颜色、背景等方面。
其中，淡入淡出效果是一种常用的动画效果，能够给用户带来视觉上的流畅和舒适感。
本文将介绍如何用CSS实现一个令人惊叹的淡入淡出效果。
为了实现淡入淡出效果，我们首先需要了解CSS中的一些相关属性和技巧。
以下是一些常用的属性和技巧：1. opacity属性：opacity属性用于控制元素的透明度。
取值范围为0~1，0表示完全透明，1表示完全不透明。
2. transition属性：transition属性用于定义CSS过渡效果的属性。
通过指定过渡的属性、持续时间和过渡类型等参数，可以实现元素的平滑过渡。
3. @keyframes规则：@keyframes规则用于定义CSS动画中的关键帧。
通过在关键帧中指定元素的样式属性，可以实现逐帧动画效果。
基于以上属性和技巧，我们可以按照以下步骤实现一个令人惊叹的淡入淡出效果：1. HTML结构：首先，我们需要在HTML中创建一个元素，作为我们要实现淡入淡出效果的对象。
比如，我们创建一个div元素，给它一个唯一的id属性，如下所示：```html<div id="fade-in-out"></div>```2. CSS样式：接下来，我们需要在CSS文件或style标签中添加相应的样式。
首先，给这个div元素设置一个初始的透明度，如下所示：```css#fade-in-out {opacity: 0;}```3. 过渡效果：为了让元素在显示和隐藏之间产生过渡效果，我们需要使用transition属性。
通过设置transition的属性和持续时间，实现元素逐渐显示或隐藏，如下所示：```css#fade-in-out {opacity: 0;transition: opacity 1s;}```在上述代码中，opacity属性指定了透明度的过渡效果，持续时间为1秒。
CSS的过滤器属性
CSS的过滤器属性CSS过滤器包括Alpha, BlendTrans, Blur, Chroma, DropShadow, FlipH, FlipV, Glow, Gray, Invert, Light, Mask, RevealTrans, Shadow, Wave, Xray等。
1、静态CSSstyle="filter: Alpha( …… )"Alpha：设置透明度Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到100。
Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY：代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。
BlendTransBlur风吹模糊效果语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"说明：Add：一般为1，或0。
当为1时表示使用模糊效果。
Direction：动态模糊效果的角度方向，0～315度，步长为45度。
0代表垂直向上，按顺时针方向，每45度一个单位，默认值是向左270度。
Strength：效果增长的数值，一般5即可。
设置模糊宽度。
例子：filter:Blur(Add="1",Direction="45",Strength="5")Chroma特定颜色的透明效果语法：STYLE="filter:Chroma(Color = color)"说明：color：#rrggbb格式，任意。
我学习DIV+CSS
e/ne/nw/n-resize 鼠标大小 text 文字鼠标 wait 等待鼠标 help 求助鼠标 progress 过程鼠标
三、通过CSS定义图片的样式
六、CSS滤镜的应用(一般情况下用不着，在PS中处理成图片就可以了)
filter:filtername(parameters)
alpha 设置透明(enabled 是否激活 opacity finishOpacity startX startY finishX finishY)
blur 设置模糊效果(makeshadow pixelradius shadowopacity )
a:link 未被访问前的样式属性 a:hover 鼠标悬停时的样式属性 a:active 被激活的属性 a:visited 已经被访问过的样式属性
margin 外边距
padding 内边距
border 和外边框有关的效果
background-color 设置背景的颜色
font-size字体大小
line-height行高
text-decoration文本修饰(underline 下划线 overline 顶划线 line-through 删除线 blink 文本闪烁)
letter-spacing字间距
text-align对齐方式(只可以作用于p blockquqte ul h1 h6标识符里面)
glow 为对象的外边界增加光效(enabled color strength)
wave 设置对象的波纹效果(enabled add freq lightStrength phase strength)
DIV+CSS中的滤镜和模糊
DIV+CSS中的滤镜和模糊在div＋css中，经常会⽤到div和span当内容⽐较多的时候，会⽤到div当内容⽐较少的时候，会⽤到span来看下⾯的代码：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>DIV+CSS</title></head><body><span style="color:green;font-size:30px;">栏⽬⼀</span><br><span style="color:orange;font-size:16px;">栏⽬⼆</span><br><span style="color:blue;font-size:16px;font-style:italic;">栏⽬三</span><br><span style="color:green;font-size:16px;font-weight:bold;">栏⽬四</span><br><span style="color:navy;font-size:16px;font-weight:bold;">栏⽬五</span><br></body></html>执⾏后的效果如下：在这⾥设置了字体的粗细．设置段落字体的粗细的属性：font-weigth属性设置⽂本的粗细．使⽤bold关键字可以将⽂本设置为粗体．关键字100~900为字体指定了９级加粗度，如果⼀个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别．如果将元素的加粗设置为bolder,浏览器会设置⽐所继承值更粗的⼀个字体加粗．与此相反，关键词lighter会导致浏览器将加粗度下移⽽不是上移．p.normal{font-weight:normal;}p.thick{font-weight:bold;}p.thicker{font-weight:900}看到上⾯的代码，是不是感觉很low.假如现在想把上⾯的五⾏字都换成跟第⼀⾏字的效果⼀样，有什么好的办法呢？？？来看下⾯的这段代码：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>DIV+CSS</title><style type="text/css">.style1{color:green;font-size:30px;}</style></head><body><span class="style1">栏⽬⼀</span><br><span class="style1">栏⽬⼆</span><br><span class="style1">栏⽬三</span><br><span class="style1">栏⽬四</span><br><span class="style1">栏⽬五</span><br></body></html>刷新浏览器，效果如下：这样想⼀次性修改五⾏的样式的话，就可以相接修改style⾥⾯的代码就可以了．⽐如，现在想把五⾏的字体都变成斜体的话，就可以加上下⾯的属性就可以了．font-style:italic;修改后的代码如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>DIV+CSS</title><style type="text/css">.style1{color:green;font-size:30px;font-style:italic;}</style></head><body><span class="style1">栏⽬⼀</span><br><span class="style1">栏⽬⼆</span><br><span class="style1">栏⽬三</span><br><span class="style1">栏⽬四</span><br><span class="style1">栏⽬五</span><br></body></html>刷新浏览器后得到的效果如下：可以看到css可以统⼀⽹站的风格．现在想把⼀个⽹站的所有图⽚都为成⿊⽩⾊或者模糊，这个要怎么实现呢？？代码如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>CSS的滤镜效果</title><style type="text/css">a:link img {filter: grayscale(100%);}a:hover img {filter: grayscale(10%);}</style></head><body><a href="#"><img width="200px" src="1.jpg"></a><a href="#"><img width="200px" src="2.jpg"></a><a href="#"><img width="200px" src="1.jpg"></a><a href="#"><img width="200px" src="2.jpg"></a></body></html>当图⽚正常显⽰，⿏标没有放在图⽚上的时候，图⽚显⽰的是灰⾊的；当⿏标放置在图⽚上的时候，图⽚就变成正常颜⾊的了．现在把⿏标放在第⼀张图⽚上，显⽰的效果如下：再把⿏标移动到第四张图⽚上，显⽰的效果如下：这就是滤镜的效果．再来看看使⽤css达到图⽚模糊的效果．代码如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>CSS的滤镜效果</title><style type="text/css">a:link img {filter:blur(10px);}a:hover img {filter:blur(0px);}</style></head><body><a href="#"><img width="200px" src="1.jpg"></a><a href="#"><img width="200px" src="2.jpg"></a><a href="#"><img width="200px" src="1.jpg"></a><a href="#"><img width="200px" src="2.jpg"></a></body></html>现在图⽚正常显⽰，⿏标暂时没有放置到任何⼀张图⽚上，效果如下：把⿏标放在第⼀张图⽚上，显⽰的效果如下:再把⿏标放在第四张图⽚上,显⽰的效果如下:这就达到想要的图⽚模糊的效果了.。