First, the use css abbreviations
abbreviations can help reduce the size of your CSS files easier to read. css abbreviation of the main rules refer to "css commonly abbreviated syntax summary" described here will not start.
Second, a clear definition of the unit, unless the value is zero
forget to define the size of the unit is a common mistake novice CSS. In HTML you can only write width = "100", but in CSS, you have to give an accurate units, such as: width: 100px width: 100em. Only two exceptions can not be defined by: a high line and a value of 0. In addition, other values must be followed by the unit, be careful not to put a space between the value and units.
Third, case-sensitive
when using CSS in XHTML, CSS element names defined in the is case-sensitive. To avoid this error, I recommend that all of the defined names are in lowercase.
Value class and id in HTML and XHTML are also case-sensitive, if you must write in mixed case, please double-check your tag in XHTML and CSS definitions are consistent.
IV element before cancellation class and id defined
when you wrote a defined class or id element, you can define in front of the elements will be omitted, because the ID is unique within a page, and can be used repeatedly in clas s page. You define an element meaningless. E.g:
Content # {div / * Declarations * /}
fieldset.details {/ * Declarations * /}
can be written as
{#content / * Declarations * /}
.details {/ * Declarations * /}
This saves some bytes.
Fifth, the default value
usually padding default value 0, the default value of the background-color is transparent. But it may be different in different browsers default. If the fear of a conflict, you can start to define the margin and padding values for all elements are 0, the style sheet like this:
{*
Margin: 0;
padding: 0;
}
six, do not repeat a value defined inheritable
CSS, the sub-element automatically inherit the attribute value of parent element, such as colors, fonts, etc., already defined in the parent element in sub-element may be directly inherited definitions need not be repeated. But be careful, your browser may cover defined by the number of defaults.
Seven recent priority principle
If there are multiple definitions of the same element to define the closest (the smallest one) is the highest priority, for example, there is such a piece of code
Update: lorem ipsum smart set
In the CSS file, you have defined the elements p, but also defines a class "update"
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
These two definitions, class = "update" will be used, because class closer than p. You can check the W3C's "Calculating a selector's specificity" to learn more.
Eight, multiple class definition of
a label can define multiple class at the same time. For example: We first define two styles, the first style background # 666; The second style has a 10 px border.
{width the .one: 200px; background: # 666;}
.two {border: 10px Solid # F00;}
In the page code, we can call
<div class = "one two" > </ div>
so that the final effect is to show both the div # background 666 also has a border of 10px. Yes, this is possible, you can try.
Nine, using the child selector (descendant selectors)
CSS beginners do not know to use the child selector is one of the reasons that affect their efficiency. Child selector can help you save a lot of class definitions. Let's look at the following code:
<div id="subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li>
</ul>
</div>
这段代码的CSS定义是：
Subnav UL # {div / s Some Styling * * /}
div # Subnav UL li.subnavitem {/ * s Some Styling * /}
div # Subnav UL li.subnavitem a.subnavitem {/ * s Some Styling * /}
div # Subnav UL Li {.subnavitemselected / s Some Styling * * /}
{/ * * s Some Styling / div} # Subnav UL li.subnavitemselected a.subnavitemselected
you can use the following alternate method of the above code
<ul id="subnav">
<li> <a href="#"> Item 1</a> </li>
<li class="sel"> <a href="#"> Item 1</a> </li>
<li> <a href="#"> Item 1</a> </li>
</ul>
样式定义是：
{#subnav / s Some Styling * * /}
#subnav Li {/ * s Some Styling * /}
#subnav A {/ * s Some Styling * /}
#subnav .sel {/ * s Some Styling * /}
#subnav .sel {A / * Some styling * /}
can make your code and use CSS child selector is more concise and easier to read.
Ten, do not need to background image path in quotes
in order to save bytes, I suggest not to background image path in quotes, because quotes are not necessary. E.g:
background: url ( ". images / *** gif") # 333;
can be written as
background: url (images / *** gif .) # 333;
error if you add the quotation marks, it will cause some browsers.
XI selector group (Group selectors)
when the number of element type, class or id have common attributes, you can use multiple group selector to avoid duplicate definition. This can save a lot of bytes.
For example: Define all headline font, color and margin, you can write:
h1 of, H2, H3, H4, H5, H6 {
font-Family: "Lucida Grande", Lucida, Arial, Helvetica, Sans-serif;
Color: # 333;
margin: 1em 0;
}
if, in use, individual elements We need to define a separate style, you can add a new definition, can override the old definitions, such as:
{font-size h1 of: 2em;}
H2 {font-size: 1.6em;}
twelve, with the pattern in the correct order to specify links
when you use CSS to define a plurality of link state style, pay attention to the order of writing thereof the correct order is :: link: visited: hover: active . Extract the first letter is "LVHA", you can remember to "LoVe HAte" (like hate). Why so defined, you can refer to Eric Meyer's "Link Specificity".
focus attribute: If your users need to control, need to know the focal point of the current link, you can also define keyboard. : The effect of focus attribute also depends on the position of your writing, if you want to focus elements show: hover effect, you put: focus in writing: front hover; if you want to replace the focusing effect: hover effect, you put: focus put in: behind hover.
XIII remove floating
a very common problem CSS positioning floating when the underlying layer is covered by a floating layer or layers in the nested sub-layers outside the scope of the outer layer.
The usual solution is to add an extra layer behind the floating element, for example, one or a div br, and defines its style is clear: both. This approach is a little far-fetched, fortunately there is a good way to solve, see the article "How To Clear Floats Without Structural Markup" (Note: this site will soon translated article).
The above two methods can solve the problem well beyond the float, but if when you really need to layer or layers in the object's clear how to do? A simple method is to use the overflow property, this method was originally published in the "Simple Clearing of Floats", it has been widely discussed in the "Clearance" and "Super simple clearing floats" in.
The above clear what kind of method is more suitable for you, depends on the specific circumstances, not to undertake discussed here. Other applications on a float, some excellent articles have said very clearly, it is recommended that you read: "Floatutorial", "Containing Floats" and "Float Layouts"
XIV centered laterally (centering)
This is a simple trick, but worth repeating, because I saw too many novice asking this question is: How CSS laterally centered? You need to define the width of the element, and define the lateral margin, if your layout contains a layer (container), like this:
You can define it laterally centered:
{#wrap
width: 760px; / * Modify the width of your layer * /
margin: Auto 0;
}
but IE5 / Win this definition can not be displayed correctly, we use a very useful technique to solve: a text-align property. Like this:
{body
text-align: center;
}
#wrap {
width: 760px; / * Modify the width of your layer * /
margin: 0 Auto;
text-align = left: left;
}
The first body of text-align: center; rules define IE5 / Win center of all the elements in the body of (other browsers just text centered), the second text-align: left; is #warp text left.
Fifth, import (Import) and hidden CSS
because older browsers do not support CSS, a common practice is to use the CSS @import trick to hide. E.g:
@import url ( "main.css");
however, this method does not work for IE4, which makes me a headache for a while. Later, I used this wording:
@import "main.css";
so that you can hide in CSS in IE4, huh, huh, but also saves five bytes of it. For a detailed description @import syntax, can be seen here "centricle's css filter chart"
Sixteen, optimized for IE
Sometimes you need some special rules for the definition of bug IE browser, there are too many CSS skills (hacks), I only use two of these methods, regardless of the upcoming release of Microsoft whether IE7 beta version in better support for CSS, these two methods are the safest.
1, the annotation process
(a) hide a CSS defined in IE, you can use the child selector (Child Selector):
HTML> body P {
/ * define the contents * /
}
(B) The following wording only IE can understanding (of other browsers are hidden)
* the p-HTML {
/ * Declarations * /
}
(c) other times, you want IE / Win effective and IE / Mac hidden, you can use the "slash" technique:
/ * \ * /
* the p-HTML {
Declarations
}
/ * * /
2, the method conditional comments (conditional comments) in
another way, I think more than stand the test of CSS Hacks is to use Microsoft's private property conditional comments (conditional comments) . This way you can use a number of individually defined styles to IE, without affecting the primary defined style sheet. Like this:
<-! [IF IE]>
<Link rel = "stylesheet" of the type = "text / CSS" href = "ie.css" />
- <[endif]!>
seventeenth and debugging tips: layer much?
When debugging CSS error occurs, you have to like typesetting workers, line by line analysis of CSS code. I usually define a background color layer on the problem, so you can clearly see how much space is occupied by layer. Some people suggested border, the general situation is also possible, but the problem is that sometimes border will increase the size of the elements, border-top and boeder-bottom will destroy the value of the longitudinal margin, it is safer to use some background.
Another frequent problem is the property outline. outline looks like boeder, but does not affect the size or position of the element. Only a few browsers support the outline property, I know only Safari, OmniWeb, and Opera.
Eighteen, CSS code writing style
when writing CSS code for indenting, line breaks, spaces, everyone has everyone's writing habits. And after practice, I decided to use this style of writing the following:
Selector1,
selector2 {
Property: value;
}
when used in combination define, I usually choose individually writing each line, so that they are easily found in the CSS. A space, each individual definition also write a line between the last and braces {selector, the attribute value directly after the semicolon, no spaces.
I used behind each attribute value semicolon, while allowing the last attribute value can not write a semicolon behind the rules, but easy to forget to fill the semicolon if you want to add a new style and error, they still are added Better.
Finally, to close the braces} alone write a line.
Spaces and line breaks to help with reading.
