Some basic content about CSS

Recently used CSS, just learn. CSS (cascading style Sheet) Chinese name cascading style sheet, used to add style control to HTML documents, is also a computer language.

First, CSS syntax
A) CSS rules are made up of selectors and declarations, constructed as Selector{declaration1;declaration2}, and multiple declarations are separated by semicolons. The declaration also contains the attribute property and the value two parts. The structure is property:value.

b) The value of the different property has a less capable notation, such as color: #ff000; Color:rgb (255,255,255); width:12px;width:98%;font-family: "Calibr" and so on.
c) The use of spaces in CSS does not affect work, and CSS is not sensitive to capitalization, but when it comes to working with HTML documents, class and ID names are case sensitive.

d) You can group selectors and then use the same declaration, such as
table,div,h1{
color:red;
}

Second, selector
Common selectors are derived selectors, ID selectors, class selectors, property selectors, and so on.
a) Derivation selector
A style can be defined based on the context of an element, so it is also called a context selector. For example, to make the strong element in the Li list into italics:

Li Strong {
Font-style:italic;
Font-weight:normal;
}

<ol>
<li><strong> I am Italic </strong></li>
<li> I am the normal font. </li>
</ol>

Let the strong color in the H2 be blue

H2 {
color:red;
}

H2 Strong {
Color:blue;
}

H2 strong overrides the H2 style definition

b) ID Selector
Used to specify a style for HTML elements labeled with a specific ID.

#red {color:red;}
<p id= "Red" > This paragraph is red. </p>

The id attribute cannot be duplicated in HTML, otherwise only the last rendered one takes effect.

The ID selector is also used to establish derived selectors that extend the use of derived selectors.

C) Class Selector
Start with a dot number, and the first element of the class name cannot be a number, as a basic use:
. Center {Text-align:center}
<H1 class= "center" >
The class selector can be used for all markup elements.
Class selectors can also be used with derived selectors:
. Fancy TD {
Color:orange;
}
When this is written, the table cells inside the larger element with the class name fancy will display the orange text.
td.fancy {
Color:orange;
}
When this happens, all cells with the class name fancy will be orange text.
D) Property Selector
Lets you set the style for the HTML element with the specified property. For example, set the style for all elements with the title property:

<H2 title= "Hello World" >hello world<a title= "Hello" href= "http://hello.com" >hello</a>

[Title]
{
color:red;
}

There are also attribute and value selectors, such as
[Title=hello] selecting elements of Title=hello
[Title~=hello] Select the element with the title containing Hello
[Title|=hello] Select the element whose title begins with Hello

e) Pseudo-class
Pseudo-classes are used to add special effects to selectors, such as controlling the status of hyperlinks:
a:link {color: #FF0000}/* link not visited */
a:visited {color: #00FF00}/* visited link */
a:hover {color: #FF00FF}/* mouse move to link */
a:active {color: #0000FF}/* selected Link */

Pseudo-class and CSS can also be used together:

a.red:visited {color: #FF0000}
<a class= "Red" href= "css_syntax.asp" >css</a>

Three, Box model
A) elements in CSS use a box model to define content (element), padding (padding), margin (margin), border (border), and so on.

b) The Padding property controls the white space between the element's border and the content, and margin sets an empty area outside the element's bounding rectangle.
If you write padding:10px or margin:10px directly, the four borders will take effect, or you can use *-top\*-right\*-bottom\*-left to set them separately, with the shorthand {padding\margin:1px,1px, 1PX,1PX}, which sets the corresponding margins in the clockwise order of the upper right and bottom left.

c) The length units of the CSS are divided into relative length units and absolute length units, relative length units have em (font height) \ex (height of font x) \px (pixels) \% (percent), absolute length units have in (inches) \cm\mm\pt (point1 point =72 1 inch) PC (picas,1px=12 point). When you use% for margins, it is calculated relative to the width of the parent element.

Some basic content about CSS