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
Ïà¹ØÎĵµ£º
cursorÖÐhandÓëpointer
Àý×Ó£ºCSSÊó±êÊÖÐÍЧ¹û <a href="#" style="cursor:hand">CSSÊó±êÊÖÐÍЧ¹û</a>
pointerÒ²ÊÇÊÖÐÍ£¬ÕâÀïÍƼöʹÓÃÕâÖÖ£¬ÒòΪÕâ¿ÉÒÔÔÚ¶àÖÖä¯ÀÀÆ÷ÏÂʹÓá£
Àý×Ó£ºCSSÊó±êÊÖÐÍЧ¹û <a href="#" style="cursor:pointer">CSSÊó±êÊÖÐÍЧ¹û</a>
crosshairÊÇÊ®×ÖÐÍ
Àý×Ó£ºCSSÊó± ......
ÊÕ²ØÒ»·Ý²»´íµÄDIV+CSS²¼¾ÖµÄSEOÓÅ»¯×ÊÁÏ£º
Div+cssÃüÃû¹æÔò-(ÄÜÔöÇ¿SEO?)
ҳͷ£ºheader
µÇ¼Ìõ£ºloginBar
±êÖ¾£ºlogo
²àÀ¸£ºsideBar
¹ã¸æ£ºbanner
µ¼º½£ºnav
×Óµ¼º½£ºsubNav
²Ëµ¥£ºmenu
×Ӳ˵¥£ºsubMenu
ËÑË÷£ºsearch
¹ö¶¯£ºscroll
Ò³ÃæÖ÷Ì壺main
ÄÚÈÝ£ºcontent
±êÇ©Ò³£ºtab
ÎÄÕÂÁÐ±í£ºl ......
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄÄλ¸ßÈË°ÑCSS BUG±à³ÉÁË˳¿ÚÁïÁË£¡¿´¿´ºÃ²»ºÃ¼ÇסÄØ£¿ Ò»¡¢IE±ß¿òÈôÏÔÈôÎÞ£¬Ðë×¢Ò⣬¶¨ÊǸ߶ÈÉèÖÃÒÑÍü¼Ç£» ¶þ¡¢¸¡¶¯²úÉúÓÐÔµ¹Ê£¬ÈôÒª¸¸²ã°üº¬×¡£¬½ô¸ú¸¡¶¯ÒªÇå³ý£¬
Èç¹ûÔÚÓÃCSSÉè¼Æ²¼¾ÖʱÓöµ½BUG£¬ÇëÈÏÕæÔĶÁÒÔÏÂÄÚÈÝ£¬·Ç³£ÈÝÒ×¼ÇÒäµÄ£¬²»ÖªµÀÄ ......
³£ÓõÄÍøÕ¾ÃüÃû ÊÕ²Ø
1.CSS ID µÄÃüÃû
ҳͷ£ºheader
µÇ¼Ìõ£ºloginbar
±êÖ¾£ºlogo
²àÀ¸£ºsidebar
¹ã¸æ£ºbanner
µ¼º½£ºnav
×Óµ¼º½£ºsubnav
²Ëµ¥£ºmenu
×Ӳ˵¥£ºsubmenu
ËÑË÷£ºsearch
¹ö¶¯£ºscroll
Ò³ÃæÖ÷Ì壺main
ÄÚÈÝ£ºcontent
±êÇ©Ò³£ºtab
ÎÄÕÂÁÐ±í£ºlist
ÌáʾÐÅÏ¢£ºmsg
С¼¼ÇÉ£ºtips
À¸Ä¿±êÌâ ......