³£¼ûµÄCSSÒþ²ØÎÄ×Ö·½·¨(ת)
	
    
    
	¶ÔÓÚÒþ²ØÎÄ×Ö & ÄÚÈÝ£¬ÍøÉÏÒÑÓв»ÉÙCSS·½·¨¿ÉÒÔʵÏÖ£¬ÏÖ×ܽἸÌõʵÓõÄÒþ²ØÐ§¹ûÈçÏ£º
¼ÙÈçÐèÒªÒþ²ØµÄ¶ÔÏóÊÇ£º
<h1 id="header"><span class="texthidden">this text need to be hidden.</span></h1>
Òþ²ØÕâÒ»²¿·ÖµÄcss·½·¨Ò»°ãÓÐÁùÖÖ£º
1¡¢display:none;
/* Ëü¿ÉÒÔʹ°üÀ¨ÈÝÆ÷±¾ÉíÔÚÄڵĶ«Î÷¶¼Ïûʧ£¬¼ò±ãÇÒÓÐЧ£¬µ«ËüÓÐÁ½¸ö¶úÊìÄÜÏêµÄȱÏÝ£¬ÄǾÍÊǶÔËÑË÷ÒýÇæ²»ÓѺã¬ÇÒ±»ÆÁÄ»ÔĶÁÆ÷ËùºöÂÔ¡£½«¶ÔÏóÍêÈ«ÐÔÒþ²Ø¡£ */
e.g: #header { display:none; width:300px; height:40px; line-height:40px;}
2¡¢visibility: hidden;
/* Òþ²ØÁ˶ÔÏóÄÚÈÝ£¬È´±£ÁôÁËËüµÄÎïÀí¿Õ¼äÀ´Õ¼Î»¡£ */
e.g: #header { visibility:hidden; width:300px; height:40px; line-height:40px;}
3¡¢text-indent:-10000px;
/* text-indentÊÇÊ×ÐÐËõ½ø£¬ËùÒÔ¶ÔÓÚ¶àÐÐÎı¾£¬Èôµ¥¶ÀʹÓÃËü¾ÍÓÐÃ÷ÏԵIJ»×㣬Ðè¼ÓÉÏwhite-space:nowrap;À´ÃÖ²¹²»×㣬µ«»¹ÓÐÒ»¸öÎÊÌ⣺ÎïÀí¿Õ¼äÈÔÈ»´æÔÚ£¬¹Ê»¹ÐèÉèÖÃline-height:0;»òʹÓó¬Ð¡×ÖÌå(ÔÚIEÏÂÓеãBUG)¡£*/
×îÖÕ´úÂ룺.texthidden { text-indent:-9999px; white-space:nowrap; line-height:0;}
4¡¢overflow:hidden; 
/* ¶ÔÎÄ×ÖÒç³öʱµÄ×Ô¶¯Òþ²Ø´¦Àí £¨²»ÏÔʾ³¬¹ý¶ÔÏó³ß´çµÄÄÚÈÝ £©*/
ÕâÖÖ·½·¨¿ÉÒÔÓëǰ¼¸ÖÖÅäºÏʹÓã¬ÓÚÊǾͻáÓÐÈçÏ·½·¨£º
£¨1£©text-indent£º
#header { width: 300px; height: 40px; background-image: url(1.jpg); text-indent: -200em; overflow: hidden;}
/* ±êÇ©ÖеÄÎÄ×ÖµÄÎı¾Ëõ½øÉèÖóÉ×ã¹»´óµÄÖµ£¬²¢ÇÒÉèÖÃÈÝÆ÷h1µÄoverflowµÄֵΪhidden¡£ÊµÏÖÁËͼÏñÌæ»»¡£ */
£¨2£©height:0; width:0;
#header { width: 300px; height: 40px; background-image: url(1.jpg);}
#header span { display: block; width: 0; height: 0; overflow: hidden;}
5¡¢font-size:1px;
/* ½«h1µÄÎÄ×ֵĴóСÉèΪ1px£¬ÑÕÉ«ÉèÖóÉÓë±³¾°Í¼Æ¬½Ó½üµÄÑÕÉ«£¬Ò²Í¬ÑùʵÏÖÁËCSSͼÏñÌæ»»µÄЧ¹û£¬µ«´ËЧ¹ûÐèÒªÔÚÌØ¶¨µÄ±³¾°Í¼Æ¬Ï²ÅÏÔµÃÍêÃÀ£¬²»È»¾ÍÈÝÒ׿´³öÀ´ÁË¡£*/
#header { width: 300px; height: 40px; background-image: url(1.jpg); font-si
    
     
	
	
    
    
	Ïà¹ØÎĵµ£º
        
    
    CSS filter:RevealTrans Ó÷¨£º
Filter:revealtrans(duration=ת»»µÄÃëÊý£¬transition=ת»»µÄÀàÐÍ£©
CSSµÄRevealTrans¶¯Ì¬Â˾µÊÇÒ»¸öÉñÆæµÄÂ˾µ£¬ËüÄܲúÉú23ÖÖ¶¯Ì¬Ð§¹û£¬¸üÎªÆæÃîµÄÊÇËü»¹ÄÜÔÚ23ÖÖ¶¯Ì¬Ð§¹ûÖÐËæ»ú³éÓÃÆäÖеÄÒ»ÖÖ¡£
¡¡¡¡Á½¸ö²ÎÊýTransitionºÍDuration£¬·Ö±ðÊDZ任Ч¹ûºÍ³ÖÐøÊ±¼ä£¬ÆäÖÐDurationÊǸ¡µãÊý¡£
 ......
	
    
        
    
    ÑùʽӦÓõij¡ºÏµ±È»ÊÇÍøÒ³ÎļþÖУ¬µ«ÊÇÈçºÎÈ¥ÔËÓÃÄØ£¿¿ÉÒÔ¼òµ¥µÄÕûÀíÒ»ÏÂ˼·¡£
selector ÓÐÈýÖÖÇé¿ö£¬ÄÚ²¿Ñùʽ£¬ÍⲿÑùʽ£¬ÄÚÁªÑùʽ¡£Ó﷨Ϊ
Selector { property: value } 
¿ÉÒÔͨ¹ýÉèÖñêÇ©µÄstyleÊôÐÔÖÐÊéд£¬Í¨¹ýCLASSºÍIDÀ´¶¨Òå¡£
<link rel=stylesheet href="***/**.css" type="text/css">
ÈýÖÖ·½Ê½µÄÔËÓ ......
	
    
        
    
    
Zen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨
À´Ô´£ºhttp://www.javaeye.com/news/13149
Òë×Ô£ºSmashing Magazine
ÖÐÎÄ£ºZen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨
ÔÚ±¾ÎÄÖÐÎÒÃǽ«Õ¹Ê¾Ò»ÖÖеÄʹÓ÷ÂCSSÑ¡ÔñÆ÷µÄÓï·¨À´¿ìËÙ¿ª·¢HTMLºÍCSSµÄ·½·¨¡£ËüÓÉSergey Chikuyonok¿ª·¢¡£
ÄãÔÚдHTML´úÂë(°üÀ¨ËùÓбêÇ©¡¢ÊôÐÔ¡¢ ......
	
    
        
    
    ±ß¿ò·ç¸ñÊôÐÔ(border-style)
Õâ¸öÊôÐÔÓÃÀ´É趨ÉÏÏÂ×óÓұ߿òµÄ·ç¸ñ£¬ËüµÄÖµÈçÏ£º
none (ûÓб߿ò£¬ÎÞÂ۱߿ò¿í¶ÈÉèΪ¶à´ó) 
dotted (µãÏßʽ±ß¿ò) 
dashed (ÆÆÕÛÏßʽ±ß¿ò) 
solid (Ö±Ïßʽ±ß¿ò) 
double (Ë«Ïßʽ±ß¿ò) 
groove (²ÛÏßʽ±ß¿ò) 
ridge(¼¹Ïßʽ±ß¿ò) 
inset (ÄÚǶЧ¹ûµÄ±ß¿ò) 
outset (Í»ÆðЧ¹ûµÄ±ß¿ò)
± ......
	
    
        
    
    ͼƬ×Ô¶¯ÊÊÓ¦´óСµÄÎÊÌâÔÚÆ½Ê±ÖÆ×÷µÄʱºòÊDZȽϳ£¼ûµÄÎÊÌ⣬ÏÂÃæÌṩһ¸ö±È½Ï¼òµ¥µÄ½â¾ö·½·¨£º
div img {
max-width:600px; 
//IE7¡¢FFµÈÆäËû·ÇIEä¯ÀÀÆ÷ÏÂ×î´ó¿í¶ÈΪ600px;
width:600px; 
//ËùÓÐä¯ÀÀÆ÷ÖÐͼƬµÄ´óСΪ600px;
width:expression(document.body.clientWidth>600?"600px":"auto"); 
//µ±Í¼Æ¬´óС´óÓÚ6 ......