20个CSS/CSS3常用样式汇总

所属分类: 网页制作 / CSS 阅读数: 1026
收藏 0 赞 0 分享

1.强制文本单行显示:white-space:nowrap;

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>
//上面情况刚好显示三张图</p> <p><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"] { background-color:#FFC; }
b.用css的expression判断表达式

input{ background-color:expression(this.type=="text"?'#FFC':''); }
c.用javascript脚本实现(觉得没必要,省略...)

12:text-stroke
[ text-stroke-width ]:设置或检索对象中的文字的描边厚度 [ text-stroke-color ]:设置或检索对象中的文字的描边颜色

13:text-stroke
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

14:text-shadow
text-shadow:0px 0px 0px #333333;
属性值依次:水平方向位移(支持负值)、垂直方向位移(支持负值)、模糊半径、阴影颜色
text-shadow对同一个text,可设置多个阴影,与box-shadow类似,使用逗号","分割,前一个设置效果在后一个设置效果之上。

15.设置字体


复制代码
代码如下:

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

16. css强制性换行

复制代码
代码如下:

{</p> <p>word-break:break-all; /支持IE,chrome,FF不支持/
word-wrap:break-word;/支持IE,chrome,FF/
}

17.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表示“隔二取一”

18. 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  代表横向渐变 
19 IE8不识别rgba写法

20 css3的RGB颜色和HSL颜色
其中RGB颜色的原理是通过定义不同的红绿蓝色值来组成一个颜色。color:rgb(254,2,8);
其中HSL是通过色相、饱和度、亮度模式来申明颜色的。color:hsl(359,99%,40%);

如果需要设置透明背景 则可以用到他们:
background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);

不使用opacity的原因是:opacity使里面的元素也透明了,而上面的不会。

20.初始化em,u的斜体

em,u{font-style: normal;}

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多