What are the css rules that can be used and what are the functions of these rules?

First, make good use of css abbreviation rules.

/* Pay attention to the writing order */

1. About margins (4 sides):

1px 2px 3px 4px (up, right, down, left)

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

1px 2px (omitted upper equals lower)

1px (all four sides are the same)

2. Simplify all:

*/ body{margin:0}-indicates that the margins of all elements in the web page are 0.

# menu {margin: 0}-indicates that the margin of all elements under the menu box is 0.

3. Abbreviation (border) specific style:

Border: 1px solid # ffffff

border-width:0 1px 2px 3px；

4. About the abbreviation rules of words:

Font style: italic; Italic form

Font variation: small capital letters/normal; Variant Style: Small Capital Letter/Normal

Font thickness: bold;

font-size: 12px；

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

Font series: arrial, sans-serif, verdana

Abbreviated as:

Font: italic small capital bold12px/1.5emmarial, sans serif;

Note: font size and line height are combined with diagonal lines and cannot be written separately.

5. About the background picture:

Background: # fffuurl (log.gif) fixed the upper left corner without repetition;

6. About the list:

List-style-type: square/none;

List-Style-Location: Inside;

list-style-image:URL(filename . gif)；

Abbreviated as:

List style: None in url (filename.gif)

Second, introduce CSS styles in four ways.

1.link

& ltlink rel = " style sheet " type = " text/CSS " href = " a . CSS " >

Relative relation

Type data types, there are many kinds.

Href path

Some browsers support candidate styles. Keywords: alternative:

& ltlink rel = " style sheet " type = " text/CSS " href = " a . CSS " >

& ltlink rel = " alternate style sheet " type = " text/CSS " href = " b . CSS " >

& ltlink rel = " alternate style sheet " type = " text/CSS " href = " c . CSS " >

2. Internal style block

& ltstyle & gt

& lt！ –

H 1 {color: red; }

–& gt；

& lt/style & gt；

3.@ Import

@ Import url{a.css}

Note: This instruction must be placed in the

Suggest putting it in the html comments.

4. Embedded style

& ltp style = " color:red；" & gt

Selector is a basic concept of css, and the basic rules are as follows:

1. Rule structure:

H 1 {color: red; }

Selector {Attribute: Value; }

This class is an element selector, which can basically contain all html elements.

Attribute values can contain multiple elements, such as: border:1pxsolidred;

general grammar

1) grouping:

Selectors and declarations can be grouped:

H 1, h2, h3 {color: red; Background: # fff}, selectors are separated by ",",and attributes are separated by ";" Separation and segmentation

2) Class selector, that is, declaration applied through class="stylename "

Definition:

. style name { color:red； }

note:

You can use many types of selections in html: for example, class = "cn 1cn2cn3 ".

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

Definition:

# a {color: red; }-& gt； This definition refers to an element with ID = "a "

2. This part is our common css grammar. Let's talk about selector syntax that we don't often use.

1) parent-child structure, corresponding to the document structure diagram.

Such as pspan {border:1pxsolidred; } corresponds to

Some special applications (supported by IE7):

( 1)p & gt； Span{}, matching all spans under all p's.

(2) p+span{}, which matches the first span tag that appears immediately after the p element. They must have the same parent label.

2) Property Selector: (Note: Property Selector ie7 is only supported, but it is not supported in the following versions, and other browsers can basically do it)

Syntax: img [alt] {border:1pxsolid; }

Represents an img tag with alt attribute, but it can also support multi-attribute mapping, such as IMG [ALT] [title] {}; Represents an img tag that both attributes have.

It can also correspond to specific numerical values, such as img [alt = "photography"] {};

Advanced application in attribute selector, special matching:

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

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

(3) [class $ = "a"], ending in a.

(4) [class * = "a"], including one.

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

3) Pseudoclasses and Pseudoelements

In daily use, it is mainly

And: the first child: first: before: left: right: lang: focus: boxing line, etc.

Note: dynamic pseudoclasses can be applied to any element, such as input: focus {background: red; When the input label gets the focus, the background turns red.

By combining the above grammar, an accurate, simple and indirect style can be achieved.

Thirdly, selector classification and integration.

The priority is as follows: embedded style >; ID & gtClass & gt tag

The basic selector marks the selector (for example:

Category selector (e.g. class)

ID selector

Compound selector

"Intersection" composite selector (for example: p.menu{color:red}) must be.

Tag+category /ID combination

Combined composite selector (e.g. h 1, h2, h3 {color: red})

"Descendants" compound selector (for example: #menu.menulist{...})

"child" compound selector (for example: # menu.menulist.select it {...})

Fourth, use sub-selectors to reduce the definition of id and class.

Example structure:

& ltdiv id = " menu " & gt

& ltdiv class="menulist " >

& ltdivclass="selectit "> content & lt/div & gt；;

& lt/div & gt；

& lt/div & gt；

Sample CSS:

# Menu {...}

# Menu. Menu list ...}

# Menu. Menusian. Select it {...}

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

Such as H 1, H2, H3, div {font-size:16px; font-weight:bold}

Then the styles of H 1, H2, H3 and div elements are all 16 pixel fonts, and the fonts are bold.

Six, the use of pseudo class and selector.

By combining pseudo-classes and classes, we can make several different groups of link effects in the same page. For example, we define a set of links as red.

Blue after the visit; The other group is green and yellow after the visit:

a.red:link {color: #FF0000}

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

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

A.blue: visited {color: #FF00FF}

Now apply to different links:

& lta class="red"href= "... "& gt This is the first set of links.

& lta class="blue" href= "... "& gt This is the second set of links.

Seven, CSS recent priority principle

/* If a style is defined for an element multiple times, the latest level takes precedence, and the latest level style will override other in-line styles >; ID & gtClass & gt mark */

The following is a quote:

CSS:

P {color: red}

. Blue {color: blue}

. Yellow {color: yellow}

HTML:

& ltp> is shown in red here.

& ltp class="blue "> It is shown in blue here.

& LTP class = "blue" style = "color: green" > It is shown in green here.

& ltp class="blue yellow "> It is shown in yellow here.

note:

(1) Pay attention to several priority orders of styles (priority is decreasing from top to bottom, and the following styles cover the above styles):

-Element style settings

-Head area

-external reference css file

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

As in the above example

Behind.

Eight, write the correct link style

When defining various states of links with css, we should pay attention to the order of writing, that is,: link :visited :hover :active uses the initial letter: L V H A,

You can remember the order of love, hate and hate by memory.

: link-the color of the link

: Visited-the color after mouse click.

: Hover-

: active- the color when the mouse clicks.

Nine, the flexible use of hovering

IE6 does not support the: hover attribute, except for the A tag. We know that the hovering property is the mouse hovering effect. In IE7 and FF, for almost any element,

You can set the: hover property effect. This is very effective for us to make different visits.

For example:

p {

Width: 360px

Height: 80px

Filling: 20px

Margin: 50px auto 0 auto

Border: 1px solid # ccc

Line height: 25px

Background: # fff

}

Hover {

Border: 1px solid # 000;

Background: # ddd

}

-This effect is for IE7 and FF.

free of particular average

Color: # 00f

Text decoration: none;

Font size:13px;

}

Hover {

Color: # 036;

Text decoration: underline;

}

-This effect is for IE6.

Ten, the definition of the label should pay attention to small problems.

When we define a {color: red; }, which represents the style of four states of A. If you want to define a state on the mouse at this time, you can define it.

A: Just hover. The other three States are in ..

When only one a:link is defined, the other three states must be defined!

Eleven, prohibit content wrapping and forced content wrapping.

In a table or layer, we may want the content to wrap or force it to wrap, and we can achieve these requirements through some css properties.

No line break: blank: nowrap

Forced line break: hyphenation: full break; Blank: Normal;

Twelve, the difference between relative and absolute

The writing in absolute CSS is: location: absolute; He means absolute positioning. He pointed to the upper left corner of the browser and cooperated.

Up, right, down and left (hereinafter referred to as TRBL) for positioning. If TRBL is not set, the original marker point based on the parent marker will be used by default.

Be original. If TRBL is set and the parent does not set the location attribute, the current absolute location is based on the upper left corner of the browser.

Positioning and location will be determined by TRBL.

Relative-CSS is written as: position:relative；; He means absolute relative positioning. He called the origin of the matrix the origin.

If there is no parent body, take the origin of the geometry as the origin and use TRBL for positioning. When there are CSS attributes such as padding in the parent, the original of the current level

This point is located with reference to the original point of the parent content area.

Thirteen, distinguish between block-level elements and in-line elements.

Block level-width and height can be defined, and separate lines (for example, divul) can be used.

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

Fourteen, the difference between display and visibility

Both display:none and visibility:hidden can hide elements, but visibility:hidden only hides the contents of elements, but it uses

Location space is still reserved. On the other hand, Display:none removes an element from the page, and the position it occupies will also be deleted.

Fifteen, some background grammar

Background-image: url (background mode. jpg、gif、BMP)；

Background color: # FFFFFF (background color)

Background color: transparent; & lt- Set the background to transparent color->

Background-Repeatedly change the setting of repeated juxtaposition of background images.

explain

Repeat the background picture side by side

Repeat -x background pictures are side by side in the x direction.

Repeat -y background pictures are side by side in the y direction.

Non-repeating background pictures will not be processed side by side.

Does the background attachment fix the picture position?

explain

When scroll pulls the scroll bar, the background picture moves with it (the default value).

When the scroll bar is fixed, the background picture will not move with it.

Location background-location: x y length.

Use percentage to locate the background position: x% y%

explain

X% moves to the right

Y% moves down

Background location: 0% 0%; The upper left corner

Background location: 0% 50%; Left middle

Background location: 50% 0%; Above the middle

Background location: 50% 50%; Right in the middle.

Background location:100% 0%; upper right

Background location: 0%100%; lower left corner

Background location:100% 50%; Right middle

Background location: 50%100%; Zhongxia

Background location:100%100%; Lower right

Locate by keyword

Keyword description

At the top (y = 0)

In the center (x = 50, y = 50)

Bottom (y = 100)

Zuo Zuo (x= 0)

Exp:

Background-location: center;

The picture is centered on the specified background at X=50% Y=50%.

Background-Location: 200 pixels 30 pixels

Sixteen, the writing of notes

In Html:

& lt！ -Footer->

content

& lt！ -End footer->

In CSS:

/*-Title-*/

style

Seventeen. Naming specification of CSS

The naming of 1 Identification (identification)

(1) page structure

Container: container

Title: Title

Content: content/container

Page body: main page

Footer: Footer

Navigation: navigation

Sidebar: Sidebar

Column: column

Page periphery controls overall layout width: packaging

Center left and right

(2) Navigation

Navigation: navigation

Main navigation: main navigation

Sub-navigation: subnav

Top navigation: top navigation

Side navigation: sidebar

Left navigation: left sidebar

Right navigation: right sidebar

Menu: Menu

Submenu: submenu

Title: Title

Summary

(3) Function

Logo: logo

Advertising: banners

Login: login

Log in: log in

Registration: regsiter

Search: search

Functional area: store

Title: Title

Join: joinus

State: state

2. Naming of classes

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

. Red {color: red; }

. f60 { color:# f60； }

. ff 8600 { color:# ff 8600； }

(2) font size, directly using "font+font size" as the name, such as

. font 12px { font-size: 12px； }

. font 9pt { font-size:9pt； }

(3) Alignment method, using the English name of the alignment target, such as

. left { float:left； }

. Bottom {float: bottom; }

(4) Title bar style, named by "category+function", for example

. barnews { }

. barproduct { }

note:

U is all lowercase;

You try to use English;

U without middle bar and underline;

U 2 combination words can capitalize the first letter of the second word (for example, main content); ) without the middle bar and underline;

You should try not to abbreviate unless it is a word you can understand at a glance.

3. css file of main site

Master.css

Module module.css

Basic share base.css(root.css).

Layout.css

Theme themes.css

Column columns.css

Text font.css

Form forms.css

Patch patch. css

Print. css

Eighteen. Fill influence width

If a set of tags to be nested needs some space, leave the tag's margin attribute inside instead of defining the bit.

Filling on the outside of the label

Nineteen, the perfect single pixel contour table

Table {border-collapse: collapse; }

TD { border: 1px solid # 000； }

Twenty, if the text is too long, the ellipsis of the long part will be displayed.

& ltstyle = " width: 120 px； Height: 50px Overflow: Hidden; Text overflow: ellipsis; Blank: nowrap ">

2 1. Not all styles should be abbreviated.

When P {padding: 1px2p3x4px} is defined before the style sheet, a style filled with 5px at the top and 5px at the bottom will be added in subsequent projects.

6px. We don't need to write p.style1{padding: 5px6p3x4px}. It can be written as p.style1{padding top: 5px; Fill-right: 6px}, you may feel that this writing is not as good as the original, but have you ever thought that your writing has repeated the definition?

Besides, you don't have to find the original values of bottom padding and left padding! If the previous style p changes later, you define it.

The style of p.style 1 will also be changed. (This method is very important for modifying styles later. )

Twenty-two, several common CSS detail processing styles

1) Alignment of both ends of Chinese characters: text-align: justify; Text alignment: between ideographic characters;

2) Fixed-width Chinese character truncation: overflow: hiding; Text overflow: ellipsis; Blank: nowrap (don't let it get tangled, just

Handle text truncation on one line, not multiple lines. ) (IE5 or above) FF: No, you can only hide.

* * * Universal forced line break: blank: normal; Word-breaking: all broken

No line break: blank: nowrap

Forced line break: line break: hyphenation; Hyphenation: normal;

. Automatic news

{

/* hyphenation: break-all；; Method 1 must be */

/* word break; Overflow: hide; Method 2 */

/* word break; Hyphenation: normal; Method 3 */

Word wrap: hyphenation; Word-breaking: all broken; }

. Non-new

{

/* participle: keep-all；; Method 1 must be */

Blank: nowrap

}

3) Fixed-width Chinese character (word) line folding: table-layout: fixed; Word-breaking: all broken; (IE5 or above) FF cannot.

4)& lt； Acronym title= "Enter the text to prompt" style = "cursor:help；;" & gt text

Use words to see the effect. This effect can be seen in many foreign websites, but rarely in China.

5) Set the picture to be translucent:. half alpha { background-color:# 000000； Filter: Alpha (opacity =50)} passed IE6 and IE5 tests.

But FF failed, because this style is private to IE.

6)FLASH Transparency: Select swf, open the original code window, and click

Value = "transparent"> The above is the code of IE.

give

7) When you make a webpage, you often use the mouse to put the picture on the picture, which will make the picture brighter. You can use the technique of replacing pictures, or you can use the following filtering.

Mirror:

. Picture image {

Filter: alpha (opacity = 45); }

. Picture a: hovering image {

Filter: alpha (opacity = 90); }

8) Align layers in the browser.

Text {text-align: center}

# content { text-align:left； Width: 700px Margin: 0 Auto}