20个CSSCSS3常⽤样式汇总
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:Focus=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;
代码: <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:pe=="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('f'),</p> <p> url(''); /* 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);
第⼀个参数:设置渐变的起始位置
css表格样式第⼆个参数:设置起始位置的颜⾊
第三个参数:设置终⽌位置的颜⾊
IE 浏览器
IE浏览器实现渐变只能使⽤IE⾃⼰的滤镜去实现
filter:progid:adient(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;}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论