五条非常重要的CSS技巧

2016-02-19 23:36 2 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐五条非常重要的CSS技巧,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

  今天向大家介绍另外五条非常重要的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;

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)


  在写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的麻烦了。

四、布局居中

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)


  你会发现,很多网站的布局都是剧中的。原因是方便浏览,对用户比较好?对于初学CSS的人来说,可能并不知道怎么做吧。很简单,就一句,假设你的布局的那个div壳是#wrapper:
  div#wrapper{margin:0 auto;}
  这就是说,让上面没有margin,而左右自动适应,选择相等的宽度。这样就可以更好地在各个浏览器中表现了。

五、CSS缩写

  CSS缩写,为什么?简单来说有两个好处。一,让你写代码更有效率,因为短;二方便修改,谁也不想对着一堆杂乱的代码发呆。貌似有很多人写过这个,不过,这里,就重复一下吧。我并不想直接写出所有,这样文章看起来似乎特别长,就给一些链接看看,你就明白了。

CSS常用属性缩写实例http://www.webjx.com/css/divcss-8021.html

代码缩写实例以及CSS缩写原因总结http://www.webjx.com/css/divcss-8019.html

CSS缩写6个图例总结http://www.webjx.com/css/divcss-8018.html

CSS缩写优化CSS文件的体积http://www.webjx.com/css/divcss-6331.html

来源:http://www.tulaoshi.com/n/20160219/1630209.html

延伸阅读
标签: 生活常识
拯救生命非常重要的生活小常识 1、怎么清理地上的玻璃片 如果玻璃片仅仅扎在了肉里,那么你自己把它挑出来就行了。但这个世界上总会有人的运气比别人稍微差了那么一点,广州一个哥们儿不小心摔倒在地上,恰好把一片小玻璃挤进了胳膊上的静脉血管,然后这片玻璃慢慢随着血液进了心脏。等到发现的时候,晚了,这个哥们儿不得不把胸...
每一个HTML标签都有其用法,但我们在写HTML代码时,却常常舍近求远,忽略了很多非常重要且特别有用的标签。 既然HTML中定义了这么多标签,而且每种标签都有其用法,我们为什么不尽量去使用这些标签呢。下面收集并整理了36个常被我们遗忘却非常有用的HTML标签。 1. <!– – :注释2. <!DOCTYPE:文档类型声明 文档类型,会使浏览器使用相...
标签: 痘痘
痘印是痘痘平复以后留下的深红或是浅红的疤痕。当痘印还是红色的时候是可以消除的,但当痘印已经变成黑色或深褐色的时候就很难消除了,所以祛痘印要抓紧时机,越快下手越好。那么什么样的护肤品才是去痘印最有效的产品? 肌肤护理专家提示:祛痘和祛痘印不能混淆,专业祛痘产品主打控油杀菌消炎的功效,而专业祛痘印产品是美白淡化的...
标签: 孕妇
微量元素对优生的重要影响 为了孕育一个健康聪明的宝宝,在备孕之初,不少家庭会根据自身健康的状况补充不同的营养。这其中,补充的最常见、最多得当数对维生素的射入。这是因为微量元素对优生优育有着直接的影响。 医学研究证实,微量元素对人体的生长发育、细胞分裂、组织修复、内分泌和酶类等生理生化机能有着很重要的作用。目前已...
标签: 保姆
了解保姆的基本类型 很多人请保姆时,没有过多思考就直接去劳务市场找,往往这种盲目的找保姆经常是不会有什么收获的。我们在找保姆之前必须要熬了解清楚保姆的类型有哪些。常见的额保姆有:照顾小孩的(包括月嫂和非月嫂),照顾老人,只做家务的,照顾病人的,还有混合型的。同时,保姆还分为住家的不喝不住家的,全天工(但不住家)和钟...

经验教程

624

收藏

51
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部