CSS Basics 01

First, the CSS basic knowledge introduction 1.CSS is cascading style sheet cascading style sheet shorthand 2.css small usage

Bold: Font-weight:bold; Normally used: normal;

Italic body: font-style:italic; Normally used: normal;

Underline: Text-decoration:underline; normal use: none;

Bold shortcut key: Fwb+tab

No bold shortcut key: Fwn+tab

Italic shortcut key: Fsi+tab

No italic shortcut: Fsn+tab

Underline shortcut key: Tdu+tab

No underline shortcut key: Tdn+tab

3.class class

1) class can be repeated, the same page can have more than one label at the same time belong to a class.

2) The same tag can carry multiple classes at the same time, separated by a space.

Note: In the page as far as possible with Class,id is JS with, JS to pass the id attribute to get the tag.

Second, the CSS advanced selector1. Intersection selector

The intersection selector can be delivered consecutively, for example:

Html:

Css:

H3.spacial.zhangyao {}

The selected element satisfies two conditions: must be a H3 tag, then must be a special label, and the intersection selector has no spaces.

2. Wildcard characters *

* means all elements, not high efficiency, try not to use.

inheritance and layering of 3.css

Inheritable Properties:

Text-, beginning with line-, beginning with font-.

These can inherit from the text style, and all the properties of the box, positioning, layout cannot be inherited.

Cascade Sex

4. Big summary of weight problem

1) First See if there is a check, if selected, then the (ID number, class number, the number of the table) to count weights. Who listens to who, if all is the same, very after write of prevail.

2) If not selected, then the weight is 0. If everyone is 0, the nearest principle.

5.important Properties

k:v!important; To give an attribute an increase in weight, infinity.

Emphasize 3 points:

1)! Important promotion is an attribute, not a selector;

2)! Important cannot increase the weight of inheritance, which is 0 or 0;

3)! Important does not affect the principle of proximity.

Three, Box model1. The area in the box

The main attribute in a box is 5: width, height, padding, border, margin

2.padding

The padding area has a background color, meaning that Background-color fills all areas within the border.

Note: The following syntax error: cannot write small attribute in front of large attribute

padding-left:30px; padding:20px;

padding:20px error padding-left:30px; correct.

3. Some elements default with padding (e.g. ul)

Therefore, we want to make the station convenient control, always like to clear this default padding

*{margin:0;

padding:0; }

However, the efficiency of the * is not high, so we choose to use the set selector. Such as:

H1,h2,h3 DL {margin:0;padding:0;}

4.border--> is a large integrated property

More stable in just a few: solid, dashed, dotted

The border attribute can be disassembled with two major ways to disassemble it:

1) Split by 3 elements:

border-width:10px 20px 10px 30px;

Border-style:solid dashed dotted;

Border-color:red Green blue yellow;

2) split by direction:

border-top:10px solid red;

border-right:10px solid red;

border-bottom:10px solid red;

border-left:10px solid red;

In the direction of the demolition can also be removed another layer:

border-top-width:10px;

Border-top-style:solid;

border-top-color:red;

One side does not: Border-left:none;

You can also adjust the left margin width to 0 border-left-width:0;

CSS Basics 01