Summary of CSS rules

 

I. Abbreviations

Margin (4 sides ):

1px 2px 3px 4px (top, right, bottom, left)

1px 2px 3px (Omitted left equals right)

1px 2px (Omitted top or bottom)

1px (the four sides are the same)

Simplify all:

*/Body {margin: 0} ------------ indicates that the margin of all elements in the webpage is 0

# Menu {margin: 0} ------------ indicates that the margin of all elements in the menu control is 0

Border:

Border: 1px solid # ffffff;

Border-width: 0 1px 2px 3px;

Abbreviations:

Font-style: italic; italic format

Font-variant: small-caps/normal; variant style: small uppercase letters/normal

Font-weight: bold;

Font-size: 12px;

Line-height: 1.2em (120%)/1.5em (150% );

Font-family: arrial, sans-serif, verdana;

Abbreviation:

Font: italic small-caps bold 12px/1.5em arrial, sans-serif;

Note: Font-size and Line-height cannot be written separately when combined with slashes.

Background image:

Background: # FFF url(log.gif) no-repeat fixed top left;

About the list:

List-style-type: square/none;

List-style-position: inside;

List-style-image: url(filename.gif );

Abbreviation:

List-style: none inside url(filename.gif );

2. Use four methods to introduce CSS styles

1. link

<Link rel = "stylesheet" type = "text/css" href?”a.css ">

Rel relationship

Type data types, with multiple types

Href path

Some browsers support candidate styles. Keyword: alternate:

<Link rel = "stylesheet" type = "text/css" href?”a.css ">

<Link rel = "alternate stylesheet" type = "text/css" href?” B .css ">

<Link rel = "alternate stylesheet" type = "text/css" href?”c.css ">

2. Internal style block

<Style>

<! -

H1 {color: red ;}

->

</Style>

3. @ import

@ Import url+a.css}

Note: This command must be placed in the <style> container and before all styles

It is recommended to put it in an html comment, <! --> The browser does not display the content in the comment, and the css Code such as import works normally.

4. inline Style

<P style = "color: red;">

Selector is a basic concept of css. The basic rules are as follows:

1. Rule structure:

H1 {color: red ;}

Selector {attribute: value ;}

This type is an element selector, which can basically include all html elements.

Attribute values can contain multiple elements, such as border: 1px solid red;

Common syntax

1) group:

Selector and description can be grouped:

H1, h2, h3 {color: red; background: # fff;}, the selector is separated by ",", and the attribute is separated ";"

2) class selector, that is, the declaration of the application through class = "stylename"

Definition:

. Stylename {color: red ;}

Note:

You can use multiple types of options in html, such as class = "cn1 cn2 cn3 ″

3) ID selector, that is, the style corresponding to the id attribute

Definition:

# A {color: red;}-> This definition uses the id = "a" element

2. This part is our common css syntax. Let's talk about our uncommon selector syntax.

1) Parent-Child structure, which corresponds to the document structure

For example, p span {border: 1px solid red;} corresponds to the <li> label below <p>, which is useful and can be accurately located.

Some special applications (supported by IE7 ):

(1) p> span {}, match all spans under all p

(2) p + span {}: match the first span tag that appears after the p element. The two must have the same parent tag.

2) attribute selector: (Note: The attribute selector ie7 is supported. The following versions are not supported. other browsers are supported)

Syntax: img [alt] {border: 1px solid ;}

Indicates the img tag with the expected alt attribute. Of course, multiple attributes can be matched, for example, img [alt] [title] {}; indicates the img tag that both attributes have, it can also correspond to specific values, for example, img [alt = "photography"] {};

The advanced application in the property selector. Special match:

(1) img [class ~ = "B"], ~ =: Corresponds to a value in the attribute, that is, to

(2) [class ^ = "a"], starting with

(3) [class $ = "a"], ended with

(4) [class * = "a"], containing

(5) [class | = "a"], equal to or starting with

3) pseudo classes and pseudo elements

In daily use, there are several pseudo classes of the <a> label: link: hover: active: visited

And: first-child: first: before: left: right: lang: focus: fist-line, etc.

Note: Dynamic pseudo classes can be applied to any element, for example, input: focus {background: red;} the background turns red when the input tag gets the focus.

The preceding syntax can be used in combination to achieve accurate positioning, simple indirect style.

Selector classification Integration

The priority level follows: Intra-row style> ID> Class> MARK

Basic Selector

Tag selector (eg: <p> </p>)

Class selector (eg: class)

ID Selector

Compound Selector

The "intersection" Compound selector (eg: p. menu {color: red}) must be a combination of tag + category/ID

"Union" Compound selector (eg: h1, h2, h3 {color: red })

"Descendant" Compound selector (eg: # menu. menulist {...})

"Child" compound selector (eg: # menu. menulist. selectit {...})

Use the sub-selector to reduce the definition of id and class

Example structure:

<Div id = "menu">

<Div class = "menulist">

<Div class = "selectit"> content </div>

</Div>

</Div>

Sample CSS:

# Menu {...}

# Menu. menulist {...}

# Menu. menulist. selectit {...}

Use the group selector to apply the same style to different elements

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

The style of h1, h2, h3, and div elements is 16 pixels in font and bold in font.

Use pseudo-class with Selector

By combining pseudo classes and classes, you can create several sets of different link effects on the same page. For example, we define a set of links in red and blue after access; the other group is green and the access is yellow:

A. red: link {color: # FF0000}

A. red: visited {color: # 0000FF}

A. blue: link {color: #00FF00}

A. blue: visited {color: # FF00FF}

Now the application is on different links:

<A class = "red" href = "..."> This is the first link </a>

<A class = "blue" href = "..."> This is the second link </a>

CSS's recent priority principle

/* If a style is defined for an element multiple times, the most recent level takes precedence. The style of the last level will overwrite the style of other rows> ID> Class> MARK */

The following is a reference clip:

CSS:

P {color: red}

. Blue {color: blue}

. Yellow {color: yellow}

HTML:

<P> Red </p>

<P class = "blue"> blue </p>

<P class = "blue" style = "color: green"> green </p>

<P class = "blue yellow"> yellow </p>

Note:

(1) Pay attention to the several priorities of the style (the priority is descending from top to bottom, and the following style overwrites the above style ):

-- Element style settings

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

-- Reference css files externally

(2) priority is not set in the access order, but in the declared order in css.

In the preceding example, <p class = "yellow blue"> yellow </p> is also displayed, because in css definition,. yellow is behind. blue.

Correct link Style

When using css to define various states of A link, pay attention to the order of writing: link: visited: hover: active using the first letter: l v h a, you can remember LoVe, hate, two words to remember their order.

: Link -------- link color

: Visited ----- the color after the mouse clicks

: Hover ------- hover the cursor over the unspecified color (hover)

: Active ------- the color of an instant mouse click

: Flexible use of hover

IE6 does not support the hover attribute except the tag. We know that the hover attribute is the mouse hover effect. In IE7 and FF, the hover attribute effect can be set for almost any element. This is good for us to make different accesses.

For example:

P {

Width: 360px;

Height: 80px;

Padding: 20px;

Margin: 50px auto 0 auto;

Border: 1px solid # ccc;

Line-height: 25px;

Background: # fff;

}

P: hover {

Border: 1px solid #000;

Background: # ddd;

}

---------------- This effect applies to IE7 and FF

P {

Color: # 00f;

Text-decoration: none;

Font-size: 13px;

}

P a: hover {

Color: #036;

Text-decoration: underline;

}

----------------- This effect is for IE6

Notes for defining A label

When we define a {color: red;}, it represents the four state styles of A. If we want to define the State put by a mouse at this time, we only need to define: the other three States are the styles defined in.

When defining only one A: Link, remember to define the other three States!

Disable line feed and force line feed

In tables or layers, we may want the content to not wrap or force line breaks. We can use some CSS attributes to meet these requirements.

Disable line feed: white-space: nowrap

Forced line feed: Word-break: Break-all; white-space: normal;

Difference between relative and absolute

Absolute --- position: absolute In css. It indicates absolute positioning. It refers to top, right, bottom, and left (trbl) in the upper left corner of the browser) positioning. If trbl is not set, the original vertices are marked as the original vertices Based on the parent level by default. If trbl is set and the position attribute is not set at the parent level, the current absolute is located at the original point in the upper left corner of the browser. The location is determined by trbl.

In relative --- CSS, the statement is position: relative. It means absolute relative positioning. It refers to the original point of the parent level as the original point, and the original point of the body is the original point without a parent level, trbl is used for positioning. When the parent class has CSS attributes such as padding, the original points of the current level are located according to the original points of the parent level content area.

Differences between block-level element blocks and inline Elements

Block level --- you can define the width and height, and create an exclusive line (for example, div UL)

Inline --- width and height cannot be defined, such as text elements (such as a span)

Differences between display and visibility

Both display: none and visibility: hidden can hide an element. However, visibility: hidden only hides the content of the element, but its location space is still reserved. Display: None removes the elements from the page, and the occupied position is also deleted.

BACKGROUND Background syntax

Background-image: url(background image .jpg, GIF, BMP );

Background-color: # ffffff; (background color)

Background-color: transparent; <-- set the background to transparent color->

Background-repeat

Description

Repeat background image side by side

Repeat-X background image side by side in X direction

Repeat-y background image side by side in Y direction

No-repeat background images are not processed side by side

Does background-attachment fix the image position?

Description

When scroll pulls the scroll, the background image will move along (default)

When fixed pulls the scroll, the background image will not move

Locate the background-position: x y in length

Use percentage to locate background-position: X % Y %

Description

Shift X % to the right

Y % Move down

Backgroud-position: 0% 0%; top left

Backgroud-position: 0% 50%; middle left

Backgroud-position: 50% 0%; upper center

Backgroud-position: 50% 50%; Median

Backgroud-position: 100% 0%; top right

Backgroud-position: 0% 100%; bottom left

Backgroud-position: 100% 50%; middle right

Backgroud-position: 50% 100%; bottom center

Backgroud-position: 100% 100%; bottom right

Locate with keywords

Keyword description

Top (y = 0)

Center (x = 50, y = 50)

Bottom (y = 100)

Left (x = 0)

Exp:

Background-position: center;

The image is in the center of the specified background X = 50% Y = 50%

Background-position: 200px 30px

Comment writing

In Html:

<-- Footer -->

Content

<-- End footer -->

In CSS:

/* ---------- Header -----------------*/

Style

CSS naming rules

ID

(1) Page Structure

Container: Container

Header: Header

Content: content/Container

Page subject: Main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: Column

Overall Layout width of the page peripheral control: wrapper

Left right center

(2) Navigation

Navigation: nav

Main navigation: mainnav

Subnavigation: subnav

Top navigation: topnav

Side navigation: sidebar

Left Navigation: leftsidebar

Right navigation: rightsidebar

Menu: Menu

Sub menu: submenu

Title: Title

Abstract: Summary

(3) Functions

Logo: logo

Advertisement: banner

Login: Login

Logon entry: loginbar

Registration: regsiter

Search: search

Functional Area: shop

Title: title

Join: joinus

Status: status

Button: btn

Scroll: scroll

Tab: tab

Article list: list

Message: msg

Current: current

Tips: tips

Icon: icon

Note: note

Guide: guild

Service: service

Hotspot: hot

News: news

Download: download

Vote: vote

Partner: partner

Link

Copyright: copyright

Class Name

(1) color: use the color name or hexadecimal code, such

. Red {color: red ;}

. F60 {color: # f60 ;}

. Ff8600 {color: # ff8600 ;}

(2) font size: Use "font + font size" as the name, such

. Font12px {font-size: 12px ;}

. Font9pt {font-size: 9pt ;}

(3) alignment style. Use the English name of the alignment target, as shown in figure

. Left {float: Left ;}

. Bottom {float: bottom ;}

(4) The title bar style is named by "category + function", as shown in figure

. Barnews {}

. Barproduct {}

Note ::

All lowercase;

Try to use English;

Without adding hyphens or underscores;

The first letter of the second word (eg: maincontent) can be capitalized without the use of hyphens or underscores );

Try not to be abbreviated, except words that can be understood without looking at them.

Main Site CSS files

Main master.css

Module module.css

Basic shared base.css(root.css)

Layout.css

Themes.css

Columns.css

Text font.css

Form forms.css

Patch mend.css

Print print.css

Padding affects width

If some spacing is required between a group of labels to be nested, leave it to the margin attribute of the label located inside, instead of defining the padding of the label located outside.

Perfect single-pixel box line table

Table {border-collapse: collapse ;}

Td {border: 1px solid #000 ;}

If the text is too long, the excessive text will be displayed as a ellipsis.

<Style = "width: 120px; height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">

Not all styles must be abbreviated

When p {padding: 1px 2px 3px 4px} is defined in the style sheet, a style is added in the subsequent project to add 5 PX and 6 PX. We do not have to write p. style1 {padding: 5px 6px 3px 4px }. It can be written as p. style1 {padding-top: 5px; padding-right: 6px;}, you may feel that this writing is not as good as it was before, but you have never thought about it, you have already defined the style in your writing. In addition, you do not have to look for the original value of bottom and left fill! If the previous style P changes later, the style of p. style1 you define will also change. (This method is important for later style modification)

Several common CSS detail processing styles

1) align the two ends of the text: text-align: justify; text-justify: inter-ideograph;

2) fixed width Chinese Character truncation: overflow: hidden; text-overflow: ellipsis; white-space: nowrap, cannot process multiple rows .) (IE5 or above) FF cannot. It only hides.

* ** Universal force line feed: white-space: normal; word-break: break-all;

Disable line feed: white-space: nowrap

Forced line feed: word-wrap: break-word; word-break: normal;

. AutoNewline

{

/* Word-break: break-all; Method 1 required */

/* Word-wrap: break-word; overflow: hidden; method 2 */

/* Word-wrap: break-word; word-break: normal; Method 3 */

Word-wrap: break-word; word-break: break-all;

}

. NoNewline

{

/* Word-break: keep-all; Method 1 required */

White-space: nowrap;

}

3) fixed-width Chinese character (word) lines: table-layout: fixed; word-break: break-all; (IE5 or above) FF cannot.

4) <acronym title = "Enter the text to be prompted" style = "cursor: help;"> text </acronym> move the cursor over the text to see the effect. This effect can be seen on many foreign websites, with few in China.

5) set the image to translucent :. halfalpha {background-color: #000000; filter: Alpha (Opacity = 50)} passed the test in IE6 and IE5, and FF failed. This is because the style is private to IE;

6) FLASH transparency: Select swf and open the original code window. Enter <param name = "wmode" value = "transparent"> the above Code for IE before </object>.

Add a similar parameter wmode = "transparent" to the <embed> label for FIREFOX"

7) When you place your mouse over an image for a webpage, the image will become brighter. You can use the image replacement technique or the following filter:

. Pictures img {

Filter: alpha (opacity = 45 );}

. Pictures a: hover img {

Filter: alpha (opacity = 90 );}

8) layer alignment in the browser

Body {text-align: center}

# Content {text-align: left; width: 700px; margin: 0 auto}

9) vertical alignment of single row content in layers

# Content {height: 19px; line-height: 19px;} the disadvantage is that you do not need to wrap the content.

10) layer vertical center alignment in the browser

The disadvantage is that the scroll bar cannot appear either horizontally or vertically. It can only be displayed on one screen.

In fact, the solution is like this: first we need position: absolute; absolute positioning. For layer locating, the method of using the negative value of the external patch margin is used. The negative value is the layer width and height divided by 2.

For example, the width of a layer is 400, and the height is 300. Set the absolute distance between the upper part and the left part to 50%. The value of margin-top is-150. The value of 'margin-left' is-200. In this way, we can write a style that is perpendicular to the browser.

Please refer to the instance code:

Div {

Position: absolute;

Top: 50%;

Left: 50%;

Margin:-150px 0 0-200px;

Width: 400px;

Height: 300px;

Border: 1px solid red;

}

11) CSS controls adaptive image size

Div img {

Max-width: 600px;

Width: 600px;

Width: expression (document. body. clientWidth> 600? "600px": "auto ");

Overflow: hidden;

}

Notes for Using float attributes

Use the border attribute to determine the layout of error elements

An error occurs when you use the float attribute layout. Add the border attribute to the element to determine the element boundary.

The clear attribute cannot be specified for the parent element of the float element.

If the clear attribute is used for the parent element of the float element in MacIE, the layout of the surrounding float element will be chaotic. This is a famous bug of MacIE. If you do not know it, it will lead a detour.

The float element must specify the width attribute.

Many browsers have bugs when displaying float elements with unspecified width. Therefore, regardless of the content of the float element, you must specify the width attribute for it.

In addition, when specifying Elements, try to use em instead of px as the unit.

The float element cannot specify attributes such as margin and padding.

IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify the margin and padding attributes for the float element (you can nest a div inside the float element to set the margin and padding attributes ). You can also use the hack method to specify a special value for IE.

The sum of float elements must be less than 100%

If the sum of the float elements width is exactly 100%, some ancient browsers will not be able to display normally. Therefore, make sure that the sum of width is less than 99%.

Browser compatibility issues (for FF/IE6/IE7)

1. CSS hack: differentiate IE6, IE7, and firefox

Difference FF, IE7, IE6:

Background: green! Important; background: orange; * background: blue;

IE6 can recognize *, but cannot recognize it! Important,

IE7 can recognize * and can also recognize! Important;

FF cannot recognize *, but can recognize it! Important;

Add another underscore (_).

IE6 supports underlines, while IE7 and firefox do not.

Source Document