CSS Simple notes

One, add style sheet to HTML document
1, inline style
<p style= "color: #F00" >
2, inline style
<style type= "Text/css" >p {color: #F00;} </style>
3. External style
<link rel= "stylesheet" type= "Text/css" href= "External.css"/>
4, the style sheet applicable environment
All popular browsers support the most common media properties. This property can be applied to the <link> element to determine the environment in which the style sheet is applicable. Like what:
<link rel= "stylesheet" media= "handheld" type= "Text/css" href= "External.css"/>
Explains that style sheets are available for handheld devices. Media-supported attribute values are Screen,print,all, etc.

Second, the style sheet syntax
The definition of CSS is composed of three parts: selectors (selector), attributes (properties), and values (value).
The basic format is as follows:
selector {Property:value}, multiple attribute/value pairs must be separated by semicolons.

A selector can be in many forms:
1, to define the style of HTML tags , such as body, P, TABLE ..., you can define its properties and values by this method, attributes and values to be separated by a colon:
Body {Color:black}
2, class selector , starting with the dot number, such as
. Right {Text-align:right}
Apply a class selector to a tag
Fill in the name of the class in the tag's class attribute, and be careful not to point the number. Such as:
<div class= "dreamdu1" > Connection div tag with dreamdu1 style <div>
<div class= "dreamdu12px dreamdublack dreamdubold" > Using spaces to separate multiple styles join div tags <div>

3, ID Selector

The ID parameter in the HTML page specifies a single element, and the ID selector is used to define a separate style for this single element, and the style applies only to the element specified by the ID parameter. For example:
<p id= "Intro" >
This paragraph is aligned to the right
</p>
Define the ID selector to precede the ID name with a "#" number. In the following example, the id attribute matches all elements of the id= "Intro":
#intro
{
font-size:110%;
Font-weight:bold;
Color: #0000ff;
Background-color:transparent
}

Combining IDs and selectors
h2#title{

}
Identifies the H2 tag that is applied to the id attribute to title

4, selector Group

You can combine selectors of the same attributes and values to write, separating the selectors with commas, which reduces the style repetition definition:
H1, H2, H3, H4, H5, h6 {Color:green}

5. Include Selector

You can separate the stylesheet for a relationship definition on a single element, and element 1 contains element 2, which is defined only for element 2 in element 1, not for individual element 1 or element 2,
Table A
{
font-size:12px
}

Three, the style surface folds
Style surface Overlay You can apply multiple style sheets to the same page element, which shows all the styles that are applied, and the top style overrides the lower style for the repeatedly defined parts of multiple style sheets. The top-level style is inline, followed by an inline style, and finally an external style. You can override an externally defined style sheet by using inline or inline style sheets.
For externally defined style sheets, the added order level is progressively higher, with the most joined external style sheet having the highest level in the external style.
For example, add the following style sheet in turn:
<link rel= "stylesheet" type= "Text/css" href= "First.css"/>
<link rel= "stylesheet" type= "Text/css" href= "Second.css"/>