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 Ö¸²ãµþÑùʽ±í (Cascading Style Sheets)
Ñùʽ¶¨ÒåÈçºÎÏÔʾ HTML ÔªËØ
Ñùʽͨ³£´æ´¢ÔÚÑùʽ±íÖÐ
°ÑÑùʽÌí¼Óµ½ HTML 4.0 ÖУ¬ÊÇΪÁ˽â¾öÄÚÈÝÓë±íÏÖ·ÖÀëµÄÎÊÌâ
ÍⲿÑùʽ±í¿ÉÒÔ¼«´óÌá¸ß¹¤×÷ЧÂÊ
ÍⲿÑùʽ±íͨ³£´æ´¢ÔÚ CSS ÎļþÖÐ
¶à¸öÑùʽ¶¨Òå¿É²ãµþΪһ
Ñùʽ½â¾öÁËÒ»¸öÆÕ±éµÄÎÊÌâ
HTML ±êǩԱ¾± ......
1.ͼƬµÄ´¹Ö±¾ÓÖÐ
.box
{
/*·ÇIEµÄÖ÷Á÷ä¯ÀÀÆ÷ʶ±ðµÄ´¹Ö±¾ÓÖеķ½·¨*/
display: table-cell;
vertical-align: middle; /*ÉèÖÃˮƽ¾ÓÖÐ*/
text-align: center;
/* Õë¶ÔIEµÄHack */
*display:block;
......
ƽ ʱÄÃCSS²¼¾Ö¶¼ÊÇһЩÄÚÈݱȽ϶àµÄÍøÕ¾,ǰÁ½ÌìÓÃCSS+DIVŪÁ˸öÄÚÈÝÉÙµÄÒ³Ãæ,·¢ÏÖÁËÒ»¸öСÎÊÌâ,¿ÉÄÜ´ó¼Ò¶¼»áÓöµ½,ÄǾÍÊÇÍøÕ¾FOOTERµÄ¶¨ λ,Èç¹ûÄÚÈݱȽÏÉٵϰ,Ò³ÃæµÄFOOTER¾Í»áËæ×ÅÄÚÈݵļõÉÙÅܵ½ÉÏÃæÈ¥,²»ÊǹԹԵÄÔÚÏÂÃæ´ô×Å,º¦µÃÎÒÑо¿Á˰ëÌìÕÒ¸ßÈËÖÕÓÚ¸ø¸ã¶¨ÁË,Ò²ËãÒ»¸öССµÄ ¼¼Çɸø´ó¼Ò·ÖÏí
Ê×ÏÈÎÒÃÇÒªÔÚÍâ²ãÉ趨һ ......
һ˵µ½javascript¾ÍÓÐÈË»áÏëµ½java£¬µ«ÊÇËûÃÇÍê»áÊÇÁ½»ØÊ£¬javascriptÊÇÃæÏò¶ÔÏóµÄ¶¯Ì¬ÀàÐ͵ÄÇø·Ö´óСдµÄ¿Í»§¶Ë½Å±¾ÓïÑÔ£¬Çë×¢Òâ´óСÓÐÇø±ð£¬ÃæÏò¶ÔÏó¡£javascriptÓÃ;ºÜ¶àµÄ£¬Ä¿Ç°¼¸ºõËùÓÐÖ÷Á÷ä¯ÀÀÆ÷¶¼Ö§³Ö¡£µ«ÊÇËûÓÐÒ»¸ö»µ´¦¾ÍÊDZäÁ¿£¬Èçvar
i=4;Õâ¸öi¾ÍÊÇintÀàÐ͵ģ¬var
s="hello",Õâ¸ösÊÇ×Ö·û´®ÀàÐ͵ģ ......
Ч¹ûͼ:
Ô´Âë: ±£´æÎªhtmlÎļþ, ÔÚIE6¼°ÒÔÉϰ汾IEä¯ÀÀÆ÷¿ÉÒÔÔËÐÐ....
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
&nb ......