Front End Learning V-bomb: CSS (i)

Front End Learning V-bomb: CSS (i)
Create CSS: < linkRel= "stylesheet" type= "Text/css" href= " mystyle.css"/> Outreach <style type="text/css">hr {Color:sienna;} p {margin-left:20px;} body {Background-image:url ("Images/back40.gif");} </style>　　内联1. Selector: Derived selector: li strong{font-style:italic; font-weight:normal;} ID Selector: #song {font-style:italic;}

The ID selector can appear only once but the derived selector of the ID selector may appear multiple times #song p {}

Class selector: .center{Text-align:center} element selector: the p {} selector is grouped with, separating P,li {} (applicable to P and Li) descendant selectors: Div.sidebar {background:blue;} div.mainconte NT {background:white;} div.sidebar a:link {color:white;} div.maincontent a:link {color:blue;} Property selector: [title]{color:red;} (this refers to all elements with the title attribute)

　　　　　　　　[title=Songhaolun]{border:5px solid blue;}

Adjacent sibling selector: Li + li {font-weight:bold;} The above selector only changes the second and third list items in the list to bold. The first list item is not affected. child element Selector: H1> Strong {color:red;}Name implies

Pseudo-Class: CSS pseudo-classes are used to add special effects to certain selectors： a:link{color: #FF0000}/* Non-accessible link */ a:visited{color: #00FF00}/* Visited link */ a:hover{color: #FF00FF}/* Mouse moves to link */ a:active{color: #0000FF}/* Selected link */

2. Positioning to align floats

The CSS positioning (positioning) property allows you to position elements

There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning.

By using position, we can select 4 different types of positioning, which affects how the element box is generated

Static

The element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.

Relative

The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

Absolute

The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.

Fixed

the element box behaves like the position is set to absolute, but its containing block is the window itself.

Relative positioning

If a element is positioned relative to it, it will appear where it is located. You can then move the element "relative to" its starting point by setting a vertical or horizontal position.

#box_relative {  position:relative;  left:30px;  top:20px;}

Absolute positioning

Absolute positioning makes the position of an element independent of the document flow and therefore does not occupy space. This is different from relative positioning, where relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal stream.

#box_relative {  position:absolute;  left:30px;  top:20px;}

Floating

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.

Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.

IMG  {  float:right;  }

Left	Element floats to the left.
Right	The element floats to the right.
None	The default value. The element does not float and appears in its position in the text.
Inherit	Specifies that the value of the float property should be inherited from the parent element.

Align horizontally by using the margin property

You can align the block elements by setting the left and right margins to "auto".

Note: unless already declared! DOCTYPE, otherwise the use of Margin:auto is not valid in IE8 and earlier versions.

The left and right margins are set to auto, which specifies that the available margins are equally allocated. The result is a centered element:

. center{ margin-left:auto;margin-right:auto; Width:70%;background-color: #b0e0e6;}

One way to align elements is to use absolute positioning:

. right{ position:absolute; Right:0px;width:300px;background-color: #b0e0e6;}

Another way to align elements is to use the Float property:

. right{ float:right; Width:300px;background-color: #b0e0e6;}

Front End Learning V-bomb: CSS (i)