CSS¼ò½é
CSS£¨Cascading Style Sheets£©²ãµþÑùʽ±í¡£
·´«Í³HTMLÒ³ÃæÅŰæºÍÏÔʾЧ¹ûÉèÖ÷½ÃæµÄÎÊÌâ¡£
·ÒýÈëCSSºó£ºHtml±ê¼ÇרÃÅÓÃÓÚ¶¨ÒåÍøÒ³µÄÄÚÈÝ£¬¶øÊÇÓÃCSSÀ´ÉèÖÃÆäЧ¹û¡£
CSS·ÖÀࣺ
ÄÚǶÑùʽ£¨Inline Style£©£ºÒÔÊôÐÔÐÎʽֱ½ÓÔÚHTML±ê¼ÇÖиø³ö£¬ÓÃÓÚÉèÖøñê¼ÇËù¶¨ÒåµÄÐÅϢЧ¹û¡£ÀýÈ磺
<body style ="background-color:#ccffee;">
<p style = "font-size:16px;color:red">µÚÒ»¶Î</p>
</body>
ÄÚ²¿Ñùʽ±í£¨Internal Style Sheet£©£ºÔÚ<head>±ê¼ÇÖиø³ö£¬¿ÉÒÔͬʱÉèÖöà¸ö±ê¼ÇËù¶¨ÒåµÄÐÅϢЧ¹û¡£¶Ôµ±Ç°Ò³ÃæÓÐЧ£¬ÀýÈ磺
<html>
<head>
<style type = "text/css">
body{background-color:#ffeecc}
p.mystyle1{font-size:20px;font-color:blue}
p.mystyle2{font-size:40px;font-color:red;text-align:center}
</style>
</head>
<body>
<p class="mystyle1">µÚÒ»¶ÎÎÄ×Ö</p>
<p class="mystyle2">µÚ¶þ¶ÎÎÄ×Ö</p>
</body>
</html>
ÍⲿÑùʽ±í£¨External Style Sheet£©£º±£´æÔÚÍⲿÎļþÖУ¬ÔÚʹÓõÄHTMLÒ³ÃæÖпÉÒÔÒýÓã¬ËüµÄÎļþºó׺Ϊ.css¸ñʽ¡£¿ÉÒÔ±»Óõ½¶à¸öHTMLÒ³ÃæÖС£
m1.css´úÂëÈçÏ£º
body{background-color:blue}
p.style1{font-size:20px;font-color:yellow}
p.style2{font-style:italic;font-size:30px;font-color:red;text-align:center}
03.html´úÂëÈçÏ£º
<html>
<head>
<link href="m1.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="style1">µÚÒ»¶Î</p>
<p class="style2">µÚ¶þ¶Î</p>
</body>
</html>
·ÑùʽÉèÖÃÓÅÏȼ¶£º£¨´Ó¸ßµ½µÍ£©
ÄÚǶÑùʽ±í——ÄÚ²¿Ñùʽ±í——ÍⲿÑùʽ±í——ϵͳĬÈÏÑùʽ±í
CSSµÄ×é³É²¿·Ö£º
&m
Ïà¹ØÎĵµ£º
¡¡¡¡CSSѧÆðÀ´²¢²»ÄÑ£¬µ«ÔÚ´óÐÍÏîÄ¿ÖУ¬¾Í±äµÃÄÑÒÔ¹ÜÀí£¬ÌØ±ðÊDz»Í¬µÄÈËÔÚCSSÊéд·ç¸ñÉÏÉÔÓв»Í¬£¬ÍŶÓÉϾ͸ü¼ÓÄÑÒÔ¹µÍ¨£¬Îª´Ë×ܽáÁËһЩÈçºÎʵÏÖ¸ßЧÕû½àµÄCSS´úÂëÔÔò£º
1. ʹÓÃResetµ«²¢·ÇÈ«¾ÖReset
¡¡¡¡²»Í¬ä¯ÀÀÆ÷ÔªËØµÄĬÈÏÊôÐÔÓÐËù²»Í¬£¬Ê¹ÓÃReset¿ÉÖØÖÃä¯ÀÀÆ÷ÔªËØµÄһЩĬÈÏÊôÐÔ£¬ÒÔ´ïµ½ä¯ÀÀÆ÷µÄ¼æÈÝ¡£µ«ÐèÒª×¢Ò ......
¡¡ÖÆ×÷¹ýÍøÒ³µÄÈ˶¼ÓÐΪ»Ïß¶ø·³ÄյľÀú£¬±¾ÎĽéÉܵÄС¼¼ÇÉÒ²Ðí¶ÔÄãÓÐËù°ïÖú¡£ÎÒÃÇÏÈÀ´ÈÏʶһÏ“Border”£¨»±ß¿ò£©£¬ËüÊÇCSSµÄÒ»¸öÊôÐÔ£¬ÓÃËü¿ÉÒÔ¸øÄÜÈ·¶¨·¶Î§µÄHTML±ê¼Ç£¨ÈçTD¡¢DIVµÈµÈ£©»±ß¿ò£¬Ëü¿ÉÒÔ¶¨Òå±ß¿òÏßµÄÀàÐÍ¡¢¿í¶ÈºÍÑÕÉ«£¬ÀûÓÃÕâ¸öÌØÐÔ£¬¿ÉÒÔÖÆ×÷Ò»Ð©ÌØÊâЧ¹û¡£ÏÂÃæ½«Í¨¹ýʵÀýÀ´ËµÃ÷ÆäÓ¦Óü¼ÇÉ¡£ ......
CSS¶Ôä¯ÀÀÆ÷µÄ¼æÈÝÐÔÓÐʱÈÃÈ˺ÜÍ·ÌÛ,»òÐíµ±ÄãÁ˽⵱Öеļ¼ÇɸúÔÀí,¾Í»á¾õµÃÒ²²»ÊÇÄÑÊÂ,´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃû.
CSS¼¼ÇÉ
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ
vertical-align:middle; ......
¿´¿´ÏÂÃæÕâ¶Î´úÂ룬ÊÇ·ñ±¶¸ÐÇ×Çе«ÓÖ¾õµÃºÜİÉúÄØ£º
.test {
background-color: black; /* firefox, opera, ie8 */
[;background-color: green;] /* safari, chrome */
*background-color: blue; /* ie7 */
_background-color: red; /* ie6 */
}
html*~/**/body .test {
border: 5px solid ......