字体属性
font-family字体:各种字体
font-style字体样式:italic、oblique
font-variant小体大写:small-caps
font-weight字体粗细:bold、bolder、lighter…
font-size字体大小:absolute、relative、%
color字体颜色:颜色值
颜色与背景属性
Color颜色:颜色值
Background-color背景色:颜色值
Background-image背景图案:图片路径
Background-repeat背景图案重复方式:Repeat-x | repeat-y | no-repeat
Background-attachment背景的滚动:Scroll | fix
Background-position背景图案初始位置:% | n em | top | left | right | bottom …
文本属性
word-spacing单词间距:n em
letter-spacing字母间距:n em
text-decoration装饰样式:underline| overline| line-through| blink
vertical-align垂直方向位置:sub| super |top |text-top| middle| bottom| text-bottom
text-transform转为其他形式:capitalize| uppercase| lowercase
text-align对齐:left| right| center| justify
text-indent缩进:n em| %
line-height行高:pixels、n em、%
对链接的修饰
A:hover 鼠标划过时的状态
A:active 鼠标点中不放时的状态
A:link 未访问时的状态
A:visited 访问过后的状态
text-decoration:underline下划线
边距属性
margin-top上边距：n em | %
margin-right右：n em | %
margin-bottom下：n em | %
margin-left左：n em | %
填充属性
padding-top上填充：n em | %
padding-right右：n em | %
padding-bottom下：n em | %
padding-left左：n em | %
边框属性
Border-top-width上边框宽度：n em | thin | medium | thick
Border-right-width右：同上
Border-bottom-width下：同上
Border-left-width左：同上
Border-width四边：同上
Border-color边框颜色：Color
Border-style边框样式：Dotted | dash | solid | double | groove | ridge | inset | outset
Border-top |right|bottom|left上(右|底|左)所有属性：Border-width | border-style | color
eg：p{border:10px double purple}
图文混排
Width宽度：n em | %
Height高度：n em
Float文字环绕：Left | right
clear去除文字环绕：Left | right | both
列表属性
Display 是否显示：Block | inline | list-item | none
White-space空白部分：Pre | nowrap | normal（是否合并)
List-style-type项目编号：Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
List-style-image项目前图片：Img-url
List-style-position第二行位置:Inside | outside
List-style全部属性:Keyword | position | url
eg:li{list-style-type:upper-roman}
eg:li{list-style-image:url(images/03.jpg)}
鼠标属性
Auto自动
Crosshair"+"
Default默认
Hand手形
Move移动
E-resize右箭头
Ne-resize右上
Nw-resize左上
N-resize上箭头
Se-resize右下
Sw-resize左下
S-resize下箭头
W-resize左箭头
Text"I"
Wait沙漏
help帮助
定位属性
Position位置:Absolute|relative|static
Left | top横向|纵向位置:N em | %
Width | height宽度|高度:同上
Clip剪切:Shape | auto
Overflow内容超出时:Visible | hidden | scroll | auto
Z-index立体效果:Integer
visibility可见性:Inherit | visible | hidden
er:
<HTML>
<HEAD>
<TITLE>定位属性</TITLE>
<STYLE type=text/css>
#container1 {POSITION: absolute; TOP: 100px}
#container2 {VISIBILITY: hidden; POSITION: absolute; TOP: 100px}
P{FONT-SIZE: 12pt}
</STYLE>
</HEAD>
<BODY>
<P style="FONT-SIZE: 15pt; COLOR: #cc33cc; FONT-FAMILY: 行书体">请选择一幅图片: </P>
<DIV id=container1>
<IMG height=280 src="images/sand.jpg" width=185>
<P style="FONT-SIZE: 12pt; COLOR: #cc9933; FONT-FAMILY: 行书体">名称：大漠</P>
</DIV>
<DIV id=container2>
<IMG height=280 src="images/ocean.jpg" width=185>
<P style="FONT-SIZE: 12pt; COLOR: #3366cc; FONT-FAMILY: 行书体">名称：大海</P>
</DIV>
<FORM name=myform>
<P>
<INPUT onclick="container1.style.visibility='visible'; container2.style.visibility='hidden'" type=button value=大漠>
<INPUT onclick="container2.style.visibility='visible'; container1.style.visibility='hidden'" type=button value=大海>
</P>
</FORM>
</BODY>
</HTML>
eg:
<HTML>
<HEAD>
<TITLE>zindex</TITLE>
<STYLE type=text/css>
.pile {LEFT: 2in; WIDTH: 3in; POSITION: absolute; TOP: 2in; HEIGHT: 3in}
.pile1 {LEFT: 3in; WIDTH: 1in; POSITION: absolute; TOP: 2in; HEIGHT: 1in}
</STYLE>
</HEAD>
<BODY>
<IMG class="pile" id=image style="Z-INDEX: 1" src="images/flower.jpg">
<DIV class="pile" id=text1 style="Z-INDEX: 3; COLOR: #ffff33">
<font size=5 color="red"><b>将覆盖在图片上。 </b></font>
</DIV>
<IMG class="pile1" id=image style="Z-INDEX: 2" src="images/mouse.gif">
</BODY>
</HTML>
滤镜属性
Alpha 半透明
Blur 模糊
Chroma 指定颜色透明
Dropshadow 投射阴影
Fliph 水平翻转
Flipv 垂直翻转
Glow 光效
Invert 底片
Light 灯光投影
Mask 透明膜
Shadow 阴影
Wave 波纹
Xray X射线
Grayscale 灰度
eg:
<HTML>
<HEAD>
<TITLE>blur css</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT>
function handlechange(obj)
{
with(obj.filters(0))
{
if (strength<255)
{
strength +=2;
//direction +=45;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<P>
<IMG id=img1 onfilterchange=handlechange(this) style="FILTER: wave(strength=1)" src="images/02.jpg">
</P>
</BODY>
</HTML>