CSSæ¯Cascading style Sheetsçç®ç§°ï¼ä¸æè¯ä½âå±å æ ·å¼è¡¨åâï¼ææå®å«ä½âå±å æ ·å¼è¡¨âï¼ææå°è¿æ ·é¡ºå£ä¸
ç¹ï¼æ²¡å«çææãå®é
ä¸å®æ¯ä¸ç»æ ·å¼ãä½ å¯è½å¯¹CSSè¿ä¸ªåè¯æ¯è¾éçï¼å®é
ä¸æ è®ºä½ ç¨Internet Explorerè¿æ¯
Netscape Navigatorå¨ç½ä¸å²æµªï¼å ä¹éæ¶é½å¨ä¸CSSæ交éï¼å¨ç½ä¸æ²¡æ使ç¨è¿CSSçç½é¡µå¯è½ä¸å¥½æ¾ãä¸ç®¡ä½ ç¨ä»ä¹å·¥
å
·è½¯ä»¶å¶ä½ç½é¡µï¼é½æå¨æææ æå°ä½¿ç¨CSSãç¨å¥½CSSè½ä½¿ä½ çç½é¡µæ´å ç®ç¼ï¼ä¸ºä»ä¹åæ ·å
容çç½é¡µï¼æç人ååºæ¥æ
å åKBï¼èé«æååºæ¥åªæåå KBï¼CSSå¨å
¶ä¸çä½ç¨æ¯ä¸è¨èå»çãæææå¨ä½¿ç¨CSSä¸çä¸äºå°ç»éªä»¥åä¸äºç½åæ¥ä¿¡
æé®çé®é¢æ´çåºæ¥ï¼ä¾è¯¸ä½åèã
1ãCSSå¨ç½é¡µå¶ä½ä¸ä¸è¬æä¸ç§æ¹å¼çç¨æ³ï¼é£ä¹å
·ä½å¨ä½¿ç¨æ¶è¯¥éç¨åªç§ç¨æ³ï¼
å½æå¤ä¸ªç½é¡µè¦ç¨å°çCSSï¼éç¨å¤è¿CSSæ件çæ¹å¼ï¼è¿æ ·ç½é¡µç代ç 大大åå°ï¼ä¿®æ¹èµ·æ¥é常æ¹ä¾¿ï¼åªå¨å个ç½é¡µ
ä¸ä½¿ç¨çCSSï¼éç¨æ档头é¨æ¹å¼ï¼åªæå¨ä¸ä¸ªç½é¡µä¸ã两个å°æ¹æç¨å°çCSSï¼éç¨è¡å
æå
¥æ¹å¼ã
2ãCSSçä¸ç§ç¨æ³å¨ä¸ä¸ªç½é¡µä¸è¦ä»¥æ··ç¨åï¼
ä¸ç§ç¨æ³å¯ä»¥æ··ç¨ï¼ä¸ä¸ä¼é ææ··ä¹±ãè¿å°±æ¯å®ä¸ºä»ä¹ç§°ä¹ä¸ºâå±å æ ·å¼è¡¨âçåå ï¼æµè§å¨å¨æ¾ç¤ºç½é¡µæ¶æ¯è¿æ ·å¤
ççï¼å
æ£æ¥æ没æè¡å
æå
¥å¼CSSï¼æå°±æ§è¡äºï¼é对æ¬å¥çå
¶å®CSSå°±ä¸å»ç®¡å®äºï¼å
¶æ¬¡æ£æ¥å¤´é¨æ¹å¼çCSSï¼æå°±æ§è¡
äºï¼å¨å两è
é½æ²¡æçæ
åµä¸åæ£æ¥å¤è¿æ件æ¹å¼çCSSãå æ¤å¯çåºï¼ä¸ç§CSSçæ§è¡ä¼å
级æ¯ï¼è¡å
æå
¥å¼ã头é¨æ¹
å¼ãå¤è¿æ件æ¹å¼ã
3ãå¨Dreamweaver3ä¸å¦ä½ä½¿å¤é¨æ件å¼CSSï¼
å¨Dreamweaver3ä¸ä½¿ç¨å¤è¿æ件å¼CSS并没æç¹æ®è¦æ±ï¼åæ ·æ¯ç¨è®°äºæ¬å建ä¸ä¸ª*.cssæ件ï¼å¨ç½é¡µç<head>ä¸
</head>ä¹é´å ä¸ä¸å¥è¿æ ·ç代ç ï¼<link rel="stylesheet" href="å¨è¿éå¡«ä¸ä½ çCSSæ件å°åï¼ç¸å¯¹è·¯å¾+æ件
åï¼" type="text/css"> å°±è¡äºã
4ãå¦ä½ç¨Dreamweaver3å¿«éå建CSSå¤è¿å¼æ件ï¼
对äºä¸ä¸ªåæ¥è§¦CSSçç½é¡µè®¾è®¡äººåæ¥è®²ï¼è¦ç¨è®°äºä¹ç±»çç¼è¾å¨ï¼å»å建ä¸ä¸ªCSSå¤è¿å¼æ件æ¯ç¸å½å°é¾çãç±äº
Dreamweaver3对CSSæ¯æçå¾å¥½ï¼ç¨å®æ¥å¸®å©å°±è½»æ¾å¤äºãå
·ä½å¯ä»¥è¿æ ·æä½ï¼
1ï¼å
å¨çº¸ä¸å好å¨ç½ç«çç½é¡µä¸å¯è½è¦ç¨å°çæ ¼å称ï¼ç¶åå¨Dreamweaver3çç¼è¾çªä¸è°åºCSSé¢æ¿ï¼ä¸ä¸ªä¸ä¸ªå°å®
ä¹ï¼å¹¶å¨ä¸ä¸ªç©ºç½é¡µä¸éå½å°åä¸ç¹ç¸å
³å
容ï¼è¾¹å®ä¹è¾¹è¯ç¨ï¼ææä¸æ»¡æï¼ç«å³ä¿®æ¹ï¼
2ï¼å
¨é¨å®ä¹å¥½åï¼åç¨è®°äºæ¬å建ä¸ä¸ªç©ºçCSSå¤è¿å¼æ件ï¼æå¨<head>ä¸</head>ä¹é´çé£æ®µå®ä¹å¥½çCSSå¤å¶
å°CSSæ件ä¸å»ï¼å°±å¤§ååæäºãæ´ä¸ªè¿ç¨å°±æ¯ç¹é¼ æ ï¼æ¹ä¾¿å§ï¼
5ãå¨Dreamweaver3ä¸éç¨è¡å
æå
¥å¼CSSè¦æå¨å代ç åï¼
ä¸ç¨ï¼å
ç¨CSSé¢æ¿å®ä¹å¥½è¦ç¨çCSSï¼ç¶åï¼å¨è¦æå
¥CSSçæ è®°æå
¥ï¼style=""ï¼åæä½ åæå®ä¹çCSSä»<head>
åé¢æå°è¿ä¸ªåå¼å·ä¸æ¥ï¼æè±æ¬å·ä»¥å¤çé¨åå å»å°±è¡äºã
6ãå¨æ¹æ¡£å¤´é¨æ¹å¼åå¤è¿æ件æ¹å¼çCSSä¸é½æâ<!--âåâ-->âï¼å¥½è±¡æ²¡ä»ä¹ç¨ï¼ä¸è¦å¯ä»¥åï¼
è¿ä¸å¯¹ä¸ä¸çä½ç¨æ¯ä¸ºäºä¸å¼èµ·ä½çæ¬æµè§å¨çé误ãå¦ææ个æ§è¡æ¤é¡µé¢çæµè§å¨ä¸æ¯æCSSï¼å®å°å¿½ç¥å
¶ä¸çå
容ãè½ç¶ç°å¨ä½¿ç¨ä¸æ¯æCSSæµè§å¨ç人已å¾å°äºï¼ç±äºäºèç½ä¸å ä¹ä»ä¹å¯è½é½ä¼åçï¼æ以è¿æ¯çç为å¦ã
7ãå¦ä½ç»ä¸é¨åæåå èæ¯è²ï¼
ç»æåå ä¸ä¸åé¢è²ï¼å¨DW3ä¸åªè¦å¨å±æ§é¢æ¿ä¸éåæåçé¢è²å°±è¡äºï¼é常æ¹ä¾¿ï¼ä½è¦ç»é¨åæåå ä¸åçèæ¯è²
å´æ²¡æç¸åºçåè½ï¼æ们å¯ä»¥å
åä¸ä¸ªå®ä¹èæ¯è²çCSSï¼å¦ï¼bgstyleï¼ï¼å¨DW3ä¸ç¹å ä¸é¼ å°±å®æäºãå¦ä¸ä¸ªå®ä¹æ·¡é»è²
èæ¯çCSSæ¯è¿æ ·çï¼
<style type="text/css">
<!--
.bgstyle { background: #FFFFCC}
-->
</style>
å¨è¦ç¨æ¶éåé£æ®µæåï¼åå¨CSSé¢æ¿ä¸ç¹ä¸ä¸âbgstyleâå°±è¡äºã
8ãå¦ä½ç»é¨åæåå èæ¯å¾åï¼
ä¸å èæ¯è²æä½ç±»ä¼¼ï¼ä¸æ¯å¨èæ¯å¨éæ©å è½½å¾è±¡å°±æ¯äºï¼ä¸ä¸ªå®ä¹å¥½çå èæ¯å¾è±¡çCSSä¾åç代ç æ¯è¿æ ·çï¼
<style type="text/css">
<!--
.imgbgstyle { background-image: url(/logo.gif)}
-->
</style>
å¨è¦ç¨æ¶éåé£æ®µæåï¼åå¨CSSé¢æ¿ä¸ç¹ä¸ä¸âimgbgstyleâå°±è¡äºã
9ãå¦ä½ä½¿é¡µé¢çèæ¯å¨æåâæ»å¨âæ¶èæ¯å¾æ¡éæ¢ä¸å¨ï¼
è¦ä½¿èæ¯å¾æ¡ä¸éæåâæ»å¨âçCSSæ¯è¿æ ·çï¼
<style type="text/css">
<!--
BODY { background: purple url(/bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
-->
</style>
10ãå¦ä½å®ä¹åé´è·ï¼
å¨DW3ä¸CSSçå±æ§å®ä¹å¯¹è¯æ¡ï¼style Definition for .style1)çâBlockâä¸çâletter spaceingâå±æ§å®ä¹çå°±
æ¯åé´è·ï¼å®æçæ¯æ¯ä¸ä¸ªå符ä¹é´çé¢å¤é´è·ï¼ç»é¿åº¦ä¸ºåä½ï¼æ£è´å¼åå¯ï¼å½åè´å¼æ¶äº§çå符æ¤å¨ä¸èµ·çææãä¸
é¢ä»£ç æ¯ä¸ä¸ªå®ä¹å¥½çåé´è·CSSä¾åï¼
<style type="text/css">
<!--
.style1 { letter-spacing: 3px}
-->
</style>
11ãå¦ä½ç»æåå ä¸å线ãä¸å线ãå é¤çº¿åéªçï¼
å¨DW3ä¸CSSçå±æ§å®ä¹å¯¹è¯æ¡(style Definition for .style1)çâTypeâä¸çâdecorationâå±æ§å®ä¹çå°±æ¯è¿äº
å
容ï¼è¦æ³¨æçæ¯éªçå±æ§æäºçæ¬çæµè§å¨ä¸æ¯æï¼å°ç¨ä¸ºå¥½ãä¸é¢æ¯ä¸ä¸ªå®ä¹å¥½ä¸è¿°ææçCSSä¾åï¼
<style type="text/css">
<!--
.style1 { text-decoration: underline overline line-through blink}
-->
</style>
å
¶ä¸ï¼ âunderlineâæ¯å®ä¹ä¸å线ï¼âoverline âæ¯å®ä¹ä¸å线ï¼â line-throughâå®ä¹çæ¯å é¤çº¿ï¼âblinkâ
å®ä¹çæ¯æåéªçã
12ãå¦ä½ä½¿ç½é¡µå
·æâé¦è¡ç¼©è¿âåè½ï¼
ç±äºDW3è¾å
¥ç©ºæ ¼ä¸æ¹ä¾¿ï¼å©ç¨âé¦è¡ç¼©è¿âå°å¼¥è¡¥è¿ä¸ªä¸è¶³ãå¨DW3ä¸CSSçå±æ§å®ä¹å¯¹è¯æ¡ï¼style Definition
for .style1)çâBlockâä¸çâtext-indentâå±æ§å®ä¹çå°±æ¯âé¦è¡ç¼©è¿âï¼æè°âé¦è¡âæ¯ææ¯æ®µå
容ç第ä¸è¡ï¼ä¹
å°±æ¯ç´æ¥æå车é®å°±å½¢æäºä¸ä¸ªæ°ç段è½ã缩è¿æ好以âemâï¼å符ï¼ä¸ºåä½ï¼æ¯å¦ï¼æ±åç¼æè¦æ±æ¯æ®µå¼å§ç¼©è¿ä¸¤ä¸ªæ±
åï¼è®¾ç½®å¥½çCSSå¦ä¸æ示ï¼
<style type="text/css">
<!--
.style1 { text-indent: 2em}
-->
</style>
å¨DW3è¦æ³¨æï¼å¨DW3ä¸CSSçå±æ§å®ä¹å¯¹è¯æ¡ï¼style Definition for .style1)çâBlockâä¸çâtext-indentâå³
é¢ç缩è¿åä½éæ©æ¡ä¸âemsâæçå°±æ¯âemâã
13ãå¨ç¨è¡¨æ ¼è¿è¡æçæ¶ï¼è½ä½¿æä¸æ¹åä¸çå
容离å¼è¡¨æ ¼çº¿ä¸ç¹åï¼
å¯ä»¥ï¼å¨DW3ä¸CSSçå±æ§å®ä¹å¯¹è¯æ¡ï¼style Definition for .style1)çâBoxâä¸çâmarginâå®ä¹çå°±æ¯å
容离
å¼è¾¹ç¼çè·ç¦»ï¼åå«å¯å®ä¹å个æ¹åï¼âtopââbottomââleftâârightâãä¸é¢å°±æ¯å®ä¹å¨å·¦è¾¹ç¦»å¼â10pxâçCSSä¾
å代ç ï¼
<style type="text/css">
<!--
.style1 { margin: 0px 0px 0px 10px}
-->
</style>
14ãè½ç»æé¨åå
容å è¾¹æ¡åï¼
ç¨CSSå¯ä»¥ç»æé¨åå
容å è¾¹æ¡ï¼å¨DW3ä¸CSSçå±æ§å®ä¹å¯¹è¯æ¡ï¼style Definition for .style1)çâBorderâå®ä¹
çå°±æ¯è¾¹æ¡çº¿ï¼âtopââbottomââleftâârightâåè¾¹å¯åå«å®ä¹çº¿çç²ç»åé¢è²ï¼è¿äºå®ä¹å¥½åä¸è¦å¿è®°å¨ä¸é¢ç
âstyleâä¸å®ä¹çº¿åï¼å¦åå°çä¸è¾¹æ¡çº¿ï¼å 为é»è®¤ç线åæ¯ânoneâãä¸é¢æ¯ä¸ä¸ªå®ä¹äºä¸è¾¹æ¡ä¸ºï¼èè²ç»çº¿ï¼å·¦è¾¹æ¡
为ï¼ç»¿è²ä¸ç²çº¿çCSSä¾åï¼
<style type="text/css">
<!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
-->
温馨提示:答案为网友推荐,仅供参考