今天见识到的，
具体跟大家分享下！
尤其是meida属性！
HTML <link> 标签
定义和用法
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
浏览器支持
在用于样式表时，<link> 标签得到了几乎所有浏览器的支持。但是几乎没有浏览器支持其他方面的用途。
HTML 与 XHTML 之间的差异
在 HTML 中，<link> 标签没有结束标签。
在 XHTML 中，<link> 标签必须被正确地关闭。
提示和注释：
注释：link 元素是空元素，它仅包含属性。
注释：此元素只能存在于 head 部分，不过它可出现任何次数。
可选的属性
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
| 属性 | 值 | 描述 | DTD |
|---|---|---|---|
| charset | charset | 定义被链接文档的字符编码方式。 | STF |
| href | URL | 定义被链接文档的位置。 | STF |
| hreflang | language_code | 定义被链接文档中文本的语言。 | STF |
| media |
| 规定被链接文档将显示在什么设备上。 | STF |
| rel |
| 定义当前文档与被链接文档之间的关系。 | STF |
| rev |
| 定义被链接文档与当前文档之间的关系。 | STF |
| target |
| 定义在何处加载被链接文档。 | TF |
| type | MIME_type | 规定被链接文档的 MIME 类型。 | STF |
标准属性
id, class, title, style, dir, lang, xml:lang
如需完整的描述，请访问标准属性。
注释：title 属性为被链接文档指定标题。在引用不带有标题的源（例如图像或非 HTML 文档）时，该属性非常有用。在这种情况下，浏览器会在显示被引用的文档时使用 <link> 标题。
事件属性
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
CSS position 属性
定义和用法
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
| 默认值： | static |
|---|---|
| 继承性： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.position="absolute" |
浏览器支持
所有主流浏览器都支持 position 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
TIY 实例
CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS 定位和浮动
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：
<div> some text <p>Some more text.</p> </div>
在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。
CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
-
static
- 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative
- 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute
- 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 fixed
- 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
实例
-
定位：相对定位
- 本例演示如何相对于一个元素的正常位置来对其定位。 定位：绝对定位
- 本例演示如何使用绝对值来对元素进行定位。 定位：固定定位
- 本例演示如何相对于浏览器窗口来对元素进行定位。 使用固定值设置图像的上边缘
- 本例演示如何使用固定值设置图像的上边缘。 使用百分比设置图像的上边缘
- 本例演示如何使用百分比值设置图像的上边缘。 使用像素值设置图像的底部边缘
- 本例演示如何使用像素值设置图像的底部边缘。 使用百分比设置图像的底部边缘
- 本例演示如何使用百分比值设置图像的底部边缘。 使用固定值设置图像的左边缘
- 本例演示如何使用固定值设置图像的左边缘。 使用百分比设置图像的左边缘
- 本例演示如何使用百分比值设置图像的左边缘。 使用固定值设置图像的右边缘
- 本例演示如何使用固定值设置图像的右边缘。 使用百分比设置图像的右边缘
- 本例演示如何使用百分比值设置图像的右边缘。 如何使用滚动条来显示元素内溢出的内容
- 本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。 如何隐藏溢出元素中溢出的内容
- 本例演示在元素中的内容太大以至于无法适应指定的区域时，如何设置 overflow 属性来隐藏其内容。 如何设置浏览器来自动地处理溢出
- 本例演示如何设置浏览器来自动地处理溢出。 设置元素的形状
- 本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。 垂直排列图象
- 本例演示如何在文本中垂直排列图象。 Z-index
- Z-index可被用于将在一个元素放置于另一元素之后。 Z-index
- 上面的例子中的元素已经更改了Z-index。
CSS 定位属性
CSS 定位属性允许你对元素进行定位。
| 属性 | 描述 |
|---|---|
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 |
| clip | 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 |
| vertical-align | 设置元素的垂直对齐方式。 |
| z-index | 设置元素的堆叠顺序。 |
从IE 4.0版开始，就提供了一些内置的多媒体滤镜特效，正是由于这些基于CSS的样式属性的控制，于是我们在编写网页的时候，即使我们不用图片，也可以使我们的文字，图片，按钮或是DIV标识鲜艳无比，充满生气，从而为自己的网页增加了比较美妙的视觉效果。 下面，我们就来看看CSS的Filter样式。这里，即使你没有CSS这方面的知识，相信以下的内容也不会很难懂的。当然，首先，我默认你已经学过HTML，并且还能做网页，最好是还知道一点Scripts语句。由于各种浏览器对CSS的支持的原因，我建议你使用IE4.0以上版的浏览器，强烈建议你使用IE5.0版，这样，你就会毫不费力地看到所有的特效。
一、建立Filter样式
Filter既然是CSS样式表中的一员，那么它就可以像其它样式的定义和应用方式一样，可能直接定义在职HTML标识的<head>和</head>只间。其语法结构为：
filter：名称(参数及其值)
例如：imgblur { filter : Blur( strength=30 ) }
当然，它也可以通过Style标识定义在HTML的标识里面，如：
<Image ID=test SRC="test.gif" Style="Filter : Blur( Strength=30 )">
以上就是使用CSS中filter样式的使用方法，其实这和其它CSS的样式定义方式一样，分为外部引用、内部引用和局部引用三种，上面的第一种是内部引用，第二种是局部引用，外部引用则要先建立一个CSS的文件，然后用<link rel=StyleSheet type="text/css" href="样式文件的URL">来嵌入HTML文件。有关CSS的定义方式，请大家参考网页陶吧里的相关文章。
Filter样式属性允许一次设定多个滤镜效果，也就是说，可以让一个HTML的元件同时拥有多个滤镜的的效果。例如：
…… ……
<img id=image1 src="test.jpg" border="0">
<img id=image2 src="test.jpg" border="0" style="filter : blur ( Strength=30 ) flipv()">
…… ……
在以上的例子中，ID为image1的图片是正常显示的图片，而ID为image2的图片则同时应用了模糊（Blur）和上下颠倒（Filpv）两种滤镜。以下是同一图片的两种效果：（得用IE4.0以上版的浏览器浏览）
怎么样，还行吧，这里要请大家注意几点:
1、如果使用多的滤镜，那么滤镜间要以空格分开。
例如：
<img src="test.jpg" style="Filter: alpha(opacity=30) Blur(amount=10)">
2、一个滤镜中的若干参数以逗号分隔。
例如：
<img src="test.jpg" style="filter : blur(amount=30,strength=50)">
3、Filter和其他的CSS样式则以分号分开。
例如：
<img src="test.jpg" style="filter: blur(amount=30) ; Position: relative">
接着，我们来看看Filter到底有哪些滤镜。
二、静态滤镜的种类
视觉效果的滤镜。在IE4.0以上版中，支持以下14种滤镜：
| 滤镜名 | 说明 |
| Alpha | 让HTML元件呈现出透明的渐进效果 |
| Blur | 让HTML元件产生风吹模糊的效果 |
| Chroma | 让图像中的某一颜色变成透明色 |
| DropShadow | 让HTML元件有一个下落式的阴影 |
| FlipH | 让HTML元件水平翻转 |
| FlipV | 让HTML元件垂直翻转 |
| Glow | 在元件的周围产生光晕而模糊的效果 |
| Gray | 把一个彩色的图片变成黑白色 |
| Invert | 产生图片的照片底片的效果 |
| Light | 在HTML元件上放置一个光影 |
| Mask | 利用另一个HTML元件在另一个元件上产生图像的遮罩 |
| Shadow | 产生一个比较立体的阴影 |
| Wave | 让HTML元件产生水平或是垂直方向上的波浪变形 |
| XRay | 产生HTML元件的轮廓，就像是照X光一样 |
这些滤镜就像是PhotoShop这一类图像处理软件所提供的特效一样，有了这些特效，你就可以直接在HTML中对图片进行特效处理了，而不用再用专门的图片处理软件编辑图片了。一般而言，用得最多的是图片和文字。那么，就让我们来看看各个滤镜中有些什么样的参数和效果。
三、Alpha 滤镜
| 参数名 | 说明 | 取值说明 |
| Opacity | 不透明的程度，百分比。 | 从0到100，0表是完全透明，100表示完全不透明。 |
| FinishOpacity | 这是一个同Opacity一起使用的选择性的参数，当同时Opacity和FinishOpacity时，可以制作出透明渐进的效果，比较酷。 | 从0到100，0表是完全透明，100表示完全不透明。 |
| Style | 当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。 | 0：没有渐进；1：直线渐进； 2：圆形渐进；3：矩形辐射。 |
| StartX | 渐进开始的 X 坐标值 | |
| StartY | 渐进开始的 Y 坐标值 | |
| FinishX | 渐进结束的 X 坐标值 | |
| FinishY | 渐进结束的 Y 坐标值 |
看一下下面的演示，你就知道了：
<table>
<tr>
<td>原图</td>
<td>Style=0</td>
<td>Style=1</td>
<td>Style=2</td>
<td>Style=3</td
<tr></tr>
<td><img src="test.jpg"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=0"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=1"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=2"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=3"></td>
</tr>
</table>
| 原图 | style=0 | style=1 | style=2 | style=3 |
 | | | | |
原文参考：http://www.blueidea.com/user/win1st/friends/sky2000/cssfilter/css1.htm
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
