菜鳥教程-CSS3教程
CSS 選擇器
- 元素選擇器
div { background-color: gray; font: italic normal bold 14pt normal 楷體_GB2312; }
- 屬性選擇器：
-
div[id]：所有含有id屬性的div元素； -
div[id=xx]：id屬性值為xx的div元素； -
div[id ~= xx]：id屬性值為以空格隔開的系列值，其中某個值為xx； -
div[id |= xx]：id屬性值為以|隔開的系列值，其中某個值為xx； -
div[id*=xx]：id屬性包含xx的div元素； -
div[id^=xx]：id屬性以xx開始的div元素； -
div[id$=xx]：id屬性以xx結束的div元素； -
div[id^=xx]：id屬性以xx開始的div元素；
- ID 選擇器：
#idValue { ... } - class 選擇器：
.myclass，對所有class為myclass的元素起作用；div.myclass，對class為myclass的div起作用； -
包含選擇器：
selector1 selector2 { ... }，滿足selector1內部的，再滿足selector2的元素：div .a，div內部，class為a的元素； -
子選擇器：
selector1 > selector2 { ... }，滿足selector1的元素的，直接子元素中，再滿足selector2的元素：div > .a，div的子元素中，class為a的； - 選擇器組合：有些時候，我們需要讓一份 CSS 樣式對多個選擇器起作用，那就可以利用選擇器組合來實現了。語法如下：
selector1, selector2, selector3, ... { ... }
div, .a, #abc：對div元素、class為a的元素、id為abc的元素都起作用。
CSS 3.0 新增的偽類選擇器
first-child, last-child, nth-child, nth-last-childfirst-of-type, last-of-type, nth-of-type, nth-last-of-typelink, visited, active, hover, focus, enabled, disabled, checked, default, read-only, read-write, selection
其他
-
text-align：文本對其方式，left,right,center,justify, 左右中間兩邊； -
word-break：設置目標組件中文本內容的換行方式：-
normal：靠瀏覽器的默認規則進行換行。通常，瀏覽器的處理規則是，對于英文單詞，瀏覽器只會在半角空格、連字符等地方進行換行，不會在單詞中間換行；對于中文來說，瀏覽器可以在任何一個中文字符后換行； -
keep-all：只能在半角空格或連字符處換行； -
break-all：允許在任何單詞(中文&英文)中間換行；
-
組件的居中對齊方式呢？
style="margin: auto; width=800px or 70%"
CSS 3 盒子模型
style.display: none：隱藏元素且不占空間；
style.visibility: visible/hidden：顯示/隱藏元素，但始終占空間；
CSS 3 分頁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
<!-- 過渡動畫 -->
transition: background-color .3s;
border: 1px solid #ddd;
<!-- 加上圓角 -->
<!-- border-radius: 5px; -->
}
.pagination li:first-child a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>CSS3 分頁實例</h2>
<ul class="pagination">
<li><a href="#">?</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">?</a></li>
</ul>
</body>
</html>
CSS3 動畫
CSS3 也是可以制作動畫的，可以取代部分動態圖片和 JavaScript。
菜鳥教程連接
CSS 媒體查詢 @media
1、什么是媒體查詢
媒體查詢可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定制顯示效果。
2、為什么響應式設計需要媒體查詢
如果沒有CSS3的媒體查詢模塊，就不能針對設備特性（如視口寬度）設置特定的CSS樣式
媒體查詢例子：
如果瀏覽器窗口小于 500px, 背景將變為淺藍色：
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}}
Try It！Amazing！
圖片的響應式設計
img {
<!-- 圖片可能會超過其原始大小 -->
<!-- width: 100%; -->
<!-- 用 max-width 就行了 -->
max-width: 100%;
height: auto;
}
菜鳥教程-響應式 Web 設計
viewport
什么是 Viewport?
viewport 是用戶網頁的可視區域。
viewport 翻譯為中文可以叫做"視區"。
手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），用戶可以通過平移和縮放來看網頁的不同部分。
一個常用的針對移動網頁優化過的頁面的 viewport meta 標簽大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
響應式 Web 設計框架
Bootstrap
其他
<meta http-equiv="X-UA-Compatible" content="IE=edge">：
這是一個文檔兼容模式的定義。Edge 模式告訴 IE 以最高級模式渲染文檔，也就是任何 IE 版本都以當前版本所支持的最高級標準模式渲染，避免版本升級造成的影響。
來自 Bootstrap 的說明：
Bootstrap 不支持 IE 古老的兼容模式。為了讓 IE 瀏覽器運行最新的渲染模式下，建議將此 <meta> 標簽加入到你的頁面中：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
按 F12 鍵打開 IE 的調試工具，就可以看到 IE 當前的渲染模式是什么。
此 meta 標簽被包含在了所有 Bootstrap 文檔和實例頁面中，為的就是在每個被支持的 IE 版本中擁有最好的繪制效果。
