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

[¤À¨É] CSS ªºÀu¶Õ

[¤À¨É] CSS ªºÀu¶Õ

³q¦YÂsÄý¾¹
CSS ¼Ë¦¡ªí, ¤£ºÞÂsÄýªÌ¬O¨Ï¥Î¦óºØÂsÄý¾¹¨ÓÆ[½àºô­¶¬Ò¯àªí²{¥Xºô­¶¿W¯Sªº­·®æ, ¤£¹³ JavaScript ©Î VBScript »y¨¥·|¦]¬°ÂsÄý¾¹ªº¤£¦P¦Ó²£¥Í®t²§, ¤£³æ¬O¥«³õ¤W¨Ï¥Î²v³Ì°ªªº Microsoft Internet Explorer (IE) »P Netscape Communicator ÂsÄý¾¹¤ä´©, ¬Æ¦Ü³\¦h«D¥D¬yªºÂsÄý¾¹, ¦p Emacs-W3¡BArena......µ¥, ³£¦³¤ä´©¸ÑªRªº¯à¤O¡C

¯S¥ß¿W¦æªº­·®æ
¤@­Ó¤H®ð©ô²±ªººô¯¸¤§©Ò¥H§l¤Þ¤H´N¬O¦]¬°¾Ö¦³¿W¤@µL¤Gªº­·®æ¡IÁ|¨Ò¨Ó»¡¡G¦b CSS ¼Ë¦¡ªí¥X²{¤§«e, ´X¥G©Ò¦³ºô­¶¤¤ªº¶WÃìµ²¤å¦r³£·|¥[¤W©³½u (Under Line) , ¦Ó¥B¨ÃµL¯S¦âÅܤÆ, ¦pªG¥[¤W CSS »yªk¨º¥i´N¤j¤j¤£¦P°Õ¡I

ºô¸ôÀô«O
¦b¤j®a¥þ¤O±À¼s¥þ¥Á¤Wºôªº¦P®É, ¥X²{¤F¤@­ÓÄY­«ªº¦M¾÷¡eºô¸ôÀW¼e¤£¨¬¡f, ¤@¤è­±¬O¦]¬°¤Wºô¤H¤fªº«æ³t¼W¥[³y¦¨ÀW¼e¤£¨¬, ¦ý³Ì¤jªº­ì¦]¬Oºô­¶³]­pªÌ¦bºô­¶³]­p¹Lµ{¤¤¨Ï¥Î¤F¤j¶qªº¹Ï¤ù, ¹Ï¤ùÀɪºÅé¿n¤j, ¦b¶Ç¿éªº¹Lµ{¤¤®ø¯Ó¤F¤j¶qªººô¸ô¸ê·½, ¦Ó CSS ªº¥X²{±N¨Ï³o­Ó°ÝÃDÀò±o³¡¤ÀÓV¸Ñ, CSS ¥i¨Ï¥Î³æ¯Âªº¤å¦r¨Ó¹F¨ì»P¹Ï¤ù¬Û¦Pªºªí²{®ÄªG¡I¤]´N¬O»¡¡G¤@¬q²µuªº¤å¦r´N¥i¥H¨ú¥NÅé¿nÃe¤jªº¹Ï¤ù¡I¤£¦ý¶Ç¿é³t«×¥[§Ö, ¦P®É¤]Àò±o»P¹Ï¤ù¬Û¦Pªºµøı®ÄªG¡C

ºô­¶ºûÅ@®e©ö
¬°¤Fºû«ù§Ú­Ì¯S¥ß¿W¦æªººô¯¸­·®æ, ¦P®É¤]¬°¤Fºû«ùºô­¶ªº¤@­P©Ê, §Ú­Ì¥i¥H«Ø¥ß¤@­Ó¿W¥ßªº CSS ¼Ë¦¡ªíÀÉ®×, Åý§Ú­Ì«Ø¥ßªº¨C¤@­Óºô­¶¼Ë¦¡³£¯à°Ñ·Ó¦¹¤@¼Ë¦¡ÀÉ®×, ·í¦¹¤@¼Ë¦¡Àɮפº®e§ïÅÜ«á, ©Ò¦³¦³°Ñ·Ó¦¹¤@¼Ë¦¡Àɮתººô­¶¥~Æ[¤]´N·|¥þ³¡¸òµÛ§ïÆ[¤F, ¦]¦¹§Ú­Ì¤£¥²¤@¤@ªº­×§ï¦U­Óºô­¶¨Ó¹F¨ìºô¯¸­·®æªº¤@­P©Ê, ¦pªG§AºûÅ@ªººô­¶¥u¦³´X­¶, ©Î³\¨Ã¤£·|·P¨ü¨ì¥¦ªº«K§Q©Ê, ¦pªG¬O¤W¦Ê­¶¬Æ¦Ü¼Æ¦Ê­¶, §A´N·|Åé·|¨ì¥¦©Ò±a¨Óªº«K§Q©Ê¡I

CSS ªº«Å§i­ì«h

­n«Å§i CSS ¼Ë¦¡ªí­º¥ý¥²¶·¨ã³Æ¦³ HTML ºô­¶»yªkªº°ò¦¡I¤]´N¬O§A¥²¶·¤F¸Ñºô­¶­ì©l½X¤¤¼ÐÅÒªº·N¸q¡C¼Ë¦¡«Å§iªº¼Ð·Ç»yªk¦p¤U¡G
----------------------------------------------------
p { font-size : 10pt ; }
§@¥Î¹ï¶H, ¤¸¯À{ ÄÝ©Ê: ÄÝ©Ê­È}
----------------------------------------------------
¡´ÄݩʦWºÙ»PÄݩʭȤ§¶¡¥²¶·¥H«_¸¹¹j¶}¡C
¡´¨C¤@²ÕÄݩʳ]©w¥H¡u;¡v¤À¸¹°µµ²§À¡C
¡´ÄݩʦWºÙ»PÄÝ©Ê­È«h¥²»Ý¥H¤@²Õ¤j¬A¸¹¡u{ }¡v¥]¬A°_¨Ó¡C

1³æ¤@¤¸¯Àªº½Æ¼ÆÄݩʳ]©w¶¡¥²¶·¥H¡u;¡v¤À¸¹°µ°Ï¹j, ¦ý, ¤¸¯À¥u¦³³æ¤@²ÕÄݩʳ]©w, ©Î¬O³æ¤@ÄݩʽƼÆÄݩʳ]©w¤¤ªº³Ì«á¤@²ÕÄݩʳ]©w¥i¬Ù²¤¤£¥[¡u;¡v¤À¸¹¡G
  1. p { font-size : 10pt ; color : #FF0000 ¡F }
  2. p { font-size : 10pt ¡F } ¥i¬Ù²¤  
½Æ»s¥N½X
2ÄݩʭȪ½±µ«ü©w¨ä­È, ¤£¶·¥[¤W¤Þ¸¹¡]³æ¤Þ©ÎÂù¤Þ¸¹¡^¡G
  1. p { text-align : center ;} ¥¿½T, ª½±µ®Ñ¼gÄÝ©Ê­È
  2. p { text-align : ¡§center¡¨ ; } ¿ù»~, ¤£¶·¥[¤W¤Þ¸¹
½Æ»s¥N½X
3¼Ë¦¡ªº®M¥ÎÀu¥ý¶¶§Ç, ³o¸Ì«üªº®M¥Î¶¶§Ç¬O°w¹ï¤å¥ó»s§@ªÌ»P¨Ï¥ÎªÌ©Ò½s©wªº¼Ë¦¡ªí¦³©Ò½Ä¬ð®É¦óªÌ¾Ö¦³Àu¥ý®M¥ÎÅv§Q, ¤@¯ë¨Ó»¡¤å¥ó»s§@ªÌªº¼Ë¦¡ªí¦ì¶¥¸û°ª, ·í»P¨Ï¥ÎªÌªº¼Ë¦¡ªíµo¥Í½Ä¬ð®É, »s§@ªÌªº¼Ë¦¡ªí±NÀu¥ý³Q®M¥Î¡F­Y§Æ±æ¤å¥ó»s§@ªÌ»P¨Ï¥ÎªÌ©Ò½s©wªº¼Ë¦¡ªí¦³©Ò½Ä¬ð®É, ¨Ï¥ÎªÌªº¼Ë¦¡ªí¯àÀu¥ý³Q®M¥Î, «h¥i§Q¥ÎÃöÁä¦r¡u ! important¡v¡G
  1. p { text-align : right ! important ;} ¨Ï¥ÎªÌ¼Ë¦¡Àu¥ý
  2. p { text-align : center ; } »s§@ªÌ¼Ë¦¡Àu¥ý
½Æ»s¥N½X
4¤¸¯À¶¡¥i¥Î¡u, ¡v³r¸¹¹j¶}¶i¦æ½Æ¦X«Å§i¡G
  1. ³r¸¹¹j¶}
  2. body , p {
  3. color:#00FF00 ; font-size:10pt ; font-family:²Ó©úÅé }
½Æ»s¥N½X
¤W¨Ò¡G¦b body ¤¸¯À¼ÐÅÒ¤º®e¤¤ªº¤å¦r¥~Æ[ÃC¦â³£Åܦ¨ºñ¦â¡B¤å¦rªº¤j¤p«ü©w¬° 10pt¡B¤å¦r¦r«¬¬°²Ó©úÅé¡F¦P®É¡A¦b p ¤¸¯À¼ÐÅÒ¤º®e¤¤ªº¤å¦r¤å¦r¥~Æ[ÃC¦â¤]³£Åܦ¨ºñ¦â¡B¤å¦rªº¤j¤p«ü©w¬° 10pt¡B¤å¦r¦r«¬¬°²Ó©úÅé¡A¥»¨Ò¤¤¤@¦¸´N«Å§i¤F body ¤¸¯À¼ÐÅÒ»P p ¤¸¯À¼ÐÅÒªº¤TºØ¦@³q¼Ë¦¡ÄÝ©Ê¡C

¤¸¯À¡Gline-height ( «ü©w¦æ°ª)
»yªk¡G¿ï¾Ü¾¹ { line-height : ÄÝ©Ê­È }

¥i«ü©wªºÄÝ©Ê­È¡÷1ªø«×¡]³æ¦ì¼Æ­È¡^¡B 2%¡]¦Ê¤À¤ñ¡^¡B
3¾ã¼Æ©Î¤U¦C¨ä¥L¥i¯à­È / normal
1.ªø«×¡]³æ¦ì¼Æ­È)¼Æ­È¥[¤W em ¡B px ¡B pt µ¥³æ¦ì, ¤£¥i«ü©w­t¼Æ­È
2.%¡]¦Ê¤À¤ñ¡^¼Æ­È¥[¤W¦Ê¤À¤ñ²Å¸¹, ¦æ°ª»P¤å¦rªº°ª«×¦Ê¤À¤ñ, ¤£¥i«ü©w­t¼Æ­È
3.¾ã¼Æ­È¤å¦r°ª«×ªº­¿¼Æ, ¤£¥i«ü©w­t¼Æ­È
¨ä¥L¥i¯à­È»¡©ú
normal ¨Ì¾Ú¤å¦r¤j¤p¦Û°Ê³]©w


ÂsÄý¾¹¹ïÀ³¡G IE NetScape Opera Safari Firefox
¤¸¯ÀÄ~©Ó¡G ¦³Ä~©Ó©Ê
¾A¥Î¤¸¯À¡G ¥þÅ餸¯À
¡´line-height ÄÝ©Ê¥i«ü©w¦æ°ª, ¥Î©ó½u¤º¤¸¯Àµ¥©ó«ü©w½u¤º¤å¦r°Ï¶ôªº°ª«×¦Ó«D¤å¦r¥»¨­ªº°ª«×¡C
¡´­Y°Ï¶ô¤º§t¦³°ª«×¤j©ó«ü©w¦æ°ªªºª«¥ó, «h¦æ°ª·|¦Û°Ê¼W¥[¦¨¬°¸Óª«¥óªº°ª«×¡C

½d¨Ò¾Ç²ß ¡G «ü©w¬q¸¨ªº¦æ°ª line-height.html
  1. <head>
  2. <meta http-equiv="Content-Language" content="zh-tw">
  3. <title>CSS line-height</title>
  4. <style type="text/css">
  5. /* <![CDATA[ */
  6. body{background-image: url("img/121.jpg"); margin-left:40px;}
  7. h1 {color: #FFFFFF; margin-left:40px;}
  8. .p1 {line-height: 250%; border: #06C dashed 1pt;}
  9. .p2 {line-height: 15pt; border: 2pt dotted #60C;}
  10. .p3 {line-height: 2; border: #60C double 2pt;}
  11. /* ]]> */
  12. </style>
  13. </head>

  14. <body>
  15. <h1>ºô¸ô°Êº©À]</h1>
  16. <table border="0">
  17. <tr><td width="350">
  18. <p class="p1">Às¿ß<br />­ì§@¡D¸}¥»¡DºÊ·þ¡G®c±TÂ@¡F­µ¼Ö¡G¤[¥ÛÅý</p>
  19. <p class="p2">¾ã³¡¼v¤ùªº¤ÀÃè¸}¥»¡G±Ä Multi-Angle ¤è¦¡»s§@¥i¥Î»»±±¾¹¾Þ§@ÀH®É»P¹ê»Ú¼v¤ù¤Á´«Æ[½à</p>
  20. <p class="p3">Às¿ß¬O®c±TÂ@ªº¦b STUDIO GHIBLI ªº²Ä¤T³¡¹q¼v¡A¦]¬°³o³¡¥­ÀR¦Ó·ÅÄɪº¹q¼v¨Ï±oÀs¿ß³o­Ó¥i·Rªº¥Íª«¦b¥þ¥@¬É³£®a³ë¤á¾å¡A¤Q¤À¾A¦X¥þ®a¦Ñ¤j¤p¤@»ôÆ[¬Ý¡C</p>
  21. </td><td>
  22. <img src="img/p111927714911.jpg" border="1" /></td>
  23. </tr></table>
  24. </body>
½Æ»s¥N½X



CSS¡DHTML¡DXHTML ºë½o½d¨ÒÃã¨å


¥»®Ñ¨«ºë½o¸ô½u¡A¨C­Ó½d¨Ò³£¬Oºë¤ß³]­p¡Aºë¿ï³Ì±`¥Îªº»yªk¡A¤£·|¦C¤F¤@°ï¥Î³£¥Î¤£¨ìªº»yªk¡AÅý®ÑÅܱo¤S«p¤S­«¡C³Ì­«­nªº¬O§Ú­Ì´£¨Ñ¤F¦hºØ¹ê¥Îªº¬d¸ß¤è¦¡¡A¥i¨Ì»yªk¤ÀÃþ¡B½d¨Ò¥\¯à©Î¦r¥À¬d§ä¡C
¡¼ºë¿ï³Ì±`¥Îªº HTML + XHTML + CSS »yªk, ¥i¨Ì»yªk¤ÀÃþ¡B½d¨Ò¥\¯à©Î¦r¥À¬d§ä¡C
¡¼·f°t¹Ï¤å¸Ñ»¡»P³Ìºë½oªº½d¨Ò¥Ü½d¡AÅý±z¤£¦ý¬Ý±oÀ´¡AÁٯన¤Wª¾¹D­n«ç»ò¥Î¡A¬O±z¦b³]­pºô­¶®É³Ì¤è«Kªº°Ñ¦Ò®Ñ¡C
¡¼Â²©ö»yªk¤Jªù¤Î°ò¦Æ[©À¡AÀ°§U±z§Ö³t¤F¸ÑHTML + XHTML + CSS ªº¨Ï¥Î¤è¦¡¡C
¡¼²M·¡¼Ð¥Ü¾A¥ÎªºÂsÄý¾¹ºØÃþ»Pª©¥»¡A²Å¦X¹ê»Ú»Ý¨D¡C
¡¼¥úºÐ¤¤¦¬¿ý§¹¾ãªº½d¨Ò©Mµ{¦¡½X¡A¤è«K±zª½±µ¨ú¥Î©M­×§ï¦A¹B¥Î¡C
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

CSS¬O«Ü¤£¿ù¥i¬O¦b¸ê®ÆÃe¤jªººô­¶´N«Ü®e©ö³y¦¨¼ÐÅҮ榡²V¶Ãªº¾÷²v....¥[´î¥Î§a
³oÁ٥λ¡¶Ü

TOP

¦^´_ 2# jacky790325


    ³o½×ÂI§ÚÁÙ¬OÀY¤@¦¸Å¥¨ì,¯u¬O¨ü±Ð¤F
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

·PÁ±z¤À¨É¡A¥i¥H´£¨ÑHTML5ªº¸ê°T©Î±Ð¾Ç¶Ü¡H

TOP

        ÀR«ä¦Û¦b : ªY½à§O¤H´N¬O²øÄY¦Û¤v¡C
ªð¦^¦Cªí ¤W¤@¥DÃD