XHTML+CSS Basics (iv): control pages with CSS

What are the methods for writing 1.CSS pages?

Inline: Write the style sheet directly in the tag using the Style property.

Inline: Extracts all style sheets into a style label on the head of the Web page.

Linked: The style sheet is written in a. css file, using the link tag in the page header reference, the standard recommended.

Import: Use @import to introduce style sheets, because the efficiency and so on have been eliminated

The priority of a 2.CSS style sheet?

In theory: inline styles > Inline styles > Link styles > Import styles

In fact: The nearest principle, embedded, linked, imported in the head of the same file, who is close to the corresponding code, who has a higher priority level. The equivalent of a style sheet that is loaded in the back overwrites the previous write, so a closer look will work.

What are the commonly used selectors in 3.CSS?

Tag Selector (Div, p .....) ）

ID Selector (#)

Class selector (.)

Universal Selector (*)

Pseudo-Class selector (: Link,: visited,: hover,: Active)

Where IE6 does not support pseudo-classes other than the A-label and does not support other tags, it can be used if it is not considered compatible.

4. What is the priority level of the selector?

Id> class > tags > General

5. Layering and particularity of styles

Even in a less complex style sheet, it is possible to find the same element by two or more rules. CSS handles this conflict through a process called cascading.

Cascading assigns an important degree to each rule, and the Cascade takes the following important order.

User styles labeled!important > Author styles > Author styles > User styles > Browser/user Agent app styles (!important)

Then, according to the particularity of the selector to determine the order of the rules, the rule with the more special selectors takes precedence over the rule with the general selector, if the two rules are the same, then the rules defined later take precedence.

In order to calculate the particularity of the rules, each selector is assigned a numeric value, and divided into A,b,c,d four levels, the corresponding level of the values are placed in thousands, hundred, 10, bits, the larger the value of the more special, also indicates that its priority is higher.

If the style is an inline style, then a=1;b equals the total number of ID selectors, and C equals the number of classes, pseudo-classes, and attribute selectors; d equals the number of type selectors and for element selectors.

For example: #content. dateposted{}, its particularity is 0,1,1,0, converted to 110

#wraper #content {}, its particularity is 0,2,0,0, converted to 200

In the above example, the latter is more specific than the former, and thus the rules in its style sheet will work.

6.common naming methods in CSS

Camel nomenclature: The first letter is lowercase, the first letter of the following word is capitalized, for example: Headerblock

Pascal nomenclature: The first letter capitalized, the first letter of the following words capitalized, for example: Headerblock

Hungarian nomenclature: Prefix the name with one or more lowercase letters, for example: Header_block

naming rules in CSS

The CSS needs to be semantically named as much as possible.

Head: Head/header

Content: Content/container

Tail: Foot/footer

Navigation: nav/navigation

Sidebar: Sidebar

Abbreviations for styles in 7.CSS

hexadecimal color format "#RRGGBB", which can be abbreviated as "#RGB" in CSS code

Correct abbreviation #aabbcc= #abc, another #abcabc!= #abc

The inner and outer margins are in the same format, with the inner margin as an example, in general, to define the four padding values for a box model, the code is as follows: Padding-top:10px;padding-right:20px;padding-bottom : 30px;padding-left:40px;

This kind of writing if a lot of use, will make the code become redundant, and now go to the following code to abbreviate, four direction of the padding value, with "upper right bottom left" for the order: padding:10px 20px 30px 40px;

If the padding value is the same in four directions, it can be abbreviated as a value: padding:10px 10px 10px 10px;=padding:10px;

If the inner margin of four directions is the same as the value of the inner margin relative to the direction, then you can write only the values above and to the right: padding:10px 20px 10px 20px;=padding:10px 20px;

If the padding value on the left is the same as the padding value on the right, then only the top, right, and bottom three values are written: padding:10px 20px 30px 20px;=padding 10px 20px 30px;

internal and external margins if an item is defaulted, it is automatically replenished as the distance to its corresponding side, that is, if the top margin is written and the bottom margin is missing, the bottom margin is the same as the top margin, and if the left margin is missing from the right margin, the left margin is the same as the right margin and is usually abbreviated according to this rule

The abbreviated format of the border is: border: Width color type; The three attribute positions after the colon can be transformed, and there is no effect on the final effect, but it is recommended that you follow this writing order to improve the readability of your code.

If you need to define a box with a different width, you can use Border-width, and the property value is also four and arranged in the order of "upper right bottom left".

The abbreviated format of the background is: background: background picture background color tile type horizontal positioning vertical positioning;

Example: Background:url (...) #ccc no-repeat 10px 5px;

The background image of the box is defined as the picture in the address, the background color is #ccc and the distance to the left of the example box is 10px and the upper side is 5px.

In addition, the rear positioning can also be replaced with Left,center,right,top,middle,bottom.

The text is abbreviated as: font: Style weight font size/Line spacing font;

Example: Font:italic bold 12px/1.5 Verdana,geneva,sans-serif;

Defines the font in the box as italic, bold, text size 12px, 1.5 times times the line height, and the font is alternate from left to right.

All property positions that follow the font are not interchangeable, which is not the same as the border with Beijing.

XHTML+CSS Basics (iv): control pages with CSS