五条非常重要的CSS技巧

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

  今天向大家介绍另外五条非常重要的CSS技巧,可能有重复,大家多多理解这些知识一定有收益。
一、图像替换文本

#header h1 a{
display:block;
text-indent:-9999em;
background:(images/logo.png) no-repeat 0 0;
height:87px;
width:250px;
overflow:hidden;
}
  看得懂这个吗?我看到很多们都LOGO都只是用图片代替,而没有链接。其他,只需要更简单的方法,利用图像替换文本的方法,显示LOGO,并拥有链接。各个值的功能display:block; a的默认状态是inline的,需要让它变成块状的,才可能定义高度和宽度,以适应LOGO的宽高。另外的一个功能是,让链接在text-indent后,在原区域可点击。
  text-indent:-9999em; - 难道你想删除logo中的文字?这样应该是你的最后选择。因为这不符合语议标记,所以,也对搜索引擎不友好。而这个值就是让你的字体缩进到看不到的地方。让你不用删除文字。
  其他的不用讲了吧…
二、display:inline-block;

  在写sofished daily的CSS时,在顶站定日期的空间,就用了display:inline-block;顾名思义,就是在内联情况也的块状,可以设定高度宽度。在GR看到一篇share讲了说到了跨浏览器显示这个显示display:inline-block的方法:
.element-class {
display: -moz-inline-stack; //Firefox only code
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
}
  好处是什么?好处就是不用使用float,在一行中显示设定宽高的元素。不过,上面提到的跨浏览器,貌似我在IE下依然可以显示,难道是IE tester的问题?
三、用line-height文字垂直居中

  你可能知道用text-align来让文字水平剧中,不过,却找不到更直接的方法来让元素垂直居。这里,或许你可以利用一下line- height。比如你要在导航中让文字简直居中于导航,可能会想到用padding和margin,不过,这时,烦人的IE可能会给你制造出麻烦,所以,用line-height吧,这是一个更简单的方法:
  上面这张图片的导航高度是28px,你可以给a设定这样的值:#navigation a{font-size:14px;line-height:28px;},这样,就少去了用padding和margin的麻烦了。
四、布局居中

  你会发现,很多网站的布局都是剧中的。原因是方便浏览,对用户比较好?对于初学CSS的人来说,可能并不知道怎么做吧。很简单,就一句,假设你的布局的那个div壳是#wrapper:
  div#wrapper{margin:0 auto;}
  这就是说,让上面没有margin,而左右自动适应,选择相等的宽度。这样就可以更好地在各个浏览器中表现了。
五、CSS缩写
  CSS缩写,为什么?简单来说有两个好处。一,让你写代码更有效率,因为短;二方便修改,谁也不想对着一堆杂乱的代码发呆。貌似有很多人写过这个,不过,这里,就重复一下吧。我并不想直接写出所有,这样文章看起来似乎特别长,就给一些链接看看,你就明白了。
CSS常用属性缩写实例https://www.jb51.net/css/divcss-8021.html
CSS代码缩写实例以及CSS缩写原因总结https://www.jb51.net/css/divcss-8019.html
CSS缩写6个图例总结https://www.jb51.net/css/divcss-8018.html
CSS缩写优化CSS文件的体积https://www.jb51.net/css/divcss-6331.html
更多精彩内容其他人还在看

js 解决隐藏与显示div的相关问题

我的导航中就有一栏产品中心下面用隐藏个div然后鼠标放上去就显示出来,但是导航那一块div一直出不来,什么都没有,很是郁闷不知道是什么原因
收藏 0 赞 0 分享

关于clearBoth在GOOGLE Chrome中的问题解决方法

下面这段CSS在IE中好好的,但在GOOGLE Chrome中总是不行,我调测了无数次。问题就出在 clearBoth 这个样式上,此问题如何解决,写下来详细介绍
收藏 0 赞 0 分享

用css margin去掉横排图片之间的间距

HTM,CSS,怎样去掉横排图片之间的间距,是我们的一大头疼问题,于是本人搜集整理一下,晒出来和大家分享,希望可以帮助你们
收藏 0 赞 0 分享

关于li:hover的怎么清除浮动问题实现代码

当鼠标移动上去时,周围显示一个方框,但是后面的会向后移动,如何才能使得当鼠标移上去时后面的li不浮动
收藏 0 赞 0 分享

ie6不支持两个连续并列class类名怎么解决

在网页布局中会使用到两个连续的class,但唯独ie6不支持,很郁闷,于是搜索整理下,晒出来和大家分享
收藏 0 赞 0 分享

如何在class内写xsl标记注意事项

想要在class中写一个xsl标记,想要知道应该如何来写出正确的代码语句,请详看本文
收藏 0 赞 0 分享

ie10 css hack 条件注释等兼容方式整理

ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来解决
收藏 0 赞 0 分享

IE6双倍边距 IE6浏览器会出现双倍边距解决方法

所谓的IE6双倍边距就是指当元素有float属性,又有margin属性时,在IE6下面显示的margin的值是设置值的两倍,这个问题从有css技术时就已经诞生,本文将介绍详细解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

css 网页背景图片 怎样用CSS实现大背景网页效果

在网页设计制作中经常会遇到这样的问题:用图片做背景时,由于显示器分辨率太大或者图片尺寸太小,在页面的两边或者下部了没有背景图片,使页面变的很僵硬,于是搜集整理一些,晒出来和大家分享
收藏 0 赞 0 分享

CSS字体中英文名称对照表 CSS常用中文字体英文名称对照表

在CSS文件中,我们常看到有些字体名称变成了乱码,这是由于编写者将中文字体的名字直接写成了中文,为了避免这种状况出现,在CSS文件中使用中文字体时,最好使用中文字体的英文名称,需要的朋友可以注意下
收藏 0 赞 0 分享
查看更多