CSS Novice Learning Summary

Css

I. Basic CONCEPTS
1. Selector: Is any element that is available in HTML, for example: Body,a,td p ...
2, class: Is our own to the format of the name, the application of the time called the name (class= Class)
3, Pseudo class: visited, active, link, etc.

Second, the basic grammar

1, Selector {property: value}

For example: TD {font-size:9pt}

2, Selector. Class {property: Value}

Example: td.aaa {color: #191970}

Only valid reference methods are available under this element: <p class=aaa>

3. Class {property: Value}

For example:. AAA {color: #191970}

Any element can be used

For example: <p class=aaa ... > </p>

<a class=aaa ... > </a>

<td class=aaa ... > </td>
　　
4, selector: Pseudo Class {property: Value} For example: A:link {color:red}

5, Selector. Class: Pseudo Class {property: Value} For example: A.bbb:link {color:blue}

Reference method: <a class=aaa ...> </a>

6. Class: Pseudo Class {property: Value}

Example:. mainnv:hover {COLOR: #ff0000}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
Third, the specific use　　
　
1, in-line: With the selector {property: value}

For example: TD {font-size:9pt}

2, file head: Square between
<style type= "Text/css" >

<!--

a:link {Text-decoration:none color: #0072A8}//selector: Pseudo Class {property: Value}

a:visited {text-decoration:none; color: #0072A8}

a:active {text-decoration:none; color: #FF0000}

a:hover {text-decoration:underline; color:ff0000}

a.a1:active {COLOR: #ffffff}//Selector. Class: Pseudo Class {property: Value}

A.a1:link {COLOR: #ffffff}

a.a1:visited {COLOR: #ffffff}

A.a1:hover {COLOR: #faf108; Text-decoration:underline}

BODY{FONT-SIZE=9PT}//Selector {property: value}
H{FONT-SIZE:9PT}
td{font-size:9pt}

-->
</STYLE>

3. External files: Required file extension css,
<link rel= "stylesheet" href= "First.css" type= "Text/css" is the filename
　　　　
First.css contents are as follows:

a:link {COLOR: #3a2a00; Text-decoration:none}//selector: Pseudo Class {property: Value}
a:visited {COLOR: #602400; text-decoration:none}//is this way of connecting with a element
a:active {COLOR: #ff6600; Text-decoration:none}
a:hover {COLOR: #ff3300; Text-decoration:underline}

A.hot:link {COLOR: #dd0000}//Selector. Class: Pseudo Class {property: Value}
a.hot:visited {COLOR: #dd0000}//with the A element and indicates the class with hot display
A.hot:hover {COLOR: #ff0000}//reference method Class=hot
a.hot:active {COLOR: #ff3300}
　　　　　　　
A.blk:link {COLOR: #000000}//Selector. Class: Pseudo Class {property: Value}
a.blk:visited {COLOR: #000000}//with the A element and indicating class blk display
A.blk:hover {COLOR: #000000}

. mainnv{font-size:12px; font-weight:bold}//. Class {property: Value} Indicates the display of a class with MAINNV
. mainnv:link {COLOR: #cccc99}
. mainnv:visited {COLOR: #cccc99}//. Class: Pseudo Class {property: Value}
. mainnv:active {COLOR: #cccc99}//All specified classes are displayed in this way with MAINNV connection effects
. mainnv:hover {COLOR: #ff0000; Text-decoration:none}

. main1 {BACKGROUND: #cccc99}//. Class {property: Value}
. main1t {COLOR: #cccc99}//All specified classes are displayed in this way main1t
. main2 {BACKGROUND: #c5c5b2}
. main3 {BACKGROUND: #e6e0b2}

five, control priority:

Priority: 1, insert in line 2, head mode 3, external connection file mode

---------------------------------------------------------------

I would like to ask, in a page to achieve two effects, that is, when the onmouseover, some of the fonts appear black, and some show white, please ask the hero, how to define the CSS? Thank you!
---------------------------------------------------------------

Nan Shan, the Hermit,
Use the Class!
2, class: Is our own to the format of the name, the application of the time called the name (class= Class)
　
For example, A.black:hover{color: #000000}
A.white:hover{color: #ffffff}
<a class=black> here shows Black </a>
<a class=white> here shows White </a>
The exact mosquito has been said,
See for yourself.
---------------------------------------------------------------

Add a few important CSS uses:
1.
Div#divid {color: #ff0000}

<div id=divid>div1</div>
<div>div2</div>

2.
Div#divid table Td{color: #FF0000}

<div id=divid><table><tr><td>table1</td></tr></table></div>
<div><table><tr><td>table2</td></tr></table></div>

The CSS style does not necessarily only use class=cssname reference, in fact, these two definitions can more reflect the beauty of CSS.
Note: You should make sure that the ID in the Web page is unique when you assign a style to an ID with div#divid. Otherwise there will be an error.