css小贴士备忘录_html/css_WEB-ITnose

前言：在CSS的学习实践过程中，我经常遗忘一些貌似常用的代码，为了能够强化记忆特在此作归纳整理并将陆续增删，以备即时查阅。但愿今后能遇到问题及时解决，牢牢记住这些奇怪的字符们。

一、关于段落文本强制对齐

text-align:justify; text-justify:inter-ideograph;

若要文本两端对齐，必须先定义P的宽度，然后 { text-align:justify; text-justify :distribute-all-lines; }

二、给按钮的不同状态加CSS

Html代码

.over { ... } .down { ... } --> onMouseOver="this.className='over';" onMouseOut="this.className=' ';" onMouseDown="this.className='down';" onMouseUp="this.className='over';" value="未被点击的按钮" onClick="this.value='被点击的按钮'" name="Button">

三、 在一个CSS文件中导入另一个CSS

@import url(***.css);

四、渐变背景色（使用这个一定得加width或height)

FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#EEF5F8,endColorStr=#ffffff);

使用这个时必须注意要对该DIV定义width或height值。

Css代码

.gradient { /* Firefox 3.6 */ background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Safari & Chrome */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* IE6 & IE7 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; }

background:#f4faff\9;
background:linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;
background:-moz-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;
background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f1f9ff)) no-repeat;
background:-o-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat

五、用PNG图片在IE6中做出透明效果

*html #id{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=images/*.png); background:none; }

六、单行省略文本

{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

使用这个时必须注意要对需要省略文本的单行(如div或li)定义width值。

七、设为首页和加入收藏的代码

Html代码

设为首页|联系我们|加入收藏

八、中文描边效果

Java代码

body { font:12px "Verdana"; filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100); } .sizscolor { font-size:14px; font-weight:bold; position:absolute; padding:4px; filter: Dropshadow(offx=1,offy=0,color=white) Dropshadow(offx=0,offy=1,color=white) Dropshadow(offx=0,offy=-1,color=white) Dropshadow(offx=-1,offy=0,color=white); } -->

中文描边效果

查看更多关于css小贴士备忘录_html/css_WEB-ITnose的详细内容...