菜鳥教程-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結(jié)束的div元素煮岁； -
div[id^=xx]：id屬性以xx開始的div元素；
- ID 選擇器：
#idValue { ... } - class 選擇器：
.myclass涣易，對所有class為myclass的元素起作用画机；div.myclass，對class為myclass的div起作用新症； -
包含選擇器：
selector1 selector2 { ... }步氏，滿足selector1內(nèi)部的，再滿足selector2的元素：div .a徒爹，div內(nèi)部荚醒，class為a的元素芋类； -
子選擇器：
selector1 > selector2 { ... }，滿足selector1的元素的界阁，直接子元素中侯繁，再滿足selector2的元素：div > .a，div的子元素中泡躯，class為a的贮竟； - 選擇器組合：有些時候，我們需要讓一份 CSS 樣式對多個選擇器起作用较剃，那就可以利用選擇器組合來實現(xiàn)了咕别。語法如下：
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：設(shè)置目標組件中文本內(nèi)容的換行方式：-
normal：靠瀏覽器的默認規(guī)則進行換行弓颈。通常帽芽，瀏覽器的處理規(guī)則是删掀，對于英文單詞，瀏覽器只會在半角空格导街、連字符等地方進行換行披泪，不會在單詞中間換行；對于中文來說搬瑰，瀏覽器可以在任何一個中文字符后換行款票； -
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 也是可以制作動畫的，可以取代部分動態(tài)圖片和 JavaScript鹦赎。
菜鳥教程連接
CSS 媒體查詢 @media
1谍椅、什么是媒體查詢
媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例古话、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式雏吭，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有 width 陪踩、 height 和 color （等）杖们。使用媒體查詢悉抵，可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果胀莹。
2基跑、為什么響應(yīng)式設(shè)計需要媒體查詢
如果沒有CSS3的媒體查詢模塊，就不能針對設(shè)備特性（如視口寬度）設(shè)置特定的CSS樣式
媒體查詢例子：
如果瀏覽器窗口小于 500px, 背景將變?yōu)闇\藍色：
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}}
Try It描焰！Amazing媳否！
圖片的響應(yīng)式設(shè)計
img {
<!-- 圖片可能會超過其原始大小 -->
<!-- width: 100%; -->
<!-- 用 max-width 就行了 -->
max-width: 100%;
height: auto;
}
菜鳥教程-響應(yīng)式 Web 設(shè)計
viewport
什么是 Viewport?
viewport 是用戶網(wǎng)頁的可視區(qū)域。
viewport 翻譯為中文可以叫做"視區(qū)"荆秦。
手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中篱竭，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局）步绸，用戶可以通過平移和縮放來看網(wǎng)頁的不同部分掺逼。
一個常用的針對移動網(wǎng)頁優(yōu)化過的頁面的 viewport meta 標簽大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
響應(yīng)式 Web 設(shè)計框架
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 的調(diào)試工具，就可以看到 IE 當前的渲染模式是什么祠斧。
此 meta 標簽被包含在了所有 Bootstrap 文檔和實例頁面中闻察，為的就是在每個被支持的 IE 版本中擁有最好的繪制效果。
