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

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

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

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

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

  1. <style type="text/css">
  2. <!--
  3. .over { ... }
  4. .down { ... }
  5. -->
  6. </style>
  7. <input type="button"
  8. onMouseOver="this.className='over';"
  9. onMouseOut="this.className=' ';"
  10. onMouseDown="this.className='down';"
  11. onMouseUp="this.className='over';"
  12. value="未被点击的按钮"
  13. 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值。

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

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值。

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

  1. <a style="BEHAVIOR: url(#default#homepage)" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.hengdong8.cn');" href="javascript:" target="_self">设为首页</a>|<a href="contact.htm">联系我们</a>|<a href="javascript:window.external.AddFavorite('http://www.hengdong8.cn','衡东吧')" target="_self">加入收藏</a>

 

八、中文描边效果

  1. <style type="text/css">
  2. <!--
  3. body {
  4. font:12px "Verdana";
  5. filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100);
  6. }
  7. .sizscolor {
  8. font-size:14px; font-weight:bold;
  9. position:absolute;
  10. padding:4px;
  11. filter:
  12. Dropshadow(offx=1,offy=0,color=white)
  13. Dropshadow(offx=0,offy=1,color=white)
  14. Dropshadow(offx=0,offy=-1,color=white)
  15. Dropshadow(offx=-1,offy=0,color=white);
  16. }
  17. -->
  18. </style>
  19. </head>
  20. <body><div class="sizscolor">中文描边效果</div>
  21. </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); }

十二、区分不同浏览器

区别FF ，IE7 ，IE6 ：
background:orange ;* background:green !important ;*background:blue ;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
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" onmouseover="this.className='btnOver'" onmouseout="this.className='btn'" onmousedown="this.className='btnDown'" value="确认" />

<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; } 

 

二十、改变上传按钮的样式

  1. <META NAME="Generator" CONTENT="EditPlus">
  2. <META NAME="Author" CONTENT="">
  3. <META NAME="Keywords" CONTENT="">
  4. <META NAME="Description" CONTENT="">
  5. </HEAD>
  6. <BODY>
  7. <input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
  8. <input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">
  9. <input type="file" id="path" style="display:none" onchange="upfile.value=this.value">
  10. </BODY>
  11. </HTML>

或

  1. <span id="uploadImg">
  2. <input type="file" id="file" size="1"  style="width:100" class="upload">
  3. <a href="#">上传</a></span>
  1. #uploadImg{ font-size:12px; overflow:hidden; position:absolute;  left:190px; top:6px; }
  2. #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; }
  3. #file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}
  1. <style>
  2. input{border:1px solid green;}
  3. div {width:300px;position:relative;}
  4. p {float:left}
  5. .file {position:absolute;top:20px;right:300px;+top:0;+right:73px;width:0px;height:30px;
  6. filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
  7. #txt {height:29px;margin:1px}
  8. #ii {width:70px;height:27px;margin-top:2px;}
  9. </style>
  10. <div>
  11. <form method="post" action="" enctype="multipart/form-data">
  12. <p>
  13. <input type="text" id="txt" name="txt" />
  14. </p>
  15. <p>
  16. <input id="ii" type="image" src="http://bbs.blueidea.com/images/blue/logo.gif" value="请选择文件" />
  17. </p>
  18. <p>
  19. <input type="file" onchange="txt.value=this.value" class="file" />
  20. </p>
  21. </form>
  22. </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小贴士备忘录的更多相关文章

  1. [html]CSS 小贴士

    CSS 中用四个伪类来定义链接的样式,分别是:a:link.a:visited.a:hover 和 a : active,例如: a:link{font-weight : bold ;text-dec ...

  2. 【小贴士】虚拟键盘与fixed带给移动端的痛！

    前言 今天来公司的主要目的就是研究虚拟键盘与fixed的问题,期间因为同事问起闭包与事件委托(阻止冒泡)相关问题,便穿插了一篇别的: [小贴士]工作中的”闭包“与事件委托的”阻止冒泡“,有兴趣的朋友可 ...

  3. Angular2 小贴士 Name

    Angular2 正式版已经发布了一个月了,我也是通过各种方式在进行验证是否可以满足我们的需求,今天我就发现了一个问题.现在我们来一起说明一下,这个可能不算是bug,而应该需要我们记住就可以了. 我们 ...

  4. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  5. SVN小贴士

    我辛辛苦苦写的到哪里了? SVN小贴士SVN服务器上的代码项目组公用,你的每一个提交都会体现给项目组每个人,所以提交要慎重,要注意避免代码冲突,使用SVN小贴士: 1.提前宣布开发计划,保持项目组成员 ...

  6. HTML+CSS小实战案例

    HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...

  7. android性能小贴士 翻译

    转自http://developer.android.com/training/articles/perf-tips.html 性能小贴士: 这篇文档主要一些微优化可以提升应用程序性能,但是这些改变不 ...

  8. CSS小tip整理

    CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...

  9. 小贴士——提高PHP程序在NGINX代理服务器的性能

    NGINX本身就是面向最大性能的代理服务器,因此在使用NGINX,并没有性能调整的配置工作.但是却有很多选项可用于定制NGINX的行为,利用底层硬件和操作系统. 下面将介绍用于提供PHP在NGINX的 ...

随机推荐

  1. tomcat启动时出现了Failed to start component [StandardEngine[Catalina].StandardHost[localhost]]等错误

    tomcat 启动时报错:Failed to start component [StandardEngine[Catalina].StandardHost[localhost]]等错误 解决办法: 是 ...

  2. 关于generate用法的总结

    Abtract generate语句允许细化时间(Elaboration-time)的选取或者某些语句的重复.这些语句可以包括模块实例引用的语句.连续赋值语句.always语句.initial语句和门 ...

  3. node调试的两种方法

    刚开始学node.js的时候,一直在用node-inspector,虽然很麻烦,但聊胜于无.后面公司牛人推荐使用node-webkit,就再也没用过node-inspector.再后来node.js版 ...

  4. 重载tostring()方法重要性

    曾经知道继承于object的类都有这个toString方法,重来没在项目中使用过这方法,同一时候也没对该方法进行重载.在如今这个公司上班,才知道了toString方法的重要性. 并且也懂得了重载tos ...

  5. 淘宝分布式数据层TDDL

    剖析淘宝 TDDL ( TAOBAO DISTRIBUTE DATA LAYER ) 注:原文:http://gao-xianglong.iteye.com/blog/1973591   前言 在开始 ...

  6. Multi-cloud Kubernetes with Triton

    https://www.joyent.com/blog/triton-kubernetes-multicloud While running an experimental Kubernetes cl ...

  7. linux命令（39）：shell 打印偶数行，奇数行 ,行号

    awk 命令: 1. 打印行号和内容: awk '{print NR":"$0}' 2. 输出:偶数行和奇数行到文件 awk '{print $0.txt > NR%2.tx ...

  8. 【Windows】windows核心编程整理（下）

    windows核心编程整理(上) windows核心编程整理(下) 线程的堆栈 每当创建一个线程时,系统就会为线程的堆栈(每个线程有他自己的堆栈)保留一个堆栈空间区域,并将一些物理存储器提交给这个以保 ...

  9. 泛微OA e-cology8 数据库链接

    数据库恢复 数据库恢复的恢复请按照如下步骤进行: Ø 重新安装对应版本的数据库服务软件 Ø 通过数据库软件本身的还原工具还原备份数据库文件 Sqlserver可以通过企业管理器直接还原备份文件或者附加 ...

  10. 使用卷积神经网络CNN训练识别mnist

    算的的上是自己搭建的第一个卷积神经网络.网络结构比较简单. 输入为单通道的mnist数据集.它是一张28*28,包含784个特征值的图片 我们第一层输入,使用5*5的卷积核进行卷积,输出32张特征图, ...