肃宁云天网络
网站建设知识

常用css样式表

2015/12/24 11:31:28  作者:安小云  点击:

常用的css样式

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

2).

3).

4).

5).

6).

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

发表建议

肃宁云天网络