18 common CSS skills learned on www.21kaiyun.com

I recently studied www.21kaiyun.com, which is a website about the constellation Ziwei doushu. I think CSS of this website is very good and I will share it with you.

I. Use css abbreviations
Reference content
Using abbreviations can help reduce the size of your CSS file and make it easier to read. The main rules for css abbreviations are as follows:
Color
The hexadecimal color value. If the two values are the same, they can be abbreviated to half. For example:
#000000 can be abbreviated as #000; #336699 can be abbreviated as #369;
Box Size
There are usually four writing methods:
Property: value1; indicates that all edges are value1;
Property: value1 value2; the value of top and bottom is value1, and the value of right and left is value2.
Property: value1 value2 value3; indicates that the top value is value1, the right and left values are value2, and the bottom value is value3.
Property: value1 value2 value3 value4; four values in turn represent top, right, bottom, left
Easy to remember is clockwise, top right bottom left. An example of the specific application in margin and padding is as follows:
Margin: 1em 0 2em 0.5em;
Border (border)
The border attributes are as follows:
Border-width: 1px;
Border-style: solid;
Border-color: #000;
It can be abbreviated as border: 1px solid #000;
Syntax: border: width style color;
Background (Backgrounds)
The attributes 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;
It can be abbreviated as: background: # f00 url(background.gif) no-repeat fixed 0 0;
The syntax is background: color image repeat attachment position;
You can omit one or more attribute values. If this attribute value is omitted, the default value of the browser is used. The default value is:
Color: transparent
Image: none
Repeat: repeat
Attachment: scroll
Position: 0% 0%
Fonts)
The font attributes 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;
It can be abbreviated as: font: italic small-caps bold 1em/140% "Lucida Grande", sans-serif;
Note: If you are short for font definition, you must at least define the font-size and font-family values.
List (lists)
To cancel the default dot and serial number, you can write list-style: none ;,
The list attributes are as follows:
List-style-type: square;
List-style-position: inside;
List-style-image: url(image.gif );
Can be abbreviated as: list-style: square inside url(image.gif );

Ii. Define the unit unless the value is 0

Reference content
Unit that forgets to define the size is a common mistake for beginners of CSS. In HTML, you can write only width = "100", but in CSS, you must give an accurate unit, for example:
Width: 100px width: 100em. There are only two exceptions. The unit is not defined: the Row Height and the 0 value. Other values must follow the unit. Note that values and units are not
Add a space.

Iii. Case Sensitive

Reference content
When CSS is used in XHTML, the element names defined in CSS are case sensitive. To avoid this error, we recommend that all definition names be in lower case.
The values of class and id are also case-sensitive in HTML and XHTML. If you must write them in combination with uppercase and lowercase, make sure that your CSS definition is consistent with the tags in XHTML.

4. Cancel the element limitation before class and id

Reference content
When you write an element to define a class or id, you can omit the previous element limitation, because ID is unique in a page, and clas s can be used multiple times on the page. You limit
Element is meaningless. For example:
Div # content {/* declarations */}
Fieldset. details {/* declarations */}
Can be written
# Content {/* declarations */}
. Details {/* declarations */}
This saves some bytes.

5. Default Value

Reference content
Generally, the default value of padding is 0, and the default value of background-color is transparent. However, the default values may be different in different browsers. If there is a conflict, you can go to style sheet 1.
At the beginning, the margin and padding values of all elements are defined as 0, as shown in the following code:
*{
Margin: 0;
Padding: 0;
}

6. Do not need to repeatedly define the value that can be inherited

Reference content
In CSS, the child element automatically inherits the attribute values of the parent element, such as color and font. defined in the parent element, the child element can be inherited directly without repeated definitions. But note
The browser may overwrite your definition with some default values.

VII. Recent priority principle

Reference content
If there are multiple definitions of the same element, the closest (minimum level) is the highest priority. For example, there is such a piece of code.
Update: Lorem ipsum dolor set
In the CSS file, you have defined the element p and a class "update"
P {
Margin: 1em 0;
Font-size: 1em;
Color: #333;
}
. Update {
Font-weight: bold;
Color: #600;
}
In these two definitions, class = "update" will be used because the class is closer to p. You can refer to W3C Calculating a selector's specificity

8. multi-class definition

Reference content
A tag can define multiple classes at the same time. For example, we first define two styles. The first style background is #666, and the second style has a border of 10 px.
. One {width: 200px; background: #666 ;}
. Two {border: 10px solid # F00 ;}
In the Page code, we can call
In this way, the final display effect is that the div has both a background of #666 and a border of 10 PX. Yes. You can try it.

9. Use the sub-selector (descendant selectors)

Reference content
CSS beginners do not know that using sub-selectors is one of the reasons that affect their efficiency. The sub-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 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
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 */}
Using a sub-selector can make your code and CSS more concise and easier to read.

10. Do not quote the background image path

Reference content
To reduce the number of bytes, we recommend that you do not quote the path of the background image because the quotation marks are not required. For example:
Background: url ("images/***. gif") #333;
Can be written
Background: url (images/***. gif) #333;
If you add quotation marks, some browser errors may occur.

11. Group selectors)

Reference content
When some element types, classes, and IDs all have common attributes, you can use the group selector to avoid repeated definitions multiple times. This can save a lot of bytes.
For example, to define the font, color, and margin of all titles, you can write as follows:
H1, h2, h3, h4, h5, h6 {
Font-family: "Lucida Grande, Lucida, Arial, Helvetica, sans-serif ";
Color: #333;
Margin: 1em 0;
}
If an independent style needs to be defined for some elements during use, you can add a new definition to overwrite the old one, for example:
H1 {font-size: 2em ;}
H2 {font-size: 1.6em ;}

12. Specify the link style in the correct order

Reference content
When you use CSS to define multiple state styles of links, pay attention to the order in which they are written. The correct order is: link: visited: hover: active. The first letter is"
LVHA, you can remember it as "LoVe HAte ). For more information about this definition, see Link Specificity by Eric Meyer.
If your user needs to use a keyboard to control the focus of the current link, you can also define the focus attribute. : The effect of the focus attribute depends on your position.
If the focus element shows the hover effect, you can write the focus in front of the hover effect. If you want to replace the focus effect with the hover effect, you can put the focus behind the hover.

13. Clear floating

Reference content
A very common CSS problem is that when floating is used, the lower layer is overwritten by the floating layer, or the nested child layer in the layer is out of the outer range.
The general solution is to add an additional element after the floating layer, such as a div or a br, and define its style as clear: both. This method is far-fetched and lucky.
There is also a good way To solve the problem. Refer To the article "How To Clear Floats Without Structural Markup".
The above two methods can solve the problem of floating exceeding, but what if you really need to clear the objects in the layer or layer? A simple method is to use
Overflow attribute. This method was originally published in Simple Clearing of Floats and has been widely used in Clearance and Super simple clearing floats.
Discussion.
The above clear method is more suitable for you. It depends on the specific situation and will not be discussed here. In addition, some excellent articles on float applications have been clearly stated. We recommend that you read them.
: >,>And>

14. Center horizontally (centering)

Reference content
This is a simple technique, but it is worth repeating it again, because I have seen many new users asking this question: how to center CSS horizontally? You need to define the element width and define the horizontal
Margin, if your layout is contained in a layer (container), it is like this:
You can define it to center horizontally as follows:
# Wrap {
Width: 760px;/* change the width of your Layer */
Margin: 0 auto;
}
However, IE5/Win cannot correctly display this definition. We use a very useful technique to solve this problem: Use the text-align attribute. Like this:
Body {
Text-align: center;
}
# Wrap {
Width: 760px;/* change the width of your Layer */
Margin: 0 auto;
Text-align: left;
}
The text-align: center of the first body. The rule defines that all the elements of the body in IE5/Win are centered (other browsers only center the text), and the second text-align: left; indicates
# The text in warp is left.

15. Import and hide CSS

Reference content
Because the browser of the old version does not support CSS, a common practice is to use the @ import technique to hide CSS. For example:
@ Import url ("main.css ");
However, this method does not work for IE4, which makes me a headache for a while. Later I used the following statement:
@ Import "main.css ";
In this way, CSS can be hidden in IE4, and 5 bytes are saved.

16. Optimization for IE

Reference content
Sometimes, you need to define some special rules for IE browser bugs. Here there are too many CSS skills (hacks). I only use two of them, regardless of the IE7 release by Microsoft.
Whether CSS is better supported in the beta version is the safest of both methods.
1. annotation Method
(A) hide a CSS definition in IE. You can use the child selector ):
Body p {
/* Definition content */
}
(B) The following statement can only be understood by IE (hidden from other browsers)
* Html p {
/* Declarations */
}
(C) Sometimes you want IE/Win to be valid While IE/Mac is hidden. You can use the backslash technique:
/*\*/
* Html p {
Declarations
}
/**/
2. conditional comments
Another method, I think, is better than CSS Hacks, is to use Microsoft's proprietary attribute condition comments ). You can use this method to separate IE
Defines some styles without affecting the definition of the main style table.

17. debugging skills: How big is the layer?

Reference content
When a CSS debugging error occurs, you need to analyze the CSS code line by line like a typographical engineer. I usually define a background color on the problematic layer, so that it is obvious that the layer occupies a lot of space.
. Some people suggest using border, which is acceptable in general, but the problem is that sometimes border will increase the element size. border-top and boeder-bottom will destroy the vertical margin.
So it is safer to use background.
Another frequently problematic attribute is outline. Outline looks like a border, but does not affect the size or position of the element. Only a few browsers support the outline attribute.
Only Safari, OmniWeb, and Opera are supported.

18. CSS Code Writing Style

Reference content
When writing CSS Code, everyone has the habit of writing indentation, broken lines, and spaces. After continuous practice, I decided to adopt the following writing style:
Selector1,
Selector2 {
Property: value;
}
When using the Union definition, I usually write a single row for each selector so that they can be found in the CSS file. Add a space between the last selector and braces {.
Also, write a line separately. The semicolon is directly placed after the attribute value without spaces.
I used to add points after each attribute value. Although the rule allows the last attribute value to be followed by a semicolon, if you want to add a new style, it is easy to forget to add a semicolon to generate an error.
Therefore, it is better to add both.
Finally, close braces} write a single row.
Spaces and line breaks help and read.

Finally, we suggest you learn more about the handling methods above www.21kaiyun.com on the 21st century. I hope your website can be improved.