整合20个CSS/CSS3常用属性

这里我总结了一下平时自己在项目中经常用到的20个 css 常用的样式，都是些个人的经验，这里分享给大家，希望对大家有所帮助 1.强制文本单行显示：white-space:nowrap; 2.设置溢出文本显示为省略标记：text-overflow:ellipsis; (注：text-overflow:clip | ellipsis | ellipsis-word;（ css3 新增加的） 其中clip表示直接裁切溢出的文本； 值ellipsis表示文本溢出时，显示省略标记(...)，省略标记代替最后一个字符； 值ellipsis-word表示文本溢出时，也是显示省略标记(...),不同的是，省略标记代替的是最后一个词) 3.例如一段代码： 当点击a标签里面的图片的时候，有虚线框，IE中图片还有边框，如何解决？ 解决办法： a{outline:none;}//主要是针对火狐等浏览器，但IE不行img{border:0;}a:active{noOutline:expression(this.onFocus=this.blur());}//解决IE6，IE7中的虚线框。 对于a标签来说，一般简单的解决办法是： 在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。 立即学习 “ 前端免费学习笔记（深入） ”； 测试 但是当连接太多的时候，一个一个的加这段代码不实用 4.html中两张图横向回车导致间隙,怎么才能去除成为无间隙？ 例如：p 宽300px ; img 宽100px; border:0px; 代码如下:

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

这种情况就无法在横向显示三张图，因为回车导致两图间有间隙。 解决办法就是让图片 浮动 。 5.css ie6、ie7中overflow:hidden无效解决办法 产生原因： 当父元素的直接子元素或者下级子元素的样式拥有 position :relative 属性 时，父元素的overflow:hidden 属性就会失效。 解决办法： 我们在IE 6、7 内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。 解决这个bug很简单，在父元素中使用 *position:relative; 即可解决该bug 6. 表格 语法 代码如下: ...表格位置,置左 ...表格位置,置中 ...背景图片的URL=就是路径网址 ...设定表格边框大小(使用数字) ...设定表格的背景颜色 ...设定表格边框的颜色 ...设定表格暗边框的颜色 ...设定表格亮边框的颜色 ...指定内容与格线之间的间距(使用数字) ...指定格线与格线之间的距离(使用数字) ...指定表格的栏数 ...设定表格外框线的显示方式 ...指定表格的宽度大小(使用数字) ...指定表格的高度大小(使用数字) ...指定储存格合并栏的栏数(使用数字) ...指定储存格合并列的列数(使用数字) 7.CSS text-transform text-transform 属性控制文本的大小写。 可能的值 值 描述 none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。 inherit 规定应该从父元素 position 0 text-transform 属性的值。 8. position 1 letter-spacing 属性增加或减少字符间的空白（字符间距）。 例如： letter-spacing: 2px; 9.textarea去掉右侧滚动条，去掉右下角拖拽 代码：  10.css中透明度兼容代码：filter: alpha(opacity=80);opacity:0.8; 11.根据input的type来控制css样式 a. 用css中的type选择器 input[type="text"] { position 2:#FFC; } b.用css的expression判断 position 3 input{ background-color:expression(this.type=="text"?'#FFC':''); } c.用javascript脚本实现(觉得没必要，省略...) 12：text-stroke [ text-stroke-width ]：设置或检索 position 4中的文字的描边厚度 [ text-stroke-color ]：设置或检索对象中的文字的描边颜色 13：text-stroke text-stroke(文本描边)和text-fill-color(文本填充色)注意点： 目前这两个属性只有webkit内核的Safari和 position 5ome支持，例如： -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 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 14： position 6 text-shadow:0px 0px 0px #333333; 属性值依次：水平方向位移（支持负值）、垂直方向位移（支持负值）、模糊半径、阴影颜色 text-shadow对同一个text，可设置多个阴影，与box-shadow类似，使用逗号","分割，前一个设置效果在后一个设置效果之上。 15.设置字体 代码如下:

复制

16. css强制性换行 代码如下:

复制{

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

17.CSS position 7 选择器,: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( position 8,#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 浏览器 position 9实现渐变只能使用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;}

【相关推荐】 1. 属性 0 2. 属性 1 3. 属性 2 4. 属性 3 5. 属性 4