BlogJava-礼必风-随笔分类-HTML&CSS技术http://www.blogjava.net/bily/category/17258.htmlIT不等于itzh-cnFri, 02 Mar 2007 06:54:21 GMTFri, 02 Mar 2007 06:54:21 GMT60HTML参考http://www.blogjava.net/bily/archive/2006/11/15/81367.html礼必风礼必风Wed, 15 Nov 2006 12:56:00 GMThttp://www.blogjava.net/bily/archive/2006/11/15/81367.htmlhttp://www.blogjava.net/bily/comments/81367.htmlhttp://www.blogjava.net/bily/archive/2006/11/15/81367.html#Feedback0http://www.blogjava.net/bily/comments/commentRss/81367.htmlhttp://www.blogjava.net/bily/services/trackbacks/81367.html    HTML、JavaScript、css虽然很简单，但使用过程中，总会因为遗忘部分语法而在网络中四处奔波查找，趁此闲时，做一个“所见即所得”的HTML参考，以备以后查找。

    包括HTML、JavaScript、css的主要语法参考，使用时可以将该内容拷贝，另存为html文件，看取效果，拷贝所需
<html>
<head>
  <!--定义网页中所有链接的基本URL-->
 <base href='http://127.0.0.1:8080'/>
 <!--meta添加网页不显示的信息，可被搜索引擎使用-->
 <meta http-equiv='reply-to' content='dudu@126.com'/>
 <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
 <meta name='author' content='dudu'/>
 <meta name='copyright' content='copyright 2005,AiYu'/>
 <!--设置页面过去时间，形式为格林威治时间-->
 <meta name='expires' content='Mon,11 October 2005 08:00:00 GMT'/>
 <!--使页面缓存失效-->
 <meta name='pragma' content='no-cache'/>
 <!--设置允许搜索引擎抓取页面, 不允许抓取，应设为none-->
 <meta name='robots' content='all,follow'/>
 <!--定时自动刷新页面，50秒后跳转到sohu文首-->
 <!--meta http-equiv='refresh' contents='5;url=news.sohu.com.cn'/-->
</head>
<body bgcolor='blue' link='green' alink='orange' vlink='red'>
 <!--该处的链接相对与http://127.0.0.1:8080-->
 <!--如果一个URL包含了协议，那么基本值将被忽略-->
 <!--a href='index.html'>index</a-->
<br>
<pre>
css example
<!--选择器：由样式定义的一种特殊的标志符号
    定义样式：首先必须列出选择器，然后在一对括号之间列出所有的样式限制和标准
用冒号:分隔样式限制和样式标准，用分号分隔独立的样式限制和样式标准
例：h1{color:red;text-align:center},这里h1是选择器
    加入样式定义有3中方法：
 1>作为外部文件：样式表可以通过<link>标识符看到，文件名应为.csss
  <link rel='stylesheet' type='text/css' href='external.css'/>
  rel:指明外部文件是一种样式表，应被设为styllesheet
  type:为外部文件定义MINE类型，应用设为text/css
 2>嵌入网页中：使用闭合的<style>标识符,这些标识符可以被放置在<head>标识符中
  <style>
   p first{color:red}
   p second{color:blue}
  </style>
  <p class='first'>
  <p class='second'>
 3>内联：样式表可被包含在具有style属性的单一标识符里
  <h1 style=''color:blue'>
将样式运用在特定的文字：
    1><div>标识：一般用于大段文字，有点类似<p>,并且可以包含<align>
    2><spin>标识:一般用于小段文字
-->
</pre>
<pre>
form example
<!--form标记不能嵌套，每一对form标记必须独立于所有其他的form标记而存在-->
<!--get方法将数据放在URL的末尾转送给服务器，post方法将表单数据作为HTTP请求的一部分传给服务器-->
<!--可以将表单结果发送大E-mail,在action中使用mailto:-->
<form action='mailto:pingnet@126.com' method='post'>
 <!--点击submit按钮，数据发送给action属性所指定的URL-->
 <button name='send' type='submit'>submit</button>
 <!--点击reset按钮，清除索引文本域并且将所有其他的表单元素复位-->
 <button name='reset' type='reset'>reset</button> 
 <label tabindex='1'>label:
 <!--文本域，size属性：设置文本域的宽度；maxlength属性：设置用户可以输入一个文本域中的最大字符个数，默认不限制字符个数-->
 <input type='text' name='tt' value='enter something' readonly='yes' size='20' maxlength='20' tabindex='2'/>
 <input type='password' name='pwd' value='dudutu' readonly='yes' size='20' maxlength='20' tabindex='3' disabled='disabled'/>
 </label>
 <!--textarea的wrap属性：默认所有文本保持在一行，如果设置为soft(virtual)，则会包装文本，但文仍然按照一行的格式传给服务器，
 如果设置为hard(physical)，则将换行符也发送给服务器，文本域大写不收浏览器窗口大小限制。
 textarea name='info' rows='1' cols='2' readonly='yes'>
    he he
 <textarea-->
 <input type='checkbox' name='genre' value='drama'/>drama
 <input type='checkbox' name='genre' value='comedy' checked/>comedy
 <input type='checkbox' name='genre' value='romance'/>romance 
 <!--如果没有一个<input>标记包含checked属性，那么没有任何收音机按钮在初始时被选中-->
 <input type='radio' name='price' value='6'/>$6
 <input type='radio' name='price' value='8'/>$8 
 <input type='radio' name='price' value='9' checked/>$9 
 <!--创建图像按钮：使用<input>标记，并且将type属性设置为image,同时可以加入src属性-->
 <!--fieldset标记将多个元素分组到一个域容器中，legend标记用来标注域容器-->
 <fieldset>
 <legend>NameField</legend>
 <label>image button:<input type='image' name='imagebutton' src='dudubase/images/arrow_down.png'></label>
 <input type='hidden' name='date' value='Augest,2005'/>
 <!--select标记：size属性指定可见的列表，第一个selected属性的<option>标记所对应的选项，在该列表初始显示时将被选中，
 如果由若干个<option>标记包含了selected属性，那么最后一个包含了selected属性的<option>标记在初始化时被选中，
 <select>标记可以包含multiple属性，运行用户多项选择，为了多选，需要按ctl或shift,如果包含multple,那么任何<option>可以包含selected属性
 -->
 <select name='view' size='2'>
  <option>theater</option>
  <option selected>drive-in</option>
  <option>television</option>    
 </select>
 </fieldset>
 <!--使用tabindex属性控制Tab键的次序，tabindex可以用于button,input,select和textarea标记中-->
 <!--通过disabled属性可以使表单元素失效-->
 <!--URL编码：URL和表单数据传递到服务器时，它是经过编码处理的，当URL编码时，空格被转换为加号（＋），
 其他可能引起问题的字符用一个百分号（％）跟随一个16进制的ASCII指来标识，这告诉浏览器将该字符替换为特点的符号
 &:（％26）；?：(%3F)；%：(%25)；'：(%22)；数字符号：(％23)；@：(%40)；:号：(%3A)；=：(%3D)；
 URL编码将URL表示成服务器可以识别并且容易解释的一种形式
 -->
</form>
</pre>
<pre>
javaScript example
<!--JavaScript是大小写敏感的-->
<!--使用cookie,document.cookie对象-->
<script language='javascript>
 if(navigator.appName.indexOf('Microsoft')!=-1)
 {
  document.write('you are using microsoft innternnet eploree brower');
 }
 else if(navigator.appName.indexof('Netscape')!=-1)
 {
  document.write('you are using Netscape's communicator brower');
 }
 function makeCookie()
 {
  if(!cookie)
  {
   Name = prompt('please enter your name');
   document.cookie='Name' + Name + ',';
   NameStart = document.cookie.indexOf('=');
   NameEnd = document.cookie.indexOf(';');
   document.write('hello' +
    document.cookie.substring(NameStart + NameEnd));
  }
 }
</script>
<!--产生随机数-->
<script language=''javasript>
 QuoteArray=new Array(
  'neither can I',
  'so you thought about it',
  'yes,I have',
  'I am glad',
  'you had realizee that',
  'I come to that conciusioon');
 RandomNo=Math.floor(QuoteArray.length*Math.random());
 document.write('<b>'+QuoteArray[RandomNo]+'</b>');
</script>
<!--document.write函数可以将文本输出到浏览器-->
<script language='javascript'>
 document.write('<h1>Welcome to here</h1>');
</script>
 <a href='http://news.sohu.com'>link#1</a>
<form name='form1'>
<!--在浏览器窗口状态栏上显示文本-->
 <input type='button' name='statusTxt' value='status text'
 onclick='window.status='welcome to the here';'/>
<!--打开一个新的窗口，通过window.open()函数实现，--> 
 <input type='button' name='openwnd' value='open window'
 onclick='window.open('a.html','a',width='200',height='400');'/>
 <input type='button' name='closewnd' value='close window'
 onclick='window.close();'/>
<!--使用对话框--> 
 <input type='button' name='alert' value='alert'
 onclick='window.alert('welcome');'/>
 <input type='button' name='confirm' value='confirm'
 onclick='window.confirm('welcome');'/>
 <input type='button' name='prompt' value='prompt'
 onclick='window.prompt('welcome','hailen');'/> 
 use String object
 <input type='button' name='Stringbtn' value='String object'
 onclick='document.form1.dateText.value=document.form1.text2.value.toUpperCase();'/>
 use Date object
 <input type='text' name='dateText' size='80'>
 <input type='button' name='DateBtn' value='get date'
 onclick='cDate=new Date();document.form1.dateText.value=cDate.toLocaleString();'/>
 use Math object
 <input type='button' name='MathBtn' value='use Math'
 onclick='document.form1.dateText.value=6*Math.PI;'/>
 double click this button
 <input type='button' name='button1' value='Hello'
 onclick='document.form1.button1.value='ok';'
 ondblclick='document.form1.button1.value='good';'/>
 <input type='button' value='start' ondblclick='document.write('Hai')'/>
 
 onkeypress event,press 'd'
 <input type='text' name='text1' value='try'
 onkeypress='if (window.event.keyCode=='100')
 document.form1.text1.value='you pressed the dkey';'/>
 
 focus event
 <input type='text' name='text2' value='interesting'
 onfocus='document.form1.text2.value='look at';'
 onblur='document.form1.text2.value='the focus is gone.';'/>
 
 onchange event
 <select name='select' size='4'
 onchange='document.form1.text3.value='it is there';'>
  <option>rasoerry</option>
  <option>chocolate</option>
  <option>pralines</option>
  <option>strawberry</option>
 </select>
 <input type='text' name='text3' value='wait'/>
 
 location object
 <input type='text' name='textloc' size='80'>
 <input type='button' name='btnloc' value='location'
 onclick='document.form1.textloc.value=window.location;'/>
 history object
 <input type='button' name='history' value='history'
 onclick='window.history.back();'/>
 links object
 <input type='button' value='change link'
 onclick='document.links[0].href='http://www.microsoft.com';'/>
</form>
move mouse under this picture
<img name='img1' width='300' height='200' src='dudubase/images/2.jpg' onmouseover='document.img1.src='dudubase/images/3.jpg';'
onmouseout='document.img1.src='dudubase/images/4.jpg';'/>

invoke method
<script type='text/javascript'>
 function changebg()
 {
  alert('ha ha');
 }
</script>
 <input type='button' name='button5' value='Hello'
 onclick='changebg();'/>
<!--可以将脚本文件放在一个单独的文件中，用法：<script type='text/javascript' src=''>--> 
<!--
文档对象模型是用来引用一个网页上所有不同的元素的一种结构
父对象是window,window对象包括处理浏览器窗口的各种对象。
document对象是window的子对象，document对象包括组成网页的所有元素
location对象是window的子对象，它标识了目前网页的URL,它包括一个reload()方法，可用来重载当前的网页
history对象能够复制浏览器的“前进”和“后退”按钮，以实现在已经查看的网页之间切换,
history对象包含，back()方法使前一个装载的网页呈现在浏览器
forward()方法显示下一个网页，go()方法可带一个数字参数，可正可负，能向前或向后浏览历史列表中的网页，document.history.go(-2)
links对象保存了包含在网页上的所有链接
-->
</pre>
<pre>
midea example
<a href='dudubase/images/Trumpet1.wav'>Trumpet1.wav</a>
<object data='dudubase/images/Trumpet1.wav' type='audio/wav'>
play sound with object
</object>
<!--添加背景音乐，bgsound标记，该标记只在IE下有效,将loop属性设为infinite,背景乐将无限循环，直到点击浏览器“停止”按钮-->
<!--bgsound src='dudubase/images/NBOOK_01.MID' loop='2'/-->

<a href='dudubase/images/8gamma.avi'>8gamma.avi</a>
<object data='dudubase/images/8gamma.avi' type='video/avi'>
play avi with object
</object>
</pre>

<pre>
framework example
<!--
使用时frameset标记代替body标记
<frameset rows='25%,25%,50%'>
 <frame name='left' src='left.html' frameborder='0'  noresize/>
 <frame name='middle' src='middle.html' marginheight='50'/>
 <frame name='right' src='right.html'/>
</frameset>
<frame/>中，src属性指定帧中显示的内容，name属性指定一个可以被其他网页元素引用的名称
在frameset开始标记中，可以用象素指定帧的实际宽度，而不用比例，
<frameset cols='200,*'>
此时，只需键人数值并删除％号，*代表需要填充剩余空间的帧
设置frameborder=0可以删除帧的边框
marginwidth和marginheight可以设置帧中页面的空白
在frame标记中添加noresize属性可以避免帧被改动
在frame标记中添加scrolling属性可以控制帧窗口出现的滚动条，yes:显示滚动条；no:不显示滚动条；auto：在需要的时候显示滚动条
帧可以嵌套，即frameset中再嵌套frameset
帧的目标：默认当点击连接时，被连接的网页在连接所在的帧中被显示。在<a>标记中加入target属性，指定连接目标，没有个目标需要和一个已经命名的帧向匹配，如果没有匹配的帧，则新开一个窗口，显示网页。
特殊的target属性：_blank:网页在一个没有任何帧的新浏览器显示；_self:网页在当前帧显示；_prent：网页在父帧中显示；_top；网页在没由任何帧的页面显示。

-->
</pre>
<pre>
table example
<!--表格边框border的值是边框宽度的象素个数,默认表格是不显示边框的-->
<!--rules属性控制单元格之间边框的显示方式，取指为：all,none,groups,rows和cols,默认none,all将显示
 所有边框，和border相同，rows,cols只显示行或边框
 width属性以象素或占浏览器窗口的百分率来设定
 文字环绕设置align属性
 通过用th代替tr可以向表格添加标题,使文字粗体显示
 Cellpadding属性在单元格文字和单元格边缘加入空格
 Cellspacing属性在每个单元格之间加入空格
 rowspan和colspan可以实现跨多行的单元格
 caption属性添加表格标题
 thead,tbody,tfoot可以将表格行分为多个部分
 colgroup和col可以将列分为多个部分
-->
<table border='1' width='40%' bgcolor='orange' cellspacing='10' cellpadding='10'>
 <caption align='bottom'>title of the table</caption>
 <thead bgcolor='yellow'>
 <tr>
  <th width='100' height='5' colspan='2'>1 unit</th>
  <td>2 units</td>
 </tr>
 </thead>
 <tr>
  <td align='center' valign='bottom' bgcolor='blue' rowspan='2'>4 units</td>
  <th>5 units</th>
  <td>6 units</td>
 </tr>
 <tr>
  <td>8 units</td>
 </tr>
</table>
</pre>
<pre>
image example
<a href='mailto:dudu@126.com?subject=Hello from web&body=email dudu'><img src='/dudubase/images/1.jpg' width='300' height='200' align='right' vspace='10' hspace='20' border='5' alt='picture description'/></a>
<map name='fany'>
 <area shape='rect' coords='10,2,90,70' href='mailto:dudu@126.com?subject=Hello from web&body=email dudu' alt='img map'/>
 <area shape='poly' coords='20,20,80,80' href='mailto:dudu@126.com?subject=Hello from web&body=email dudu' alt='img map'/>
 <area shape='rect' coords='30,30,70,90' href='mailto:dudu@126.com?subject=Hello from web&body=email dudu' alt='img map'/>
</map>
<img src='/dudubase/images/a.jpg' width='100' height='100' align='right' border='2' usemap='#fany'/>
<!--使用vspace和hspace，可以定义在文字和图像之间的空格数目，它以象素为单位-->
</pre>
<pre>

<!--连接可以是完全的或者是相对的，完全的指：http://www.news.sohu.com,相对连接指在同一个目录
或子目录中定位，子目录通过“/'符合和子目录来确定，还能够在当前目录上使用两点和'/'来确定目录
-->
<a href='http://www.news.sohu.com'>http://www.news.sohu.com</a>
<a href='edu.html'>edu.html</a>
<a href='../car.html'>../car.html</a>
<a href='mailto:dudu@126.com?subject=Hello from web&body=email dudu'>email dudu</a>
<a href='file://e:|img/img/fans/0107_1024[1].jpg'>img</a>
<a href='ftp://ftp.dudu.com'>dudu ftp</a>
<!--名称连接,由于被struts控制，在次无效-->
<a href='#a'>a</a>
<a href='#b'>b</a>
<a href='#c'>c</a>
<a name='a'/>autobiographically
<a name='b'/>bacteriologically
<a name='c'/>characteristically
</pre>
<!--改变文字尺寸-->
<pre>
<!--basefont设置默认的字体尺寸、颜色和网页面貌-->
<font color='red'>font example</font>
<basefont size='2' color='blue' face='arial'/>
<font size='+2' color='orange'>H</font><font size='-2'>a</font><font size='2'>i</font><br>
<font face='Arial'>Arial font</font>
<font face='Book Antiqua'>Book Antiqua font</font>
<font face='Bookman old Style>Bookman ole Sytlefont</font>
<font face='Century'>Century</font>
<font face='schoolbook'>schoolbook font</font>
<font face='Courier'>Courier</font>
<font face='New Garamond'>New Garamond font</font>
<font face='Times New Roman'>Times New Roman</font>
<font face='Verdana'>Verdana</font>
<b>blank</b>
<i>line</i>
<u>under line</u>
<strike>middle line 1</strike>
<s>middle line 2</s>
a<sub>2</sub>
h<sup>3</sup>
<tt>typist font</tt>
<em>emphasize<em>
<strong>emphasize<strong>
<blockquote>blockquote</blockquote>
<acronym>acronym</acronym>
<cite>cite</cite>
<address>address</address>
<ins cite='aa.html' datetime='2005-8-16T14:20:00MST'>inserted text</ins>
<del>delete text</del>
<big>big font</big>
<p>
<small>small font</small>
<!-- 一个网页中必须包含body标记，但如果一个网页被分为多个帧的话，将不使用body标记，而换为frameset标记-->
<!--若浏览器遇到几个连续的空格，它会删除其他空格而只保留一个空格，可以使用pre标记保持所有的空格-->
<pre>
  tag pre example
     It is easy
     but like anything ,
<p>
     you need to work on it.
</pre>
<!--添加标题-->
caption example
<h1 align='center'>big</h1>
<h2 align='left'>bigger</h2>
<h3 align='middle'>bigest</h3>
<h4 align='right'>small</h4>
<h5 aling='justify'>smaller</h5>
<h6>smallest</h6>
<!--使用水平分割线划分段落,noshade：不会掩盖文段格式-->
line example
let me try it on<hr align='center' width='50'>
<hr noshade/>
<hr size='5%' width='10%' align='center'>
<hr size='5' width='10' align='center'>
sign code
<code>#include <stdio.h><br>
<var>int a</var>
main()
{
 printf('enter number!');
}
</code>
<kbd>s</kbd>
<samp>n=123</samp>
</pre>

<pre>
<!--ol中的type包括1、a、A、i、I-->
enmark exampel
<ol start='5'>
 <li/>Aladdin
 <li/>Herclules
 <li/>Peter
</ol>
<ol type='disc'>
 <li/>Aladdin
 <li/>Herclules
 <li/>Peter
</ol>
<!--ul用来构建无序的列表，type包括disc(圆盘)、square(方形)、circle(圆圈)-->
<ul type='circle'>
 <li/>Aladdin
 <li/>Herclules
 <li/>Peter
</ul>
<ol type='a'>
 <li/>Aladdin
 <li/>Herclules
 <li/>Peter
</ol>
<ol type='I'>
 <li value='2'/>Aladdin
 <li value='4'/>Herclules
 <li value='6'/>Peter
</ol>
<ol>
 <li/>Aladdin
  <ul type='circle'>
   <li/>Aladdin
   <li/>Herclules
  </ul>
 <li/>Herclules
  <ul type='circle'>
   <li/>Aladdin
   <li/>Herclules
  </ul> 
 <li/>Peter
  <ul type='circle'>
   <li/>Aladdin
   <li/>Herclules
  </ul> 
</ol>
<!--自定义列表-->
<dl>
 <dt/>html
  <dd/>Hyper Text Markup Language
 <dt/>xml
  <dd/>Extended Markup Language
 <dt/>sgml
  <dd/>ha ha  
</dl>
</pre>

</body>
</html>



礼必风 2006-11-15 20:56 发表评论
]]>Css属性一览表http://www.blogjava.net/bily/archive/2006/11/15/81315.html礼必风礼必风Wed, 15 Nov 2006 09:03:00 GMThttp://www.blogjava.net/bily/archive/2006/11/15/81315.htmlhttp://www.blogjava.net/bily/comments/81315.htmlhttp://www.blogjava.net/bily/archive/2006/11/15/81315.html#Feedback0http://www.blogjava.net/bily/comments/commentRss/81315.htmlhttp://www.blogjava.net/bily/services/trackbacks/81315.html1 字体属性
font-family :"Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; (所有字体)
font-style:normal;italic;oblique
font-variant:normal;small-caps
font-weight:normal;bold;bolder;lithter
font-size:absolute-size relative-size 长度值和百分数
2 颜色和背景属性
color:red；yellow (颜色)定义前景色
background-color:yellow(颜色)定义背景色
background-image:url(.../*.jpg)图片路径
background-repeat:repeat-x;repeat-y;no-repeat
background-attachment:scroll;fixed设置滚动
background-position:top;left;right;bottom;长度和百分数
3 文本属性
word-spacing:normal;长度（定义了各单词之间的间距）
letter-spacing:同上
text-decoration:none;underline;overline;line-through;bink定义字体的装饰
vertical-align:baseline;sub;super;top;text-top;middle;bottom;text-bottom定义元素在垂直方向上的位置
text-transform:capitalize;uppercase;lowercase;none使文本转换为其他形式
text-align:left;right;center;justify(文字分散对齐)定义了文字的对齐方式
text-indent:长度和百分数
line-height:normal;数字和长度和百分数
4 边距属性
margin-top:长度和百分数和auto 设置顶端边距
margin-right
margin-bottom
margin-left
5 填充距属性
padding-top:长度和百分数 设置顶端填充距
padding-right
padding-bottom
padding-left
6 边框属性
border-top-width:thin;medium;thick;长度 设置顶端边框宽度
border-right-width
border-bottom-width
border-left-width
border-width 一次性定义边距的宽度
border-color:颜色
border-style:none;dotted;dash;solid;double;groove;ridge;inset;outsetsolid /*实线框*/
·     dotted /*虚线框*/
·     double /*双线框*/
·     groove /*立体内凸框*/
·     ridge /*立体浮凸框*/
·     inset /*凹框*/
·     outset /*凸框*/
border-rop:border-top-width|border-style|color一次性定义顶端的各种属性
border-right
border-bottom
border-left
7 图文混排
width:长度和百分数auto 定义宽度属性
height:长度;auto
float:left;right;none使文字环绕在一个元素的四周
clear:left;right;none;both定义某一边是否有环绕文字
8 分级属性
display:block;inline;list-item;none定义是否显示
white-space:normal;pre;nowrap决定怎样处理空白部分
list-style-type:disc;circle;square;decimal;lower-roman;upper-roman;lower-alpha;upper-alpha;none
list-style-image:url(.../*.jpg);none在列表项前加图案
list-style-position:inside;outside决定列表项中第二行的起始位置
list-style:keyword|position|url一次性定义前面的列表属性
·     list-style-type:none; /*不编号*/
·     list-style-type:decimal; /*阿拉伯数字*/
·     list-style-type:lower-roman; /*小写罗马数字*/
·     list-style-type:upper-roman; /*大写罗马数字*/
·     list-style-type:lower-alpha; /*小写英文字母*/
·     list-style-type:upper-alpha; /*大写英文字母*/
·     list-style-type:disc; /*实心圆形符号*/
·     list-style-type:circle; /*空心圆形符号*/
·     list-style-type:square; /*实心方形符号*/
·     list-style-image:url(dot.gif); /*图片式符号*/
·     list-style-position:outside; /*凸排*/
·     list-style-position:inside; /*缩排*/
9 鼠标属性
cursor:
auto自动，按照默认状态自行改变
crosshair精确定位“十”字
default默认指针
hand手形
move移动
e-resize箭头朝右方
ne-resize箭头朝右上方
nw-resize箭头朝左上方
n-resize箭头朝上方
se-resize箭头朝右下方
sw-resize箭头朝左下方
s-resize箭头朝下方
w-resiz箭头朝左方
text文本形
wait等待
help帮助
使用图案鼠标光标例如:
body {cursor:url("mything.cur"),url("mything.cur"),text;}
当无法处理光标名单的第一个光标,则会以第二个光标代替
若无法处理任何定义的光标,最后便以一般光标text显示 (图案鼠标光标写法是W3C发布的标准)

9 css定位
position:absolute;relative;static定义位置
left.top:长度和百分数auto指定横向，纵向坐标位置
width.height:指定占用空间的大小
clip:shape|auto剪切
overflow:visible;hidden;scroll;auto内容超出时的处理办法
例子：CSS中的textOverflow属性可以将过多的文字用省略号进行表示，语法如下：
<SPAN style="width:100px;overflow:hidden;text-overflow:ellipsis;">
<NOBR>text to display</NOBR>
</SPAN>
其中overflow必须设置为hidden

z-index:auto;integer产生立体效果
visibility:inherit;visible;hidden定义可见性
10 css滤镜
（1）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代表渐变透明效果的结束坐标。
blur是来设置模糊的。先来看一下它的表达格式：
（2）filter：blur（add=add，direction，strength=strength）
  我们看到blur属性有三个参数：add、direction、strength。
　　Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。 　　　Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默。认值是5像素
（3）Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下：
　　Filter：Chroma（color=color）

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

（5）Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是：
　　Filter：FlipH
　　Filter：FlipV

（6）Filter：Glow（Color=color，Strength=strength）
　　Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。

（7）Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。
　　它的表达式也很简单：
　　Filter：Invert

（8）Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单：
　　Filter：Mask（Color=颜色）

（9）Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的：
　　Filter：Shadow（Color=color，Direction=direction）
　　在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向

（10）Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，
　　　　　　Phase=偏移量，Strength=强度）
　　我们看到Wave属性的表达式还是比较复杂的，它一共有五个参数。Add参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；
　　Freq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。 　　LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。 　　　Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360*25%）的方向开始。

（11）Xray就是X射线的意思。
　　Xray属性，顾名思义，这种属性产生的效果就是使对象看上去有一种X光片的感觉。 它的表达式很简单：
　　Filter：Xray



礼必风 2006-11-15 17:03 发表评论
]]>