Practical CSS Tips and FAQs

Using CSS abbreviations can reduce the paging file size, improve download speed, and make the code concise and readable.

Such as:

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:

div{

margin-top:10px;

margin-right:20px;

margin-bottom:30px;

margin-left:40px;

}

Can be rewritten as:

/* 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 * *

(For more information, please refer to: CSS2 reference Manual, summary of common CSS abbreviations)

Usually we are written as:

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

Css:

. a{...}

. b{...}

Html:

　　

The element also includes the styles set in A and B

Note: Multiple rules are separated by spaces.

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.

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:

Css:

#aaa {border:1px Solid #ccc}

Html:

　　

shows no 1 pixel edges

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:

Css:

P{color:red}

. Blue{color:blue}

. Yellow{color:yellow}

Html:

　　

Red is shown here

　　

Shown here as Blue

　　

Green is shown here

　　

Yellow is shown here

Attention:

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

--Element style setting

setting in the--head area

--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

Yellow is shown here

Also appears as yellow, because in the CSS definition. Yellow is in the back of. Blue.

For example:

#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:

#contain {..}

#contain ul{...}

. contain ul li{...}

<div id= "contain" >
<ul>
<li></li>
<li></li>
</ul>
</div>

Change Background:url ("Xxx.gif") to Background:url (xxx.gif)

Because the quotation marks for some browsers can cause errors.

For example:

Has the following directory structure

|--images

|--xxx.gif

|--css

|--xx.css

|--index.html

Code content

Index.html references xx.css files.

Xx.css to refer to the Xxx.gif picture as follows: Background:url (... /images/xxx.gif)

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

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.

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;

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.

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, exists purely for the purpose of applying a style, and marks a piece of content with a style that defines its contents by defining a style on a span.

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.

The display:none is quite removed from the page, and the position is removed.