4 ways to use CSS:
1. inline:
<p style="color:#F00; font-size:12px;"></p>
2. embedded:
<head>
<style type="text/css">
.......
</style>
</head>
3. link
<link type="text/css" rel="stylesheet" href="style.css"/>
4. import
@import import css file while initialization be a part of a file
selector:
tag: p{ }
id: #one{ }
class: .one{ }
general: *{ }
nested selector: #div1 p a {color:#900;}
block | inline | |
---|---|---|
width & height | YES | NO |
allow others be in same line | NO | YES |
inline to block: display:block;
margin: 1px 2px 3px 4px; top right bottom left ( t r ou b l e)
clear float:
.clear{ clear: both;}
<div class="clear"></div>
vertical center:
line-height = height (text)
absolute position:
margin-left = -width/2
margin-right = -height/2
position:absolute;
top:50%;
left:50%;
(if parent element exists, parent element's position should be relative)
Text horizontal center:
text-align: center;
Reset:
tags reset: *{margin:0px; padding:0px;} body,div,p,a,ul,li{margin:0px; padding:0px;} (group declaration)
img border reset: img{border:none;}
font size reset: h1{font-size:100%;}
Pseudo classes: