CSS basics syntax and CSS frequently used knowledge points summary

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Release today on the basics of CSS layout tutorial mainly on CSS Basics and CSS basic grammar application and some common necessary small knowledge points! Hope to help which webmaster and CSS layout Beginners!

the beginning = = = = =

CSS Basics Syntax

CSS rules consist of two main parts: selectors, and one or more declarations.

Each declaration consists of a property and a value.

Each property has a value. Property and value are separated by colons.

For example, the following line of code defines the text color within the H1 element as red and sets the font size to 14 pixels.

In this example, H1 is the selector, color and font are attributes, red and 14px are values.

h1 {color:red; font-size:14px} See a semicolon in the back, if it is a property or this attribute at the end can be without a semicolon, in addition to these two conditions must be added otherwise the page is very chaotic

=======================

Center page problem

You can set the

body{margin:0 Auto;

Some browsers will not be centered if you set this, then add this DTD declaration code

===================

Body and DIV Background setup issues

①, background-color//background color properties

②, Background-image:url (' background picture path ');//Background picture properties

Body {Background-color:blue} p{background-image:url (' background picture Path ');}

③, you can use the Background-repeat property if you want to tile the background image on the page.

Background positioning

You can use the Background-position property to change the position of the image in the background.

The following example centers a background image in a vertical tile in the BODY element:

Body

{

Background-image:url (iiwnet.gif);

background-repeat:repeat-y;//Vertical Tile Repeat-x Horizontal direction Repeat two directions are tiled no-repeat are uneven

background-position:center;//Center

}

The body is the label name, the background-color,background-image,background-repeat is the attribute, the blue is the attribute value, etc.

Of course, these attributes can be combined with a sentence to look at the following attributes comprehensive writing

=================

Multiple label combinations

H1,h2,h3 {color:red} It's comma-separated. It can be written together in the same way as some tag style. This reduces the use of code and can be called repeatedly

The title

The font color changes to red

=================

Attribute synthesis

div {font:italic normal bold 11pt Arial; It's a combination of font-related attributes.

The div's font style (Font-style) property value is italic, the font variable (font-variant) property value is normal, the font shading (Font-weight) property value is bold, and the font size (font) property value is 11pt, The font name (font-family) property value is Arial

p{border:1px Solid #dddddd}//This is the margin attribute synthesis size style (solid for solid lines dashed for dashed lines dotted as dots ... And you can see that I don't have a semicolon at the end of this CSS code. It's okay.

================

Label nesting

Div H1 {Color:blue}

Div inside the

The font color is blue.

Div is H1 's father H1 is the son of Div I'm writing CSS styles are all used in this way why?

Because if you think about it, you know how many people in the world are your fathers? You use tags to nest, even though this father's son has the same name, but this son is still the father's not another person, so when you nest it is not afraid to repeat in other places with this tag name or class name (ID selector is unique and cannot be duplicated)

===============

Define ID

#main {background: #ff0000; width:100%;}

Hello

Then call #mian directly

Here is the #+id name is the way, can also use the label name plus +#+id name, such as Div#main, generally not so used.

================

Define Class

. red {color:red;}

Hello

Similar to the same ID, "#" instead of ".", if a label also defines the ID and Class,id have priority.

* represents all the element styles under the label

Body * {padding:0px;}

Less used.

================

Okay, no time to sum up so much.

Style priority

(1) The Style > ID > class in the Label

(2) style > Imported styles in the Style > page of the label @import

(3) With link, such as, more written on the same level on the page.

If the same style is defined 2 times, the following occurrence has precedence.

All right! These are the most common basics I have summed up!end.

The above content by PHP Learning Network--Love the original preparation of micro-net, www.iiwnet.com,A5 starting, if reproduced please retain the copyright.

The original address of this article: http://www.iiwnet.com/div_css/120.html