ªð¦^¦Cªí ¤W¤@¥DÃD µo©«

[±Ð¾Ç] (±Ð¾Ç²Ä30½g) CSS »P JavaScript ¤W½g

[±Ð¾Ç] (±Ð¾Ç²Ä30½g) CSS »P JavaScript ¤W½g

CSS¡H³o¬O¤°»òªFªF°Ú¡H¡I¬Û«H§A¬Ý¨ì³o¤T­Ó¦r¥À®É¥²©w»P°¸¤@¼Ë¡G¤V¤Gª÷­èºN¤£µÛÀY¸£¡A¨ä¹êCSSªº¥þ¦W¬O¡eCasciding Style Sheet¡f¡A¥H¦r­±¤W¨Ó¸ÑÄÀ´N¬O¡e³s(¦ê)±µ¼Ë¦¡ªí¡f¡A³oºØ»¡ªk¤£­n»¡¬O­è±µÄ²ªº§A¡A³s°¸³£·d¤£À´¡I²³æªº»¡¡A´N¬Oºô­¶ªº®æ¦¡³]©w°Õ¡I

¨Ï¥ÎCSS¦³¤°»ò¦n³B©O¡H

  • ³q¦YÂsÄý¾¹¡GCSS¼Ë¦¡ªí¡A¤£ºÞÂsÄýªÌ¬O¨Ï¥Î¦óºØÂsÄý¾¹¨ÓÆ[½àºô­¶¬Ò¯àªí²{¥Xºô­¶¿W¯Sªº­·®æ¡A¤£³æ¬O¥«³õ¤W¨Ï¥Î²v³Ì°ªªº Microsoft Internet Explorer (IE) »P Netscape Communicator ÂsÄý¾¹¤ä´©¡A¬Æ¦Ü³\¦h«D¥D¬yªºÂsÄý¾¹¡A¦p Emacs-W3¡BArena......µ¥¡A³£¦³¤ä´©¸ÑªRªº¯à¤O¡C
  • ºô¸ôÀô«O¡G¦b¤j®a¥þ¤O±À¼s¥þ¥Á¤Wºôªº¦P®É¡A¥X²{¤F¤@­ÓÄY­«ªº¦M¾÷¡eºô¸ôÀW¼e¤£¨¬¡f¡A¤@¤è­±¬O¦]¬°¤Wºô¤H¤fªº«æ³t¼W¥[³y¦¨ÀW¼e¤£¨¬¡A¦ý³Ì¤jªº­ì¦]¬Oºô­¶³]­pªÌ¦bºô­¶³]­p¹Lµ{¤¤¨Ï¥Î¤F¤j¶qªº¹Ï¤ù¡A¹Ï¤ùÀɪºÅé¿n¤j¡A¦b¶Ç¿éªº¹Lµ{¤¤®ø¯Ó¤F¤j¶qªººô¸ô¸ê·½¡A¦ÓCSSªº¥X²{±N¨Ï³o­Ó°ÝÃDÀò±o³¡¤À²¨¸Ñ¡ACSS¥i¨Ï¥Î³æ¯Âªº¤å¦r¨Ó¹F¨ì»P¹Ï¤ù¬Û¦Pªºªí²{®ÄªG¡I¤]´N¬O»¡¡G¤@¬q²µuªº¤å¦r´N¥i¥H¨ú¥NÅé¿nÃe¤jªº¹Ï¤ù¡I¤£¦ý¶Ç¿é³t«×¥[§Ö¡A¦P®É¤]Àò±o»P¹Ï¤ù¬Û¦Pªºµøı®ÄªG¡C
  • ¯S¥ß¿W¦æªº­·®æ¡G¤@­Ó¤H®ð©ô²±ªººô¯¸¤§©Ò¥H§l¤Þ¤H´N¬O¦]¬°¾Ö¦³¿W¤@µL¤Gªº­·®æ¡IÁ|¨Ò¨Ó»¡¡G¦b CSS¼Ë¦¡ªí¥X²{¤§«e¡A´X¥G©Ò¦³ºô­¶¤¤ªº¶WÃìµ²¤å¦r³£·|¥[¤W©³½u (Under Line) ¡A¦Ó¥B¨ÃµL¯S¦âÅܤơA¦pªG¥[¤WCSS»yªk¨º¥i´N¤j¤j¤£¦P°Õ¡I¤U¤èªº¨â­Ó¶WÃìµ²¤å¦r¼Ë¦¡¡A§A³ßÅw­þ¤@­Ó¡H
    12-1.png
  • ºô­¶ºûÅ@®e©ö¡G¬°¤Fºû«ù§Ú­Ì¯S¥ß¿W¦æªººô¯¸­·®æ¡A¦P®É¤]¬°¤Fºû«ùºô­¶ªº¤@­P©Ê¡A§Ú­Ì¥i¥H«Ø¥ß¤@­Ó¿W¥ßªºCSS¼Ë¦¡ªíÀɮסAÅý§Ú­Ì«Ø¥ßªº¨C¤@­Óºô­¶¼Ë¦¡³£¯à°Ñ·Ó¦¹¤@¼Ë¦¡ÀɮסA·í¦¹¤@¼Ë¦¡Àɮפº®e§ïÅÜ«á¡A©Ò¦³¦³°Ñ·Ó¦¹¤@¼Ë¦¡Àɮתººô­¶¥~Æ[¤]´N·|¥þ³¡¸òµÛ§ïÆ[¤F¡A¦]¦¹§Ú­Ì¤£¥²¤@¤@ªº­×§ï¦U­Óºô­¶¨Ó¹F¨ìºô¯¸­·®æªº¤@­P©Ê¡A¦pªG§AºûÅ@ªººô­¶¥u¦³´X­¶¡A©Î³\¨Ã¤£·|·P¨ü¨ì¥¦ªº«K§Q©Ê¡A¦pªG¬O¤W¦Ê­¶¬Æ¦Ü¼Æ¦Ê­¶¡A§A´N·|Åé·|¨ì¥¦©Ò±a¨Óªº«K§Q©Ê°Õ¡I
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

«Å§iCSS
­n«Å§iCSS¼Ë¦¡ªí­º¥ý§A¥²¶·¨ã³Æ¦³HTMLºô­¶»yªkªº°ò¦¡I¤]´N¬O§A¥²¶·¤F¸Ñºô­¶­ì©l½X¤¤¼ÐÅÒªº·N¸q¡A¦b¦¹§Ú­Ì°²³]§A¤w¸g¼ô±x¤F³o¨ÇHTMLºô­¶¼ÐÅÒ¡I

¼Ë¦¡«Å§iªº¼Ð·Ç»yªk¦p¤U¡G
  1. Element {Property : value}
½Æ»s¥N½X

  • Element :HTMLºô­¶¼ÐÅÒ¦WºÙ¡A¦p¡G<P>¡B</P>.......µ¥¡C
  • Property:HTMLºô­¶¼ÐÅÒÄݩʦWºÙ¡A¦p¡Gcolor¡Bfont-size.......µ¥¡C
  • value:HTMLºô­¶¼ÐÅÒÄÝ©Ê­È¡C

ª`·N¡GHTMLºô­¶¼ÐÅÒÄݩʦWºÙ»PHTMLºô­¶¼ÐÅÒÄݩʭȤ§¶¡¥²¶·¥H«_¸¹¡u¡G¡v¹j¶}¡F¦ÓHTMLºô­¶¼ÐÅÒÄݩʦWºÙ»PHTMLºô­¶¼ÐÅÒÄÝ©Ê­È«h¥²»Ý¥H¤@²Õ¤j¬A¸¹{ }¥]¬A°_¨Ó¡I


¿W¥ß«Å§i
¿W¥ß«Å§i¡H¤°»ò¥s¿W¥ß«Å§i°Ú¡H¡I¿W¥ß«Å§i¤]´N©Ò¿×ªº¤À²Õ«Å§i¡Aºô­¶¼ÐÅÒªº¥i³]©wÄݩʬ۷í¦h¡A¦]¦¹¥H¤À²Õªº«Å§i¤è¦¡¨ÓºÞ²z¬O¤@­Ó¤£¿ùªº¿ï¾Ü¡A¨Ò¦p¡GBODY¼ÐÅÒ¥¦¥i¥H³]©wªºÄÝ©Ê´N¬Û·í¦a¦h¡A¦³­I´ºÃC¦â¡B¤å¦r¤j¤p¡B¤å¦r¦r«¬¼Ë¦¡.....µ¥µ¥¡A²{¦b´N¥HBODY¼ÐÅÒªº¼Ë¦¡«Å§i¬°¥Ü½d¹ï¶H¶i¦æ¸Ñ»¡¡I

½d¨Ò¸Ñ»¡A¡A¦pªG§Ú­Ì¦b¼Ë¦¡ªí¤¤«Å§i¤U¦CªºBODY¼ÐÅÒ±Ô­z¡G
  1. BODY {¢ê¢é¢ë¢ó¢ï¢ú¢÷¢ý¢ö¢ì : #FF0000¡F¢î¢÷¢ö¢ü¡Ð¢û¢ñ£C¢í : 10pt}
½Æ»s¥N½X
³o¼Ëªº¼Ë¦¡«Å§i±N·|§â¥]¬A¦b¡ÕBODY¡Ö»P¡Õ/BODY¡Ö¤§¶¡ªº¤å¦r¥~Æ[ÃC¦â³£Åܦ¨¬õ¦â¦P®É±N¤å¦rªº¤j¤p«ü©w¬°10pt¡C

½d¨Ò¸Ñ»¡B¡A¦pªG§Ú­Ì¦b¼Ë¦¡ªí¤¤«Å§i¤U¦CªºBODY¼ÐÅÒ±Ô­z¡G
  1. BODY {¢ê¢é¢ë¢ó¢ï¢ú¢÷¢ý¢ö¢ì : ¡­¢¯¢¯¢Ô¢Ô¢¯¢¯}
  2. BODY {¢î¢÷¢ö¢ü¡Ð¢û¢ñ£C¢í : ¢°¢¯¢ø¢ü}
½Æ»s¥N½X
³o¼Ëªº¼Ë¦¡«Å§i¤S·|³y¦¨¤°»òµ²ªG©O¡Hµ²ªG¬O»P½d¨Ò¸Ñ»¡A¤@¼Ò¤@¼Ëªº¡G³Q¥]¬A¦b¡ÕBODY¡Ö»P¡Õ/BODY¡Ö¤§¶¡ªº¤å¦r¥~Æ[ÃC¦â³£Åܦ¨¬õ¦â¦Ó¥B¤å¦rªº¤j¤p«ü©w¬°10pt¡C¬JµM©Ò±o¨ìªºµ²ªG³£¤@¼Ë¡A¨º¤À²Õªº·N¸q¦b­þ¸Ì©O¡H¤À²Õªº·N¸q¦b©ó¤ÀÃþºÞ²z¼ÐÅÒ¤£¦Pªº¼Ë¦¡©Ê½è¡A¥H¥»¨Ò¨Ó»¡¡A§Ú­Ì¤ÀÃþºÞ²z¤FBODY¼ÐÅÒªºÃC¦â¬ÛÃöÄÝ©Ê»P¤å¦r¬ÛÃöÄÝ©Ê¡I


½Æ¦X«Å§i
½Æ¦X«Å§i¡A½Æ¦X«Å§i¥i¤À¬°¨âºØ±¡ªp¡I¤@ºØ¬O±Nºô­¶¼ÐÅÒªº¤£¦P¼Ë¦¡©Ê½è«Å§i¦b¤@°_¡e¤£¦PªºÄݩʳ]©w¥H¤À¸¹®æ¶}¡f¡A³oºØ±¡ªp¤§«e§Ú­Ì¤w¸g¨Ï¥Î¹L¤FËç¡I¥t¤@ºØ´N¬O±N¤£¦Pªººô­¶¼ÐÅÒ¦ý¬O¼Ë¦¡©Ê½è¬Û¦PªºÄݩʦX¨Ö¦b¤@°_«Å§i¡e¤£¦Pªººô­¶¼ÐÅÒ¥H³r¸¹®æ¶}¡f¡I

³æ¿W¼ÐÅÒªº½Æ¦X«Å§i¡G
¤@¦æ³q¦Y
  1. BODY{background:#FF0000;color:#00FF00; font-size:10pt ; font-family:²Ó©úÅé }
½Æ»s¥N½X
³o¼Ëªº¼Ë¦¡«Å§iµ²ªG±N¬O¡G³Q¥]¬A¦b¡ÕBODY¡Ö»P¡Õ/BODY¡Ö¼ÐÅÒ¤§¶¡ªº¤å¦r¥~Æ[ÃC¦â³£Åܦ¨ºñ¦â¡B¤å¦rªº¤j¤p«ü©w¬°10pt¡B¤å¦r¦r«¬¬°¡u²Ó©úÅé¡v¡A¦P®É¡A­I´ºÃC¦â¤]³Q«ü©w¬°¬õ¦â¡C¦b¥»¨Ò¤¤§Ú­Ì¤@¦¸´N«Å§i¤FBODY¼ÐÅÒªº¥|ºØ¼Ë¦¡ÄÝ©Ê¡A¦ý½Ðª`·N¡G¨C­Ó«ü©wªº¼Ë¦¡Äݩʤ§¶¡¥²¶·¥H¤À¸¹¹j¶}¡I

¦h¦æ±Æ¦C
  1. BODY { background:#FF0000 ;
  2. ¡@¡@¡@¡@¡@color:#00FF00 ;
  3. ¡@¡@¡@¡@font-size:10pt ;
  4. ¡@¡@¡@¡@font-family:²Ó©úÅé }
½Æ»s¥N½X
¨ä¹ê¦h¦æ±Æ¦C»P¤@¦æ³q¦Y©Ò±o¨ìªºµ²ªG¬O¬Û¦Pªº¡I¦ý¬O¬°¤FÅU¤ÎHTMLºô­¶­ì©lÀɪººûÅ@»P±Æª©¡A·í«Å§i¹Lªø®É§Ú­Ì´N¥i¦b¤À¸¹¤§«á¥[¥H§é¦æ¼¶¼g¡A¤£ºÞ¤¤¶¡¦³¦h¤ÖªÅ¥Õ¦r¤¸©Î¬O´X­Ó´«¦æ¦C¡A¥u­n§Ú­Ì«Å§iªº®æ¦¡¥¿½T´N³£¤£·|¦³¿ù»~µo¥ÍªºËç¡I


³æ¿W¼ÐÅÒªº½Æ¦X«Å§i¡G
¤@¦æ³q¦Y  
  1. BODY¡A¢Þ { color:#00FF00 ; font-size:10pt ; font-family:²Ó©úÅé }
½Æ»s¥N½X
³o¼Ëªº¼Ë¦¡«Å§iµ²ªG±N¬O¡G³Q¥]¬A¦b¡ÕBODY¡Ö»P¡Õ/BODY¡Ö¼ÐÅÒ¤§¶¡ªº¤å¦r¥~Æ[ÃC¦â³£Åܦ¨ºñ¦â¡B¤å¦rªº¤j¤p«ü©w¬°10pt¡B¤å¦r¦r«¬¬°²Ó©úÅé¡F¦P®É¡A¦b³Q¥]¬A¦b¡ÕP¡Ö»P¡Õ/P¡Ö¼ÐÅÒ¤§¶¡ªº¤å¦r¥~Æ[ÃC¦â¤]³£Åܦ¨ºñ¦â¡B¤å¦rªº¤j¤p«ü©w¬°10pt¡B¤å¦r¦r«¬¬°²Ó©úÅé¡A¥»¨Ò¤¤§Ú­Ì¤@¦¸´N«Å§i¤FBODY¼ÐÅÒ»PP¼ÐÅÒªº¤TºØ¦@³q¼Ë¦¡ÄÝ©Ê¡C
½Ðª`·N¡G¶i¦æ½Æ¦X«Å§iªº¼ÐÅÒ¤§¶¡¥²¶·¥H³r¸¹¹j¶}¡I


¦h¦æ±Æ¦C
  1. BODY¡A¢Þ { color:#00FF00 ;
  2. ¡@¡@¡@¡@¡@¡@¡@ font-size:10pt ;
  3. ¡@¡@¡@¡@¡@¡@ font-family:²Ó©úÅé }
½Æ»s¥N½X
¦P¼Ëªº¡A¦h²Õ¼ÐÅÒªº½Æ¦X«Å§i¤]¥i¥H¨Ï¥Î¦h¦æ±Æ¦C¡A»P¤@¦æ³q¦Y©Ò±o¨ìªºµ²ªG¬O¬Û¦Pªº¡I
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

¨Ï¥ÎCSS
¬°¤FÅý¤j®a¤F¸ÑCSSªº¨Ï¥Î¤è¦¡§Ú­Ì±N¥H´`§Çº¥º¥ªº¤è¦¡¤Þ¾É¤j®a¶i¤JCSSªº¬üÄR·s¥@¬É¡I


  • ¼Ë¦¡ªí«Å§iªº¦ì¸m¡G¼Ë¦¡ªí«Å§i¥²¶·³Q¥]¬A¦bºô­¶ªº<HEAD>»P</HEAD>¤§¶¡¡C
  • ¼Ë¦¡ªí«Å§iªº½d³ò¡G¼Ë¦¡ªí«Å§iªº¤º®e¥²¶·³Q¥]¬A¦b<STYLE>»P</STYLE>¼ÐÅÒ¤§¶¡¡C
  • ¦MÀIªº³´¨À¡G¬°¤FÁקKÂsÄý¾¹¤£¤ä´©CSSªº»yªk©Ê½è¡A§Ú­Ì¥²¶·©óCSS«Å§i¤º®eªº¨âºÝ¥[¤W <!- - »P - -> ªºµù¸Ñ²Å¸¹¡I­Y¤£¥[¤WªÌ¤@²Õµù¸Ñ²Å¸¹·|²£¥Í¤°»ò«áªG©O¡H­YÂsÄýªÌ©Ò¨Ï¥ÎªºÂsÄý¾¹¨Ã¤£¤ä´©CSSªº©Ê½èÄÝ©Ê¡A§Ú­Ì©Ò®Ñ¼gªº³o¨ÇCSS«Å§i±N·|³Q·í¦¨¤@¯ëªººô­¶¤å¦r¦ÓÅã¥Ü¦bºô­¶¤W¡I



¼Ð·Ç¥Îªk
¨å«¬ªº<STYLE>¼Ë¦¡ªí«Å§i¡G
  1. <HTML>
  2. <HEAD>
  3. <STYLE>
  4. <!--
  5. BODY {background:RED;color:BLACK}
  6. BODY {font-size:12pt}
  7. -->
  8. </STYLE>
  9. <TITLE>¨å«¬ªº¼Ë¦¡ªí«Å§i</TITLE>
  10. </HEAD>
  11. </BODY>³o¬O¼Ð·ÇªºSTYLE«Å§i<BODY>
  12. </HTML>
½Æ»s¥N½X
³o¼Ëªº¼Ë¦¡«Å§i·|³y¦¨¤°»òµ²ªG©O¡Hµ²ªG´N¬O±N³Q¥]¬A¦b<BODY>»P<BODY>¼ÐÅÒ¤§¶¡ªº¤å¦r¥~Æ[ÃC¦â³£Åܦ¨¶Â¦â¡B¤å¦r¤j¤p¬°12pt¡A¦P®Éºô­¶ªº­I´º¦â³]©w¬°¬õ¦â¡C
12-2.png


ºô­¶¼ÐÅÒ¤ºªº<STYLE>¼Ë¦¡«Å§i¡G
§Ú­Ì°£¤F¥i¥H±NCSSÄÝ©Ê¥H¶°¦Xªº¤è¦¡¦X¨Ö«Å§i¥~¡A¤]¥i¥H¦bºô­¶¼ÐÅÒ¤¤ª½±µ¥[¤JCSSªº¼Ë¦¡©Ê½è¡I
  1. <HTML>
  2. <HEAD>
  3. <TITLE>ºô­¶¼ÐÅÒ¤ºªº¼Ë¦¡«Å§i</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <P STYLE=" font-size:14pt;color:BLUE">
  7. ³o¬O¦bºô­¶¼ÐÅÒ¤ºSTYLE«Å§i
  8. </P>
  9. </BODY>
  10. </HTML>
½Æ»s¥N½X
³o¼Ëªº¼Ë¦¡«Å§i¤S±N·|³y¦¨¤°»òµ²ªG©O¡Hµ²ªG´N¬O±N³Q¥]¬A¦b<P>»P</P>¼ÐÅÒ¤§¶¡ªº¤å¦r¥~Æ[ÃC¦â³£Åܦ¨ÂŦâ¡B¤å¦r¤j¤p¬°14pt¡A¬°¤°»ò·|³o¼Ë©O¡H¦]¬°§Ú­Ì¦b<P>ºô­¶¼ÐÅÒ¤¤¤S¥[¤W¤FCSSªºSTYLE©Ê½è³]©w¡Gfont-size:14pt ±N¤å¦r¤j¤p®æ¦¡³]©w¬°14pt¡Fcolor:BLUE ¦P®É±N¤å¦r¥~Æ[ÃC¦â³]©w¬°ÂŦâ¡C
12-3.png

´£¥Ü¡I¡I
ª½±µ¥HSTYLEÄݩʦbHTML¼ÐÅÒ¤º«ü©w¼Ë¦¡¡A´N¬O©Ò¿×ªº¡y½u¤º¼Ë¦¡¡z³]©w¡C
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

¶i¶¥¥Îªk
¶i¶¥ªº<LINK>¼Ë¦¡ªíÀÉ®×°Ñ·Ó¡G
¦pªG§Ú­Ì¦³«Ü¦hªºÀÉ®×­n±Ä¥Î²Î¤@ªº³]­p­·®æ¡A¦pªG¦b¨C±iºô­¶¤¤³£¥[¤J¬Û¦Pªº¼Ë¦¡«Å§i¥¼§K¤Ó³Â·Ð¡B¤Ó¨S®Ä²v°Õ¡I¦]¦¹¡A§Ú­Ì¥i¥H¥ý¦Û¦æ«Ø¥ß¤@­Ó¼Ë¦¡°Ñ·ÓÀɮסA³o­Ó°Ñ·ÓÀÉ®×¥u¬O¤@­Ó¯Â¤å¦rªºÀɮ׮榡¡A¥ô·N¤@ºØ¤å®Ñ½s¿è¾¹´N¥i¥H¥Î¨Ó½s¿è°Ñ·ÓÀɮתº¤º®e¡I

¼Ë¦¡ªíÀɮתº¤º®e¨Ã¤£»Ý­n¥[¤W<STYLE>»P</STYLE>¼ÐÅÒ¡A¦P®É¡A§ó¤£»Ý­n¥[¤W<!- -»P- -> µù¸Ñ¼ÐÅÒ¡A²{¦b´N½Ð§A¶}±Ò§AºD¥Îªº¤å®Ñ½s¿è¾¹¨Ó½s¿è¤@­Ó¼Ë¦¡°Ñ·ÓÀɮסA¦P®É±NÀɮצWºÙ©w¬° test1.css (³o¥u¬O½d¨Ò¡A°Ñ·ÓÀɮתº¦WºÙ§A¥i¥H¦Û­q)¨Ã¥B¥[¤J¥H¤U¤º®e¡G
test1.css
  1. BODY {font-size: 12pt ; font-family: ¼Ð·¢Åé}
  2. BODY {background: #008800 ; color: #FFFFFF}

  3. P {color:RED}
  4. P {font-size:14pt}
½Æ»s¥N½X
³o¼Ëªº¼Ë¦¡¤º®e¬O¤°»ò·N«ä©O¡H´N¬O±N³Q¥]¬A¦b<BODY>»P<BODY>¼ÐÅÒ¤§¶¡ªº¤å¦r¦r«¬³]©w¬°¼Ð·¢Åé¡B¤å¦r¤j¤p¬°12pt¡Aºô­¶ªº­I´º³]³]©w¬°ºñ¦â¡A¤å¦r¥~Æ[ÃC¦â³£Åܦ¨¥Õ¦â¡F¥]¬A¦b<P>»P</P>¼ÐÅÒ¤§¶¡ªº¤å¦r¤j¤p¬°14pt¡B¤å¦r¥~Æ[ÃC¦â³£Åܦ¨¬õ¦â¡C

¦b«Ø¥ß¦n°Ñ·ÓÀɮ׫á¡A±µµÛ§Ú­Ì´N­n§Q¥ÎLINK¼ÐÅÒ¨Ó«ü©w¼Ë¦¡ªíªºÃöÁp°Õ¡I²{¦b§Ú­Ì´N¨Ó«Ø¥ß¤@­ÓHTMLºô­¶ÀÉ¡G
  1. <HTML>
  2. <HEAD>
  3. <TITLE>°Ñ·Ó¼Ë¦¡ÀÉ®×½d¨Ò</TITLE>
  4. <LINK REL=STYLESHEET TYPE="text/css" HREF="test.css">
  5. </HEAD>
  6. <BODY>
  7. ³o¬O¦bBODY¼ÐÅÒ¤ºªº¤å¦r
  8. <P>
  9. ³o¬O¦bP¼ÐÅÒ¤ºªº¤å¦r
  10. </P>
  11. </BODY>
  12. </HTML>
½Æ»s¥N½X

  • REL=STYLESHEET¡Gªí¥Ü§Ú­Ì­n°Ñ·Ó¤@­Ó¥~³¡ªº¼Ë¦¡ÀɮסC
  • TYPE="text/css"¡G»¡©ú§Ú­Ì°Ñ·ÓªºÀÉ®×Ãþ«¬¡C
  • HREF="test.css"¡G«ü©w§Ú­Ì­n°Ñ·Óªº¼Ë¦¡Àɮצì¸m¤ÎÀɦW¡C



¶i¶¥ªº@import¼Ë¦¡ªíÀÉ®×°Ñ·Ó¡G
§Ú­Ì°£¤F¥i¥H¥ÎLINK¼ÐÅÒ¨Ó«ü©w¼Ë¦¡ªíªºÃöÁp¥~¡A¤]¥i¥H±Ä¥Î@import «ü©wªk¡I¦ý¬O³oºØ«ü©wªk¤ñ¸û³Â·Ð¤@ÂI¡A¤£¦ý­n§â¥¦¥[¦b<STYLE>»P</STYLE>¼ÐÅÒ¤º¡A¦P®ÉÁÙ±o¥[¤W<!-- »P --> µù¸Ñ¼ÐÅÒ¡C

§Ú­Ìªu¥Î¤W¤@­Ó½d¨Òªºtest1.css¼Ë¦¡Àɮרӻ¡©ú¡A²{¦b´NÅý§Ú­Ì¨Ó«Ø¥ß¤@­Ó¥H@import«ü©wªkªºHTMLºô­¶ÀÉ¡G
  1. <HTML>
  2. <HEAD>
  3. <TITLE>°Ñ·Ó¼Ë¦¡ÀÉ®×½d¨Ò</TITLE>
  4. <STYLE>
  5. <!--
  6. @import url("test1.css");
  7. -->
  8. </STYLE>
  9. </HEAD>
  10. <BODY>
  11. ³o¬O¦bBODY¼ÐÅÒ¤ºªº¤å¦r
  12. <P>
  13. ³o¬O¦bP¼ÐÅÒ¤ºªº¤å¦r
  14. </P>
  15. </BODY>
  16. </HTML>
½Æ»s¥N½X

  • URL(./test.css);«ü©w§Ú­Ì­n°Ñ·Óªº¼Ë¦¡Àɮצì¸m¤ÎÀɦW¡C
  • ¨Ï¥Î@import «ü©wªk¨Ó°Ñ·Ó¥~³¡¼Ë¦¡ÀɮסF½Ðª`·N¡G¦b@import±Ô­zªº³Ì«á­±¤@©w­n¥[¤W¤@­Ó¡u¡F¡v¤À¸¹¡I

12-4.png
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

¼Ë¦¡«Å§i½Ä¬ð®ÉªºÀu¥ý¶¶§Ç
·í§Ú­Ì²V¦X¦hºØªº¼Ë¦¡«Å§iªk«á¡A­Y¦³¨Ç¼ÐÅҼ˦¡ªº©Ê½è­«½Æ«Å§i¤F«ç»ò¿ì¡H¥L­ÌªºÀu¥ý¶¶§Ç¦p¦ó¡H

§@¥ÎÀu¥ý¶¶§Ç¡Gª½±µ¥[µù¦b¼ÐÅÒ¤ºªº¼Ë¦¡©Ê½è > STYLE¼Ë¦¡°Ï¬q¤ºªº©Ê½è > Ãìµ²¶i¨Óªº¼Ë¦¡Àɮשʽè¡C

  • ª½±µ¥[µù¦b¼ÐÅÒ¤ºªº¼Ë¦¡©Ê½è¡G¨Ò¦p¡A<P style="color:YELLOW">¡C
  • STYLE¼Ë¦¡°Ï¬q¤ºªº©Ê½è¡G³Q¥]¬A¦b<STYLE>»P</STYLE>¼ÐÅÒ¤§¶¡ªº¼Ë¦¡©Ê½è³]©w¡C
  • Ãìµ²¶i¨Óªº¼Ë¦¡Àɮשʽè¡G§Q¥Î LINK ¤èªk©Î @import ¤èªkÃìµ²¶i¨Óªº¼Ë¦¡Àɮ׫ŧi¤º®e¡C



³]©wÀu¥ý¶¶§Ç¡Gºô­¶³]­pªÌªº³]©w > ÂsÄýªÌªº¨Ï¥ÎªÌ¦Û­q > ÂsÄý¾¹ªº¹w¥ý³]©w¡C

  • ºô­¶³]­pªÌªº³]©w¡G´N¬O§Ú­Ì©Ò°Q½×ªº¼Ë¦¡©Ê½è³]©w°Õ¡I
  • ÂsÄýªÌªº¨Ï¥ÎªÌ¦Û­q¡GÂsÄýªÌ³z¹L©Ò¨Ï¥ÎªºÂsÄý¾¹¶i¦æ¦Û¤vÂsÄý®æ¦¡ªº³]©w¡C
  • ÂsÄý¾¹ªº¹w¥ý³]©w¡GÂsÄýªÌ©Ò¨Ï¥ÎªºÂsÄý¾¹©Ò¹w³]ªºÂsÄý®æ¦¡¡C



´£¥Ü¡I¡I
¤@¯ë¨Ó»¡¡A§Ú­Ì³£¥u¬O¹B¥ÎCSS¨Ó³]©wºô­¶¤å¦rªº¤j¤p¡B¼Ë¦¡¡B¦r«¬»PÃC¦â¡A¦ý¬O²{¦b³Ì¬y¦æªº¬O©Ò¿×ªº¡G°ÊºAºô­¶(Dynamic HTML)¡A°ÊºAºô­¶¸Ñ¨M¤F©Ò¦³¹ïºô­¶¤å¥óªº¦s¨ú­­¨î¡A¤]´N»¡§Ú­Ì¥i¥H¦bHTMLºô­¶¤¤¥[¤J°ÊºAªº®ÄªG¡A°ÊºAªºHTML¥i¥H¨ÏHTML¤¸¥ó(¹Ï¤ù¡B¤å¦r¦r¦êµ¥µ¥)´å²¾©óºô­¶¤§¤¤¡A©Î¬O²£¥Í»PÂsÄýªÌ¦³¤¬°Ê©Êªº¼W±j¥\¯à¡A·íµM¡A³æ¾aCSS¬O°µ¤£¨ì³oºØ¤¬°Ê©Ê¥\¯àªº¡A¦ý¬O«o¥i¥Hµ²¦Xµ{¦¡»y¨¥¨Ó¹F¨ì°ÊºAªº®ÄªG¡A¦Ó³Ì±`¥Î¨Óµ²¦XCSS³Ð³y¥X°ÊºAHTML¤¬°Ê©Ê®ÄªGªºµ{¦¡»y¨¥À³¸Ó´N¬OJavaScript¤F¡C
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

        ÀR«ä¦Û¦b : µoµÊ®ð¬Oµu¼ÈªºµoºÆ¡C
ªð¦^¦Cªí ¤W¤@¥DÃD