CSS¾µä¼¼ÇÉÊ®Ôò
1.CSS×ÖÌåÊôÐÔ¼òд¹æÔòÒ»°ãÓÃCSSÉ趨×ÖÌåÊôÐÔÊÇÕâÑù×öµÄ£º
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
µ«Ò²¿ÉÒÔ°ÑËüÃÇÈ«²¿Ð´µ½Ò»ÐÐÉÏÈ¥£º
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
Õæ²»´í£¡Ö»ÓÐÒ»µãÒªÌáÐѵģºÕâÖÖ¼òд·½·¨Ö»ÓÐÔÚͬʱָ¶¨font-sizeºÍfont-familyÊôÐÔʱ²ÅÆð×÷Ó᣶øÇÒ£¬Èç¹ûÄãûÓÐÉ趨font-weight, font-style, ÒÔ¼° font-varient £¬ËûÃÇ»áʹÓÃȱʡֵ£¬ÕâµãÒª¼ÇÉÏ¡£
2. ͬʱʹÓÃÁ½¸öÀà
Ò»°ãÖ»ÄܸøÒ»¸öÔªËØÉ趨һ¸öÀࣨClass£©£¬µ«Õâ²¢²»Òâζ×Ų»ÄÜÓÃÁ½¸ö¡£ÊÂʵÉÏ£¬Äã¿ÉÒÔÕâÑù£º
<p class=”text side”>…</p>
ͬʱ¸øPÔªËØÁ½¸öÀ࣬ÖмäÓÿոñ¸ñ¿ª£¬ÕâÑùËùÓÐtextºÍsideÁ½¸öÀàµÄÊôÐÔ¶¼»á¼Óµ½PÔªËØÉÏÀ´¡£Èç¹ûËüÃÇÁ½¸öÀàÖеÄÊôÐÔÓгåÍ»µÄ»°£¬ºóÉèÖÃµÄÆð×÷Ó㬼´ÔÚCSSÎļþÖзÅÔÚºóÃæµÄÀàµÄÊôÐÔÆð×÷Óá£
²¹³ä£º¶ÔÓÚÒ»¸öID£¬²»ÄÜÕâÑùд<p id=”text side”>…</p>Ò²²»ÄÜÕâÑùд
3. CSS borderµÄȱʡֵ
ͨ³£¿ÉÒÔÉ趨±ß½çµÄÑÕÉ«£¬¿í¶ÈºÍ·ç¸ñ£¬È磺
border: 3px solid #000
Õâλ°Ñ±ß½çÏÔʾ³É3ÏñËØ¿í£¬ºÚÉ«£¬ÊµÏß¡£µ«Êµ¼ÊÉÏÕâÀïÖ»ÐèÒªÖ¸¶¨·ç¸ñ¼´¿É¡£
Èç¹ûÖ»Ö¸¶¨ÁË·ç¸ñ£¬ÆäËûÊôÐԾͻáʹÓÃȱʡֵ¡£Ò»°ãµØ£¬BorderµÄ¿í¶ÈȱʡÊÇmedium£¬Ò»°ãµÈÓÚ3µ½4¸öÏñËØ£»È±Ê¡µÄÑÕÉ«ÊÇÆäÖÐÎÄ×ÖµÄÑÕÉ«¡£Èç¹ûÕâ¸öÖµÕýºÃºÏÊʵϰ£¬¾Í²»ÓÃÉèÄÇô¶àÁË¡£
4. CSSÓÃÓÚÎĵµ´òÓ¡
Ðí¶àÍøÕ¾É϶¼ÓÐÒ»¸öÕë¶Ô´òÓ¡µÄ°æ±¾£¬µ«Êµ¼ÊÉÏÕâ²¢²»ÐèÒª£¬ÒòΪ¿ÉÒÔÓÃCSSÀ´É趨´òÓ¡·ç¸ñ¡£
Ò²¾ÍÊÇ˵£¬¿ÉÒÔÎªÒ³ÃæÖ¸¶¨Á½¸öCSSÎļþ£¬Ò»¸öÓÃÓÚÆÁÄ»ÏÔʾ£¬Ò»¸öÓÃÓÚ´òÓ¡£º
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
µÚ1ÐоÍÊÇÏÔʾ£¬µÚ2ÐÐÊÇ´òÓ¡£¬×¢ÒâÆäÖеÄmediaÊôÐÔ¡£
µ«Ó¦¸ÃÔÚ´òÓ¡CSSÖÐдʲô¶«Î÷ÄØ£¿Äã¿ÉÒÔ°´Éè¼ÆÆÕͨCSSµÄ·½·¨À´É趨Ëü¡£Éè¼ÆµÄͬʱ¾Í¿ÉÒÔ°ÑÕâ¸öCSSÉè³ÉÏÔʾCSSÀ´¼ì²éË
Ïà¹ØÎĵµ£º
/* ½ûÖ¹»»ÐÐ */
.nowrap{word-break:keep-all;white-space:nowrap;}
/* Ç¿ÖÆ»»ÐÐ */
.break{word-break:break-all;}
cssÇ¿ÖÆ²»»»ÐÐ
div{white-space:nowrap;}
css×Ô¶¯»»ÐÐ
div{ word-wrap: break-word; word-break: normal; }
cssÇ¿ÖÆÓ¢Îĵ¥´Ê¶ÏÐÐ
div{word-break:break-all;}
´ó¼Ò¶¼ÖªµÀÁ¬ÐøµÄÓ¢ÎÄ»òÊý×Ö»á°ÑDIV ......
<html>
<head>
<mce:style type = "text/css"><!--
table
{
border-collapse:collapse;
}
td
{
border:solid 1px black;
}
--></mce:style><style type = "text/css" mce_bogus="1">table
{
border-collapse:collapse;
}
td
......
1 Õë¶Ôfirefox ie6 ie7µÄcssÑùʽ
ÏÖÔڴ󲿷ֶ¼ÊÇÓÃ!importantÀ´hack£¬¶ÔÓÚie6ºÍfirefox²âÊÔ¿ÉÒÔÕý³£ÏÔʾ£¬
µ«ÊÇie7¶Ô!important¿ÉÒÔÕýÈ·½âÊÍ£¬»áµ¼ÖÂÒ³ÃæÃ»°´ÒªÇóÏÔʾ£¡ÕÒµ½Ò»¸öÕë
¶ÔIE7²»´íµÄhack·½Ê½¾ÍÊÇʹÓÓ*+html”£¬ÏÖÔÚÓÃIE7ä¯ÀÀһϣ¬Ó¦¸ÃûÓÐÎÊÌâÁË¡£
ÏÖÔÚдһ¸öCSS¿ÉÒÔÕâÑù£º
#1 { color: #33 ......
1¡¢ÈýÖÖ²»Í¬µÄÑùʽ±í
Ñùʽ±í¸ù¾ÝÆäÊéдλÖò»Í¬£¬¹²·ÖΪÈýÖÖ£º
ÄÚÁªÑùʽ±í£¨inline£©£º¸ÃÑùʽ±íдÔÚ±êÇ©µÄstyleÊôÐÔÀ¸ºÔðÉèÖõ±Ç°±êÇ©µÄÑùʽ£»
ÄÚ²¿Ñùʽ±í£¨inner£©£º¸ÃÑùʽ±íÒ»°ãдÔÚhead±êÇ©µÄstyle±êÇ©Àͨ¹ýÑ¡ÔñÆ÷À´Ö¸¶¨Ä³¸öÑùʽËùÓ°ÏìµÄ±êÇ©£»
ÍⲿÑùʽ±í£¨external£©£º¸ÃÑùʽ±íÒ»°ãдÔÚ¶ÀÁ¢µÄ*.cssÎļþÀï£¬Í ......