簡単なウェブページの需要を満たすために、個人CSSノート

5794 ワード

        
1、    :
	1、    
	<style type="text/css" ></style>
	<style type="text/css" >@import url("css/layout.css");</style>
	2、    
	<a href="#" style="color:#000;">Home</a>
	3、    
	<link href="css/print.css" rel="stylesheet" type="text/css" />

2、	1、    :
	body{} div{} span{}
	2、     
	h1,h2,h3,p,span{}
	3、     
	h1 span{}
	4、id   
	#adam1985{} 
	5、class   
	.apple{}
	6、     +     
	h1 span,a,b{}
	7、     
	*{}

3、width:200px;
   height:200px;
   margin:20px;    
   padding:20px;    
   border:10px solid #000;     
	
4、border:border-width border-style border-color;
	border:10px  solid #000;
      
	border-style:solid;
	border-width:10px;
	border-color:#000;
       :[ border-top ] || [ border-right ] || [ border-bottom ] || [ border-left ]
	border-left:10px  solid #000;

5、border:10px solid #000;  solid  
	<border-style>
	none:    。border-color border-width     
	hidden:     。IE7        
	dotted:     。IE6    dashed   
	dashed:     。 
	solid:      
	double:     。               border-width  
	groove: 3D    。 
	ridge: 3D    。 
	inset: 3D    。 
	outset: 3D    。 

6、margin:[<length>|<percentage>|auto]
    :[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]
auto:            
<length>:           。      
<percentage>:           。      

  :	margin-top:10px;
	margin-right:20px;
	margin-bottom:30px;
	margin-left:40px;
	   margin:10px 20px 30px 40px;(  :    )
 :margin:30px 60px;(    30px,    60px)

7、padding: margin


    CSS       
8、body {font-family:Verdana, Arial, Helvetica, sans-serif;}
	    :font-family:Verdana, Arial, Helvetica, sans-serif(         )

9、    :font-size:
<absolute-size>:           。     :xx-small | x-small | small | medium | large | x-large | xx-large 
  medium       ,xx-small   medium 3/5 (h6),x-small: 3/4,small: 8/9 (h5),medium: 1 (h4),large: 6/5 (h3),x-large: 3/2 (h2),xx-large: 2/1 (h1), 
<relative-size>:                  。      em    。     :smaller | larger 
<length>:           。     。 
<percentage>:           。                  。     。 

	  :body {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		}

10、  (color):
	color:Color Name | HEX | RGB | RGBA | HSL | HSLA |transparent
	  :
	body {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		color:#3399cc;  (       :color:#39c;)
		}
	       : p {color:#cccccc;}
	RGB   :p {color:rgb(255,255,0);}

11、(    )font-weight:normal|bold|bolder|lighter|<integer>
normal:      。   number 400 
bold:   。   number 700。 
bolder:    。    strong b      
lighter:    
<integer>:            。    :100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 

	  
	body {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		color:#3399cc;  (       :color:#39c;)
		font-weight:normal;}
	h2 {font-weight:normal;}
		
12、(  )text-decoration:[text-decoration-line]||[text-decoration-style]||[text-decoration-color]
[ text-decoration-line ]:          。   CSS2.1  text-decoration   ,   :none | underline | overline | line-through | blink (Firefox1.0 Opera4.0    blink,         ) 
[ text-decoration-style ]:          。 
[ text-decoration-color ]:          。

	  :p {
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:underline;
	} 
	p {
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:line-through;
	}
	  a      
	a{
	text-decoration:none;
	color:rgb(0,0,255);
	}

	    
	h2 a{
	text-decoration:none;
	color:rgb(0,0,255);
	}


13、text-transform:none|capitalize|uppercase|lowercase|full-width
none:     
capitalize:                  
uppercase:            
lowercase:            
full-width:         fullwidth  。         fullwidth  ,     。                     。(CSS3) 	

	  :a {
	text-decoration:none;
	color:rgb(0,0,255);
	text-transform:capitalize;
	}	

14、  :line-height:30px
line-height:normal | <length> | <percentage> | <number>
  :
normal:                 。 
<length>:         。     。 
<percentage>:         ,                。     。 
<number>:          。     。 
	
	  :p {	
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:none;
	line-height:200%;
	}

15、    :word-spacing:[normal|<length>|<percentage>]{1,3}

	  :p {	
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:none;
	line-height:30px;
	word-spacing:20px;
	}

16、    :letter-spacing:[normal|<length>|<percentage>]{1,3}

17、    text-align:[[start|end|left|right|center]||<string>] | justify | match-parent | start end
  :
left:      。 
center:       。 
right:      。 
justify:       。 
start:         。(CSS3) 
end:         。(CSS3) 
<string>:           ,       。(CSS3) 
match-parent:      inherit     ,        start   end           direction      ,       left   right 。(CSS3) 
start end:    start               ;end            text-align-last   。(CSS3) 

	  :h2 {
	font-weight:400;
	text-align:center;
	}	

18、          :text-indent::[ <length> | <percentage> ] && [ hanging || each-line ]?
<length>:            。     。 
<percentage>:            。     。 
each-line:                             ,       。(CSS3) 
hanging:            。(CSS3)

	  :p {	
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:none;
	line-height:30px;
	word-spacing:normal;
	letter-spacing:normal;
	text-align:left;
	text-indent:20px;
	}
	p {text-indent:2em}  # 1em = 16px  12px = 0.75em

19、(  )            
	* {
	margin:0;
	padding:0;
	}
               :
	p {	
	color:rgb(200,0,0);
	font-weight:400;
	text-decoration:none;
	line-height:30px;
	word-spacing:normal;
	letter-spacing:normal;
	text-align:left;
	text-indent:1em;
	padding:20px 0;
	}	


   :
20、