CSS快速入门[肿瘤咨询在线论坛]

dvbbs

收藏本页

联系我们

论坛帮助

dvbbs

>> 电脑网络管理、网页制作、免费素材、经验交流、软硬件......

搜一搜相关精彩主题

肿瘤咨询在线论坛 → 站务服务 → 『电脑网络』 → CSS快速入门

您是本帖的第 6277 个阅读者

树形打印

标题：

CSS快速入门

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 11 楼

三、CSS属性

　　5、分级属性

　　如果您使用过Word，那您一定知道Word中有一个“项目符号和编号”的功能。
　　在html中，您无需使用前面提到的一些字体、颜色、容器属性来对字体、颜色和边距、填充距等进行初始化。因为在CSS中，已经提供了进行分级的专用分级属性。
　　分级属性包括了“list-style”（列表样式）、“list-item”（列表项）等多种属性，我们先来看一下分级属性的详细列表：

　　下面我们来看一个分级属性的例子，代码如下所示：

<html>
　　<head>
　　<title> fenji css </title>
　　<style type=“text/css”>//*定义CSS*//
　　
　　</style>
　　</head>
　　<body>
　　 <p><em>sample</em>text<em>sample</em>text<em>sample</em>
　　 text<em>sample</em> text<em>sample</em></p>//*定义一段文本*//
　　　<ul>//*定义列表项*// <li>list-item 1</li>
　　　<li>list-item 2</li> <li>list-item 3</li> </ul>
　　 <p><img src=“ss01068.jpg” width=“280”height=“185”
　　　　　　　　　　alt=“invisible”></p>//*定义一幅图片*//
　　 </body>
　　 </html>

　　上段代码的显示效果如下图：

　　我们看到由于定义了<p>的属性为Block，所以文本、列表、图片都在不同的位置上打开，Inline属性使文本不折行，list-style-type的属性值为square使列表项前的符号为方块；
　　如果我们在上面的代码中做一些改动，则将以另一种效果显示，我们在<head>中把“EM”的display属性值改为block，使其都在新的位置打开；li的“list-style”属性值改为“Upper-roman”（大写罗马符号），img的“display”属性值改为“none”（让图片不显示）。修改后的显示效果如下图：

　　我们看到分级属性也能达到排版的部分功能，几处代码的改动就可以使页面发生很大的变化。自己来试一试其他的效果吧！
　　下一节我将向您介绍鼠标属性。

2005-9-27 12:30:27

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 12 楼

三、CSS属性

　　6、鼠标属性

　　我们知道，当把鼠标移动到不同的地方时，当鼠标需要执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生改变。
　　用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。
　　在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，我们来看一下它的详细列表：

　　我们来看一个例子吧，请看下面这段代码：

　　<html>
　　　 <head>
　　　 <title>changemouse</title>
　　　 </head>
　　　 <body>
　　　 <h1 style=“font-family:文鼎新艺体简”>鼠标效果</h1>//*设置字体*//
　　　 <p style=“font-family:行书体；font-size:16pt；color:red”>
　　　请把鼠标移到相应的位置观看效果。</p>//*设置字体的名称、大小、颜色*//
　　　 <div style=“font-family:行书体；font-size:24pt；color:green；”>
　　　　//*设置该区域内的字体名称、大小、绿色*//
　　　　<p><span style=“cursor:hand”>手的形状</span><br>
　　　　 //*设置鼠标属性为手的形状*//
　　　　<span style=“cursor:move”>移动</span><br>//*设置鼠标属性为移动*//
　　　　<span style=“cursor:ne-resize”>反方向</span><br>
　　　　//*设置鼠标属性为反方向*//
　　　　<span style=“cursor:wait”>等待</span><br>//*设置鼠标属性为等待*//
　　　　<span style=“cursor:help”>求助</span>//*设置鼠标属性为求助*//
　　　　</p>
　　　　</div>
　　　　</body>
　　</html>

　　上述代码产生的效果请您点击这里

　　CSS的属性就讲到这里，我们看到它的属性还是比较多的，但是您只要搞清楚它们都是什么意思，应用起来就会很方便。在您应用的时候，还可以参照我为您提供的属性详细列表 。
　　下一章将向您介绍CSS定位。

2005-9-27 12:30:46

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 13 楼

四、CSS定位

　　1.动态转换

　　通过在CSS中设置属性，我们可以准确的定义一个页面的样式，如颜色、字体、边框等。现在我们要讲的CSS定位主要是在页面的布局和控制上进行定义，使您的页面从这两个方面都展现的非常完美，更加富有动感。
　　另外，在讲解之前，我们首先介绍两个定义：相对定位和绝对定位。相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。
　　实现CSS的定位最终还是要靠属性。我们来看一下定位属性的详细列表（见下图）：

　　我们在下面举一个例子，其中带了一点Script的内容，我们来看看它是如何实现动态显示的。讲解之前我们还是先看一下这个例子的效果吧，请点击这里
　　看，通过简单的CSS定位实现了颇具动感的效果。这种效果的代码如下：

<html>
　　　<head>
　　　<title>dingwei css</title>
　　　<style type=“text/css”>
　　　
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <p style=“font-family:行书体；font-size:15pt；color:#cc33cc”>
　　　请选择一幅图片： </p>//*设置字体大小、名称、颜色*//
　　　 <div id=“container1”>
　　　 <dd><img src=“ss01065.jpg” width=“185”height=“280”>
　　　//*导入一张图片，标识符为container1*//
　　　 <p style=“font-family:行书体；color:#cc9933；font-size:12pt”>
　　　　名称：大漠</p>//*设置字体名称、颜色、大小*//
　　　 </dd>
　　　 </div>
　　　 <div id=“container2”>
　　　 <dd><img src=“ss01095.jpg” width=“185”height=“280”>
　　　//*导入另一种图片，标识符为container2*//
　　　 <p style=“font-family:行书体；color:#3366cc；font-size:12pt”>
　　　　　名称：大海</p>
　　　 </dd>
　　　 </div>
　　　 <form name=“myform”>//*定义两个按钮*//
　　　 <p><input type=“button” value=“大漠” 　　　　　
　　　　onclick=“container1.style.visibility=‘visible’；
　　　　container2.style.visibility=‘hidden’”>
　　　 //*定义鼠标点击事件图片1为可见，图片2为不可见*//
　　　 <input type=“button” value=“大海”；
　　　　container1.style.visibility=‘hidden’；
　　　　onclick=“container2.style.visibility=‘visible’；
　　　　container1.style.visibility=‘hidden’”></p>
　　　　//*定义鼠标点击事件图片1为不可见，图片2为可见*//
　　　　</form>
　　　　</body>
　　</html>

　　代码虽然长了一些，但结构很简单，您只要用心看注释，很容易理解的。下一节我将向您继续介绍一个CSS定位的例子。

2005-9-27 12:31:06

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 14 楼

四、CSS定位

　　2.空间定位

　　在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。
　　我们看到例子中的两幅图片和一段文字分别处于不同的空间位置，文字覆盖在那朵花的图片上，而挥动小旗的小老鼠却又覆盖在文字的上面。那么这种效果是怎样实现的呢？这里利用了CSS定位的z-index属性，代码如下：

<html>
　　　 <head>
　　　 <title>zindex</title>
　　　 <style type=“text/css”>
　　　 
　　　　</style>
　　　　</head>
　　　　<body>
　　　　<img src=“ss01010.jpg” class=“pile” id=“image”
　　　　 style=“z-index:1”>
　　　　 //*导入一张图片，使它为pile类，z-index属性定义为１，位置处于最下方
　　　　　　*//
　　　　<div class=“pile” id=“text1”
　　　　style=“color:#ffff33;z-index:2” > 这段文字将覆盖在图片上。
　　　　</div>//*定义一段文字的颜色和z-index属性为2，处于中间位置*//
　　　　<img src=“075.gif” class=“pile1” id=“image”
　　　　style=“z-index:3”>
　　　　 //*导入第二张图片，使它为“pile1”类，z-index属性为3，位置处于最上
　　　　　　方*//
　　　　</body>
　　</html>

　　通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。
　　利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。
　　下一章我将带您进入CSS滤镜的精彩世界。

2005-9-27 12:31:24

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 15 楼

五、CSS滤镜

　　1、概述

　　好了，下面我们将进入CSS的最精彩的部分--滤镜，它将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性，页面才变得更加漂亮。
　　CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看一下它的书写格式：

　　 filter：filtername（parameters）

　　怎么样？是不是很简单，看上去与前面讲的属性定义没什么太大的差别。Filter是滤镜属性选择符。
　　也就是说，只要您进行滤镜操作，就必须先定义filter；filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性，详细内容请看下表：

　　上面filter表达式中括号内的parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。
　　看了上面长长的列表，是不是觉得很困难呀？不要紧，我们接下来一个一个的介绍这些属性在CSS中是怎样实现的（很简单哟^_^）。
　　下一节我们将首先学习Alpha透明属性的应用。

2005-9-27 12:31:46

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 16 楼

五、CSS滤镜

　　2、alpha属性

　　alpha是来设置透明度的。先来看一下它的表达格式：

　　filter：alpha（opacity=opcity，finishopacity=finishopacity，
　　style=style，startX=startX，startY=startY，finishX=finishX，
　　finishY=finishY）

　　哇，怎么这么长。是啊，不过这些参数都各有其用。
　　Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
　　Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
　　从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）：

　　实现上面这种效果的代码如下：

<html>
　　<head>
　　<title>alpha</title>
　　<style>//*定义CSS样式*//
　　
　　</style>
　　</head>
　　<body>
　　<div>
　　<p style=“font-size：48；font-weight：bold；color：red；”>
　　Beautiful </p>//*定义字体属性，前景色为红色*//
　　</div>
　　<p><img src=“ss01076.jpg”> </p>
　　//*导入一张图片*//
　　</body>
　　</html>

　　如果在上面的代码中稍做改动，则将产生另外多种效果。我们只修改img的样式属性，把head中的Img样式属性代码改为如下所示：

　　img{position：absolute；top：20；left：40；
　　filter：alpha(opacity=0,finishopacity=100,
　　style=1,startx=0,starty=85,finishx=150,finishy=85);}
　 //*设置透明渐变效果，起始坐标，终止渐变坐标，并设置透明样式值（style=1）为　　　线形*//

　　这段代码产生的效果如左下图所示，右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果，点击缩略图可放大。

　　　　　　Style=1　　　　　　　　Style=2　　　　　　　　Style=3

　　以上是CSS的Alpha滤镜属性的应用，具体应用还需要您自己找个例子练一练。
　　下一节我们将介绍blur（模糊）属性。

2005-9-27 12:55:58

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 17 楼

五、CSS滤镜

　　3、blur属性

　　假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。
　　先来看一下blur属性的表达式：

　　filter：blur（add=add，direction，strength=strength）

　　我们看到blur属性有三个参数：add、direction、strength。
　　Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。　　　Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：

　　Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。
　　还是看一个例子吧。点击这里看效果　

　　看起来是不是有些像万花筒，在这个例子中加入了一些JavaScript的语句，代码如下：

　　<html>
　　　<head>
　　　<title>blur css</title>
　　　<script>
　　　function handlechange(obj)
　　　//*设置一个循环函数handlechange，对象是obj*//
　　　{ with(obj.filters(0))//*Obj的filter属性*//
　　　 { if (strength<255)//*设置循环条件*//
　　　　 { strength +=1；direction +=45；}
　　　　//*每循环一次strength就加1，direction加45度*// 　　　　　　　
　　　 }
　　　}
　　　</script>
　　　</head>
　　　<body>
　　　<p><img id =“img1” src=“ss01087.jpg” 　　　　　　　　
　　　　　style=“filter：blur(strength=1)”
　　　　　onfilterchange=“handlechange(this)”>
　　　//*导入一幅图片，初始blur属性strength等于1，同时调用onfilterchange函
　　　数*//
　　　</p>
　　　 </body>
　　</html>

　　注：在javascript中blur属性是这样定义的：
　　　　[oBlurfilter=] object.Filters.blur

　　这个例子是Blur属性的一个比较复杂的例子，下一节我将向您介绍两个较简单的blur属性效果。

2005-9-27 12:56:36

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 18 楼

五、CSS滤镜

　　通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1，得出来的字体效果是这样的（如下图）：

　　怎么样，是不是有些印象派的意思，这种效果的实现代码如下：

<html>
　　　<head>
　　　<title>filter blur</title>
　　　<style>//*CSS样式定义开始*//
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div style=“width:702； height: 288”>
　　　<p style=“font-family:lucida handwirting italic；
　　　 font-size:72；font-style:bold；color:rgb(55,72,145)；” >
　　　 LEAF</p>
　　　//*定义字体名称、大小、样式、前景色*//
　　　</div>
　　　</body>
　　</html>

　　我们看到strength设置为25，如果把其值再改大一些，就会达到非常夸张的效果，同时把Direction参数值为180，显示效果如下图：

　　用blur属性设置字体可以达到很多效果，把direction和strength再做修改，还能达到多种效果，您可以自己修改试一试。
　　这一节我们介绍了Blur属性，下一节将向您介绍Chroma属性。

2005-9-27 12:56:58

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 19 楼

五、CSS滤镜

　　4、Chroma属性

　　Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下：

　　Filter：Chroma（color=color）

　　这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图：

　　图中显示两种字体，两种颜色，我们现在对“leaves”字体添加chroma属性，使其透明。代码如下：

<html>
　　　<head>
　　　<title>chroma filter</title>
　　　<style>
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p>LEAVES <em>LOVE</em></p>
　　　</div>
　　　</body>
　　</html>

　　通过上面代码中对chroma的属性设置，使绿色透明。显示效果如下图：

　　我们看到绿色的leaves字体不见了，实际上它是透明了，在IE下点击它所在的区域，它还是会显示出来（见下图）：

　　另外，需要注意的是，chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理（比如JPG、GIF等格式），所以它们很少有固定的位置可以设置为透明。

　　本节我们讲述了chroma属性的应用，下一节将向您介绍Dropshadow属性。

2005-9-27 12:57:20

web

头衔：半人半兽

等级：管理员

文章：2831

积分：13654

第 20 楼

五、CSS滤镜

　　5、DropShadow属性

　　DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。看一看它的表达式：

　　Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，
　　　　　　　　　　　　Positive=positive）

　　该属性一共有四个参数： Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。
　　Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。
　　同样，我们先来看一个例子（见下图）：

　　看，图中的文字就像是从页面上飞出来一样，并且留下了一层淡淡的影子。
　　实际上在这里应用的就是CSS的DropShadow属性，我们来看一下它的代码：

<html>
　　　<head>
　　　<title>dropshadow </title>
　　　<style>//*定义CSS样式*//
　　　
　　　//*定义DIV范围内的样式，绝对定位，投影的颜色为#FFCCFF，
　　　投影坐标为向右偏移15个像素，向下偏移10个像素*//
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p style=“font-family：matisse itc；font-size：64；
　　　　　　　　font-weight：bold；color：#CC00CC；”>
　　　//*定义字体名称、大小、粗细、颜色*//
　　　Love Leaf </p>
　　 </div>
　　 </body>
　　 </html>

　　和chroma属性一样，Dropshadow属性对图象的支持不好，我指的是JPEG、GIF格式的图象文件。
　　不能支持的原因与Chroma一样，因为这种图象的颜色很丰富，很难找到一个投射阴影的位置。

　　本节讲述了Dropshadow属性的应用，下一节将向您介绍FlipH、FlipV的属性应用。

2005-9-27 12:57:55

2/3页

发短信
购买论坛点券
我能做什么
我发表的主题
我参与的主题
基本资料修改
用户密码修改
联系资料修改
用户短信服务
编辑好友列表
用户收藏管理
个人文件管理
论坛通行证设置

今日贴数图例
主题数图例
总帖数图例
在线图例
在线情况
用户组在线图例

文件集浏览
图片集浏览
Flash浏览
音乐集浏览
电影集浏览
贺卡发送

网上贸易创造奇迹! 阿里巴巴 Alibaba

页面执行时间 0.12500 秒, 4 次数据查询