CSS 3 流水賬

CSS3

菜鳥教程-CSS3教程

CSS 選擇器

  1. 元素選擇器
  • div { background-color: gray; font: italic normal bold 14pt normal 楷體_GB2312; }
  1. 屬性選擇器:
  • div[id]:所有含有id屬性的div元素;
  • div[id=xx]id屬性值為xxdiv元素;
  • div[id ~= xx]id屬性值為以空格隔開的系列值,其中某個(gè)值為xx
  • div[id |= xx]id屬性值為|隔開的系列值,其中某個(gè)值為xx;
  • div[id*=xx]id屬性包含xxdiv元素;
  • div[id^=xx]id屬性以xx開始的div元素;
  • div[id$=xx]id屬性以xx結(jié)束的div元素;
  • div[id^=xx]id屬性以xx開始的div元素;
  1. ID 選擇器:#idValue { ... }
  2. class 選擇器:.myclass,對(duì)所有 classmyclass 的元素起作用;div.myclass,對(duì) classmyclassdiv 起作用;
  3. 包含選擇器selector1 selector2 { ... },滿足 selector1內(nèi)部的,再滿足selector2的元素:div .a,div內(nèi)部,classa的元素;
  4. 子選擇器selector1 > selector2 { ... },滿足selector1的元素的,直接子元素中,再滿足selector2的元素:div > .a,div的子元素中,classa的;
  5. 選擇器組合:有些時(shí)候,我們需要讓一份 CSS 樣式對(duì)多個(gè)選擇器起作用,那就可以利用選擇器組合來(lái)實(shí)現(xiàn)了。語(yǔ)法如下:
    selector1, selector2, selector3, ... { ... }
    div, .a, #abc:對(duì)div元素、classa的元素、idabc的元素都起作用。

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 盒子模型

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 分頁(yè)實(shí)例

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 版本中擁有最好的繪制效果。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,815評(píng)論 1 92
  • <a name='html'>HTML</a> Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,570評(píng)論 1 19
  • 第一章 導(dǎo)論 1.經(jīng)濟(jì)學(xué)的核心問題是什么?(什么是經(jīng)濟(jì)學(xué)) 實(shí)現(xiàn)稀缺資源的最優(yōu)配置 經(jīng)濟(jì)學(xué)的成本:機(jī)會(huì)成本(為了得...
    鵬之翼閱讀 564評(píng)論 0 3
  • “你覺得最美好的愛情是怎樣的?” “初戀到老。” 很多年以前,你心里對(duì)愛情還存有最初的幻想。你不了解...
    黎小語(yǔ)閱讀 249評(píng)論 0 0
  • ?Allure報(bào)告中提供了關(guān)聯(lián)bug管理系統(tǒng)及用例管理系統(tǒng)的功能,原理類似,都是通過url鏈接的方式關(guān)聯(lián)。 用到的...
    許你一枝花閱讀 1,106評(píng)論 0 0