破洛洛首页

破洛洛论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 6238|回复: 27

[CSS] CSS样式表基础(更新完结。。。。)

  [复制链接]

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

发表于 2012-7-19 20:13:49 | 显示全部楼层 |阅读模式
本帖最后由 zybx520 于 2012-8-12 10:50 编辑

CSSW3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准重新定义了HTML中原来的文字显示样式,增加了一些新概念(如类,层),可以对文字层叠,定位等,所谓层叠,实际上就是将显示样式独立于显示的内容。对其进行分类管理,例如分为字体样式,颜色样式等,需要使用样式的HTML文件进行套用。
样式可以内嵌在HTML文件中,也允许定义为一个独立的CSS样式文件,这样可以把显示的内容和显示样式定义分离,一个独立的样式表可以用于多个HTML文件,为整个WEB站点定义一致的外观。更改CSS样式表的内容,与之相连接文件的文本将会自动更新。
CSS样式表能够完成以下功能。
1,  弥补HTML在显示属性设定上的不足,如段落间距,行距等。
2,  字体变化,排版定位等。
3,  页面格式的动态更新。
4,未在任何文件中定义的样式,将遵循浏览器的默认样式   
CSS样式表设计
CSS样式表有三种类型
1,  自定义层叠样式表
HTML文件的任何区域,都可以应用自定义的层叠样式表,如果在页面中不希望一种标记遵循同一样式或者希望不同的标记遵循相同的样式,利用类选择符和标记的class属性就可以做到这两点
类选择符在样式表中有两种定义格式
格式1
标记名,类别{规则1;规则2……..}
这种格式的类选择符所定义的样式只能用在特定的标记上。
示例:
<head>
<style type=“text/css”>
p.back{background-color:#0000FF;}
</style>
</head>
<body>
<p class=“back”>本段文字的颜色为 #0000FF</p>
<p>本段文字的颜色正常显示</p>
</body>
上面的示例定义了一个类back样式,供HTML文件的<P>标记使用,即只有class属性为”back”的标记<P>才能遵循此样式。
格式2
类名{规则1;规则2……….}
这种格式的类选择符可以使不同的标记遵循相同的样式,只要将标记的class属性值设置为类名就可以了。
示例:
<head>
<style type=“text/css”>
.text{font-family:”宋体”;font-size:14px;color:red;}
</style>
</head>
<body>
<span class=“text”>这行文字是红色的</span>
</body>
</html>
上面的示例定义了类text,这相当于*.text,即标记名是通配符表示的,匹配所有标记。
2,  重定义标签层叠样式表
针对某一个标签定义层叠样式表,层叠样式表将只应用于选择的标签。
示例:
<head>
<style type=“text/css”>
input.text{background-color:#CCCCCC;}
</style>
</head>
<body>
<input type=“text” name=“textfield”class=“text”>
</body>
</html>
上面示例定义一个应用于<input>标签的类input.txt
3,  组合标签定义层叠样式表
层叠样式表包含类选择符,ID选择符,伪类和上下文选择符等。
a,  类选择符
类选择符在上面的算定义层叠样式表中已经讲到,这里不再码字了噢。。
bID选择符
ID选择符用于定义一个元素的独有样式
语法:
#id{规则1,规则2…………}
示例:定义引用该样式的文本字体为"宋体",颜色值为#666fff
#text{font-family:"宋体";color:#666fff}
c,伪类
伪类是特殊的类,能自动被支持CSS的浏览器识别。伪类可以区别标记的不同状态。伪类的一个最见的应用是指定超链接<A>标记以显示不同的状态。
示例:
设置对象在未被访问前的样式表属性
a:link{font-size:14px;text-decoration:none;color:#666fff;}
设置对象在其鼠标悬停是的样式表属性
a:hover{font-size:14px;text-decoration:underline;color:#fff000;}
设置对象在被用户激活(鼠标点击与释放之间发生的事件)时的样式表属性
a:active{font-size:14px;text-decoration:none;color:#66999f;}
设置对象在其链接地址已经被访问过时的样式表属性
a:visited{font-size:14px;text-decoration:none;color:#0000ff;}
d,上下文选择符
上下文选择符定义嵌套标记的样式。
语法:
标记名 标记名{规则1;规则2………..}
例如指定HTML文件中出现在嵌套标记<h1>……….<em>……</em>……<h1>内的文字为黑色
H1 em{color:black}
在实际应用中,层叠样式表往往将几种形式组合在一起定义样式,一个标记引用多个定义样式,从而实现层叠样式表加强格式化文本的功能。
下面我们做个引用ID选择符定义样式,类.hover2与伪类组合定义样式,
  1. <head>
  2. <style type=“text/css”>
  3. <!--
  4. #id{font-size:26px;}/*ID选择符定义样式*/
  5. a{font-size:16px;text-decoration: none;color:#CCCCCC;}
  6. a:hover{font-size:16px;text-decoration: underline;color:#FF0000; }
  7. a:active{font-size:16px;text-decoration: none;color:#6699FF;}
  8. a.hover2:hover{font-size:16px;text-decoration: underline;color:#CC6600;}/*类.hover2与伪类组合定义样式*/
  9. -->
  10. </style>
  11. </head>
  12. <body>
  13. <span><strong><a href=“#” id=“id” class=“hover2”>请单击破洛洛链接</a></strong></span>


  14. <span><strong><a href=“#” >请对照破洛洛链接颜色</a></strong></span>
  15. </body>
  16. </html>
复制代码
CSS样式表的写法
CSS样式表的基本写法有下面4种。
1,  链接到外部的样式表
如果多个HTML文件要共享样式表,可以将样式表定义为一个独立的CSS样式文件。HTML文件在头部用<link>标记链接到CSS样式文件
示例:在HEAD标记里面用<link>标记链接CSS样式文件
<link rel=“stylesheet” href=“style.css”type=“text/css”>
2,  引入外部样式表
这种方式是在HTML文件的头部<style></style>标记之间,用CSS样式表的@import声明引入外部样式表。
格式为:
<style>
@import URL(“外部样式文件名”)
……..
</style>
示例:用@import声明引入外部样式表,代码如下:
@import URL(“style1.css”);
@import URL("http://bbs.poluoluo.com/css/style2.css");
引入外部样式表的使用方式与链接到外部样式表很相似,都是将样式定义保存为单独的文件。两者的本质区别是:引入方式在浏览器下载HTML文件是,将样式文件的全部内容复制到@import关键字位置,以替换该关键字;而链接到外部的样式表方式在HTML文件需要引用CSS样式文件中的某个样式时,浏览器才链接样式文件,读取所需要的内容。
3,  嵌入样式表
<style>标记将样式表嵌入在HTML文件的头部,<style>标记的属性TYPE指明样式的类别,除了CSS样式表外,还有Netscape浏览器使用的JSS(javaScript Style SheetsJava脚本样式表)样式表,其样式类别为text/javascript;属性TYPE的默认值为text/css<style>标记内定义的前后加上注释符<!--……….-->的作用是使不支持CSS的浏览器忽略样式表的定义。嵌入样式表的作用范围是在本HTML文件内。
4,  内联样式
这种方式是在HTML标记中,将定义的样式规则作为标记style属性的属性值。样式定义的作用范围仅限于此标记范围之内。一个内联样式应用如下:
<body style=“font-family;”宋体”; font-size:14px;background:yellow”>
要在一个HTML文件中使用内联样式,必须在该文件的头部对整个文件进行单独的样式表声明,声明如下:
<meta http-equiv=“Content-Type” content=“text/css”>
内联样式主要应用于样式仅适用于单个页面元素的情况,它将样式和要展示的内容混在一起,自然会推动一些样式表的优点,所以建议这种方式尽量少用。
CSS样式表作用的优先顺序
当对同一段文本应用多个层叠样式表时,文本中的元素将遵循样式表的作用优先顺序依次调用样式。
样式表的作用优先顺序遵循以下原则。
1,  内联样式中所定义样式的优先级最高
2,  其他样式按其在HTML文件中出现或者被引用的顺序来确定优先级,遵循就近原则。离文本越近,优先级越高。
3,  选择符的作用优先顺序为:上下文件选择符,类选择符,ID选择符
4,  未在任何文件中定义的样式,将遵循浏览器的默认样式
下面我们做个示例来详细的解释CSS样式表的优先顺序。
  1. <head>
  2. <style type="text/css">
  3. p{color:red;font-size:24px;}
  4. p.class1{color:green;font-size:12px;}
  5. p{font-size:16px;text-align:center;}
  6. </style>
  7. </head>

  8. <body>
  9. <p style="color:#6699FF">第一段文字</p>
  10. <p class="class1">第二段文字</p>
  11. <p>第三段文字</p>
  12. </body>
  13. </html>
复制代码
以上代码中针对<p>标记定义了3个样式表,<body>标记包含3<p>标记。第一个<p>标记根据原则一,二条,大胜的样式值为:color:#6699FF,“font-size:16px,“text-align:center。样式表定义的类选择器p.class1,只有class属性为class1<p>标记才使用;第二个<p>标记套用的样式值为:“color:green”“font-size:12px”“text-align:center”;第三个<p>标记中不含有classstyle属性,套用的样式值为:“color:red”“font-size:16px”“text-align:center
样式表的作用顺序是比较复杂的,特别是同时引用多个样式文件时,应十分注意。如果希望一个属性值不被其他样式定义中的相同属性所定义的值覆盖,可用特定参数!import,如将上例第一个p样式定义为:
p{color:red;font-size:24px;!import;} 那么,浏览器显示的三段文字字号都为24px

评分

参与人数 1威望 +5 破洛币 +100 贡献 +5 收起 理由
xiaoc + 5 + 100 + 5 很给力!

查看全部评分

回复

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-21 19:47:51 | 显示全部楼层

CSS样式表属性

本帖最后由 zybx520 于 2012-7-21 19:54 编辑

通过设置CSS样式表的基本属性,以便更精确,多效果的方式显示页面中的元素。
字体属性
字体属性主要包括字体综合设置,字体族科,字体大小,字体风格,字体加粗,字体英文大小写转换等。具体属性如下图所示
表2.1.jpg
Font复合字体属性
语法:font:font-style||font-variant||font-weight||font-size||line-height||font-family
该属性是复合属性,声明方式中的参数必须按照如上的排列顺序。每个参数仅允许有一个值,忽略的属性将使用其参数对应的独立属性默认值。
我们做个对<p>标记字体样式的定义,<body>标记中的文本按照样式显示为斜体,英文字母为大写,500字体粗细,14px字体大小,宋体。代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>font复合字体属性</title>
  5. <font color="red"><style type="text/css">
  6. <!--
  7. P{font:italic small-caps 500 14px 宋体; }
  8. -->
  9. </style></font>
  10. </head>
  11. <body>
  12. <p>   CSS(Cascading Style Sheets,层叠样式表)是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,增加了一些新概念,如类、层等,可以对文字重叠、定位等。所谓“层叠”,实际上就是将显示样式独立于显示的内容,进行分类管理,例如分为字体样式、颜色样式等,需要使用样式的HTML文件进行套用。</p>
  13. </body>
  14. </html>
复制代码

Font-family指定字体
语法:font-family:字体1,字体2,字体3……
可以设置多种字体,按优先顺序排列,以逗号隔开。如何字体名称包含空格,则应使用引号括起。当浏览器找不到第一种字体,将会使用第二种字体替代。以此类推。
示例代码:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>font-family指定字体</title>
  5. <font color="red"><style type="text/css">
  6. <!--
  7. h1{font-family:"黑体"}
  8. p{font-family:"宋体","楷体_GB2312";}
  9. -->
  10. </style></font>
  11. </head>
  12. <body>
  13. <h1>CSS样式的概念</h1>
  14. <p>CSS(Cascading Style Sheets,层叠样式表)是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,增加了一些新概念,如类、层等,可以对文字重叠、定位等。所谓“层叠”,实际上就是将显示样式独立于显示的内容,进行分类管理,例如分为字体样式、颜色样式等,需要使用样式的HTML文件进行套用。</p>
  15. </body>
  16. </html>
复制代码

上面示例中分别对<h1><p>标记进行样式定义。<h1>标记中的字体是“黑体”;<p>标记规定字体为“宋体”或者“楷体_GB2312”,当客户机中没有第一种“宋体”字体时,浏览器会使用第二种“楷体_GB2312”显示。
Font-size设定字号
语法:font-size:<absolute-size>|<relative-size>
<absolute-size>指的是绝对长度,使用时就谨慎的考虑到其在不同浏览器上时可能出现不同的效果。对于一个用户来说,绝对长度的字体有可能会很大或者很小。如xx-smallx-smallsmallmediumlargex-largexx-large等。
<relative-size>指的是相对长度。一般使用百分比实现。其百分比取值基于父对象中字体的尺寸。
下面做一个<h1>标记中的文本字体大小使用绝对长度x-small<p>标记中文本字体大小为相对长度130%,代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title> font-size设定字号</title>
  5. <font color="red"><style type="text/css">
  6. <!--
  7. h1{font-family:"黑体"; font-size: x-small;}
  8. p{font-family:"宋体","楷体_GB2312"; font-size:130%}
  9. -->
  10. </style></font>
  11. </head>
  12. <body>
  13. <h1>CSS样式的概念</h1>
  14. <p>CSS(Cascading Style Sheets,层叠样式表)是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,增加了一些新概念,如类、层等,可以对文字重叠、定位等。所谓“层叠”,实际上就是将显示样式独立于显示的内容,进行分类管理,例如分为字体样式、颜色样式等,需要使用样式的HTML文件进行套用。</p>
  15. </body>
  16. </html>
复制代码


Font-style设定样式
语法:font-style:normal|italic|oblique
Normal正常值
Italic斜体
Oblique偏斜体
例如下面代码中<h1>标记的文本文字是斜体italic,<p>标记文本字体是偏斜体oblique
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>font-style设定样式</title>
  5. <font color="red"><style type="text/css">
  6. <!--
  7. h1{font-family:"黑体"; font-size:xx-large; font-style:italic}
  8. p{font-family:"宋体","楷体_GB2312"; font-size:120%; font-style:oblique}
  9. -->
  10. </style></font>
  11. </head>
  12. <body>
  13. <h1>CSS样式的概念</h1>
  14. <p>CSS(Cascading Style Sheets,层叠样式表)是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,增加了一些新概念,如类、层等,可以对文字重叠、定位等。所谓“层叠”,实际上就是将显示样式独立于显示的内容,进行分类管理,例如分为字体样式、颜色样式等,需要使用样式的HTML文件进行套用。</p>
  15. </body>
  16. </html>
复制代码

Font-weight设定字体粗细
语法:font-weight:normal|bold|bolder|lighter|100-900
字体粗细属性值如下图:
表2.2.jpg

下面例子中,<h1>标记的文本字体粗细是bolder<p>标记文本字体粗细是200
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type"content="text/html; charset=gb2312">
  4. <title>font-weight设定字体粗细</title>
  5. <font color="red"><style type="text/css">
  6. <!--
  7. h1{font-family:"黑体"; font-size:xx-large;font-style:italic; font-weight:bolder}
  8. p{font-family:"宋体","楷体_GB2312"; font-size:120%;font-style:oblique; font-weight:200}
  9. -->
  10. </style></font>
  11. </head>
  12. <body>
  13. <h1>CSS样式的概念</h1>
  14. <p>CSS(Cascading Style Sheets,层叠样式表)是W3C协会为弥补HTML在显示属性设定上的不足而制定的
  15. 一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,增加了一些新概念,如类、层等,
  16. 可以对文字重叠、定位等。所谓“层叠”,实际上就是将显示样式独立于显示的内容,进行分类管理,
  17. 例如分为字体样式、颜色样式等,需要使用样式的HTML文件进行套用。</p>
  18. </body>
  19. </html>
复制代码
Font-variant设定英文大小写转换
语法:font-variant:normal|small-cape
Normal正常值
Small-cape将小写英文字体转换为大写英文字体。

下面示例中,<h1>标记的文本英文大小写正常。<p>标记文本将小写英文字体转换为大写英文。

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>font-variant设定英文大小写转换</title>
  5. <font color="red"><style type="text/css">
  6. <!--
  7. h1{font-family:"黑体"; font-size:xx-large; font-variant:normal}
  8. p{font-family:"宋体","楷体_GB2312"; font-size:120%; font-variant:small-caps}
  9. -->
  10. </style></font>
  11. </head>
  12. <body>
  13. <h1>This is an example!</h1>
  14. <p>It is not only beautiful,but also useful!</p>
  15. </body>
  16. </html>
复制代码

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-25 15:58:55 | 显示全部楼层

CSS颜色和背景属性

CSS的颜色属性允许设计者指定页面元素的颜色,背景属性用于指定页面的背景颜色或者背景图像的属性。颜色和背景属性如下图所示:
表2.3.jpg
1,  color设定颜色
语法:color:color-value
HTML语言使用十六进制的RGB颜色值对颜色进行控制。即颜色可以通过英文名称或者十六进制值来表现。如标准的红色,可以用RED作为名称来表示,也可以用#FF0000作为十六进制值来表示。能够使用的预设颜色命名总共有140种,常用的有16种:blackolivetealredbluemaroonnavygraylimefuchsiawhitegreenpurplesilveryellowaqua
示例:使用color属性设置页面文字的颜色,代码如下:
H1{color:#ff0000}
2,  设定背景颜色background-color
语法:background-color:color-value
例如:h1{color:#6699ff;background-color:#ffffff}
3,  设定背景图像background-image
语法:background-image:none|url(url)
None:无背景图像
url(url)使用绝对或者相对地址指定背景图像。不仅可以输入本地图像文件的路径和文件名称,也可以用URL的形式输入其他位置的图像名称。
页面中可以用JPG或者GIF图像作为背景图,这与向网页中插入图片不同,背景图像放在网页的最底层,文字和图片等都位于其上。
例如:body{ background-image:url(bg.gif)}
4,  设定图像平铺方式background-repeat
语法:background-repeat:repeat|repeat-x|repeat-y|no-repeat
Repeat:背景图像在横向和纵向平铺
Repeat-x:背景图像以x轴方向平铺
Repeat-y:背景图像以y轴方向平铺
No-repeat:背景图像不平铺
例如:设置背景图像以x轴方向平铺,代码如下:
Body{ background-image:url(bg.git); background-repeat:repeat-x}
5,  设定背景图像是否页面内容滚动background-attachment
语法:background-attachment:scroll|fixed
Scroll:背景图像跟随页面内容滚动
Fixed:背景图像固定。
例如:Body{ background-image:url(bg.git);background-attachment:scroll}表示背景图像跟随页面内容滚动。
6,  设定背景图像的位置background-position
语法:background-position:[value]|[top|center|bottom]|[left|center|right]
背景图像位置属性可以确定背景图像的绝对位置,这是HTML标记不具备的功能。该属性只能用于块级元素和替换元素(包括img,input,textarea,select和object)。背景图像位置属性值如下图:
表2.5.jpg

例如,设定背景图像确切的位置,代码如下:
P{background-image:url(bg.gif); background-repeat:no-repeat;background-posititon:30% 30px}

7,  设定背景综合属性background
语法:background:background-color|| background-image|| background-repeat|| background-attachment||background-position
如果使用该复合属性定义单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为:transparent none repeat scroll 0% 0%
下面我们做个简单的示例来说明css颜色和背景属性的应用。运行效果如下图:
图2.1.jpg
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>CSS颜色和背景属性的应用</title>
  5. <style type="text/css">
  6. <!--
  7. body{background-image:url(bg.gif); background-attachment:scroll}
  8. p{color:#000000; background-color:#C4ECFD ; background-image:url(02-01.jpg); background-repeat:no-repeat; background-position:42% 30px}
  9. body,td,th,caption {font-size: 14px;}
  10. .style2 {color: #000000}
  11. -->
  12. </style>
  13. </head>
  14. <body leftmargin="30px" topmargin="10px">
  15. <p style="width:400 ">这是一段文字

  16. 本段有一个不同于body的背景图

  17. 它从20% 30px处开始显示

  18. 并且不重复



  19. </p>
  20. <table width="400"  border="1">
  21. <caption align="center">
  22. 在单元格标记的style属性中设置背景图的摆放位置
  23. </caption>
  24.   <tr>
  25.     <td height="189" style="color:#6666FF; text-align:center; background-repeat:no-repeat; background-image:url(02-02.jpg); background-position:bottom left">本单元格背景图在[0% 100%]处</td>
  26.     <td height="189" style="color:#6666FF; text-align:center; background-repeat:no-repeat; background-image:url(02-02.jpg); background-position:top right">本单元格背景图在[100% 0%]处</td>
  27.   </tr>
  28. </table>
  29. </body>
  30. </html>
复制代码

评分

参与人数 1威望 +5 破洛币 +20 贡献 +5 收起 理由
jumpjump + 5 + 20 + 5 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-7-28 16:26:25 | 显示全部楼层

CSS文本属性

文本属性设置文字之间的显示特性。CSS文本属性主要包括字母间隔,文字修饰,文本排列,行高,文字大小写等。文本具体属性如下图:

1,  设定字符间距letter-spacing
语法:letter-spacing:normal|length
Normal:正常值。
Length:指定长度,包含长度单位。
例如对<p>标记定义样式,设置文本属性letter-spacing的属性值为2px,在浏览器中会发现字符与字符之间有明显的间隔。
<head>
<style type="text/css">
<!--
p{font-family:"宋体","楷体_GB2312"; font-size:120%;letter-spacing:2px}
-->
</style>
</head>

2,  设定单词间距word-spacing
语法:word-spacing:normal|length
Normal:正常值。
Length:指定长度,包含长度单位。
例如对<p>标记定义样式,设置文本属性word-spacing的属性值为5px,在浏览器中会发现单词与单词之间有明显的间隔。代码如下:
<head>
<style type="text/css">
<!--
p{font-family:"宋体","楷体_GB2312"; font-size:120%;word-spacing:5px}
-->
</style>
</head>

3,  设定文字修饰text-decoration
语法:text-decoration:underline|overline|line-through|link|none
Underline:文字加下划线
Overline:文字加上划线
Line-through:文字加删除线
Blink:闪烁文字,只有netscape浏览器支持
Nono:默认值
例如:当鼠标悬停在链接文字上时,文字加下划线,代码如下:
<head>
<style type="text/css">
<!--
a:link{font-family:"黑体"; text-decoration:none;}
a:visited{font-family:"黑体"; text-decoration:none;}
a:hover{font-family:"楷体_GB2312";text-decoration:underline;}
-->
</style>
</head>

4,  设定横向文字对齐方式text-align
语法:text-aligh:left|right|center|justify
Left:居左对齐
Right:居右对齐
Center:居中对齐
Justify:两端对齐
例如对<h1><p>标记定义样式,将text-align属性值分别设置为centerright,代码如下:
<head>
<style type="text/css">
<!--
h1{font-family:"黑体"; text-align:center}
p{font-family:"宋体","楷体_GB2312"; text-align:right}
-->
</style>
</head>

5,  设定纵向文字对齐方式vertical-align
语法:vertical-align:super|sub|top|middle|bottom|text-top|text-bottom
Super:垂直对齐文本的上标
Sub:垂直对齐文本的下标
Top:垂直向上对齐
Middle垂直居中
Bottom:垂直向下对齐
Text-top:文字向上对齐
Text-bottom:文字向下对齐
例如如下代码:
<head>
<style type="text/css">
<!--
td{font-family:"黑体"; vertical-align:bottom}
td.class{font-family:"宋体","楷体_GB2312";vertical-align:text-top}
-->
</style>
</head>
以上代码对<td>标记定义样式,并且定义了一个类.class,分别将vertical-align属性值设置为bottomtext-top

6,  
设定文字首行缩进text-indent
语法:text-indent:value
如:
<head>
<style type="text/css">
<!--
h1{font-family:"黑体"; text-align:center;}
p{font-family:"宋体","楷体_GB2312"; font-size:14px;text-align:left; text-indent:20px}
-->
</style>
</head>

7,  
设定文字行高
语法:line-height:value
例如:将<p>标记中的line-height属性值设置为24px,代码如下:
<head>
<style type="text/css">
<!--
h1{font-family:"黑体"; text-align:left;}
p{font-family:"宋体","楷体_GB2312"; font-size:14px;text-align:left; text-indent:20px; line-height:24px;}
-->
</style>
</head>

8,  
设定英文大小写text-transform
语法:text-transform:capitalize|uppercase|lowercase|none
Capitalize:将每个英文单词的首字母大写
Uppercase:将每个英文单词字母均转换为大写字母
Lowercase:将每个英文单词字母均转换为小写字母
None:默认值,无转换发生。
例如将<h1><p>标记中的文本文字的text-transform属性值 设置为capitalizeuppercase,代码如下:
<head>
<style type="text/css">
<!--
h1{font-family:"黑体"; word-spacing:6px;text-transform:capitalize;}
p{word-spacing:6px;text-transform:uppercase;}
-->
</style>
</head>




回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-8-1 18:23:18 | 显示全部楼层

CSS边框属性

边框属性用于设置一个元素边框的宽度,样式和颜色,
边框属性如下图所示:
表2.11.jpg
1,  设定边框宽度border-width
语法:border-width:medium|thin|thick|length
Medium:默认宽度
Thin:小于默认宽度
Thick:大于默认宽度
Length:由浮点数字和单位标识符组成的长度值
例如定义元素边框适合的宽度属性值,代码如下:
P{border-top-width:3px;border-left-width:3px; border-right-width:2px; border-bottom-width:2px;}
2,  定义边框颜色border-color
语法:border-color:color-value
例如:定义元素边框的颜色属性值,代码如下:
P{border-top-color:#cccfff; border-left-color:#cccfff;border-right-color:#cccccc; border-bottom-color:#cccccc;}
3,  设定边框样式border-style
语法:border-style:none|hidder|dotted|dashed|solid|double|broove|ridge|inset|outset
None:无边框
Hidder:隐藏边框,IE不支持
Dotted:边框由点组成
Dashed:边框由短线组成
Solid:边框是实线
Double:边框是双实线
Groove:边框带有立方体感的沟槽
Ridge:边框成脊形
Inset:边框内嵌一个立方体边框
Outset:边框外贼一个立方体边框
下面我们对CSS边框属性做一个整体的示例,让大家能更好的了解。代码运行效果如下:
图2.2.jpg
代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>CSS边框属性的应用</title>
  5. <style type="text/css">
  6. <!--
  7. p{width:500px; height:100px}
  8. p{border-top-width:4px; border-right-width:2px; border-bottom-width:1px;border-left-width:3px;}
  9. p{border-top-color:#6666FF; border-right-color:#CCCCCC;border-bottom-color:#CCCCCC; border-left-
  10. color:#6666FF; }
  11. p{border-top-style:solid; border-right-style:dotted; border-bottom-style:double; border-left-
  12. style:groove}
  13. p{letter-spacing:3px; line-height:28px}
  14. -->
  15. </style>
  16. </head>
  17. <body leftmargin="20px">
  18. <h1>CSS样式的概念-破洛洛</h1>
  19. <p>CSS(Cascading Style Sheets,层叠样式表)是W3C协会为弥补HTML在显示属性设定上的
  20.   不足而制定的
  21. 一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,增加了
  22. 一些新概念,如类、层等,
  23. 可以对文字重叠、定位等。所谓“层叠”,实际上就是将显示样式
  24. 独立于显示的内容,进行分类管理,
  25. 例如分为字体样式、颜色样式等,需要使用样式的HTML
  26. 文件进行套用。</p>
  27. </body>
  28. </html>
复制代码

评分

参与人数 1威望 +3 破洛币 +10 贡献 +3 收起 理由
xiaoc + 3 + 10 + 3 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-8-3 19:07:54 | 显示全部楼层
本帖最后由 zybx520 于 2012-8-3 19:10 编辑

CSS提供用于定义元素二维,三维空间定位以及可见性的定位属性。设置定位属性可以将元素定位于相对其他元素的相对位置或者绝对位置,可以使用如下图所示的属性来定位网页的元素位置。
表2.14.jpg
下面我们做一个可以呈现出元素的二维和三维空间定位的效果,代码运行效果如下图:
图2.3.jpg
程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>CSS定位属性的应用-破洛洛</title>
  5. <style type="text/css">
  6. <!--
  7. p{font-size:14px; color:#6666FF}
  8. div.block1{position:absolute; top:80px; left:30px; width:200px; height:200px; background-color:#f3f4f8;}
  9. img.pos1{position:relative; top:20px; left:20px; width:80px; height:80px}
  10. div.block2{position:absolute; top:80px; left:280px; width:200px; height:200px; background-color:#f3f4f8 ;overflow:scroll}
  11. img.pos2{position:absolute; top:30px; left:30px; width:80px; height:80px;}
  12. p.lev1{position:absolute; top:80px; left:20px; z-index:2; font-size:22px; color:#6699FF;}
  13. p.lev2{position:absolute; top:75px; left:20px; z-index:1; font-size:18px; color:#FF9900; font-weight:bold}
  14. -->
  15. </style>
  16. </head>
  17. <body>
  18. <div class="block1"><img src="02-01.jpg" width="596" height="800" class="pos2">

  19. <p>这是一幅花卉图!</p>
  20. </div>
  21. <h3 align="center">CSS定位属性的应用</h3>
  22. <div class="block2">
  23. <p class="lev1">文字的重叠显示</p>
  24. <p class="lev2">文字的重叠显示</p>
  25. </div>
  26. </body>
  27. </html>
复制代码
回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-8-5 15:03:05 | 显示全部楼层
CSS区块属性
在设计页面时,CSS可以将元素放置在一个窗口中,这个窗口称之为区块,区块属性如下图所示:
表2.15.jpg

下图效果是定义了CSS的区域属性,将元素存放在一个容器中,方便对元素的操作。
图2.4.jpg
程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>CSS区块属性的应用-破洛洛</title>
  5. <style type="text/css">
  6. <!--
  7. .class1{width:400px; height:100px; margin-top:20px; margin-right:30px; margin-bottom:20px; margin-left:20px; float:left;
  8. border-left-style:groove; border-left-width:3px; border-left-color:#FF9900; border-bottom-style:double; border-bottom-width:4px;
  9. border-bottom-color:#FF9900; padding-left:3px; padding-bottom:3px; letter-spacing:3px; line-height:20px}
  10. -->
  11. </style>
  12. </head>
  13. <body>
  14. <h3 style="margin-left:50px ">CSS样式的概念-破洛洛</h3>
  15. <p class="class1">
  16. <img src="205934.gif">
  17. CSS(Cascading Style Sheets,层叠样式表)是W3C协会为弥补HTML在显示属性设定上的不足而制定的
  18. 一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,增加了一些新概念,如类、层等,
  19. 可以对文字重叠、定位等。所谓“层叠”,实际上就是将显示样式独立于显示的内容,进行分类管理,
  20. 例如分为字体样式、颜色样式等,需要使用样式的HTML文件进行套用。</p>
  21. </body>
  22. </html>
复制代码
CSS列表属性
CSS中列表的设定丰富了列表的外观,列表属性用于设置列表标记olul的显示特性,其属性如下图所示:
表2.16.jpg

设定列表样式list-style-type
语法:list-style-type:value
list-style-type可以设定多种符号类型,如:
disc:在文本前加实心圆
circle:在文本前加空心圆
square:在文本前加实心方块
decimal:在文本前加普通的阿拉伯数字
lower-roman:在文本前加小写罗马数字
rpper-roman:在文本前加大写罗马数字
lower-alpha:在文本前加小写英文字母
rpper-alpha:在文本前加大写英文字母
none:不显示任何列表项目或者编号
例如下列代码定义CSS列表样式属性值
  1. <font size="3"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>CSS列表样式属性的应用</title>
  5. <style type="text/css">
  6. <!--
  7. ol{list-style-type:disc; font-size:18px}
  8. li.li1{list-style-type:upper-alpha}
  9. li.li2{list-style-type:lower-roman}
  10. -->
  11. </style>
  12. </head>

  13. <body>
  14. <h1>CSS样式表属性</h1>
  15. <ol>
  16. <li class="li2">字体属性</li>
  17. <li class="li2">文本属性</li>
  18. <li class="li2">颜色和背景属性</li>

  19. <li class="li1">边框属性</li>
  20. <li class="li1">鼠标光标属性</li>
  21. <li class="li1">定位属性</li>

  22. <li>区块属性</li>
  23. <li>列表属性</li>
  24. <li>滤镜属性</li>
  25. </ol>
  26. </body>
  27. </html>
  28. </font>
复制代码
设定列表图像list-style-image
语法:list-seyle-image:none|url(url)
None:不指定图像
url(url):使用绝对或者相对地址指定背景图像,jpggif格式都可以
示例代码:
  1. <font size="3"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>CSS列表图像属性的应用</title>
  5. <style type="text/css">
  6. <!--
  7. ol{list-style-image:url(02-01.gif);font-size:18px;}
  8. -->
  9. </style>
  10. </head>

  11. <body>
  12. <h1>CSS样式表属性</h1>
  13. <ol>
  14. <li>字体属性</li>
  15. <li>文本属性</li>
  16. <li>颜色和背景属性</li>

  17. <li>边框属性</li>
  18. <li>鼠标光标属性</li>
  19. <li>定位属性</li>

  20. <li>区块属性</li>
  21. <li>列表属性</li>
  22. <li>滤镜属性</li>
  23. </ol>
  24. </body>
  25. </html>
  26. </font>
复制代码
设定列表位置list-style-position
语法:list-style-position:outside|inside
Outside:列表贴近左侧边框
Inside:列表缩进
示例代码:
  1. <font size="3"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>CSS列表位置属性的应用</title>
  5. <style type="text/css">
  6. <!--
  7. ol{list-style-image:url(02-01.gif);font-size:18px;}
  8. li.li1{list-style-position:inside;}
  9. -->
  10. </style>
  11. </head>
  12. <body>
  13. <h1>CSS样式表属性</h1>
  14. <ol>
  15. <li>字体属性</li>
  16. <li>文本属性</li>
  17. <li>颜色和背景属性</li>

  18. <li class="li1">边框属性</li>
  19. <li class="li1">鼠标光标属性</li>
  20. <li class="li1">定位属性</li>
  21. <li>区块属性</li>
  22. <li>列表属性</li>
  23. <li>滤镜属性</li>
  24. </ol>
  25. </body>
  26. </html>
  27. </font>
复制代码
运行效果如下图所示:
图2.5.jpg

设定综合属性list-style
语法:list-style:list-style-image|| list-style-position|| list-style-type
例如使用list-style设置列表项目的综合属性,代码如下
ul{ list-style:url(“bg.gif”),inside,circle;}






回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-8-9 12:15:19 | 显示全部楼层
CSS鼠标光标属性
通过设置CSS样式表鼠标光标属性,当鼠标移动到链接上时,可以看到多种不同的效果。
语法:cursor:value
Value属性值如下图所示:
表2.18.jpg

例如如下代码:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. h1{cursor:ne-resize}
  5. p{cursor:crosshair; letter-spacing:2px; line-height:20px; text-indent:20px}
  6. img{cursor:help}
  7. -->
  8. </style>
  9. </head>
复制代码
上面代码表示当鼠标在h1位置时显示向东北的箭头,在p时显示交叉十字,在图片上时显示带问号的鼠标
CSS空白属性
通过设置空白属性,确定元素相对于浏览器各边界的位置,具体属性如下图:
表2.19.jpg
设定上边距margin-top
语法:margin-top:value
Value:与浏览器上边距的距离,单位为像素或者百分比形式。

设定右边距margin-right
语法:margin-right:value
Value:与浏览器右边距的距离,单位为像素或者百分比形式。
设定下边距margin-bottom
语法:margin-bottom:value
Value:与浏览器下边距的距离,单位为像素或者百分比形式。
设定左边距:margin-left
语法:margin-left:value
Value:与浏览器左边距的距离,单位为像素或者百分比形式。
设定空白综合属性margin
语法:margin:margin-top||margin-right||margin-bottom||margin-left
Margin属性用来检索或者设置元素四边与浏览器边界的距离。如果提供全部四个参数值,将按上,右,下,左的顺序作用于四边,如果只提供一个,将用于全部的四边,如果提供两个,第一个用于上,下,第二个用于左,右;如果提供三个,第一个用于上,右二个用于左,右,第三个用于下。
示例:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>CSS空白属性的应用</title>
  5. <style type="text/css">
  6. <!--
  7. p{margin-top:50px; margin-right:50%; margin-bottom:20%; margin-left:30px;}
  8. -->
  9. </style>
  10. </head>
  11. <body>
  12. <p>CSS(Cascading Style Sheets,层叠样式表)是W3C协会为弥补HTML在显示属性设定上的不足而制定的
  13. 一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,增加了一些新概念,如类、层等,
  14. 可以对文字重叠、定位等。所谓“层叠”,实际上就是将显示样式独立于显示的内容,进行分类管理,
  15. 例如分为字体样式、颜色样式等,需要使用样式的HTML文件进行套用。
  16. </p>
  17. </body>
  18. </html>
复制代码


回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-8-12 10:47:54 | 显示全部楼层
本帖最后由 zybx520 于 2012-8-12 10:50 编辑

CSS滤镜属性      
使用滤镜属性可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如文本,图片等,从而使页面的视觉效果更加鲜亮。其属性如下图所示:
表2.20.jpg

l  Alpha滤镜设置透明层次
语法:{filter: alpha(opacity=value, finishopacity=value, style=value,startx=value, starty=value, finishx=value, finishy=value)
Alpha属性是把一个目标元素与背景混合,可以通过指定数值来控件混合的程度。
Opacity:代表透明度,默认的范围是01000代表完全透明,100代表完全不透明。
Finishopacity:是一个可选参数,设置渐变的透明效果时,就用这个参数来指定结束时的透明度,范围是0100
Style:指定透明区域的形状特征。0代表统一形状,1代表线形,2代表放射状,3代表长方形。
Startx:渐变透明效果开始的X坐标。
Starty:渐变透明效果开始的Y坐标。
Finishx:渐变透明效果结束的X坐标。
Finishy:渐变透明效果结束的Y坐标。
例如设置alpha滤镜透明度为30%,样式为长方形,开始坐标为3030,结束坐标为400400,程序代码如下:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. img{
  5.         filter: Alpha(Opacity=30, Style=3, StartX=30, StartY=30, FinishX=400, FinishY=400);
  6. }
  7. -->
  8. </style>
  9. </head>
复制代码
l  blur滤镜模糊效果
语法:{filter: blur(add=value, direction=value, strength=value)}
Add:指定图片是否被改变成印象派的模糊效果,取值为ture或者是false
Direction:用来设置模糊的方向,模糊效果是按顺时针方向进行,0o代表垂直向上,然后每45o为一个单位,默认值是向左270o
Strength:只能使用整数来指定,代表有多少像素的宽度将 受到模糊影响,默认是5个像素。
例如设置blur滤镜为印象派扫毒锞,模糊方向顺时针90度,模糊强度为15,代码如下:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. img{
  5.         filter: Blur(Add=true, Direction=90, Strength=15);
  6. }
  7. -->
  8. </style>
  9. </head>
复制代码
l  chroma滤镜的应用
语法:filter: chroma(color=value)
Value:可为十六进制数值或英文颜色。
例如设置chroma滤镜对颜色值为“#fff666”的区域进行透明处理,代码如下:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. img{
  5.         filter: Chroma(Color=#fff666);
  6. }
  7. -->
  8. </style>
  9. </head>
复制代码
l  Dropshadow滤镜阴影效果
语法:{filter: dropshadow(color=value, offx=value, offy=value,positive=value)}
Color:阴影的颜色
OffxX轴方向阴影的偏移量,正数表示沿X轴右方向偏移,负数表示沿X轴左方向偏移。
OffyY轴方向阴影的偏移量,正数表示沿Y轴下方向偏移,负数表示沿Y轴上方向偏移。
Positive:取值为true或者falsetrue表示为不透明像素建立可见的阴影,false表示为透明的像素建立可见的阴影。
例如设置dropshadow滤镜阴影颜色为pinkXY轴领衔量为5,为不透明像素实现阴影,代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>Dropshadow滤镜的应用</title>
  5. <style type="text/css">
  6. <!--
  7. .lvjing{filter: DropShadow(Color=pink, OffX=5, OffY=5, Positive=1);}
  8. -->
  9. </style>
  10. </head>
  11. <body>
  12. <table width="50%"  border="0" cellpadding="2" cellspacing="0" bgcolor="#D8EAFE">
  13.   <tr>
  14.     <td height="35" align="center" class="lvjing">破洛洛论坛欢迎您</td>
  15.   </tr>
  16. </table>
  17. </body>
  18. </html>
复制代码
l  FlipH滤镜水平翻转效果
语法:{filter: FlipH}
例如使用FlipH滤镜,将图像水平方向翻转,代码如下:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. img{
  5.         filter: FlipH;
  6. }
  7. -->
  8. </style>
  9. </head>
复制代码
l  FlipV滤镜垂直翻转效果
语法:{filter: FlipV}
例如使用FlipV滤镜,将图像垂直方向翻转,代码如下:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. img{
  5.         filter: FlipV;
  6. }
  7. -->
  8. </style>
  9. </head>
复制代码
l  Glow滤镜设置边缘光晕
语法:{filter: glow(color=value, strength=value)}
Color:设定边缘光晕的颜色。
Strength:设定边缘光晕强度的大小,范围是1255
例如使用Glow滤镜,使文字边缘产生发光的效果,代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>Glow滤镜的应用</title>
  5. <style type="text/css">
  6. <!--
  7. .lvjing {filter: Glow(Color=pink, Strength=3);}
  8. -->
  9. </style>
  10. </head>
  11. <body>
  12. <table width="50%"  border="0" cellpadding="2" cellspacing="0" bgcolor="#D8EAFE">
  13.   <tr>
  14.     <td height="35" align="center" class="lvjing">破洛洛论坛欢迎您</td>
  15.   </tr>
  16. </table>
  17. </body>
  18. </html>
复制代码
l  Gray滤镜灰度效果
语法:{filter: Gray}
例如使用gray滤镜,去掉元素的所有色彩并以灰度级别显示,代码如下:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. img{
  5.         filter: Gray;
  6. }
  7. -->
  8. </style>
  9. </head>

  10. <body>
  11. <img src="shuicai.gif">
  12. </body>
复制代码
l  Invert滤镜反转效果
语法:{filter: invert}
Inver滤镜能把元素的可视化属性全部反转,包括色彩,饱和度和亮度值。
示例代码:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. img{
  5.         filter: Invert;
  6. }
  7. -->
  8. </style>
  9. </head>
  10. <body>
  11. <img src="shuicai.gif">
  12. </body>
复制代码
l  Mask滤镜遮罩效果
语法:{filter: mask(color=value)}
Color:遮罩所用的颜色。
Mask滤镜将可看见的像素遮蔽。将看不见的像素以指定的颜色显示。
示例:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>Mask滤镜的应用</title>
  5. <style type="text/css">
  6. <!--
  7. .lvjing {filter: Mask(Color=#00ff00);}
  8. -->
  9. </style>
  10. </head>
  11. <body>
  12. <table width="50%"  border="0" cellpadding="2" cellspacing="0" bgcolor="#D8EAFE">
  13.   <tr>
  14.     <td height="35" align="center" class="lvjing">破洛洛论坛欢迎您</td>
  15.   </tr>
  16.   <tr>
  17.     <td height="35" align="center"></td>
  18.   </tr>
  19. </table>
  20. </body>
  21. </html>
复制代码
l  Shadow滤镜渐变阴影效果
语法:{filter: shadow (color=value, direction=value)}
Color:设定渐变阴影的颜色。
Direction:用来设置模糊的方向,模糊效果是按顺时针方向进行,0o代表垂直向上,然后每45o为一个单位,默认值是向左270o
例如设置shadow滤镜渐变阴影颜色为灰色,阴影方向是顺时针225度,代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title> Shadow滤镜的应用</title>
  5. <style type="text/css">
  6. <!--
  7. .lvjing {filter: Shadow(Color=gray,Direction=225);}
  8. -->
  9. </style>
  10. </head>
  11. <body>
  12. <table width="50%"  border="0" cellpadding="2" cellspacing="0" bgcolor="#D8EAFE">
  13.   <tr>
  14.     <td height="35" align="center" class="lvjing">破洛洛论坛欢迎您</td>
  15.   </tr>
  16. </table>
  17. </body>
  18. </html>
复制代码
l  Wave滤镜波浪变形效果
语法:{filter: wave(add=value, freq=value, lightstrength=value,phase=value, strength=value)}
Add:是否把元素按照波形样式打乱
Freq:波纹的频率,即指定在一个元素上需要产生多少个完整的波纹
Lightstrength:增强波纹光景的效果,范围是0100
Phase:设置正弦波的偏移量
Strength:设置振幅大小
例如:设置wave滤镜按照波形样式打乱,波纹的频率为4,波纹增强光影为50,正弦波的偏移量为30,振幅大小为10,代码如下:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. img{
  5.         filter: Wave(Add=add, Freq=4, LightStrength=50, Phase=30, Strength=10);
  6. }
  7. -->
  8. </style>
  9. </head>
复制代码
l  Xray滤镜X射线效果
语法:{filter: xray}
Xray滤镜能使元素反映出它的轮廓并把轮廓加亮,呈现X光片的效果。
示例:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. img{
  5.         filter: Xray;
  6. }
  7. -->
  8. </style>
  9. </head>

  10. <body>
  11. <img src="shuicai.gif">
  12. </body>
复制代码
CSS滤镜的各种效果已经介绍完了,下面我们对CSS滤镜综合应用做个示例,运行效果如下图:
图2.6.jpg
代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>CSS滤镜的应用</title>
  5. <style type="text/css">
  6. <!--
  7. .lvjing{filter: DropShadow(Color=#17274c, OffX=5, OffY=5, Positive=1);}
  8. body,td{font-size:14px}
  9. -->
  10. </style>
  11. </head>
  12. <body topmargin="5px">
  13. <!--阴影效果-->
  14. <table width="300"  border="0" align="center" cellpadding="2" cellspacing="0" bgcolor="#F7D9A5">
  15.   <tr>
  16.     <td height="32" align="center" class="lvjing">CSS滤镜效果</td>
  17.   </tr>
  18. </table>

  19. <table width="550"  border="0" align="center" cellpadding="2" cellspacing="0">
  20.     <tr align="center" valign="top">
  21.       <td><img src="shuicai.jpg" width="230" height="200" style=" filter: Alpha(Opacity=70, Style=1);">

  22.       Alpha滤镜</td>
  23.       <td> </td>
  24.       <td><img src="shuicai.jpg" width="230" height="200" style=" filter: Blur(Add=true, Direction=135, Strength=15); ">

  25.       Blur滤镜</td>
  26.     </tr>
  27.     <tr align="center" valign="top">
  28.       <td><img src="shuicai.jpg" width="230" height="200" style=" filter: Wave(Add=add, LightStrength=50, Phase=2, Strength=5)">

  29.       Wave滤镜</td>
  30.       <td> </td>
  31.       <td><img src="shuicai.jpg" width="230" height="200" style=" filter: Gray; ">

  32.       Gray滤镜</td>
  33.     </tr>
  34. </table>
  35. </body>
  36. </html>
复制代码

有关CSS样式的基础介绍到这里已经完结了,祝大家在这里学有所成。。谢谢。。











评分

参与人数 1威望 +10 破洛币 +100 贡献 +10 收起 理由
xiaoc + 10 + 100 + 10 很给力!

查看全部评分

回复 支持 反对

使用道具 举报

900

主题

5786

帖子

14万

积分

管理员

Rank: 9Rank: 9Rank: 9

活跃会员优秀版主一等奖三等奖特别贡献金会员帮助达人优秀男会员优秀版主才华横溢

发表于 2012-8-12 19:13:04 | 显示全部楼层
哇哦~~~~辛苦了~~~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|破洛洛 ( 黔ICP备14000367号  |版权声明

GMT+8, 2018-11-16 20:31 , Processed in 0.329418 second(s), 35 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表