Ò׽ؽØͼÈí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

CSS ѧϰ±Ê¼Ç

µ±Í¬Ò»¸ö HTML ÔªËر»²»Ö¹Ò»¸öÑùʽ¶¨Òåʱ£¬»áʹÓÃÄĸöÑùʽÄØ£¿
Ò»°ã¶øÑÔ£¬ËùÓеÄÑùʽ»á¸ù¾ÝÏÂÃæµÄ¹æÔò²ãµþÓÚÒ»¸öеÄÐéÄâÑùʽ±íÖУ¬ÆäÖÐÊý×Ö 4 ÓµÓÐ×î¸ßµÄÓÅÏÈȨ¡£
1.    
ä¯ÀÀÆ÷ȱʡÉèÖÃ
2.    
ÍⲿÑùʽ±í
3.    
ÄÚ²¿Ñùʽ±í£¨Î»ÓÚ <head> ±êÇ©ÄÚ²¿£©
4.    
ÄÚÁªÑùʽ£¨ÔÚ HTML ÔªËØÄÚ²¿£©
Òò´Ë£¬ÄÚÁªÑùʽ£¨ÔÚ HTML ÔªËØÄÚ²¿£©ÓµÓÐ×î¸ßµÄÓÅÏÈȨ£¬ÕâÒâζ×ÅËü½«ÓÅÏÈÓÚÒÔϵÄÑùʽÉùÃ÷£º<head> ±êÇ©ÖеÄÑùʽÉùÃ÷£¬ÍⲿÑùʽ±íÖеÄÑùʽÉùÃ÷£¬»òÕßä¯ÀÀÆ÷ÖеÄÑùʽÉùÃ÷£¨È±Ê¡Öµ£©¡£
 
CSS Óï·¨
CSS Óï·¨ÓÉÈý²¿·Ö¹¹³É£ºÑ¡ÔñÆ÷¡¢ÊôÐÔºÍÖµ£º
selector {property: value}
Ñ¡ÔñÆ÷ (selector) ͨ³£ÊÇÄãÏ£Íû¶¨ÒåµÄ HTML ÔªËØ»ò±êÇ©£¬ÊôÐÔ (property) ÊÇÄãÏ£Íû¸Ä±äµÄÊôÐÔ£¬²¢ÇÒÿ¸öÊôÐÔ¶¼ÓÐÒ»¸öÖµ¡£ÊôÐÔºÍÖµ±»Ã°ºÅ·Ö¿ª£¬²¢ÓÉ»¨À¨ºÅ°üΧ£¬ÕâÑù¾Í×é³ÉÁËÒ»¸öÍêÕûµÄÑùʽÉùÃ÷£¨declaration£©£º
body {color: blue}
ÉÏÃæÕâÐдúÂëµÄ×÷ÓÃÊǽ« body ÔªËØÄÚµÄÎÄ×ÖÑÕÉ«¶¨ÒåΪÀ¶É«¡£ÔÚÉÏÊöÀý×ÓÖУ¬body ÊÇÑ¡ÔñÆ÷£¬¶ø°üÀ¨ÔÚ»¨À¨ºÅÄڵĵIJ¿·ÖÊÇÉùÃ÷¡£ÉùÃ÷ÒÀ´ÎÓÉÁ½²¿·Ö¹¹³É£ºÊôÐÔºÍÖµ£¬color ΪÊôÐÔ£¬blue Ϊֵ
 
 
ÔÚ CSS ÖУ¬ÀàÑ¡ÔñÆ÷ÒÔÒ»¸öµãºÅÏÔʾ£º
.center {text-align: center}
ÔÚÉÏÃæµÄÀý×ÓÖУ¬ËùÓÐÓµÓÐ center ÀàµÄ HTML ÔªËؾùΪ¾ÓÖС£
 
 
CSS position ÊôÐÔ
ͨ¹ýʹÓàposition
ÊôÐÔ£¬ÎÒÃÇ¿ÉÒÔÑ¡Ôñ 4 Öв»Í¬ÀàÐ͵Ķ¨Î»£¬Õâ»áÓ°ÏìÔªËØ¿òÉú³ÉµÄ·½Ê½¡£
position ÊôÐÔÖµµÄº¬Ò壺
static
ÔªËØ¿òÕý³£Éú³É¡£¿é¼¶ÔªËØÉú³ÉÒ»¸ö¾ØÐοò£¬×÷ΪÎĵµÁ÷µÄÒ»²¿·Ö£¬ÐÐÄÚÔªËØÔò»á´´½¨Ò»¸ö»ò¶à¸öÐпò£¬ÖÃÓÚÆ丸ԪËØÖС£
relative
ÔªËØ¿òÆ«ÒÆij¸ö¾àÀë¡£ÔªËØÈÔ±£³ÖÆäδ¶¨Î»Ç°µÄÐÎ×´£¬ËüÔ­±¾ËùÕ¼µÄ¿Õ¼äÈÔ±£Áô¡£
absolute
ÔªËØ¿ò´ÓÎĵµÁ÷Íêȫɾ³ý£¬²¢Ïà¶ÔÓÚÆä°üº¬¿é¶¨Î»¡£°üº¬¿é¿ÉÄÜÊÇÎĵµÖеÄÁíÒ»¸öÔªËØ»òÕßÊdzõʼ°üº¬¿é¡£ÔªËØÔ­ÏÈÔÚÕý³£ÎĵµÁ÷ÖÐËùÕ¼µÄ¿Õ¼ä»á¹Ø±Õ£¬¾ÍºÃÏñÔªËØÔ­À´²»´æÔÚÒ»Ñù¡£ÔªËض¨Î»ºóÉú³ÉÒ»¸ö¿é¼¶¿ò£¬¶ø²»ÂÛÔ­À´ËüÔÚÕý³£Á÷ÖÐÉú³ÉºÎÖÖÀàÐ͵Ŀò¡£
fixed
ÔªËØ¿òµÄ±íÏÖÀàËÆÓÚ½« position ÉèÖÃΪ absolute£¬²»¹ýÆä°üº¬¿éÊÇÊÓ´°±¾Éí¡£
Ìáʾ£ºÏà¶Ô¶¨Î»Êµ¼ÊÉϱ»¿´×÷ÆÕͨÁ÷¶¨Î»Ä£Ð͵ÄÒ»²¿·Ö£¬ÒòΪԪËصÄλÖÃÏà¶ÔÓÚËüÔÚÆÕͨÁ÷ÖеÄλÖá£
 
CSSʵÀý£º
http://www.w3school.com.cn/example/csse_examples.asp


Ïà¹ØÎĵµ£º

cssÊó±êÑùʽ

cursorÖÐhandÓëpointer
Àý×Ó£ºCSSÊó±êÊÖÐÍЧ¹û <a href="#" style="cursor:hand">CSSÊó±êÊÖÐÍЧ¹û</a>
pointerÒ²ÊÇÊÖÐÍ£¬ÕâÀïÍƼöʹÓÃÕâÖÖ£¬ÒòΪÕâ¿ÉÒÔÔÚ¶àÖÖä¯ÀÀÆ÷ÏÂʹÓá£
Àý×Ó£ºCSSÊó±êÊÖÐÍЧ¹û <a href="#" style="cursor:pointer">CSSÊó±êÊÖÐÍЧ¹û</a>
crosshairÊÇÊ®×ÖÐÍ
Àý×Ó£ºCSSÊó± ......

Div+cssÃüÃû¹æÔò

ÊÕ²ØÒ»·Ý²»´íµÄDIV+CSS²¼¾ÖµÄSEOÓÅ»¯×ÊÁÏ£º
Div+cssÃüÃû¹æÔò-(ÄÜÔöÇ¿SEO?)
ҳͷ£ºheader
µÇ¼Ìõ£ºloginBar
±êÖ¾£ºlogo
²àÀ¸£ºsideBar
¹ã¸æ£ºbanner
µ¼º½£ºnav
×Óµ¼º½£ºsubNav
²Ëµ¥£ºmenu
×Ӳ˵¥£ºsubMenu
ËÑË÷£ºsearch
¹ö¶¯£ºscroll
Ò³ÃæÖ÷Ì壺main
ÄÚÈÝ£ºcontent
±êÇ©Ò³£ºtab
ÎÄÕÂÁÐ±í£ºl ......

CSSËټǿھ÷

Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄÄλ¸ßÈË°ÑCSS BUG±à³ÉÁË˳¿ÚÁïÁË£¡¿´¿´ºÃ²»ºÃ¼ÇסÄØ£¿ Ò»¡¢IE±ß¿òÈôÏÔÈôÎÞ£¬Ðë×¢Ò⣬¶¨ÊǸ߶ÈÉèÖÃÒÑÍü¼Ç£» ¶þ¡¢¸¡¶¯²úÉúÓÐÔµ¹Ê£¬ÈôÒª¸¸²ã°üº¬×¡£¬½ô¸ú¸¡¶¯ÒªÇå³ý£¬
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄ ......

¡¾×ª¡¿CSS ÃüÃû

  ³£ÓõÄÍøÕ¾ÃüÃû ÊÕ²Ø
1.CSS ID µÄÃüÃû
ҳͷ£ºheader
µÇ¼Ìõ£ºloginbar
±êÖ¾£ºlogo
²àÀ¸£ºsidebar
¹ã¸æ£ºbanner
µ¼º½£ºnav
×Óµ¼º½£ºsubnav
²Ëµ¥£ºmenu
×Ӳ˵¥£ºsubmenu
ËÑË÷£ºsearch
¹ö¶¯£ºscroll
Ò³ÃæÖ÷Ì壺main
ÄÚÈÝ£ºcontent
±êÇ©Ò³£ºtab
ÎÄÕÂÁÐ±í£ºlist
ÌáʾÐÅÏ¢£ºmsg
С¼¼ÇÉ£ºtips
À¸Ä¿±êÌâ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ