HTML5 Getting Started (CSS style-------------------(CSS Basics point----------------------------))

CSS Inheritance + cascading + box + floating One CSS Inheritance

eg

<style>

div{

Color:pink;

font-size:30px;

width:500px;

Background:green;

padding:100px;

}

p{

color:red;

}

</style>

<div>

<p> We are all good kids </p>

<ul>

<li>

<p> We are all pillars </p>

</li>

</ul>

</div>

Pass the above code. , we can see that the P tag inherits the style of the div setting.

Inheritance is not just a descendant, it can be a descendant of a descendant. can continue forever.

inheritance is principled: color,text-,font-,line- are generally the attributes.

Two Cascade Sex 2.1

There are many overlapping styles in CSS, and the one that the element needs is selected in a multitude of styles. So how to choose? In the browser kernel has a rigorous weight calculation formula, through the weight calculation formula to select the desired style.

weight formula:ID Selector, class selector, label selector priority decreased in turn.

1. If the element is selected, then the weight formula can be used to calculate the size, and the larger will be used. If it is the same size, then who writes in the back to use WHO.

2. if the element is not selected, the style is passed in an inherited way, and the weight can be considered as 0. in this case we use the nearest principle, the nearest principle: Who is close to that element and who to choose.

3. If the element is not selected and the elements are close to each other, then we can use weights to calculate the formula. If the weight is the same size, then who writes in the back will use who.

2.2

eg

. two{

Color:green;

}

. one{

color:red;

}

<p class= "One" id= "haha" > we're all learning h5</p>

The above-mentioned situation is to choose according to the style. is independent of the order of the class property names set in the HTML element .

2.3

! Important : Promotes the priority of the property.

Eg: #haha {

Color:orange;

font-size:20px;

}

p{

Color:blue!important; to elevate the priority of a property

Color:blue;!important;

font-size:14px;

}

/* does not affect the nearest principle * /

. heiheihei{

Color:yellow!important;

}

. xixi{

Color:skyblue;

}

There are three points to note:

1. It is only valid for attributes, need to pay attention to the correct way of writing, written in the semicolon.

2. it cannot increase the inherited selector weight (that is, the selector for the property is not selected), which is 0 or 0

3. It does not affect the principle of proximity.

Three Box Model 3.1 Box

The box consists of 5 elements:width,height,padding, Border,margin

Width: Be sure to note that width is the breadth of the content.

Height: Note that height is the level of content.

Padding: Inner margin, gap between content and border

Border: Border

Margin: Margin, relative to the inner margin of memory. Gap outside the border

3.2padding inner margin

There are four ways to write Padding:

1, padding:20px; represents the four -pixel margin on the top right and bottom left

2, Padding:20px 30px; The first number is the size of the upper and lower direction, the second number is the size of the left and right direction

3, Padding:20px 30px 40px; The first number is the size of the upper direction, the second number is the size in the left and right direction, and the third is the margin size below the reverse.

4, Padding:10px 20px 30px 40px; This is the margin size in four directions respectively.

another form of Padding margin

padding-top:10px;

padding-right:70px;

padding-bottom:80px;

padding-left:90px;

Write the margin size in four directions, respectively.

3.3border Border

Border 's wording:

border:10px solid #567;

The three attributes represent: width, style, color, respectively; The color can be omitted by default to black, but the other two properties are not omitted.

Line Style: There are many kinds, for example: Solid Solid line dashed dashed outset protruding inset concave

border-width:10px;

border-style:dashed;

Border-color: #567;

The width, style, and color of the individual write edges. This is still shared with four sides.

border-top:10px solid red;

border-right:5px solid yellow;

BORDER-BOTTOM:15PX solid blue;

border-left:20px solid #789;

This is to set the width, style, and color for each edge individually.

border-top-style:dashed;

This is the top edge setting style property, which means that each property of each edge can be written separately.

Four Standard document Flow 4.1

Several phenomena in the standard document flow:

1. The order of arrangement is from left to right, top to bottom.

2. blank folding, if there is a newline or a space in the HTML language, the indentation will be replaced with a space to display in the Web page.

3. In the same row, align the bottom baseline.

4. Text wraps automatically.

The labels are divided into two types according to the standard document flow:

block-level tags: exclusive lines, you can set the width of the height and margins, you can generally put any content ( Except for P tags).

Inline Labels: can be displayed on a single line, can not be set wide and some spacing, usually text-level labels ( except P).

4.2

in the standard document flow, you can also implement the identity swap of block-level elements with row-level elements. Only need to be interchanged by the display property

Display:block; set as block-level element

Display:inline; set to inline level element

Display:inline_block; set to inline block-level elements. Inline block-level elements: displayed within a row, not exclusive rows. And you can set the width height and margin.

Five Floating

Floating is to let our elements out of the standard document flow, the purpose is to look good layout!

The phenomenon of floating:

1. Out of standard document flow is called de-flow, and there will be a word surrounding phenomenon. My penis is not covered!!

2. Floating elements Snap to each other, and if the parent container space is large enough, the floating element will be normal and the next element will immediately close to the previous one. If the parent container space is not large enough, then the element will find the superior to the superior to close, if not found then continue to find superiors close to, without the superior reliable then pull over.

3. Floating elements do not block-level and inline categories, that is, you can set the width of high margins.

4. After floating, the elements in the same row are aligned with the top edge as the baseline.

HTML5 Getting Started (CSS style-------------------(CSS Basics point----------------------------))