CSS¼¼ÇÉÈÃÄãµÄÍøÕ¾¸üÉÏÒ»²ãÂ¥
01.DIVˮƽ¾ÓÖÐ
DIV ˮƽ¾ÓÖкܼòµ¥£¬Ö»ÐèÒªÉèÖÃDIVµÄ¿í´øÒÔ¼°ÈÃ×óÓÒmarginsÉèÖóÉauto£º
div#container {width: 960px; margin: 0 auto }
02.ÎÄ×Ö´¹Ö±¾ÓÖÐ
µ¥ÐÐÎÄ×Ö¾ÓÖУ¬Ö»ÐèÒª½«ÐиߺÍÈÝÆ÷¸ß¶ÈÉèÖóÉÒ»Ñù¼´¿É¡£±ÈÈçÏÂÃæµÄHTML´úÂ룺
<div id="container">ÎÒÊÇÒ»ÐÐ×Ö</div>
È»ºóͨ¹ýÏÂÃæµÄÑùʽ¾Í¿ÉÒÔ¾ÓÖУº
div#container {height: 35px; line-height: 35px;}
ÈçºÎÄãÓкܶàÐÐ×Ö£¬Ö»Òª½«ÐиßÉèÖóÉÈÝÆ÷µÄ¸ß¶ÈµÄ1/N¾ÍºÃ¡£
03.DIV´¹Ö±¾ÓÖÐ
±ÈÈçÓÐÒÔÏÂÁ½¸ödiv£¬ÈçºÎÈðüÔÚÖмäµÄdiv´¹Ö±¾ÓÖУ¬ÕâÀïÓÐһƪÏêϸµÄ½éÉÜÎÄÕ¡£
<div id="f">
¡¡<div id="s">Some Things!</div>
</div>
Ê×ÏÈ£¬½«Íâ²ãÈÝÆ÷µÄ¶¨Î»Îªrelative¡£
div#f{ position:relative; height:500px; }
È»ºó£¬½«ÀïÃæµÄÈÝÆ÷¶¨Î»ÉèÖóÉabsolute£¬ÔÙ½«ËüµÄ×óÉϽÇÑØyÖáÏÂÒÆ50%£¬×îºó½«Ëümargin-topÉÏÒÆ±¾Éí¸ß¶ÈµÄ50%¼´¿É¡£
div#s { position: absolute; top: 50%; height: 250px; margin-top: -125px; }
ʹÓÃͬÑùµÄ˼·£¬Ò²¿ÉÒÔ×ö³öˮƽ¾ÓÖеÄЧ¹û¡£
04.×ÔÊÊÓ¦¿í´øµÄͼƬ
¿ÉÒÔͨ¹ýÒÔÏÂÑùʽʵÏÖÖ»ÊÊÓÃÍâ²ãÈÝÆ÷´óСµÄͼƬ:
img {max-width: 100%}
/* IE 6 hack */
<!--[if IE 6]>
img {width: 100%}
<![endif]-->
05.3D°´Å¥
ÒªÏëÈð´Å¥¾ßÓÐ3DЧ¹û£¬¿ÉÒÔ½«ËüµÄ×óÉϲ¿±ß¿òÉèΪdzɫ£¬ÓÒϲ¿±ß¿òÉèΪÉîÉ«¼´¿É¡£
div#button {
background: #888;
border: 1px solid;
border-color: #999 #777 #777 #999;
}
06. CSS Font Ëõд
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
font-variant: small-caps;
font-style: italic;
line-height: 150%;
}
/* ¿ÉÒÔËõд³ÉÒÔÏÂÕâÖÖ·½Ê½ */
body {
font: font-style font-variant font-weight font-size/line-height font-family;
}
Ïêϸ½éÉܲμû£ºA Primer on the CSS Font Shorthand Property
06.¿ÉÒÔÔÚDIVÉÏÉèÖöà¸öclass
<div class="class-1 class-2 class-3">content</div>
class-2 {color: blue}
class-3 {color: green}
class-1 {color: red}
08.Ô²½Ç
CSS3ÖкÜÈÝÒ×ʵÏÖÔ²½Ç£º
.element {border-radius: 5px}
µ«ÊÇÔÚCSS3»¹Ã»È«ÃñÆÕ¼°Ö®Ç°ÎÒÔÚ Safari, Chrome, Ö®Àà webkit ºËÐĵÄä¯ÀÀÆ÷ÖÐʹÓà -webkit-border-radius ÒÔ¼°ÔÚ Firefox ÕâЩ»ùÓÚ Mozilla µÄä¯ÀÀÆ÷ʹÓà -moz-border-radius À´ÊµÏÖÔ²½Ç¡£
/* Safari, Chrome */
.element {
border-radius: 5px
-webkit-border-radius: 5px
-moz-border-radius: 5px
}
/* Firefox */
.element {
border-top-left-radius: 5px
-webkit-border-top-left-radius: 5px
-moz-border-radius-top-left
}
ÖÁÓÚÆäËûµÄä¯ÀÀÆ÷¿ÉÒÔÓÃJQuery ²å¼þÀ´ÊµÏÖÔ²½Ç¡£
$(".element").corner("5px");
09.link ״̬µÄÉèÖÃ˳Ðò
a:link
a:visited
a:hover
a:active
¼òµ¥¼ÇÒä·¨£ºlove hate (LVHA)
10.Clearing and Containing Floats
ʹÓà float ºÍ clear ÉèÖÃÈÝÆ÷µÄÅÅÐò£¬¾ßÌåµÄ»¹ÊÇ¿´ÕâÆªÎÄÕ°ɡ£
11.Ìõ¼þ×¢ÊÍ
Ìõ¼þ×¢ÊÍÖ»ÊÊÓÃÓÚIEÕâ¸ö±¾ßµÄä¯ÀÀÆ÷¡£
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
< ![endif]-->
<!--[if IE 6]> - targets IE6 only -->
<!--[if gt IE 6]> - targets IE7 and above -->
<!--[if lt IE 6]> - targets IE5.5 and below -->
<!--[if gte IE 6]> - targets IE6 and above -->
<!--[if lte IE 6]> - targets IE6 and below -->
12.HTML Hack for IE
IEÕâ¸ö±¾ßµÄä¯ÀÀÆ÷¿ÉÒÔͨ¹ýÒÔÏ·½Ê½½øÐÐ hack ¡£±»hackµÄcssÖ»»áÔËÐÐÔÚÌØ¶¨µÄä¯ÀÀÆ÷ÉÏ¡£
/* the following rules apply only to IE6 */
* html{
}
* html body{
}
* html .foo{
}
/* the following rules apply only to IE7 */
*+html .foo{
}
13.CSSµÄÓÅÏȼ¶
»ù±¾¹æÔòÊÇ£ºÐÐÄÚÑùʽ > idÑùʽ > classÑùʽ > ±êÇ©ÃûÑùʽ¡£
14.IEÖÐmin-heightÐÞÕý
ÓÉÓÚIE6²»Ö§³Ömin-height£¬ÎÒÃÇ¿ÉÒÔͨ¹ýÒÔÏÂÕâЩ·½Ê½ÐÞÕý£º
/* ·½·¨Ò» */
.element {
¡¡min-height: 500px;
¡¡height: auto !important;
¡¡height: 500px;
}
/* ·½·¨¶þ */
.element {
¡¡min-height: 500px
¡¡_height: 500px /* _ Ö»ÓÐIE6²ÅÄܶÁÈ¡ */
}
15.font-size »ù×¼
/* ¼ÙÉèä¯ÀÀÆ÷µÄĬÈϵĴóСÊÇ 16px £¬ Ê×ÏȽ«ÆäÉèÖÃΪ10px (font-size:10/16) */
body {font-size:10/16;}
/* È»ºó¾Í¿ÉÒÔÓÃem×öͳһ×ÖÌ嵥λÁË 2.4em = 24px */
h1 {font-size: 2.4 em}
16.100% Height
ͨ¹ýÄÚ²¿ÈÝÆ÷½«Ò³Ãæ³Å¿ª£¬ÔÚIEÖеÄmin-height¿ÉÒÔͨ¹ýÉÏÃæhack½â¾ö£º
html, body {height: 100%}
#content {min-height: 100%}
17. CSS Drop Caps
Ê××ÖĸÑùʽ¶¨Ò壺
p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}
18.È¡ÏûlinkÍâÃæµÄ¿ò¿ò
a {outline: none} or a {outline: 0}
19.Text-transform
p {text-transform: uppercase} /* È«²¿´óд */
p {text-transform: lowercase} /* È«²¿Ð¡Ð´ */
p {text-transform: capitalize} /* Ê××Öĸ´óд */
20.Font Variant
Ö»¶ÔÓ¢ÎÄÓÐЧ£¬½«×ÖÌåÕû³ÉµÈ¸ßµÄ´óд×ÖÌå¡£
p {font-variant: small-caps}
21.ÒÆ³ý´øÓÐÁ´½ÓµÄͼƬµÄÍâ¿ò
a image {border: none} or a image {border: 0}
22.ÖØÖÃä¯ÀÀÆ÷µÄCSS
²Î¿¼ YUI ºÍ Eric Meyer °É¡£
23.ÉèÖñ³¾°Í¼µÄ Padding
/* background-position {top-value left-value} */
{background-position: 5px 5px}
24.ÓÃͼƬÁбí±êÖ¾
ĬÈÏÇé¿öÏ£¬ä¯ÀÀÆ÷ÊÇÓÃÒ»¸öºÚԲȦ×÷ΪÁбí±êÖ¾£¬ÎÒÃÇÓÃͼƬȡ´úËü£º
ul {list-style: none}
ul li {
background-image: url("dot.png");
background-repeat: none;
background-position: 0 0.5em;
}
25.͸Ã÷ÈÝÆ÷
ÈçºÎ½«ÈÝÆ÷ÉèÖóÉ͸Ã÷£º
.element {
filter:alpha(opacity=50); /* for ie */
-moz-opacity:0.5; /* for ff */
-khtml-opacity: 0.5; /* for webkit as chrome */
opacity: 0.5; /* for opera */
}
26.Èý½ÇÐÎ
ÈçºÎʹÓÃCSSÉú³ÉÒ»¸öÈý½ÇÐΣ¿¼òµ¥·½°¸£º½«ËüËĸö±ß¿òÖеÄÈý¸ö±ß¿òÉèΪ͸Ã÷£¬Ö»Ê£ÏÂÒ»¸ö£¬¾Í¿ÉÒÔÉú³ÉÈý½ÇÐÎЧ¹û£º
.element {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
27. ½ûÖ¹×Ô¶¯»»ÐÐ
h1 { white-space:nowrap; }
28.ÓÃÍ¼Æ¬Ìæ»»ÎÄ×Ö
ΪÁ˱¾ßµÄSEO£¬ÎÒÐèÒªÔÚ±êÌâÀ¸ÀïÓÃͼƬչÏÖ£¬Í¬Ê±Ò²Òª±£Ö¤ËÑË÷ÒýÇæÄܶÁµ½±êÌâ¡£
h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}
29.Í»ÏÔ½¹µãÔªËØ
input:focus { border: 2px solid green; }
30.!important
¶àÌõCSSÓï¾ä³åͻʱ£¬¾ßÓÐ!importantµÄÓï¾ä½«¸²¸ÇÆäËûÓï¾ä¡£ÓÉÓÚIE²»Ö§³Ö!important£¬ËùÒÔÒ²¿ÉÒÔÀûÓÃËüÇø·Ö²»Í¬µÄä¯ÀÀÆ÷¡£
/* IE ÏÔʾÀ¶É«±êÌ⣬ÆäËûä¯ÀÀÆ÷ÏÔʾºìÉ«±êÌâ */
h1 {
color: red !important;
color: blue;
}
31.CSSʵÏÖÌáʾ¿ò
µ±Êó±êÒÆ¶¯µ½Á´½ÓÉÏ·½£¬»á×Ô¶¯³öÏÖÒ»¸öÌáʾ¿ò:
<a class="tooltip" href="#">Link<span>Tooltips</span></a>
a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline; position:absolute;}
32.¹Ì¶¨Ò³Í·
µ±Ò³Ãæ¹ö¶¯µÄʱºò£¬Ò³Ê׹̶¨ÔÚλÖò»±ä£¬Êʺϵ¼º½Ìõ:
body{ margin:0;padding:100px 0 0 0;}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:<length>;
}
@media screen{
¡¡body>div#header{position: fixed;}
}
* html body{overflow:hidden;}
* html div#content{height:100%;overflow:auto;}
ÍÆ¼öÐÅÏ¢
- CSS²¼¾ÖµÄ8¸öÄãÐèÒªÕÆÎյļ¼ÇÉ
- IE6¡¢IE7 ¡¢IE8¡¢FFµÄCSSHack
- ̽¾¿cssÖи÷ÖÖÇé¿öϵÄÔªËØµÄ´¹Ö±ºÍˮƽ¾ÓÖеÄÎÊÌâ
- YahooÍŶӾÑé£ºÍøÕ¾ÐÔÄÜÓÅ»¯µÄ34Ìõ»Æ½ð·¨Ôò(ת)
- HTMLÖÐÀûÓÃ404½«ÀÏÓòÃûÖØ¶¨Ïòµ½ÐÂÓòÃû
- ÈÃdiv¸¡ÓÚselectÖ®ÉÏ
- ¼¸Æª¹ØÓÚºÐ×ÓÄ£Ð͵ÄÎÄÕ£¬ÈÕºó·½±ã¼ìË÷£º
- Css ÑùʽʹÓþÑé×ܽá
- display:inline-blockµÄÉîÈëÀí½â
- ÈçºÎÔÚÍøÒ³ÖÐǶÈëÌØÊâ×ÖÌå
ÈÈÃÅÐÅÏ¢
- nohup: redirecting stderr to stdou....
- ʹÓÃlog_formatΪNginx·þÎñÆ÷ÉèÖøüÏêϸµÄÈÕÖ¾¸ñʽ
- jquery easyUI--dataGrid-Json
- [Ô´´]·ÂGoogle Reader¡¢ÐÂÀË΢²©¡¢ÌÚѶ΢²©µ....
- ÀûÓÃKeepalived+mysql¹¹½¨¸ß¿ÉÓÃMySQLË«Ö÷×Ô¶....
- Nginx+keepalivedʵÏÖ¸ºÔؾùºâºÍË«»úÈȱ¸¸ß¿ÉÓÃ
- jqueryʵÏÖÒ³Ãæ¼ÓÔØ½ø¶ÈÌõ
- Rolling cURL: PHP²¢·¢×î¼Ñʵ¼ù
- codeigniter ·ÓÉÖÕ¼«ÓÅ»¯(url rewrite)
- linuxÏÂÉèÖÃsshÎÞÃÜÂëµÇ¼
×î½ü¸üÐÂ
- ´ó±¥ÑÛ¸£ 7¿îÀàÐ͸÷ÒìµÄCSS3ʵÓò˵¥
- div+css¶àä¯ÀÀÆ÷²âÊÔ·½·¨
- cssËõд¸øÍøÕ¾¼ÓËÙ£¬ÆäʵºÜ¶àʱºò¶¼»áÓõ½
- ´¿CSS´òÔìBubbleÆøÅÝÌáʾ¿ò
- CSSʵÏÖͼƬ°´±ÈÀýËõ·Å
- CSS¼¼ÇÉÈÃÄãµÄÍøÕ¾¸üÉÏÒ»²ãÂ¥
- ¹Ì¶¨¸ß¶Èdiv,ËæÄÚÈÝ×Ô¶¯±ä¸ßcss¶¨Òå·½·¨
- web¼æÈݸ÷¸öä¯ÀÀÆ÷×îС¸ß¶ÈµÄд·¨
- CSS£¬Ç³ÎöpositionÖÐRelativeºÍAbsolute
- 12ÌõÔÔò£º±£³ÖHTML´úÂëÕû½à&¹æ·¶
ÆÀÂÛ