常用的css样式

1). 电话数字字体 font:bold 24px/36px Georgia,"微软雅黑",Arial,Helvetica,sans-serif; font-family:impact;

2).

1. Text-transform用于将所有字母变成小写字母、大写字母或首字母大写：

p {text-transform: uppercase}        //所有字母转换为大写

p {text-transform: lowercase}        //所有字母转换为小写

p {text-transform: capitalize}          //首字母大写

2. Font Variant用于将字体变成小型的大写字母（即与小写字母等高的大写字母）。

p {font-variant: small-caps}

3. 将一个容器设为透明，可以使用下面的代码：

.element { filter:alpha(opacity=50); -moz-opacity:0.5;  -khtml-opacity: 0.5; opacity: 0.5; }

在这四行CSS语句中，第一行是IE专用的，第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。

4. 如何使用CSS生成一个三角形？

先编写一个空元素

将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：

.triangle{border-color: transparent transparent green transparent;border-style: solid;border-width: 0px 10px 10px 10px; height: 0px;width: 0px; }

5. css强制换行与禁止换行

1)       word-break: break-all; 只对英文起作用，以字母作为换行依据。

2)       word-wrap: break-word; 只对英文起作用，以单词作为换行依据。

3)       white-space: pre-wrap; 只对中文起作用，强制换行。

word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自动换行，它们的区别在于：

word-break:break-all

假设div宽度为450px，它的内容就会到450px自动换行，如果该行末端有个很长的英文单词，它会把单词截断，一部分保持在行尾，另一部分换到下一行。

word-wrap:break-word

例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉。

禁止换行: white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

white-space:nowrap; 是禁止换行。

overflow:hidden; 是让多出的内容隐藏起来，否则多出的内容会撑破容器。

text-overflow:ellipsis; 让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器，Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能，多出的内容只能隐藏起来。获得焦点的表单元素 input:focus { border: 2px solid green; }

6. CSS阴影

外阴影：.shadow{-moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc;}

内阴影：.shadow{-moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000;}

7. 使用text-indent来隐藏文本

h1{text-indent:-9999px;margin:0 auto;width:400px;height:100px;background:transparent url("1.png") no-repeat scroll;}

8. css段落缩进

text-indent:2em（text-indent只对p或div标签有效，对br标签不生效，原因是br标签是换行标签不是分段标签。）

9. 段落首字下沉

p:first-letter{display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px;font-family:Georgia;}

10. 圆角

.round{-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; /* for old Konqueror browsers */ border-radius: 10px; /* future proofing */}

11. @font-face

@font-face也是CSS3的属性之一，他能在所有浏览器下运行。最大的作用就是让用户没有字体的浏览下也能支持网页字体，具体使用：

@font-face {font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');}

h2{font-family:'Graublau Web';}

12. 垂直居中

水平居中处理起来相当的简单的，但是垂直居中处理起来还是相当的烦，特别是要兼容IE的浏览器情况下：

div{height: 100px; line-height: 100px; white-space: nowrap;}

img{vertical-align: middle;}

13. X>Y

div#container > ul {border: 1px solid black;}

X Y和X > Y的差别就是后面这个指挥选择它的直接子元素。看下面的例子：

#container > ul只会选中id为’container’的div下的直接ul元素。它不会定位到li下的ul元素。

14. X[title]

a[title] {color: green;}

这个叫属性选择器，上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想想如果你想更加具体的去筛选？

15. X:not(selector)

div:not(#container){color: blue;}

取反伪类是相当有用的，假设我们要把除id为container之外的所有div标签都选中。那上面那么代码就可以做到。

或者说我想选中所有出段落标签之外的所有标签。

*:not(p){color: green;}

16. X:first-child

ul li:first-child{border-top: none;}

这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。

17. X:last-child

ul > li:last-child {color: green;}

跟first-child相反，last-child取的是父标签的最后一个标签。

18. X:last-child

transform:skew(165deg, 0deg);
-webkit-transform: skew(165deg, 0deg);    /* for Chrome || Safari */
-moz-transform: skew(165deg, 0deg);       /* for Firefox */
-ms-transform: skew(165deg, 0deg);        /* for IE */
-o-transform: skew(165deg, 0deg);         /* for Opera */

19. li:last-of-type 取最后一个li元素

例如：.proList li:last-of-type {display: none !important;}

20. css rgba

例如：background:rgba(0,0,0,0.6)

：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
：Saturation(饱和度)。 取值为0%到100%之间的值；
：Lightness(亮度)。 取值为0%到100%之间的值；
：alpha(透明度)。 取值在0到1之间；

21. 表格样式

产品参数	技术参数
卷筒直径：	280mm