css3 ??? ????? ??

css3? ??? ?? ??? ?? ??? ??:
?? ?? ?? ????? ????? ??? ????? ???? ??? ?? ?? ? ?? ?????.
??? ????? ?? ???? ??? ?????? ???? ? ??? ? ??? ?????(??? ?? ???? ???? ?? ? ??).
??? ???? ??? ??? ??? ??? ?? ?????? ?? ??? ???? ?? ???, ??? ?? ????? ? ???? ????? ????? ???.
??? ?? ??? ?? ??? ???? ? ??? ? ????. ???? ??? ??? ???????.
1. CSS2? ??? ??:
??? CSS2?? ??? ?? ?? ????? ??? ??? ?????. ?? ??? ?????.

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

? ??? ?? ??? ? ?? ??? ??? ?? ? ?? CSS ??? ?????. ??? ???.
2. ??? ?? ?? ??:
????? CSS ??? ??? ??? ??? ???? ??? ??? ????.
?? ?? ??:

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />

xml ?? ??:

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

@ ??? ???? ??:

@import url("css/reset.css") screen;

CSS ??? ??:

@media screen{
  選擇器{
    屬性：屬性值；
  }
}

??? ??? ??:

<style type="text/css" media="screen">
/*code*/
</style>

3. ??? ?? ??:
Css2? ??? ??? ?? ???? ??? ??? ??? ? ????.
CSS3? ??? ???? ??? ???? ??? ??? ???? ?? ??? ??? ??????.
?? ?? ??? ???:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="softwhy.css" />

??? ??? 600px ???? ??? ???? Softwhy.,css? ?????. ?? ??:
??? ??? ? ?? ?? ??(?: ?? ?? ??)? ???? ?? ??? ???? ?????.
??? ?? ??, @media ?? ? ?? ??? ??? ??? ??? ???? ??? ???? ??? ?????.
(1). ??? ??:

@media all and (min-width:800px) {
  /*code*/
}

?? ?? ?? ??? 800??? ?? ??? ?? CSS ??? ?????.
?? ?? ??: ??? ??? all? ?? all? ?? ????, ?? ??? ??? ????.

 @media (min-width:800px) {
  /*code*/
}

(2) ??? ?? ??:

@media (min-width:800px) and (max-width:1200px) {
  /*code*/
}

(3) . ? ? ??:
and? ??? ??? ????? ?? ???? ? ?????. ??? ??? ????.

@media screen (min-width:800px) and (max-width:1200px) {
/*code*/
}

??? 800px ?? 1200px ??? ??, ?? CSS ??? ?????.
(4).or ???:
or? ??? ??? ???? ? ??? ??? ?? ???? ? ?????.

@media screen (min-width:800px) or (orientation:portrait) {
/*code*/
}

?? ??? ?? 800px? ??? ??? ??? ?? ?? CSS ??? ?????.
(5).not ???:
not? ??? ??? ???? ?? ? ??? ? ??? ???? ? ?????.

@media not print{
/*code*/
}

??? ??? ?? ?? ?? CSS ??? ?????.

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .wrapper {overflow:auto;} #main {margin-left: 4px;} #leftsidebar {float: none;width: auto;} #menulist {margin:0;padding:0;} .menuitem { background:#CDF0F6; border:1px solid #d4d4d4; border-radius:4px; list-style-type:none; margin:4px; padding:2px; } @media screen and (min-width: 480px) { #leftsidebar {width:200px;float:left;} #main {margin-left:216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">Menu-item 1</li> <li class="menuitem">Menu-item 2</li> <li class="menuitem">Menu-item 3</li> <li class="menuitem">Menu-item 4</li> <li class="menuitem">Menu-item 5</li> </ul> </div> <div id="main"> <h1>重置瀏覽器窗口查看效果！</h1> <p>在屏幕可視窗口尺寸小于 480 像素時(shí)將菜單浮動(dòng)到頁面左側(cè)。</p> </div> </div> </body> </html>

?????? ???

????