¡¶¾«Í¨CSS¸ß¼¶WEB±ê×¼½â¾ö·½°¸¡·µÚÆßÕ ²¼¾Ö
ÎÒÔÚwww.c09.com ·¢±íÁËÕâ¸ö±Ê¼Ç²¢ÉÏ´«ÁËÔÖøµÄPDF£¬½ñÌìÓпգ¬×ªµ½BLOGÉÏÀ´¡£
µÚÆßÕÂ ²¼¾Ö
ËùÓÐCSS²¼¾Ö¼¼Êõ¶¼ÒÀÀµÓÚÈý¸ö»ù±¾¸ÅÄ¶¨Î»¡¢¸¡¶¯ºÍ¿Õ°×±ß²Ù×Ý
7.1 ÈÃÉè¼Æ¾ÓÖÐ[code]
<body>
<div id='wrapper'>
</div>
</body>
/*×îÃ÷Á˵ľÓÖз½°¸£¬¿ÉϧIE6²»Ö§³Ö*/
#wrapper{
width:720px;
margin:0 auto;
}
/*ÀûÓÃIe¶Ôtext-alignµÄÀí½âBUG½â¾öIE6Ö§³ÖÎÊÌâ*/
body{
text-algin:center;
min-width:760px;/*Èç¹û´°¿Ú¿í¶ÈСÓÚ760px¾Í²»ÔÙ×ÔÊÊÓ¦ËõС*/
}
#wrapper{
width:720px;
margin:0 auto;
text-algin:left;
}
/*Ò²¿ÉÒÔ²ÉÓÃÕâÖÖ·½·¨,Ö»Ð趨ÒåwrapperÒ»¸öÔªËØ*/
#wrapper{
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
[/code]7.2 ¹Ì¶¨¿í¶ÈµÄ²¼¾Ö[code]
/*ÕâÊÇÒ»¸ö·Ç³£³£¼ûµÄÁ½Áв¼¾Ö*/
<div id='wrapper'>
<div id='branding'>
...
</div>
<div id='content'>
...
</div>
<div id='mainNav'>
...
</div>
<div id='footer'>
...
</div>
</div>
/*Á½Áв¼¾ÖµÄCSSÉ趨ºÜ¼òµ¥*/
#content{
width:520px;
float:right;
}
#mainNav{
width:180px;
float:left;
}
#footer{
clear:both;
}
/*ÈÃÎÄ×ÖÓëÈÝÆ÷±ßÔµ±£³Ö¾àÀë*/
#mainNav{
padding-top:20px;
padding-bottom:20px;
}
#mainNav li{
padding-left:20px;
padding-right:20px;
}
#content h1,#content h2,#content p{
padding-right:20px;
}
/*ÈýÁв¼¾Ö£¬¿ÉÒÔÔÚÓÒ²àcontentÖÐÔÙÌí¼ÓÒ»À¸*/
<div id='content'>
<div id='mainContent'>
......
</div>
<div id='secondaryContent'>
...
</div>
</div>
/*Ö»ÒªÒ»¸ö×ó¶ÔÆë£¬ÁíÒ»¸öÓÒ¶ÔÆë¾Í¿ÉÒÔÁË*/
#mainContent{
width:320px;
float:left;
}
#secondaryContent{
width:180px;
float:right;
}
[/code]Á÷Ìå²¼¾Ö[code]
/*²¼¾Ö¿í¶È¸ù¾Ý´°¿Ú´óС×ÔÊÊÓ¦*/
#w
Ïà¹ØÎĵµ£º
CSSÓÅÏȼ¶°üº¬Ëĸö¼¶±ð£¨ÎÄÄÚÑ¡ÔñÆ÷£¬IDÑ¡ÔñÆ÷£¬ClassÑ¡ÔñÆ÷£¬ÔªËØÑ¡ÔñÆ÷£©ÒÔ¼°¸÷¼¶±ð³öÏֵĴÎÊý¡£¸ù¾ÝÕâËĸö¼¶±ð³öÏֵĴÎÊý¼ÆËãµÃµ½CSSµÄÓÅÏȼ¶¡£
CSSÓÅÏȼ¶µÄ¼ÆËã¹æÔòÈçÏ£º
* Ò³ÃæÖÐÖ±½ÓÉèÖÃstyle,¼Ó1,0,0,0
* ÿ¸öIDÑ¡ÔñÆ÷(Èç #id),¼Ó0,1,0,0
* ÿ¸öClassÑ¡ÔñÆ÷(Èç .class)¡¢Ã¿¸öÊôÐÔÑ¡ÔñÆ÷(Èç [attribute=])¡¢Ã¿¸ö ......
¿´¿´ÏÂÃæÕâ¶Î´úÂ룬ÊÇ·ñ±¶¸ÐÇ×Çе«ÓÖ¾õµÃºÜİÉúÄØ£º
.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 ......
CSS »ù´¡Óï·¨
µ±Í¬Ò»¸ö HTML ÔªËØ±»²»Ö¹Ò»¸öÑùʽ¶¨Òåʱ£¬»áʹÓÃÄĸöÑùÊ½ÄØ£¿
Ò»°ã¶øÑÔ£¬ËùÓеÄÑùʽ»á¸ù¾ÝÏÂÃæµÄ¹æÔò²ãµþÓÚÒ»¸öеÄÐéÄâÑùʽ±íÖУ¬ÆäÖÐÊý×Ö 4 ÓµÓÐ×î¸ßµÄÓÅÏÈȨ¡£
1. ä¯ÀÀÆ÷ȱʡÉèÖÃ
2. ÍⲿÑùʽ±í
3. ÄÚ²¿Ñùʽ±í£¨Î»ÓÚ <head> ±êÇ©ÄÚ²¿£©
4.&nb ......
Ò»¡¢CSS Ö㤶ÈÓëÑÕÉ«
1¡¢³¤¶Èµ¥Î»ËµÃ÷
in Ó¢´ç
cm ¹«·Ö
mm ¹«Àï
cm ÒÔĿǰ×ÖÌå¸ß¶ÈΪµ¥Î»
ex ÒÔСд×Öĸ¸ß¶ÈΪµ¥Î»£¨´ó²¿·Ö²»Ö§³Ö£©
pt 1pt/72Ó¢´ç
pc 1pc/12pt
px ÏñËØ£¨ÍƼöʹÓã©
2¡¢ÑÕÉ«µ¥Î»£º ˵Ã÷
Ê®Áù½øÖÆÈ磺color:#ff0000
ÑÕÉ«Ãû³ÆÈ磺color:red
ÈýÔÉ«µ¥Î»È磺rgb(255,0,0)
Ò»°ã×î³£ÓõÄÊÇÊ®Áù½øÖ ......