菜鳥教程-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
屬性值為以空格隔開的系列值,其中某個(gè)值為xx
; -
div[id |= xx]
:id
屬性值為以|
隔開的系列值,其中某個(gè)值為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
,對(duì)所有class
為myclass
的元素起作用;div.myclass
,對(duì)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
的; - 選擇器組合:有些時(shí)候,我們需要讓一份 CSS 樣式對(duì)多個(gè)選擇器起作用,那就可以利用選擇器組合來(lái)實(shí)現(xiàn)了。語(yǔ)法如下:
selector1, selector2, selector3, ... { ... }
div, .a, #abc
:對(duì)div
元素、class
為a
的元素、id
為abc
的元素都起作用。
CSS 3.0 新增的偽類選擇器
first-child, last-child, nth-child, nth-last-child
first-of-type, last-of-type, nth-of-type, nth-last-of-type
link, visited, active, hover, focus, enabled, disabled, checked, default, read-only, read-write, selection
其他
-
text-align
:文本對(duì)其方式,left
,right
,center
,justify
, 左右中間兩邊; -
word-break
:設(shè)置目標(biāo)組件中文本內(nèi)容的換行方式:-
normal
:靠瀏覽器的默認(rèn)規(guī)則進(jìn)行換行。通常,瀏覽器的處理規(guī)則是,對(duì)于英文單詞,瀏覽器只會(huì)在半角空格、連字符等地方進(jìn)行換行,不會(huì)在單詞中間換行;對(duì)于中文來(lái)說(shuō),瀏覽器可以在任何一個(gè)中文字符后換行; -
keep-all
:只能在半角空格或連字符處換行; -
break-all
:允許在任何單詞(中文&英文)中間換行;
-
組件的居中對(duì)齊方式呢?
style="margin: auto; width=800px or 70%"
CSS 3 盒子模型
style.display: none
:隱藏元素且不占空間;
style.visibility: visible/hidden
:顯示/隱藏元素,但始終占空間;
CSS 3 分頁(yè)
<!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;
<!-- 過渡動(dòng)畫 -->
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 分頁(yè)實(shí)例</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 動(dòng)畫
CSS3 也是可以制作動(dòng)畫的,可以取代部分動(dòng)態(tài)圖片和 JavaScript。
菜鳥教程連接
CSS 媒體查詢 @media
1、什么是媒體查詢
媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性(如視口寬度、屏幕比例、設(shè)備方向:橫向或縱向)為其設(shè)定CSS樣式,媒體查詢由媒體類型和一個(gè)或多個(gè)檢測(cè)媒體特性的條件表達(dá)式組成。媒體查詢中可用于檢測(cè)的媒體特性有 width 、 height 和 color (等)。使用媒體查詢,可以在不改變頁(yè)面內(nèi)容的情況下,為特定的一些輸出設(shè)備定制顯示效果。
2、為什么響應(yīng)式設(shè)計(jì)需要媒體查詢
如果沒有CSS3的媒體查詢模塊,就不能針對(duì)設(shè)備特性(如視口寬度)設(shè)置特定的CSS樣式
媒體查詢例子:
如果瀏覽器窗口小于 500px, 背景將變?yōu)闇\藍(lán)色:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}}
Try It!Amazing!
圖片的響應(yīng)式設(shè)計(jì)
img {
<!-- 圖片可能會(huì)超過其原始大小 -->
<!-- width: 100%; -->
<!-- 用 max-width 就行了 -->
max-width: 100%;
height: auto;
}
菜鳥教程-響應(yīng)式 Web 設(shè)計(jì)
viewport
什么是 Viewport?
viewport 是用戶網(wǎng)頁(yè)的可視區(qū)域。
viewport 翻譯為中文可以叫做"視區(qū)"。
手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的"窗口"(viewport)中,通常這個(gè)虛擬的"窗口"(viewport)比屏幕寬,這樣就不用把每個(gè)網(wǎng)頁(yè)擠到很小的窗口中(這樣會(huì)破壞沒有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局),用戶可以通過平移和縮放來(lái)看網(wǎng)頁(yè)的不同部分。
一個(gè)常用的針對(duì)移動(dòng)網(wǎng)頁(yè)優(yōu)化過的頁(yè)面的 viewport meta 標(biāo)簽大致如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
響應(yīng)式 Web 設(shè)計(jì)框架
Bootstrap
其他
<meta http-equiv="X-UA-Compatible" content="IE=edge">
:
這是一個(gè)文檔兼容模式的定義。Edge 模式告訴 IE 以最高級(jí)模式渲染文檔,也就是任何 IE 版本都以當(dāng)前版本所支持的最高級(jí)標(biāo)準(zhǔn)模式渲染,避免版本升級(jí)造成的影響。
來(lái)自 Bootstrap 的說(shuō)明:
Bootstrap 不支持 IE 古老的兼容模式。為了讓 IE 瀏覽器運(yùn)行最新的渲染模式下,建議將此 <meta> 標(biāo)簽加入到你的頁(yè)面中:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
按 F12 鍵打開 IE 的調(diào)試工具,就可以看到 IE 當(dāng)前的渲染模式是什么。
此 meta 標(biāo)簽被包含在了所有 Bootstrap 文檔和實(shí)例頁(yè)面中,為的就是在每個(gè)被支持的 IE 版本中擁有最好的繪制效果。