css ÒýÈ뷽ʽÓëÑ¡ÔñÆ÷
½ñÌìѧϰÁËcssµÄÒýÈ뷽ʽºÍcssµÄÑ¡ÔñÆ÷
CssÒýÈ뷽ʽ×ܹ²ËÄÖÖ·Ö±ðÊÇ£º
1.<link rel=”realstyle” type=”text/css” href=”css.css”>
rel ±íÃ÷Á¬½ÓµÄÎļþÓëhtmlÎĵµÖ®¼äµÄ¹ØÏµ
type ÊDZíÃ÷ÎļþÀàÐÍ
href Ö¸ÏòÁ´½ÓµÄcssÎļþ
2.ÔÚhtmlÎĵµµÄhead²¿·ÖÖ±½ÓдÈëcssÎĵµ¡£
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
3. Ö±½ÓÔÚhtml±êÇ©ÀïдÈë¶ÔÕâ¸ö±êÇ©µÄcss¿ØÖÆ
Eg:<div style="border:1px red solid;">²âÊÔÐÅÏ¢</div>
4.ʹÓÃ@importÒýÈëcssÎļþ
1£ºÔÚheadÀïʹÓõÄʱºò£º
<style type="text/css">
@import url(my.css);
</style>
2£ºÔÚcssÎļþÀïʹÓá£
£¨@import±¾ÉíÊÇÒ»¸öcssÃüÁî¡££©
Ñ¡ÔñÆ÷×ܹ²ÓÐÎåÖÖ·Ö±ð£º
1.ÀàÑ¡ÔñÆ÷
ÔÚ CSS ÖУ¬ÀàÑ¡ÔñÆ÷ÒÔÒ»¸öµãºÅÏÔʾ£º
HTML£º
<div class="test">²âÊÔ´úÂë</div>
CSS£º
.test {color:red;border:1px blue solid;}
×¢Ò⣺ÀàÃûµÄµÚÒ»¸ö×Ö·û²»ÄÜʹÓÃÊý×Ö£¡ËüÎÞ·¨ÔÚ Mozilla »ò Firefox ÖÐÆð×÷Óá£
2.id Ñ¡ÔñÆ÷
id Ñ¡ÔñÆ÷¿ÉÒÔΪ±êÓÐÌØ¶¨ id µÄ HTML ÔªËØÖ¸¶¨Ìض¨µÄÑùʽ¡£
id Ñ¡ÔñÆ÷ÒÔ "#" À´¶¨Òå¡£
HTML£º
<div id="test">²âÊÔ´úÂë</div>
CSS£º
#test {color:red;border:1px blue solid;}
×¢Ò⣺id ÊôÐÔÖ»ÄÜÔÚÿ¸ö HTML ÎĵµÖгöÏÖÒ»´Î¡£
3.ºó´úÑ¡ÔñÆ÷
ͨ¹ýÒÀ¾ÝÔªËØÔÚÆäλÖõÄÉÏÏÂÎĹØÏµÀ´¶¨ÒåÑùʽ£¬Äã¿ÉÒÔʹ±ê¼Ç¸ü¼Ó¼ò½à¡£
HTML£º
<div class="test">
<span><img src="xxx" alt="ʾÀýͼƬ"/></span>
</div>
CSS£º
.test span img {border:1px blue solid;}
div span img {border:1px blue solid;}
4.Ⱥ×éÑ¡ÔñÆ÷
CSS£º
.test1,span,test2 {border:1px blue solid;}
div,span,img {border:1px blue solid;}
5.±êǩѡÔñÆ÷
CSS:
div {color:red;border:1px blue solid;}
span {float:right;}
½ñÌ컹ѧµ½ÁËһЩѡÔñÆ÷µÄÓÅÏȼ¶µÄ֪ʶ£¬¸Ð¾õÕâЩÄÚÈݺÜÈÝÒ׵ľÍÀí½âÁË£¬²»ÖªµÀÒÔºóÔËÓõ½ÊµÕ½ÖлáÔõôÑù£¬»¹ÊÇÊÃÄ¿ÒÔ´ý£¬µ«ÊÇÒªÏëѧÀι̻¹ÊÇҪͨ¹ý´óÁ¿µÄÁ·Ï°²ÅÄÜ´ïµ½µÃÐÄÓ¦ÊÖ¡£
Ïà¹ØÎĵµ£º
ÓÃCSSÈÃÔªËØ¾ÓÖÐÏÔʾ²¢²»ÊǼþºÜ¼òµ¥µÄÊÂÇ顣ͬÑùµÄCSS¾ÓÖÐÉèÖÃÔÚ²»Í¬ä¯ÀÀÆ÷ÖеıíÏÖÒ²¸÷ÓÐǧÇï¡£±¾ÎľͽéÉÜÁËÔÚCSSÖг£¼ûµÄ¼¸ÖÖÈÃÔªËØË®Æ½¾ÓÖÐÏÔʾµÄ·½·¨¡£
¡¡¡¡1.ʹÓÃ×Ô¶¯Íâ±ß¾àʵÏÖ¾ÓÖÐ
¡¡¡¡CSSÖÐÊ×Ñ¡µÄÈÃÔªËØË®Æ½¾ÓÖеķ½·¨¾ÍÊÇʹÓÃmarginÊôÐÔ—½«ÔªËصÄmargin-leftºÍmargin-rightÊôÐÔÉèÖÃΪauto¼´¿É¡£ÔÚʵ¼ÊʹÓà ......
Ч¹ûͼ£º
csstest.css
*{
margin-left:0;
margin-top:0;
font-size:12px;
color:White;
}
#biaoge
{
/*¶ÔIDΪbiaogeµÄ±êǩʹÓôËCSS*/
width:405px; /*Áпí100£¬¼ÓÉÏÎå¸öΪ1µÄ±ß¾à£¬ËÄÁоÍÊÇ405*/
&nbs ......
Alpha
1. Óï·¨: {filter: alpha(opacity=opacity, finishopacity=finishopacity, style=style, startx=startx, starty=starty, finishx=finishx, finishy=finishy)}
2. ÒâÒå: °ÑÒ»¸öÄ¿±êÔªËØÓë±³¾°»ìºÏ, ÉèÖÃÕß¿ÉÒÔÖ¸¶¨ÊýÖµÀ´¿ØÖÆ»ìºÏµÄ³Ì¶È
3. ÊôÐÔ
3.1. opacity: ͸Ã÷¶Èˮƽ, 0ΪÍêȫ͸Ã÷, 100ΪÍêÈ«²»Í¸Ã÷
3.2. fin ......
½ñÌìÎÒÃÇ»ã×ÜÁËÐí¶àdiv+cssÍøÒ³Éè¼ÆÖо³£Óõ½µÄ¾ÑéºÍ¼¼ÇÉ£¬´ó¼Ò¿ÉÒÔ¶à¶à²Î¿¼£¬¶ÔÄãµÄÒ³ÃæÉè¼ÆÒ»¶¨ÓкܴóµÄ°ïÖú!
Èç¹ûÎÄ×Ö¹ý³¤£¬Ôò½«¹ý³¤µÄ²¿·Ö±ä³ÉÊ¡ÂÔºÅÏÔʾ£ºIE5£¬FFÎÞЧ£¬µ«¿ÉÒÔÒþ²Ø£¬IE6ÓÐЧDIV STYLE=“width£º120px£»height£º50px£»border£º1px solid blue£»overflow£ºhidden£»text-overflow£ºellipsis&rdquo ......
Ðí¶àÈËÈÏΪie6²»Ö§³Ö!important£¬ÆäʵÊDZ»Ò»ÌõÕë¶Ôie 6µÄcss hack¸øÎóµ¼ÁË¡£ÕâÌõcss hackÊÇ£º
.test {
height: auto !important;
height: 500px;
}
.testµÄ¸ß¶ÈÔÚÆäËûä¯ÀÀÆ÷ÀïÃæÊÇauto£¬¶øÔÚie6ÀïÃæÊÇ500px£¬Ðí¶àÈËÔÚ½âÊÍÕâÌõcss hackÖ®ËùÒÔ»áÉúЧÊÇÒòΪie6²»Ö§³Ö!important£¬Îóµ¼Á˲»ÉÙÈ ......