CSS/CSS3常用样式小结

1.强制文本单行显示：

white-space:nowrap;

多行文本最后省略号：

display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis;

2.设置溢出文本显示为省略标记：

text-overflow:ellipsis;

(注：text-overflow:clip | ellipsis | ellipsis-word;（css3新增加的）
其中clip表示直接裁切溢出的文本；
值ellipsis表示文本溢出时，显示省略标记(...)，省略标记代替最后一个字符；
值ellipsis-word表示文本溢出时，也是显示省略标记(...),不同的是，省略标记代替的是最后一个词)

3.例如一段代码：<a href="javascript:void(0)"><img src="images/suba.gif"></a>

当点击a标签里面的图片的时候，有虚线框，IE中图片还有边框，如何解决？
解决办法：

a{outline:none;}//主要是针对火狐等浏览器，但IE不行
img{border:0;}
a:active{noOutline:expression(this.onFocus=this.blur());}//解决IE6，IE7中的虚线框。

对于a标签来说，一般简单的解决办法是：
在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。

<a href="#"onfocus="this.blur();">测试</a>

但是当连接太多的时候，一个一个的加这段代码不实用

4.html中两张图横向回车导致间隙,怎么才能去除成为无间隙？

例如：div 宽300px ; img 宽100px; border:0px;

<div><img /><img /><img /></div>

//上面情况刚好显示三张图

<div><img /><img /><img /></div>

这种情况就无法在横向显示三张图，因为回车导致两图间有间隙。
解决办法就是让图片浮动。

5.css ie6、ie7中overflow:hidden无效解决办法

产生原因：
当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时，父元素的overflow:hidden 属性就会失效。

解决办法：
我们在IE 6、7 内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用 *position:relative; 即可解决该bug

6.表格语法

<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

7.CSS text-transform

text-transform 属性控制文本的大小写。

none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。

8. letter-spacing

letter-spacing 属性增加或减少字符间的空白（字符间距）。
例如： letter-spacing: 2px;

9.textarea去掉右侧滚动条，去掉右下角拖拽

代码： 

<TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA>

10.css中透明度兼容代码：

filter: alpha(opacity=80);opacity:0.8;

11.根据input的type来控制css样式

a. 用css中的type选择器

input[type="text"]{ }

b.用css的expression判断表达式

input{ }

c.用javascript脚本实现(觉得没必要，省略...)

12：text-stroke

[ text-stroke-width ]：设置或检索对象中的文字的描边厚度   [ text-stroke-color ]：设置或检索对象中的文字的描边颜色
text-stroke(文本描边)和text-fill-color(文本填充色)注意点：
目前这两个属性只有webkit内核的Safari和Chrome支持，例如： -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color：颜色值，和color属性差不多都是文字的样式；
同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；
text-fill-color可以使用透明值，即：text-fill-color：transparent

13：text-shadow

text-shadow:0px 0px 0px #333333;

属性值依次：水平方向位移（支持负值）、垂直方向位移（支持负值）、模糊半径、阴影颜色
text-shadow对同一个text，可设置多个阴影，与box-shadow类似，使用逗号","分割，前一个设置效果在后一个设置效果之上。
box-shadow 参考：http://www.cnblogs.com/lhb25/archive/2013/02/20/css3-box-shadow.html

14.css3设置字体

<style> 
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
    url(‘Sansation_Light.eot‘); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>

15. css强制性换行

{

word-break:break-all; /*支持IE，chrome，FF不支持*/

word-wrap:break-word;/*支持IE，chrome，FF*/

}
 

 16.CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效，不识别)

:nth-child(2)选取第几个标签，“2可以是你想要的数字”
:nth-child(2n)选取偶数标签，2n也可以是even
:nth-child(2n-1)选取奇数标签，2n-1可以是odd
:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

17. css3实现背景颜色渐变

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);

       第一个参数：设置渐变的起始位置

       第二个参数：设置起始位置的颜色

       第三个参数：设置终止位置的颜色

IE 浏览器

     IE浏览器实现渐变只能使用IE自己的滤镜去实现

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

    第一个参数：渐变起始位置的颜色

    第二个参数：渐变终止位置的颜色

    第三个参数：渐变的类型

    0 代表竖向渐变        1  代表横向渐变  

18.css3的RGB颜色和HSL颜色， IE8不识别rgba写法

font-size: 17px; border-radius: 6px; color: rgb(255, 255, 255); font-family: 微软雅黑, 宋体, 黑体, Arial; height: 26px; line-height: 25px; text-shadow: rgb(34, 34, 34) 2px 2px 3px; margin: 12px 0px !important; background: rgb(119, 119, 119);">19.初始化em，u的斜体

em,u{font-style: normal;}

20.取消手机页面点击a中图片出现的虚线框问题

-webkit-tap-highlight-color: transparent;

-webkit-touch-callout: none;

-webkit-user-select: none; 

21.媒体查询功能:

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){

//自己添加的样式

}

其中对于-webkit-min-device-pixel-ratio作如下解释：

22.CSS美化Placeholder提示信息的样式兼容：

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

/* WebKit browsers */::-webkit-input-placeholder {color: #777;}

/* Mozilla Firefox 4 to 18 */:-moz-placeholder {color: #777;opacity: 1;}

/* Mozilla Firefox 19+ */::-moz-placeholder {color: #777;opacity: 1;}

/* Internet Explorer 10+ */:-ms-input-placeholder {color: #777;}

23.清除IOS系统手机对input框的默认样式：

-webkit-appearance:none; 

24.取消点击a标签出现的高亮：

-webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */

25.开发移动端页面时候，经常会设置滚动条的默认样式：

  /* 设置滚动条的样式 */
    - ::-webkit-scrollbar {
    - width:12px;
    - }
    - /* 滚动槽 */
    - ::-webkit-scrollbar-track {
    - -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    - border-radius:10px;
    - }
    - /* 滚动条滑块 */
    - ::-webkit-scrollbar-thumb {
    - border-radius:10px;
    - background:rgba(0,0,0,0.1);
    - -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
    - }
    - ::-webkit-scrollbar-thumb:window-inactive {
    - background:rgba(255,0,0,0.4);
    - }

26.为移动端页面中滑动滚动条的时候，添加惯性效果的方法：

div{height:100%;overflow-y:auto;}

-webkit-overflow-scrolling:touch;

-webkit-transform:translate3d(0,0,0);

27.样式实现三角形：

position:absolute;
left:50%;
bottom:0;
margin-left:-10px;
width:0;
height:0; 
border-width:10px;
border-style:solid dashed dashed dashed;
border-color:transparent transparent #71151c transparent;

28.移动端实现控制文本行数

display: -webkit-box;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;

29. css3水平垂直居中

display: box; 
display: -webkit-box; 
display: -moz-box; 
-webkit-box-pack:center; 
-moz-box-pack:center; 
-webkit-box-align:center; 
-moz-box-align:center; 

30.Css--input输入框点击时去掉外框outline:medium;(chrome)

outline:medium;

31.移动端字体

/* 移动端定义字体的代码 */

body{font-family:Helvetica;}

32.禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

 33.禁止ios和android用户选中文字

.css{-webkit-user-select:none}

34.打电话发短信，发邮件的怎么实现

打电话：<a href="tel:0755-10086">打电话给:0755-10086</a>

发短信：winphone系统无效，<a href="sms:10086">发短信给: 10086</a>

发邮件：<a href="mailTo:10086@qq.com">10086@qq.com</a>

 

35.css3属性 -webkit-filter(改变模糊度 亮度 透明度等方法)

　　-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。

现在规范中支持的效果有：

    - grayscale 灰度               值为0-1之间的小数 

    - sepia 褐色　　　　　　   值为0-1之间的小数

    - saturate 饱和度　　　　 值为num

    - hue-rotate 色相旋转　　值为angle

    - invert 反色　　　　　　  值为0-1之间的小数

    - opacity 透明度　　　　　值为0-1之间的小数

    - brightness 亮度　　　　 值为0-1之间的小数

    - contrast 对比度　　　　 值为num

    - blur 模糊　　　　　　     值为length

    - drop-shadow 阴影

用法是标准的CSS写法，如：

使用方法：（配合动画使用）

.jaguar-con-show img.jaguar-con-imglast{               
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
}
.jaguar-con-show img.jaguar-con-imglast{   
    -webkit-filter: blur(3px) brightness(.6);
    -moz-filter: blur(3px) brightness(.6);
    -o-filter: blur(3px) brightness(.6);
    -ms-filter: blur(3px) brightness(.6);    
    filter: blur(3px) brightness(.5); 
    -webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    /*border: 3px solid #000;*/
}

36.CSS pointer-events

Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。

如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素.

 

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。