HTML & CSS » CSS使用技巧收集,包含CSS2/CSS3

CSS使用技巧收集,包含CSS2/CSS3

发表于: HTML & CSS. 评论
Sponsor


目前来说大部分网站都已经采用CSS来架构网页了,所以很多人都在学习CSS,以下是一些CSS比较常用的技巧,CSS2/CSS3的都有,可能有些你已经知道,但有些是新的,都值得一看,而且也很适合新手们去学习。

01.DIV水平居中

DIV 水平居中很简单,只需要设置DIV的宽带以及让左右margins设置成auto:

div#container {width: 960px; margin: 0 auto }

02.文字垂直居中

单行文字居中,只需要将行高和容器高度设置成一样即可。比如下面的HTML代码:

<div id="container">我是一行字</div>

然后通过下面的样式就可以居中:

div#container {height: 35px; line-height: 35px;}

如何你有很多行字,只要将行高设置成容器的高度的1/N就好。

03.DIV垂直居中

比如有以下两个div,如何让包在中间的div垂直居中,这里有一篇详细的介绍文章

<div id="f">
 <div id="s">Some Things!</div>
</div>

首先,将外层容器的定位为relative。

div#f{ position:relative; height:500px; }

然后,将里面的容器定位设置成absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。

div#s { position: absolute; top: 50%; height: 250px; margin-top: -125px; }

使用同样的思路,也可以做出水平居中的效果。

04.自适应宽带的图片

可以通过以下样式实现只适用外层容器大小的图片:

img {max-width: 100%} 
/* IE 6 hack */
<!--[if IE 6]>
img {width: 100%} 
<![endif]-->

05.3D按钮

要想让按钮具有3D效果,可以将它的左上部边框设为浅色,右下部边框设为深色即可。

div#button {
   background: #888;
   border: 1px solid;
   border-color: #999 #777 #777 #999;
  }

06. CSS Font 缩写

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   font-weight: normal;
   font-variant: small-caps;
   font-style: italic;
   line-height: 150%;
}
/* 可以缩写成以下这种方式 */
body {
   font: font-style font-variant font-weight font-size/line-height font-family;
}

详细介绍参见:A Primer on the CSS Font Shorthand Property

06.可以在DIV上设置多个class

<div>content</div>
  class-2 {color: blue}  
  class-3 {color: green}  
  class-1 {color: red}

08.圆角

CSS3中很容易实现圆角:

.element {border-radius: 5px}

但是在CSS3还没全民普及之前我在 Safari, Chrome, 之类 webkit 核心的浏览器中使用 -webkit-border-radius 以及在 Firefox 这些基于 Mozilla 的浏览器使用 -moz-border-radius 来实现圆角。

/* Safari, Chrome */
.element {
   border-radius: 5px
   -webkit-border-radius: 5px
   -moz-border-radius: 5px
}
/* Firefox */
.element {
   border-top-left-radius: 5px
   -webkit-border-top-left-radius: 5px
   -moz-border-radius-top-left
}

至于其他的浏览器可以用JQuery 插件来实现圆角。

 $(".element").corner("5px");

09.link 状态的设置顺序

 a:link  
 a:visited  
 a:hover  
 a:active

简单记忆法:love hate (LVHA)

10.Clearing and Containing Floats

使用 float 和 clear 设置容器的排序,具体的还是看这篇文章吧。

11.条件注释

条件注释只适用于IE这个杯具的浏览器。

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
< ![endif]-->
<!--[if IE 6]> - targets IE6 only -->
<!--[if gt IE 6]> - targets IE7 and above -->
<!--[if lt IE 6]> - targets IE5.5 and below -->
<!--[if gte IE 6]> - targets IE6 and above -->
<!--[if lte IE 6]> - targets IE6 and below -->

12.HTML Hack for IE

IE这个杯具的浏览器可以通过以下方式进行 hack 。被hack的css只会运行在特定的浏览器上。

/* the following rules apply only to IE6 */
* html{
}
* html body{
}
* html .foo{
}

/* the following rules apply only to IE7 */
*+html .foo{
}

13.CSS的优先级

基本规则是:行内样式 > id样式 > class样式 > 标签名样式。

14.IE中min-height修正

由于IE6不支持min-height,我们可以通过以下这些方式修正:

/* 方法一 */
.element {
 min-height: 500px;
 height: auto !important;
 height: 500px;
}

/* 方法二 */
.element {
 min-height: 500px
 _height: 500px /* _ 只有IE6才能读取 */
}

15.font-size 基准

/* 假设浏览器的默认的大小是 16px , 首先将其设置为10px (font-size:10/16) */
body {font-size:10/16;} 
/* 然后就可以用em做统一字体单位了 2.4em = 24px */
h1 {font-size: 2.4 em}

16.100% Height

通过内部容器将页面撑开,在IE中的min-height可以通过上面hack解决:

  html, body {height: 100%}
  #content {min-height: 100%}

17. CSS Drop Caps

首字母样式定义:

p:first-letter {
  display: block;
  float: left;
  margin: 5px 5px 0 0;
  color: red
  font-size: 1.4em;
  background: #ddd;
  font-family: Helvetica;
}

18.取消link外面的框框

a {outline: none} or a {outline: 0}

19.Text-transform

p {text-transform: uppercase} /* 全部大写 */
p {text-transform: lowercase} /* 全部小写 */
p {text-transform: capitalize} /* 首字母大写 */

20.Font Variant

只对英文有效,将字体整成等高的大写字体。

p {font-variant: small-caps}

21.移除带有链接的图片的外框

  a image {border: none} or a image {border: 0}

22.重置浏览器的CSS

参考 YUIEric Meyer 吧。

23.设置背景图的 Padding

  /* background-position {top-value left-value} */
  {background-position: 5px 5px}

24.用图片列表标志

默认情况下,浏览器是用一个黑圆圈作为列表标志,我们用图片取代它:

  ul {list-style: none}
  ul li {
    background-image: url("dot.png");
    background-repeat: none;
    background-position: 0 0.5em;
  }

25.透明容器

如何将容器设置成透明:

.element {
  filter:alpha(opacity=50); /* for ie */
  -moz-opacity:0.5; /* for ff */
  -khtml-opacity: 0.5; /* for webkit as chrome */
  opacity: 0.5; /* for opera */
}

26.三角形

如何使用CSS生成一个三角形?简单方案:将它四个边框中的三个边框设为透明,只剩下一个,就可以生成三角形效果:

.element {
  border-color: transparent transparent green transparent;
  border-style: solid;
  border-width: 0px 300px 300px 300px;
  height: 0px;
  width: 0px; 
}

27. 禁止自动换行

h1 { white-space:nowrap; }

28.用图片替换文字

为了杯具的SEO,我需要在标题栏里用图片展现,同时也要保证搜索引擎能读到标题。

h1 {
  text-indent:-9999px;
  background:url("h1-image.jpg") no-repeat;
  width:200px;
  height:50px;
}

29.突显焦点元素

input:focus { border: 2px solid green; }

30.!important

多条CSS语句冲突时,具有!important的语句将覆盖其他语句。由于IE不支持!important,所以也可以利用它区分不同的浏览器。

/* IE 显示蓝色标题,其他浏览器显示红色标题 */
h1 {
  color: red !important;
  color: blue;
}

31.CSS实现提示框

当鼠标移动到链接上方,会自动出现一个提示框:

  <a href="#">Link<span>Tooltips</span></a>
  a.tooltip {position: relative}
  a.tooltip span {display:none; padding:5px; width:200px;}
  a:hover {background:#fff;} /*background-color is a must for IE6*/
  a.tooltip:hover span{display:inline; position:absolute;}

32.固定页头

当页面滚动的时候,页首固定在位置不变,适合导航条:

body{ margin:0;padding:100px 0 0 0;}
  div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:<length>;
}

@media screen{
 body>div#header{position: fixed;}
}

* html body{overflow:hidden;}
* html div#content{height:100%;overflow:auto;}

参考文章:47 CSS Tips & Tricks To Take Your Site To The Next Level

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }