首页 > 代码库 > css小贴士备忘录
css小贴士备忘录
前言:在CSS的学习实践过程中,我经常遗忘一些貌似常用的代码,为了能够强化记忆特在此作归纳整理并将陆续增删,以备即时查阅。但愿今后能遇到问题及时解决,牢牢记住这些奇怪的字符们。
一、关于段落文本强制对齐
若要文本两端对齐,必须先定义P的宽度,然后 { text-align:justify; text-justify :distribute-all-lines; }
二、给按钮的不同状态加CSS
- <style type="text/css">
- <!--
- .over { ... }
- .down { ... }
- -->
- </style>
- <input type="button"
- onMouseOver="this.className=‘over‘;"
- onMouseOut="this.className=‘ ‘;"
- onMouseDown="this.className=‘down‘;"
- onMouseUp="this.className=‘over‘;"
- value=http://www.mamicode.com/"未被点击的按钮"
- onClick="this.value=http://www.mamicode.com/‘被点击的按钮‘" name="Button">
三、在一个CSS文件中导入另一个CSS
@import url(***.css);
四、渐变背景色(使用这个一定得加width或height)
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#EEF5F8,endColorStr=#ffffff);
使用这个时必须注意要对该DIV定义width或height值。
- .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=http://www.mamicode.com/images/*.png); background:none; }
六、单行省略文本
{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
使用这个时必须注意要对需要省略文本的单行(如div或li)定义width值。
七、设为首页和加入收藏的代码
- <a style="BEHAVIOR: url(#default#homepage)" onclick="this.style.behavior=‘url(#default#homepage)‘;this.setHomePage(‘http://www.hengdong8.cn‘);" href=http://www.mamicode.com/"javascript:" target="_self">设为首页</a>|<a href=http://www.mamicode.com/"contact.htm">联系我们</a>|<a href=http://www.mamicode.com/"javascript:window.external.AddFavorite(‘http://www.hengdong8.cn‘,‘衡东吧‘)" target="_self">加入收藏</a>
八、中文描边效果
- <style type="text/css">
- <!--
- 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);
- }
- -->
- </style>
- </head>
- <body><div class="sizscolor">中文描边效果</div>
- </body>
九、调整字间距
{ text-transform: uppercase; letter-spacing: 2px }
十、margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如: <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px; /*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
十一、把鼠标放在图片上会出现图片变亮的效果
可以用图片替换的技巧,也可以用如下的滤镜,代码如下:
.pictures img { filter: alpha(opacity=45); }
.pictures a:hover img { filter: alpha(opacity=90); }
十二、区分不同浏览器
IE6 | IE7 | FF | |
* | √ | √ | × |
!important | × | √ | √ |
另外再补充一个,下划线”_ “,
IE6支持下划线,IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6 ,IE7 ,firefox
: background:orange ;* background:green ;_ background:blue ;
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
十三、单行图片文字垂直居中对齐
style *{vertical-align:middle;.....}
十四、input加样式(1)
input[type~=radio]
{
...
}
含义:请将所有的input应用下面的style,但是其type属性是radio的input则例外。
十五、input加样式(2)
<input type="submit" class="btn" onm ouseover="this.className=‘btnOver‘" onm ouseout="this.className=‘btn‘" onm ousedown="this.className=‘btnDown‘" value="http://www.mamicode.com/确认" />
<input id="" name="" type="text" class="input1" onblur="this.className=‘input1‘" onfocus="this.className=‘input1-bor‘" />
十六、给文字加阴影
h1 { float: left; text-indent:0em; text-shadow:black 2px 2px 2px; filter: dropshadow(OffX=2, OffY=2, Color=‘black‘, Positive=‘true‘);
十七、用Javascript和CSS去掉链接中的虚线框和下划线
在链接标签中添加onFocus="if(this.blur)this.blur()"这句代码即可屏蔽点击时四周出现的虚线框,如:
<A href="http://www.cce.com.cn" onFocus="if(this.blur)this.blur()"& gt;中国电脑教育报</a>
十八、 input type="image"
十九、删除链接上的虚线框
a:active, a:focus { outline:none; }
二十、改变上传按钮的样式
- <META NAME="Generator" CONTENT="EditPlus">
- <META NAME="Author" CONTENT="">
- <META NAME="Keywords" CONTENT="">
- <META NAME="Description" CONTENT="">
- </HEAD>
- <BODY>
- <input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
- <input type="button" value=http://www.mamicode.com/"浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">
- <input type="file" id="path" style="display:none" onchange="upfile.value=http://www.mamicode.com/this.value">
- </BODY>
- </HTML>
或
- <span id="uploadImg">
- <input type="file" id="file" size="1" style="width:100" class="upload">
- <a href=http://www.mamicode.com/"#">上传</a></span>
- #uploadImg{ font-size:12px; overflow:hidden; position:absolute; left:190px; top:6px; }
- #uploadImg a { color:#000; line-height:24px; text-align:center; display:block; width:70px; margin:0; height:24px; border:1px solid #aecbd3; background:url(../images/btnbj.gif) repeat-x 0 0; }
- #file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}
- <style>
- input{border:1px solid green;}
- div {width:300px;position:relative;}
- p {float:left}
- .file {position:absolute;top:20px;right:300px;+top:0;+right:73px;width:0px;height:30px;
- filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
- #txt {height:29px;margin:1px}
- #ii {width:70px;height:27px;margin-top:2px;}
- </style>
- <div>
- <form method="post" action="" enctype="multipart/form-data">
- <p>
- <input type="text" id="txt" name="txt" />
- </p>
- <p>
- <input id="ii" type="image" src=http://www.mamicode.com/"http://bbs.blueidea.com/images/blue/logo.gif" value=http://www.mamicode.com/"请选择文件" />
- </p>
- <p>
- <input type="file" onchange="txt.value=http://www.mamicode.com/this.value" class="file" />
- </p>
- </form>
- </div>
二十一、css bug
IE6 | IE7 | IE8 | Firefox | Chrome | Safari | |
!important | Y | Y | ||||
_ | Y | |||||
* | Y | Y | ||||
*+ | Y | |||||
\9 | Y | Y | Y | |||
\0 | Y | |||||
nth-of-type(1) | Y | Y |
css小贴士备忘录