14 Common CSS Tips and FAQs

1, the use of CSS abbreviations can reduce the paging file size, improve download speed, while making the code concise and readable.

Such as:

The following is a reference fragment:
div{
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px soli #cccccc;
border-bottom:1px solid #cccccc;
}

Can be written as: p{border:1px solid #cccccc}

Another example:

The following is a reference fragment:
div{
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}

Can be rewritten as:

The following is a reference fragment:
/* Note the written order of upper, right, lower and left.
div{margin:10px 20px 30px 40px}
/* Note that values and units can not have spaces, each value separated by a space * *

2. You can set multiple rules (multiple class definitions) for the class attribute of an HTML element at the same time.

Usually we are written as: <p class= "a" ></p>

We can actually specify multiple rules for the P element, such as:

The following is a reference fragment:
Css:
. a{...}
. b{...}
Html:
<p class= "A B" > The element also includes the styles set in A and B </p>

Note: Multiple rules are separated by spaces.

3, clearly defined units, unless the value is 0

Forgetting to define dimensions is a common problem for novice CSS beginners. In HTML we can write width= "100", but in CSS we should give an accurate unit. such as: width:100px;height:50px;font-size:9pt, excluding 0 values, because no matter for any unit. 0 values are equal in size.

Note: Do not add spaces between values and units.

4. Case sensitive

In XHTML, CSS-defined element names are case-sensitive, and class and ID values are case-sensitive in both HTML and XHTML, so it is recommended that you use lowercase to avoid errors. such as #aaa, and #aaa are different, in XHTML, p and P are different. They will not be covered. If #aaa is defined in CSS, applying AAA to HTML elements will not get the style defined in #aaa.

Sample code:

The following is a reference fragment:
Css:
#aaa {border:1px Solid #ccc}
Html:
<div id= "AAA" > shows no 1 pixel edges </div>

5, CSS's recent priority principles

If you define more than one style for an element, the most recent one takes precedence, and the most recent style overrides other style definitions.

Such as:

The following is a reference fragment:
Css:
P{color:red}
. Blue{color:blue}
. Yellow{color:yellow}
Html:
<p> shown here as Red </p>
<p class= "Blue" > shown here as Blue </p>
<p class= "Blue" style= "Color:green" > shown here as Green </p>
<p class= "Blue yellow" > shown here as Yellow </p>

Attention:

(1) Note the priority order of the style (descending from top to bottom):

--Element style setting

setting in the--head area <style></style>

--External referencing CSS file

(2) Precedence is not set according to the order of access, but also in the order of the declarations in the CSS.

As in the previous example <p class= "Yellow Blue" > shown here as Yellow </p> is also shown as yellow, because in the CSS definition. Yellow behind. Blue.

6, using the child selector to reduce the definition of ID and class

For example:

The following is a reference fragment:
#contain {..}
#contain_ul {...}
. contail_li{...}
<div id= "contain" >
<ul id= "Contain_ul" >
<li class= "Contain_li" ></li>
<li class= "Contain_li" ></li>
</ul>
</div>

Can be changed to:

The following is a reference fragment:
#contain {..}
#contain ul{...}
. contain ul li{...}
<div id= "contain" >
<ul>
<li></li>
<li></li>
</ul>
</div>

7, do not add quotes to the background picture path

Change Background:url ("Xxx.gif") to Background:url (xxx.gif), because it can cause errors for some browsers.

8, the background image path is relative to the current CSS page path.

For example:

Has the following directory structure

|--images
|--xxx.gif
|--css
|--xx.css
|--index.html

Code content

The following is a reference fragment:
Index.html references xx.css files. <link rel= "stylesheet" href= "Css/xx.css"/>
Xx.css to refer to the Xxx.gif picture as follows: Background:url (... /images/xxx.gif)

9, using the group selector for different elements to apply the same style

such as H1,h2,h3,div{font-size:16px;font-weight:bold}

The style of the H1,h2,h3,div element is font 16 pixels, bold font

10, write the correct link style

When using CSS to define the various states of a link, be sure to pay attention to its writing order, namely: Link:visited:hover:active. If you do not write in that order, you may not be able to achieve your desired results. In order to memorize this order we extract the first letter of each word: L V H A, you can remember the order by memorizing love,hate, two words.

11, prohibited content line-wrapping and forced content line

In a table or layer, we may want the content to be wrapped or forced to wrap, and we can use some CSS properties to meet these requirements.

No Line wrapping: White-space:nowrap

Forced line wrapping: Word-wrap:break-word; Word-break:normal;

12. Distinguish relative and absolute

Absolute,css in the writing is: Position:absolute; He means absolute positioning, he is referring to the upper left corner of the browser, with top, right, BOTTOM, Zuo (hereinafter referred to as TRBL) for positioning, in the absence of a set TRBL, the default based on the parent to do the original point of Origin point. If you set the TRBL and the parent does not set the Position property, the current absolute is positioned as the original point in the upper-left corner of the browser, and the position is determined by TRBL.

Relative,css in the writing is: position:relative; He meant absolute relative positioning, he is referring to the original point of the parent of the original point, no parent to the original point of the body as the original point, with TRBL positioning, when the parent has padding CSS properties, the current level of the original point of reference to the parent content area of the original point of positioning.

13. Distinguish Div and span

A DIV is a block-level element that can contain paragraphs, tables, and so on to place different content. In general, we use DIV to layout the page to locate each block in the page.

span is an inline element that has no real meaning, it exists purely for the purpose of applying styles, adding <span></span> tags to a piece of content to set the style of its content by defining styles on span.

14. Distinguish display and visibility

Both Display:none and Visibility:hidden can hide an element

But Visibility:hidden only hides the contents of the element, but the location space it uses is still preserved. Display:none, however, removes the element from the page, and the location of the footprint is removed.