十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本篇内容主要讲解“有哪些CSS/CSS3常用样式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“有哪些CSS/CSS3常用样式”吧!
10年积累的网站制作、做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有绥阳免费网站建设让你可以放心的选择与我们合作。
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中两张图横向回车导致间隙,怎么才能去除成为无间隙?
例如:div 宽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.表格语法
代码如下:
7.CSS text-transform
text-transform 属性控制文本的大小写。
可能的值
值 描述
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。
8. letter-spacing
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"] { 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.设置字体
代码如下:
16. css强制性换行
代码如下:
{
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/CSS3常用样式”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!