CSS Learning Note 01

CSS style Sheets
1. Colour: color:
Rgb
#FFFFFF: all bright, white;
#F00 = #FF0000, red;
2. Inline style
<!--style is set by using the Style property, which is nested within the label, which can be called inline style, the inline style is only valid for the current tag, and the elements in the inline tag replace the styles in the style with the
<H2 style= "color: #212267; text-decoration:underline;font-size:12px" > This is my first CSS file 3. External style
<style type= "Text/css" >
/*H2 indicates that all H2 tags in the page are valid */
h2{
Background: #aa1222;
Color: #fff;
}
</style>
4. External link Style
<link rel= "stylesheet" type= "Text/css" href= "Css02.css"/>

Style sheet Effect: The most effective is the internal style, but embedded in the label, the difficulty of modification, followed by the closer to the style of the label, the effect is more near the place to render.
It is worth noting that, for style sheets, the later definition overrides the first defined style sheet;

5 Selector
5.1 Tag Selector will work on all tabs in the page
p{
Color: #f00;
}
The 5.2 ID selector is obtained with the # number, (Gets the label with the ID xx): You can set the style of a label in the page
#p2 {
Font-weight:bold;
Text-decoration:underline;
}

Class 5.3 Selector. To represent (get the label of Class=xxx in the label): You can select a group of labels on the page, class= "xxx a group of labels
/** P.P1 represents a P tag class of P1, class selector */
p.p1{
Color: #54a;
font-size:16px;
}
p.p2{
Color: #998733;
}

5.4 Include selectors (get all the sub-labels in a tag)
P tags cannot contain div tags, block tags can only use span, container labels cannot be placed
P div{

}
Whether the primary tag contains div or level two, as long as there are many div tags inside the main tag, the full execution style

5.5 Sub-object selector (Gets the first-level sub-label of a tag), as well as the label
/* Sub-object selector, only for the first sub-object of the div tag */
div>span{
Background: #f0f;
}

5.6 Group Selector (multiple tags can be set at the same time, split with commas)
/* Group Selector, the following means that all tags with id d1 or P2 are in this style */
#d1, p2{
font-size:20px;
}
Independent with ID, not unique with class

CSS Learning Note 01