The 18 most commonly used techniques in CSS2.0 that you should know_html/css_WEB-ITnose

一、使用css缩写
　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。 
　　具体内容请浏览：CSS常用缩写语法 

二、明确定义单位，除非值为0。
　　忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。 

三、区分大小写
　　当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，建议所有的定义名称都采用小写。 
　　class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。 

四、取消class和id前的元素限定
　　当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而class可以在页面中多次使用。你限定某个元素毫无意义。例如： 

div#content { /* declarations */ }  
fieldset.details { /* declarations */ }  

可以写成 

#content { /* declarations */ }  
.details { /* declarations */ }  

这样可以节省一些字节。 

五、默认值
　　通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样： 

* {  
margin:0;  
padding:0;  
}  

六、不需要重复定义可继承的值
　　CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。 

七、最近优先原则
　　如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码 
Update: Lorem ipsum dolor set 
　　在CSS文件中，你已经定义了元素p，又定义了一个class="update" 

p {  
margin:1em 0;  
font-size:1em;  
color:#333;  
}  
.update {  
font-weight:bold;  
color:#600;  
}  

这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。 

八、多重class定义
　　一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。 

.one{width:200px;background:#666;} 
.two{border:10px solid #F00;}  

在页面代码中，我们可以这样调用 
　　

  
　　这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。 

九、使用子选择器(descendant selectors)
　　CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码： 

  

  

• Item 1
>  

• 
  Item 1
  

•   Item 1 
 

  

The CSS definition of this code is:

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

You can use the following method to replace the above code

• Item 1


• Item 1
                                                         ：

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

Using subselectors can make your code and CSS more concise and easier to read.

10. There is no need to add quotes to the background image path
In order to save bytes, I recommend not to add quotes to the background image path, because the quotes are not necessary. For example:
background:url("images/***.gif") #333;
can be written as
background:url(images/***.gif) #333;
If If you add quotation marks, it will cause some browser errors.

11. Group selectors (Group selectors)
When some element types, classes or ids have some attributes in common, you can use group selectors to avoid multiple repeated definitions. This can save quite a few bytes.
For example: to define the font, color and margin of all titles, you can write like this:

h1,h2,h3,h4,h5,h6 {
font-family: "Lucida Grande", Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

If you need to define independent styles for individual elements during use, you New definitions can be added and old definitions can be overwritten, for example:

h1 { font-size:2em; }
h2 { font-size:1.6em; }

12. Specify link styles in the correct order
When you use CSS to define multiple state styles of a link, pay attention to the order in which they are written. The correct order is:
:link :visited :hover : active. The first letter extracted is "LVHA", which you can remember as "LoVe HAte" (like to hate). Why is it so defined? You can refer to Eric Meyer's "Link Specificity".
If your users need to use the keyboard to control and need to know the focus of the current link, you can also define the :focus attribute. The effect of the :focus attribute also depends on the position where you write. If you want the focused element to display the :hover effect, you write :focus before :hover; if you want the focus effect to replace the :hover effect, you put :focus After :hover.

13. Clear floats
A very common CSS problem is that when floating is used for positioning, the layer below is covered by the floating layer, or the sub-layer nested in the layer exceeds the outer layer. scope.
The usual solution is to add an extra element behind the floating layer, such as a div or a br, and define its style as clear: both. This method is a bit far-fetched. Fortunately, there is a good way to solve it. Please refer to this article "How To Clear Floats Without Structural Markup"
The above two methods can solve the problem of floating overflow very well, but if you What should I do when I really need to clear a layer or objects in a layer? A simple method is to use the overflow attribute. This method was originally published in "Simple Clearing of Floats" and has been widely discussed in "Clearance" and "Super simple clearing floats".
Which of the above clear methods is more suitable for you depends on the specific situation and will not be discussed here. In addition, some excellent articles have made it very clear about the application of float. It is recommended that you read: "Floatutorial", "Containing Floats" and "Float Layouts"

14. Horizontal centering (centering)
This is a simple trick, but it’s worth saying again because I see so many newbie questions asking this: How to horizontally center CSS? You need to define the width of the element and define the horizontal margin. If your layout is contained in a layer (container), you can define it like this to center it horizontally:

#wrap {
width:760px ; /* Modify to the width of your layer */
margin:0 auto;
}

But IE5/Win cannot display this definition correctly, we use a very useful trick to solve it: Use the text-align attribute. Like this:

body {
text-align:center;
}
#wrap {
width:760px; /* Change to the width of your layer */
margin:0 auto;
text-align:left;
}

The first body’s text-align:center; rule defines that all elements of the body in IE5/Win are centered (other The browser just centers the text), and the second text-align:left; is to center the text in #warp to the left.

15. Import and hide CSS
Since older browsers do not support CSS, a common approach is to use the @import technique to hide CSS. For example:
@import url("main.css");
However, this method does not work for IE4, which gave me a headache for a while. Later, I wrote it like this:
@import "main.css";
In this way, CSS can be hidden in IE4. Haha, it also saved 5 bytes. If you want to know the detailed explanation of @import syntax, you can see here "centricle's css filter chart"

16. Optimization for IE
Sometimes, you need to define some special rules for IE browser bugs , there are too many CSS techniques (hacks) here, I only use two of them. Regardless of whether Microsoft supports CSS better in the upcoming IE7 beta version, these two methods are the safest.

1. Comment method

(a) To hide a CSS definition in IE, you can use a child selector:
html>body p {
/* Definition content */                                                                                                                            . >　} 
　(c) Sometimes, you want IE/Win to be active but IE/Mac to be hidden, you can use the "backslash" technique:
　/* */ 
　* html p { 
declarations
　}
/* */

2. Conditional comments (conditional comments) method
Another method, which I think is more testable than CSS Hacks, is to use Microsoft Private property conditional comments. Using this method you can define some styles separately for IE without affecting the definition of the main style sheet. Like this:



17. Debugging skills: How big is the layer?
When an error occurs when debugging CSS, you have to be like a typewriter and analyze the CSS code line by line. I usually define a background color on the layer in question so it's obvious how much space the layer takes up. Some people suggest using border, which is generally possible, but the problem is that sometimes border will increase the size of the element, and border-top and boeder-bottom will destroy the vertical margin value, so it is safer to use background.
Another attribute that often causes problems is outline. Outline looks like boeder, but does not affect the size or position of the element. Only a few browsers support the outline attribute, the only ones I know of are Safari, OmniWeb, and Opera.

18. CSS code writing style
When writing CSS code, everyone has their own writing habits for indentation, line breaks, and spaces. After continuous practice, I decided to use the following writing style:

selector1,
selector2 {
property:value;
}

When using union definitions, I usually write each selector on its own line so they are easier to find in the CSS file. Add a space between the last selector and the curly braces {. Also write each definition on its own line. The semicolon should be placed directly after the attribute value. Do not add spaces.