CSS Basics
１． CSS stands for Cascading Style Sheets（层叠样式表）
Styles were added to HTML 4.0 to solve a problem
2. Cascading Order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
- Browser default
- External style sheet
- Internal style sheet (inside the <head> tag)
- Inline style (inside an HTML element)
3. Basic Selector
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
Example:
// Most simple example
body {color: black}
// value has more than blank
p {font-family: "sans serif"}
// multiple value
p
{
text-align: center;
color: black;
font-family: arial
}
// grouping
h1,h2,h3,h4,h5,h6
{
color: green
}
4. Class Selector
// basic usage
p.right {text-align: right}
p.center {text-align: center}
You have to use the class attribute in your HTML document:
<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>
// Apply more than one class per given element
<p class="center bold"> This is a paragraph. </p>
// Define a style used by all HTML elements
.center {text-align: center}
In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:
<h1 class="center"> This heading will be center-aligned </h1>
<p class="center"> This paragraph will also be center-aligned. </p>
Note: Do NOT start a class name with a number! It will not work in Mozilla/Firefox.
5. The id Selector
You can also define styles for HTML elements with the id selector. The id selector is defined as a #.
The style rule below will match the element that has an id attribute with a value of "green":
#green {color: green}
The style rule below will match the p element that has an id with a value of "para1":
p#para1
{
text-align: center;
color: red
}
6. How to Use a Style Sheet
(1)External Style Sheet
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
(2)Internal Style Sheet
An internal style sheet should be used when a single document has a unique style.
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
(3)Inline Styles
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
不推荐使用
7. 很多实例，要用时可以参考
background, text,font,border,margin,padding,list
Reference
1. w3school CSS tutorial
http://www.w3schools.com/css/default.asp
2．CSS For beginner
http://www.codeproject.com/html/cssbeginner.asp
3. HTML Tag List
