CSSÑ¡ÔñÆ÷±Ê¼Ç
CSSÑ¡ÔñÆ÷±Ê¼Ç
²Î¿¼ÍøÖ·£º456 Berea Street
Ò»¡¢»ù±¾Ñ¡ÔñÆ÷
ÐòºÅ
Ñ¡ÔñÆ÷
º¬Òå
1.
*
ͨÓÃÔªËØÑ¡ÔñÆ÷£¬Æ¥ÅäÈκÎÔªËØ
2.
E
±êǩѡÔñÆ÷£¬Æ¥ÅäËùÓÐʹÓÃE±êÇ©µÄÔªËØ
3.
.info
classÑ¡ÔñÆ÷£¬Æ¥ÅäËùÓÐclassÊôÐÔÖаüº¬infoµÄÔªËØ
4.
#footer
idÑ¡ÔñÆ÷£¬Æ¥ÅäËùÓÐidÊôÐÔµÈÓÚfooterµÄÔªËØ
ʵÀý£º
* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }
¶þ¡¢¶àÔªËØµÄ×éºÏÑ¡ÔñÆ÷
ÐòºÅ
Ñ¡ÔñÆ÷
º¬Òå
5.
E,F
¶àÔªËØÑ¡ÔñÆ÷£¬Í¬Ê±Æ¥ÅäËùÓÐEÔªËØ»òFÔªËØ£¬EºÍFÖ®¼äÓöººÅ·Ö¸ô
6.
E F
ºó´úÔªËØÑ¡ÔñÆ÷£¬Æ¥ÅäËùÓÐÊôÓÚEÔªËØºó´úµÄFÔªËØ£¬EºÍFÖ®¼äÓÿոñ·Ö¸ô
7.
E > F
×ÓÔªËØÑ¡ÔñÆ÷£¬Æ¥ÅäËùÓÐEÔªËØµÄ×ÓÔªËØF
8.
E + F
ÅþÁÚÔªËØÑ¡ÔñÆ÷£¬Æ¥ÅäËùÓнôËæEÔªËØÖ®ºóµÄͬ¼¶ÔªËØF
ʵÀý£º
div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }
div > strong { color:#f00; }
p + p { color:#f00; }
Èý¡¢CSS 2.1 ÊôÐÔÑ¡ÔñÆ÷
ÐòºÅ
Ñ¡ÔñÆ÷
º¬Òå
9.
E[att]
Æ¥ÅäËùÓоßÓÐattÊôÐÔµÄEÔªËØ£¬²»¿¼ÂÇËüµÄÖµ¡££¨×¢Ò⣺EÔÚ´Ë´¦¿ÉÒÔÊ¡ÂÔ£¬±ÈÈç“[cheacked]”¡£ÒÔÏÂͬ¡££©
10.
E[att=val]
Æ¥ÅäËùÓÐattÊôÐÔµÈÓÚ“val”µÄEÔªËØ
11.
E[att~=val]
Æ¥ÅäËùÓÐattÊôÐÔ¾ßÓжà¸ö¿Õ¸ñ·Ö¸ôµÄÖµ¡¢ÆäÖÐÒ»¸öÖµµÈÓÚ“val”µÄEÔªËØ
12.
E[att|=val]
Æ¥ÅäËùÓÐattÊôÐÔ¾ßÓжà¸öÁ¬×ֺŷָô£¨hyphen-separated£©µÄÖµ¡¢ÆäÖÐÒ»¸öÖµÒÔ“val”¿ªÍ·µÄEÔªËØ£¬Ö÷ÒªÓÃÓÚlangÊôÐÔ£¬±ÈÈç“en”¡¢“en-us”¡¢“en-gb”µÈµÈ
ʵÀý£º
p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }
ËÄ¡¢CSS 2.1ÖеÄαÀà
ÐòºÅ
Ñ¡ÔñÆ÷
º¬Òå
13.
E:first-child
Æ¥Åä¸¸ÔªËØµÄµÚÒ»¸ö×ÓÔªËØ
14.
E:link
Æ¥ÅäËùÓÐδ±»µã»÷µÄÁ´½Ó
15.
E:visited
Æ¥ÅäËùÓÐÒѱ»µã»÷µÄÁ´½Ó
16.
E:active
Æ¥ÅäÊó±êÒѾÆäÉϰ´Ï¡¢»¹Ã»ÓÐÊͷŵÄEÔªËØ
17.
E:hover
Æ¥ÅäÊó±êÐüÍ£ÆäÉϵÄEÔªËØ
18.
E:focus
Æ¥Åä»ñµÃµ±Ç°½¹µãµÄEÔªËØ
19.
E:lang(c)
Æ¥ÅälangÊôÐÔµÈÓÚcµÄEÔ
Ïà¹ØÎĵµ£º
1. ¼ì²éHTMLÔªËØÊÇ·ñÓÐÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áÊø±ê¼Ç
¼´Ê¹ÊÇÀÏÊÖÒ²¾³£»áŪ´ídivµÄǶÌ×¹ØÏµ¡£¿ÉÒÔÓÃdreamweaverµÄÑéÖ¤¹¦Äܼì²éÒ»ÏÂÓÐÎÞ´íÎó¡£
2. ¼ì²éCSSÊÇ·ñÕýÈ·
¼ì²éÒ»ÏÂÓÐÎÞÆ´Ð´´íÎó¡¢ÊÇ·ñÍü¼Ç½áβµÄ } µÈ¡£¿ÉÒÔÀûÓÃCleanCSSÀ´¼ì²é CSSµÄƴд´íÎó¡£CleanCSS±¾ÊÇΪCSS¼õ·ÊµÄ¹¤¾ß£¬µ«Ò²Äܼì²é³öƴд´íÎó¡£
3. È·¶¨´íÎó·¢ ......
Css´úÂë
1.line-height:24px;
line-height:24px;
ʹÓù̶¨¿í¶ÈµÄÈÝÆ÷²¢ÇÒÐèÒªÒ»Ðд¹Ö±¾ÓÖÐʱ£¬Ê¹Óà line-height ¼´¿É£¨¸ß¶ÈÓ븸²ãÈÝÆ÷Ò»Ö£©£¬¸ü¶àµÄ´¹Ö±¾ÓÖÐ×ܽá¿ÉÒÔ¿´ÕâÀï¡£
Çå³ýÈÝÆ÷¸¡¶¯
Css´úÂë
1.#main {
2. overflow:hidden;
3.}
#ma ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Cross-Browser Text Glow Demo</title>
<mce:style type="text/css"><!--
* {
font ......
1¡¢ÏÂÔØ yuicompressor °ü
Ê×Ïȵ½¹Ù·½ÍøÕ¾ http://yuilibrary.com/downloads/#yuicompressor ÉÏÏÂÔØ yuicompressor-2.4.2.zip ×ÊÔ´°ü¡£½âѹºó yuicompressor-2.4.2.jar ÔÚ yuicompressor-2.4.2\build Ŀ¼Ï¡£
2¡¢´´½¨build-yui.xml Îļþ
È»ºó´´½¨ant ÔËÐеÄÎļþ£¬ÄÚÈÝÈçÏ£º
<?xml version="1.0" encodin ......