Summary: Web page style design with CSS Introduction to the complete

css| Introduction | design | Web page

　　A. Use CSS abbreviations

Using abbreviations can help reduce the size of your CSS files and make it easier to read. For the main rules of CSS abbreviations, see the "Common CSS abbreviation Syntax knot", which does not expand the description.

　　Two. Define units clearly, unless the value is 0

Forgetting to define the size of the unit is a common error for CSS Novice. In HTML you can write only width= "100", but in CSS you have to give an exact unit, such as: width:100px width:100em. Only two exceptions can be defined without a unit: row height and 0 value. In addition, other values must follow the unit, note, do not add a space between the number and the unit.

　　Three. Case sensitive

The element names defined in CSS,CSS are case-sensitive when used in XHTML. To avoid this error, I recommend that all defined names be lowercase.

The values of class and ID are also case-sensitive in HTML and XHTML, if you must have the size of the sparkle  the definition of the Gai-Xiahong SS is consistent with the labels in XHTML.

　　Four. To cancel the element qualification before class and ID
When you write an element to define class or ID, you can omit the previous element qualification because the ID is unique on a page, and Clas s can be used more than once in the page. You define an element without meaning. For example:

div#content {/* declarations */}
Fieldset.details {/* declarations */}
can be written

#content {/* declarations */}
. details {/* declarations/} This can save some bytes.

　　Five. Default value

Usually the default value for the padding is transparent, which is the default value for 0,background-color. However, the default values for different browsers may be different. If you are afraid of conflict, you can define the margin and padding values for all elements at the beginning of the stylesheet as 0, like this:

* {
margin:0;
padding:0;
}

　　Six. You do not need to repeat the definition of inheritable values

In CSS, child elements automatically inherit the attribute values of the parent element, such as color, font, and so on, that are already defined in the parent element and can be directly inherited in child elements, without having to repeat the definition. Note, however, that the browser may overwrite your definition with some default values.

　　Seven. Recent priority principles

If there are multiple definitions of the same element, the closest (least level) definition is the highest priority, such as a piece of code

Update:lorem ipsum dolor Set

In the CSS file, you have defined the element p and defined a class "update"

p {
Margin:1em 0;
Font-size:1em;
Color: #333;
}
. Update {
Font-weight:bold;
Color: #600;
}

Of these two definitions, class= "Update" will be used because class is closer than P. You can find out more about the calculating a selector's specificity of the consortium.

　　Eight. Multiple class definition

A label can define more than one class at a time. For example, we first define two styles, the first style background is #666, and the second style has an PX border.

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

In the page code, we can call

The final display effect is that the DIV has both a #666 background and a 10px border. Yes, it's OK, you can try it.

　　Nine. Using a descendant (selectors)

CSS beginners do not know that using a child selector is one of the reasons that affects their efficiency. A child selector can help you save a lot of class definitions. Let's look at the following code:

Item 1>

Item 1

Item 1

The CSS definition for 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

Item 1

The style definition is:

#subnav {/* Some styling */}
#subnav Li {/* Some styling */}
#subnav a {/* Some styling */}
#subnav. Sel {/* Some styling */}
#subnav. SEL a {/* Some styling */}

Use a sub selector to make your code and CSS more concise and easy to read.

　　10. Do not need to quote the background picture path

To save bytes, I recommend that you do not enclose the background picture path with quotes, because the quotation marks are not required. For example:

Background:url ("Images/***.gif") #333;

can be written as

Background:url (images/***.gif) #333;

If you add quotes, it can cause some browser errors.

　　11. Group Selector (selectors)

When some element types, classes, or IDs have common attributes, you can use the group selector to avoid multiple duplicate definitions. This can save a lot of bytes.

For example, to define the font, color, and margin of all headings, you can write this:

H1,h2,h3,h4,h5,h6 {
font-family: "Lucida Grande", Lucida,arial,helvetica,sans-serif;
Color: #333;
Margin:1em 0;
}

If there are individual elements that need to be defined as separate styles when used, you can add new definitions to cover old definitions, such as:

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

　　12. Specify the style of the link in the correct order

When you use CSS to define multiple state styles for a link, be aware of the order in which they are written, in the correct order: link:visited:hover:active. Extract the first letter is "LVHA", you can remember as "Love Hate" (Hi lt;a href= "Http://search.yesky.com/search?q=%B6%CC" class= "Bluekey" _ Blank "> Short cup?" Why this definition, you can refer to Eric Meyer's "Link specificity".

If your users need to use the keyboard to control, you need to know the focus of the current link, you can also define: the focusing attribute. : The effect of the focus attribute also depends on where you write, if you want the focused element to display: hover effect, you put: focus on: hover front; If you want focused effects to replace: hover effect, you put: focus on: hover behind.

　　13. Clear Floating

A very common CSS problem, when positioning using a float, the layer below is covered by the floating layer, or the layer nesting of the child layer beyond the outer range.

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 little far-fetched, fortunately there is still a good way to solve, see this article "How to clear floats without structural Markup" (Note: This site will soon translate this article).

The above 2 methods are good for solving floating problems, but what if you really need to clear the layers or layers of objects? An easy way is to use the overflow attribute, which was originally published in the simple clearing of floats, Also in the "clearance" and "Super simple clearing floats" is widely discussed.

The above clear method is more suitable for you, depending on the situation, no longer discussed here. In addition to the application of Float, some excellent articles have been very clear, recommend you to read: "Floatutorial", "containing floats" and "float Layouts"

　　14. Horizontally centered (centering)

It's a simple trick, but it's worth saying again because I see so many novice questions asking: How is css horizontally centered? You need to define the width of the elements and define the horizontal margin, if your layout is contained in a layer (container), like this:

<--your layout here to start-->

You can define this so that it is centered horizontally:

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

But Ie5/win does not correctly display this definition, we use a very useful technique to solve: using the Text-align attribute. Just like this:

Body {
Text-align:center;
}

#wrap {
width:760px; /* Modify the width of your layer * *
margin:0 Auto;
Text-align:left;
}

The first body of the text-align:center; The rule defines that all elements of the body are centered in the Ie5/win (other browsers simply center the text), the second text-align:left is the left of the text in the #warp.

　　15. Importing (import) and hiding CSS

Since older browsers do not support CSS, a common practice is to use the @import technique to hide the CSS. For example:

@import url ("Main.css");

However, this method does not work for IE4, which makes me very headache for a while. Later I used the following wording:

　　 @import "Main.css";

This can also be hidden in the IE4 CSS, hehe, also saved 5 bytes. To learn more about @import syntax, see here "Centricle ' CSS Filter Chart"

　　16. For IE optimization

There are times when you need to define some special rules for IE bugs, there are too many CSS tips (hacks), and I use only two of these methods, and whether or not Microsoft is better at supporting CSS in the upcoming IE7 Beta, both of these are the safest.

1. Method of annotation

(a) to hide a CSS definition in IE, you can use the selector (child-selector):

Html>body p {
/* Definition Content * *
}

(b) The following wording is only understandable by IE browser (hidden from other browsers)

* HTML P {
* Declarations * *
}

(c) There are times when you want Ie/win to be effective and ie/mac hidden, and you can use the "backslash" technique:

/* \*/
* HTML P {
Declarations
}
/* */

2. Method of conditional annotation (conditional comments)

Another way, I think, than the CSS hacks more withstand the test is the use of Microsoft's private attribute condition annotation (conditional comments). In this way you can define some styles for IE without affecting the definition of the main style sheet. Just like this:

　　17. Debugging skills: How big is the floor?

When debugging CSS errors, you need to be like a typesetting worker, parsing CSS code line by row. I usually define a background color on the problem layer so that it's clear how much space the layer occupies. Some people suggest using border, the general situation is also possible, but the problem is, sometimes border will increase the size of elements, Border-top and Boeder-bottom will destroy the value of vertical margin, so it is safer to use background.

Another often problematic attribute is outline. Outline looks like a boeder, but does not affect the size or position of the element. Only a few browsers support outline properties, and all I know is Safari, OmniWeb, and opera.

　　18. CSS Code writing style

In writing CSS code, for indentation, line breaks, spaces, everyone has the writing habits of everyone. After continuous practice, I decided to use the following writing style:

Selector1,
Selector2 {
Property:value;
}

When working with federated definitions, I usually write each selector in a single line, so it's easy to find them in a CSS file. Add a space between the last selector and the curly brace {Each definition is written separately, and the semicolon is directly after the attribute value, without spaces.

I'm used to adding a semicolon after each property value, although the rule allows the last attribute value to be followed by a semicolon, but if you want to add a new style, it's easy to forget to make up the semicolon and create an error, so it's all better.

Finally, close the curly brace to write a single line.

Spaces and line-wrapping are helpful and readable.

Attached: Common CSS Abbreviations Grammar summary

Using abbreviations can help reduce the size of your CSS files and make it easier to read. The main rules for CSS abbreviations are as follows:

Color

16 The color value of the binary, if the value of each two digits is the same, you can abbreviate half, for example:

#000000可以缩写为 #000; #336699可以缩写为 #369;

Box size

There are usually four ways to write:

property:value1; Indicates that all edges are a value value1;

Property:value1 value2; The values that represent top and bottom are value1,right and left values that are value2

Property:value1 value2 Value3; The value that represents top is value1,right and left is the value of Value2,bottom is Value3

Property:value1 value2 value3 value4; The four values, in turn, represent Top,right,bottom,left

Convenient memory method is clockwise, upper right and lower left. Examples of specific applications in margin and padding are as follows:

Margin:1em 0 2em 0.5em;

Border (border)

The properties of the border are as follows:

border-width:1px;
Border-style:solid;
Border-color: #000;

can be abbreviated as one sentence: border:1px solid #000;

Grammar is border:width style color;

Background (backgrounds)

The properties of the background are as follows:

Background-color: #f00;
Background-image:url (background.gif);
Background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

can be abbreviated to one sentence: background: #f00 URL (background.gif) no-repeat fixed 0 0;

The grammar is Background:color image repeat attachment position;

You can omit one or more of the property values, and if omitted, the property value will be in the browser default value, the default value is:

Color:transparent

Image:none

Repeat:repeat

Attachment:scroll

position:0% 0%

Font (Fonts)

The properties of the font are as follows:

Font-style:italic;

Font-variant:small-caps;

Font-weight:bold;

Font-size:1em;

line-height:140%;

font-family: "Lucida Grande", Sans-serif;

can be abbreviated as one sentence: Font:italic small-caps bold 1em/140% "Lucida Grande", Sans-serif;

Note that if you abbreviate a font definition, you must define at least two values for font-size and font-family.

List (lists)

Cancellation of the default dot and ordinal can be written like this list-style:none;

The properties of the list are as follows:

List-style-type:square;
List-style-position:inside;
List-style-image:url (Image.gif);

can be abbreviated to one sentence: List-style:square inside URL (image.gif);