2 .font-style:选择font-family字体下的italic或oblique样式
3 .font-variant:字体变体.这种感觉是英文用的多一点
4 .font-weight:指定了字体的粗细程度,一些字体只提供了normal和bold两个值
5 .font-size:指定字体的大小.该属性的值被用于计算em和ex长度单位,定义该值可能改变其他元素的大小
6 .line-height
7 .font-family:给定一个先后有序的,由字体名或者字体族名组成的列表来为选定的元素设置字体
1 .kerning字距定义了字母的分布情况.对于良好的规定了字据的字体,字据特性使得字母分布更加统一,阅读体验更好.
2 .也就是除了letter-spacing,还有这个属性可以决定字距
3 .基本是英文里面才会用到
4 .auto:浏览器决定是否使用字体字据.一些浏览器会在小字体的情况下禁用字距.因为这会使得文本可读性下降
5 .normal:必须使用字体中的字距信息
6 .none:禁用字体中的字距信息
1 .大多数西方标准字体包括斜体字和粗体字体，但许多新颖字体却没有。用于中文、日文、韩文和其他文字的字体往往不包括这些变体，综合起来可能会妨碍文本的可读性。在这种情况下，关闭浏览器的默认字体合成可能是可取的
2 .也就是说要用none
3 .大部分中文一般也不会开斜体,但是粗体是需要的
4 .weight:这个关键词表示,如果需要可以合成粗体字形
5 .style:这个关键词表示,如果需要,可以合成斜体字型
6 .感觉css有时又很神奇,竟然实现一些js绝对不能做的事情
1 .当第一个字体不能用,浏览器使用第二个指定字体的时候,这可能会导致改变字体大小,为了防止这种情况,使用font-size-adjust属性
2 .定义字体大小应该取决于小写字母,而不是大写字母.在字体较小的时候,字体的可读性主要由小写字母的大小决定
1 .wider使得文本更宽
2 .narrower 使得文本窄
3 .ultra-condensed 使文本窄得不能再窄
4 .extra-condensed 指定紧缩程度第二大的字体
5 .condensed指定略微紧缩程度第二大的字体
6 .semi-condensed 指定略微紧缩的字体
7 .normal 指明字体既不紧缩也不加宽
8 .semi-expanded指定略微加宽的字体
9 .expanded 指定加宽的字体
10 .extra-expanded 指定加宽程度第二大的字体
11 .ultra-expanded 指定加宽程度最大的字体
12 .inherit 指定该属性与元素父项的属性采用相同的计算值
1 .text-indent:用域指定文本第一行的缩进
2 .letter-spacing:用域指定文本中字符之间的间距
3 .line-height:设置行与行之间的间距
4 .word-spacing:用域文本单词与单词之间的间距
5 .white-space:指定元素内部空白的处理方式 white-space:nowrap:空白不换行
<html><head>
<title>怎样使图片半透明</title>
<meta content="text/htmlcharset=gb2312" http-equiv="Content-Type">
<style type="TEXT/CSS">.cool {
BORDER-BOTTOM-WIDTH: 1pxBORDER-LEFT-WIDTH: 1pxBORDER-RIGHT-WIDTH: 1pxBORDER-TOP-WIDTH: 1pxCURSOR: handFONT-SIZE: 9pt
}
A {
TEXT-DECORATION: none
}
A:hover {
COLOR: #ff9900TEXT-DECORATION: underline
}
TD {
FONT-SIZE: 9ptLINE-HEIGHT: 13pt
}
TH {
FONT-SIZE: 9ptLINE-HEIGHT: 13pt
}
BODY {
FONT-SIZE: 9ptLINE-HEIGHT: 13pt
}
.tm {
FILTER: Alpha(Opacity=50)
}
.style2 {
FILTER: Alpha(Style=2)
}
.style1 {
FILTER: Alpha( Style=1, StartX=30, StartY=20,FinishX=15,FinishY=5)
}
</style>
<meta content="Microsoft FrontPage 6.0" name="GENERATOR">
</head>
<body bgColor="#ffffff" link="#6699FF" vLink="#6699CC">
<center>
<table cellPadding="0" cellSpacing="0" width="484">
<TBODY>
<tr vAlign="top">
<td width="490"><table cellPadding="0" cellSpacing="0" width="100%">
<TBODY>
<tr>
<td vAlign="top" width="397">
<div
id="Layer1" style="HEIGHT: 31pxLEFT: 138pxPOSITION: absoluteTOP: 166pxWIDTH: 14px">
<dd>
<img class="tm" src="images/girl.gif" width="32" height="32"></dd>
</div>
<script>
//这是使图层移动的函数
function move_layer()
{
Layer1.style.left=event.clientX+document.body.scrollLeft+10
Layer1.style.top=event.clientY+document.body.scrollTop+10
}
//这里的意思是，如果鼠标移动时就调用"move_layer"函数
document.onmousemove =move_layer
</script>
</td>
</tr>
</TBODY>
</table>
</td>
</tr>
<tr>
<td vAlign="top" width="490">
<table cellPadding="0" cellSpacing="0" width="392">
<TBODY>
<tr>
<td height="1" vAlign="top" width="3"></td>
<td vAlign="top" width="11"></td>
<td height="22" vAlign="top" width="487">
<table cellPadding="0" cellSpacing="0" class="hs"
width="487" height="269">
<TBODY>
<tr align="middle">
<td height="33" colspan="3" width="485" valign="bottom">
<p align="center"><font size="2" color="#FF0000">怎样使图片半透明</font></p>
</td>
</tr>
<tr vAlign="top">
<td width="185" height="236"><span style="font-size:10.5ptmso-bidi-font-size:10.0pt
font-family:宋体mso-ascii-font-family:"Times New Roman"mso-hansi-font-family:
"Times New Roman"mso-bidi-font-family:"Times New Roman"mso-font-kerning:1.0pt
mso-ansi-language:EN-USmso-fareast-language:ZH-CNmso-bidi-language:AR-SA"></span>
<span style="mso-bidi-font-size:10.0pt
font-family:宋体mso-ascii-font-family:"Times New Roman"mso-hansi-font-family:
"Times New Roman"mso-bidi-font-family:"Times New Roman"mso-font-kerning:1.0pt
mso-ansi-language:EN-USmso-fareast-language:ZH-CNmso-bidi-language:AR-SA">
经常在网上见到半透明的图片吧！图片不会遮挡住后面的文字，想知道怎么做的吗，很简单，</span><span style="mso-bidi-font-size:10.0ptfont-family:宋体mso-hansi-font-family:
"Times New Roman"mso-bidi-font-family:"Times New Roman"mso-font-kerning:1.0pt
mso-ansi-language:EN-USmso-fareast-language:ZH-CNmso-bidi-language:AR-SA">这就是<span lang="EN-US">CSS样式表单滤镜Alpha的<span style="color:black">强大功能，</span>仅用短短的几行代码，就实现了以上效果，</span></span>你应该看到了一个半透明的图片吧！ <br>
用的图片是这张：<img align="top" height="32" src="images/girl.gif" width="32"><br>
为了更加清楚的看到效果。我们让图片跟随鼠标! 产生半透明效果的方法用了CSS样式！<br>
</td>
<td width="68" height="236">
</td>
<td width="228" height="236">第一种效果:<font color="#006666">Alpha( Style=1, StartX=30, StartY=20, FinishX=15,
FinishY=5)</font><br>
<img alt="返回首页!" border="0" class="style1" height="69" src="images/PHOT046.JPG"
width="206"><br>
<br>
第二种的效果.<font color="#006666">Alpha(Style=2)</font><br>
<img alt="返回首页!" border="0" class="style2" height="65" src="images/PHOT046.JPG"
width="206"><br>
其他参数自己试试吧！<br>
<br>
</td>
</tr>
</TBODY>
</table>
</td>
</tr>
</TBODY>
</table>
</td>
</tr>
<tr align="right">
<td width="490"></td>
</tr>
</table>
<p align="center"></p>
</center>
</body>
</html>
或者
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>用CSS控制透明图片</title>
</head>
<body>
<style>
body{ font-size:12px}
#top{position:absolute}
#top a img{-moz-opacity:0.5filter:alpha(opacity=50)border:0px}
#top a:hover{font-size:9px}
#top a:hover img{-moz-opacity:0.5filter:alpha(opacity=80)cursor:hand}
</style>
<div>
<div id="top"><a href="http://www.jscode.cn" target="_blank"><img src="http://www.jscode.cn/Uploadfile/200682495750348.JPG" /></a></div>
这里是一些文字</div>
</body>
</html>
