CSS简要知识点

　CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。
　　今天，暴风彬彬整理了一些CSS简写技巧，它们其实是CSS最常用的写法，但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS，使得代码过于臃肿。不过没关系，看过本文之后，你一能能掌握CSS代码优化的技巧，今后让你的每一个CSS样式表都看起来整洁而简短吧。

属性值为0

书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:

padding: 10px 5px 0px 0px;

试试这样吧:

padding: 10px 5px 0 0;

移除选择器

　　选择器是你在为一些元素应用CSS样式时的基本方法，比如h1, h2, h2, div, strong, pre, ul, ol等等;如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。

div#logowrap

尝试扔掉多余的选择器吧:

#logowrap

在这个例子中所谓的那个选择器就是div

*总爱和你开玩笑

　　要明智的使用*而避免它在整个CSS样式表中乱开玩笑，*是个通配符，你可以使用它来为你的设计部分或全部进行一系列CSS声明。例如:

* {
margin: 0; 
}

这个声明会将所有元素的margin值设置为0，同样的，为了严谨起见，你可以尝试这样设置:

#menu * {
margin: 0; 
}

这样的声明是指将#menu下的所有元素的margin设为0。


颜色

　　颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。
　　#000000 可以写成 #000, #336699 可以写成 #369
　　这种简写技巧只适用于成对出现的颜色值，其它颜色值不适用这种技巧，比如:
　　#010101, #223345, #FFF000

关于background的写法
DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}
1）您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。
2）url括号中的引号是没有必要的，我们可以不写引号


CSS border的缺省值

    通常我们定义border属性都会提供color,width,style这些属性。比如 border: 3px solid #000 。不过实际上必须要提供的属性只有style。如果你只写 border: solid 的话，其他的属性自动使用缺省值。border的缺省宽度是medium(大约3px-4px)，缺省的颜色是位于border里面的内容文字的颜色。如果这些缺省值可以满足你的要求，你完全可以省略这两项属性。


CSS中的内容垂直对齐

    用传统的table来实现垂直对齐很容易，只要用 vertical-align: middle 就可以让table的内容垂直居中。但这个属性在CSS里面却行不通。
    解决方法是把内容的行高设置成与内容块一样高。比如你的div高是32px，那就在你的CSS定义里面添加属性 line-height: 32px; 这样文字看上去就垂直居中于层里面了。不过这个方法只适用于单行文字，对于多行文字，似乎没有什么好方法。

类选择符 

　　用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类： 
　　p.right {text-align: right} 
　　p.center {text-align: center} 
然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数： 
　　<p class="right"> 这个段落向右对齐的 
　　</p> 
　　<p class="center"> 
　　这个段落是居中排列的 
　　</p>


注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。 
类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：

.center {text-align: center} 
（定义.center的类选择符为文字居中排列） 
这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符： 
<h1 class="center"> 
这个标题是居中排列的 
</h1> 
<p class="center"> 
这个段落也是居中排列的 
</p> 
注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。

ID选择符

在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。 
ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：

<p id="intro"> 
这个段落向右对齐 
</p> 
定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素： 
#intro 
{ 
font-size:110%; 
font-weight:bold; 
color:#0000ff; 
background-color:transparent 
}

（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明） 
下面这个例子，ID属性只匹配id="intro"的段落元素： 
p#intro 
{ 
font-size:110%; 
font-weight:bold; 
color:#0000ff; 
background-color:transparent 
} 
注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。


优先级

不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：
p { color: #FF0000!important } 
.blue { color: #0000FF} 
#id1 { color: #FFFF00} 
我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。


同时使用两个Class定义
    一般我们只会给内容块指定一个Class，但这并不代表我们只能指定一个。实际上只要你愿意，可以同时把任意多个Class赋给某块内容。比如：
<p class="text side">...</p>
    多个Class之间用空格分隔即可。当多个Class之间的属性发生重叠的时候，将根据各个Class在CSS定义文件中被定义的位置，后定义的Class属性自动覆盖之前定义的Class属性（而不是根据你在class="text side"这里排列的顺序来进行覆盖）


文字

　　文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:150%;
font-family:宋体, Arial, sans-serif;

其实可以优化成一行:

font:italic small-caps bold 1em/150% 宋体, Arial, sans-serif;

 导入外部样式表

导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import，看下面这个实例：

<head> 
…… 
<style type=”text/css”> 
<!-- 
@import “mystyle.css” 
其他样式表的声明 
--> 
</style> 
…… 
</head>

例中@import “mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。 
注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。

注意：依照后定义的优先，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。

为Gecko编写你的基本样式，然后为Webkit和IE做调整

把你自己从排除故障的头疼中拯救出来，先为Gecko浏览器（Firefox, Mozilla, Netscape, Flock, Camino)写css。如果你的css在Gecko中工作得很好，它也很可能在Webkit（Safari, Chrome）和IE中也没有问题。


下面是 block 级对象和 inline 级对象的基本区别:

  • Block 级对象会自然地水平充满其父容器，因此没有必要为之设置 100% 宽度属性
  • Block 级对象的起始摆放位置是其父容器的左上边界，并顺排在其前面的兄弟 Block 对象的下方（除非设置 float 或绝对位置）
  • Inline 级对象会忽略其宽度和高度设置
  • Inline 级对象会随着文字排版，并受排版属性的影响（如 white-space, font-size, letter-spacing）
  • Inline 级对象可以使用 vertical-align 属性控制其垂直对齐，block 级对象不可以
  • Inline 级对象的下方会保留一些自然的空间，以适应字母 g 一类的会向下探出的笔画
  • 一个设置为 float 的 inline 对象将变成 block 对象

    任何一个HTML元素都是block或者inline的。
    block元素的特性包括：
    总是另起一行开始显示
    height, line-height, top/bottom margin属性可以被设置
    width缺省值是100%,除非你指定了另外的width值
    这一类的HTML元素包括<div>, <p>, <h1>, <form>, <ul> 以及 <li>等。
    inline元素的特性包括：
    直接跟在当前行的后面显示
    height, line-height, top/bottom margin属性不能改变
    width值就等于包含其中的文字/图片的宽度，并且这个值不能被改变
    这一类的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。
    你可以通过设置元素属性display: inline 或 display: block来改变元素的以上特性。


  • 设置页面的最小宽度
    CSS语法中很有用的一个属性是 min-width 。通过这个属性你可以设置任何元素的最小宽度。也就是说你也可以用这个来限制页面显示的最小宽度。
    但有个小问题是：IE浏览器无法为<body>元素设置min-width，因此要让这个属性起作用，我们需要走点弯路。
    首先在<body>后面插入一个<div>：
    <body>
    <div class="container">
    然后在CSS定义里面定义最小宽度为600px：
    #container
    {
    min-width: 600px;
    width:expression(document.body.clientWidth < 600? "600px": "auto" );
    }
    第一个属性是最小宽度定义的标准写法；第二个属性则是只有IE能够理解的javascript表达式。
    你也可以同时设定页面的最大最小宽度：
    #container
    {
    min-width: 600px;
    max-width: 1200px;
    width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
    }
  • 关闭输入法状态
    使用户只能输入英文状态下的字符，类似输入密码
    input {ime-mode: disabled ; }

    以下是使用 float 和 clear 属性的一些重要准则:

    • 一个 float 对象，将从其置身的 block 级非 float 内容流中跳出，换句话说，如果你要将一个 box 向左边 float，它后面的 block 级非 float 对象会显示到下方，inline 级内容会在旁边包围
    • 要让一段内容从一侧包围一个 float 对象，这段内容必须要么是 inline 级的，要么也设置为相同方向的 float
    • 一个 float 对象，如果没有设置宽度，则会自动缩成其包含的内容的宽度，因此最好为 float 对象明确设置宽度
    • 如果一个 block 对象包含 float 子对象，会出现本文中阐述的问题。
    • 一个设置了 clear 属性的对象，将不会包围其前面的 float 对象
    • 一个既设置了 clear 又设置了 float 属性的对象，只有 clear:left 属性生效，clear:right 不起作用

      利用border属性确定出错元素的布局特性

      使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

      float元素的父元素不能指定clear属性

      MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

      float元素务必指定width属性

      很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
      另外指定元素时尽量使用em而不是px做单位。

      float元素不能指定margin和padding等属性

      IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。

      float元素的宽度之和要小于100%

      如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 

IE 浏览器最常见的问题

  • IE6 中不可滥用 float，否则会带来内容消失以及文字重复等稀奇古怪的问题
  • IE6 中，float 对象，在 float 方向的那边，会出现双倍 margin，将 display 设置为 inline 会解决这个问题
  • IE6/7 中，一个没有直接或间接设置 hasLayout 的对象，会发生各种稀奇古怪的问题 （译者注：对这类问题，zoom 这个css 属性可以帮很大的忙，将 zoom 设置为除了 normal 之外的其它值，可以迫使一个对象 hasLayout同时不影响这个对象的任何视觉外观）
  • IE6 不支持 min-width, max-width, min-height, max-height 一类的属性
  • IE6 不支持固定位置背景图
  • IE6/7 不支持很多 display 属性值（如 inline-table, table-cell, table-row）
  • IE6 中，只有 a 这个对象才可以使用 :hover 这个伪类
  • IE 的某些版本对某些 CSS 选择器支持很少（如属性选择器，子对象选择器）
  • IE6~8 对 CSS3 的支持很有限 (不过有一些变通方法)

给你的CSS代码排序
如果代码中的属性都能按照字母排序，那查找修改的时候就能更加快速:
/*** 样式属性按字母排序 ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}


选择更优的样式属性值
CSS中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如
区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
而border:none把border设为"none"即没有，浏览器解析"none"时将不作出渲染动作，即不会消耗内存值。所以建议使用border:none;
同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。


使用<link>代替@import

首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。 


使用外部样式表
这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内 置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：
<style type="text/css" >
#container{ .. }
#sidebar{ .. }
</style>
而是使用<link>导入外部样式表：<link rel="stylesheet" type="text/css" href="css/styles.css" />


避免使用CSS表达式（Expression）

CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：
background-color: expression( (new Date()).getHours()%2 ?"#B8D4FF" : "#F08A00" );
如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。

代码压缩
当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor，利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

posted @ 2011-09-26 19:47  Wonderful Life  阅读(236)  评论(0)  编辑  收藏  举报