標籤：檔案 泛化 萬用字元 基礎上 cad 開始 baidu 文本 web app
目錄
web前端開發人員最最注的內容是三個：HTML、CSS與JavaScript，他們分別在不同方面發揮自己的作用，HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些用戶端的功能與業務。當然內容與使用者資源也是不能忽視的。盡量不要跨職責範圍使用，有點“SRP單一職責”的意思，如字型大小應該是CSS控制的，就不應該使用HTML標籤完成，如果CSS能解決的問題盡量不要用JavaScript完成。
一、CSS3概要CSS（Cascading Style Sheet）是層疊樣式表的意思，CSS3就是在CSS2.1的基礎上升級的CSS新版本，屬於HTML5的一部分。它可以有效地對頁面的布局、字型、顏色、背景、動畫和其它效果實現。CSS3是CSS技術的升級版本，CSS3語言開發是朝著模組化發展的。以前的規範作為一個模組實在是太龐大而且比較複雜，所以，把它分解為一些小的模組，更多新的模組也被加入進來。這些模組包括： 盒子模型、列表模組、超連結方式 、語言模組 、背景和邊框 、文字特效 、多欄布局等。
1.1、特點1.2、效果示範純CSS3畫出小黃人並實現動畫效果
HTML頁面：
View CodeCSS樣式：
View Code
相簿示範的代碼可以在樣本中下載到。
1.3、協助文檔與學習權威的協助文檔是最好的學習資料，CSS2的協助，非常詳細：
CSS3的協助文檔：
點擊下載協助文檔
二、選取器在使用CSS時我們首先要做的事情是找到元素，在寫相應的樣式，在CSS2.1中最常使用的是三種選取器：
a)、ID選取器：以#開始，引用時使用id，如id="div1"
#div1
{
color:red;
}
b)、類別選取器：以.開始，使用class屬性引用，可以有多個，如class="cls1 cls2 cls3"
.cls1
{
}
c)、標籤選取器：以標籤名稱開始，如p,span,div,*
div span
{
font-size:14px;
}
當然還有如偽類選擇，a:hover，a:link，a:visted，a:active。
在CSS3中新增了很多的選取器，如果大家會jQuery，jQuery中多數選取器在CSS3中都可以直接使用。
1.1、基礎的選取器紅色字型中選取器的區別是：p.info的意思是p元素中必須有class="info"屬性將被選擇，p .info是選擇後代元素，樣本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>選取器</title> <style type="text/css"> p.info{ color: red; } p .info{ color: blue; } </style> </head> <body> <h2>選取器</h2> <p class="info">p1</p> <p> <span class="info">span1</span> <p>p3</p> </p> </body></html>
運行結果：
1.2、組合選取器樣本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>組合選取器</title> <style type="text/css"> #div1 span { color: red; } </style> </head> <body> <h2>組合選取器</h2> <div id="div1"> <span>span1</span> <div id="div2"> <span>span2</span> </div> </div> <span>span3</span> </body></html>
運行結果：
樣本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>組合選取器</title> <style type="text/css"> #div1 > span { color: red; } </style> </head> <body> <h2>組合選取器</h2> <div id="div1"> <span>span1</span> <div id="div2"> <span>span2</span> </div> </div> <span>span3</span> </body></html>
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>組合選取器</title> <style type="text/css"> #div1 + span { color: red; } </style> </head> <body> <h2>組合選取器</h2> <div id="div1"> <span>span1</span> <div id="div2"> <span>span2</span> </div> </div> <span>span3</span> <span>span4</span> </body></html>
1.3、屬性選取器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>屬性選取器</title> <style type="text/css"> div[id][class~=cls1] { background: lightgreen; } </style> </head> <body> <h2>組合選取器</h2> <span>span0</span> <div id="div1" class="cls1"> div1 </div> <div id="div2" class="cls1 cls2"> div2 </div> </body></html>
運行結果：
1.4、偽類樣本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>偽類</title> <style type="text/css"> td:first-child { background: lightcoral; } </style> </head> <body> <h2>組合選取器</h2> <table border="1" width="100%"> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> </table> <hr /> <table border="1" width="100%"> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> </table> </body></html>
運行結果：
練習：實現隔行換色，當滑鼠移至上方在每一行上時高亮顯示為黃色，按下時高亮紅色。
<style type="text/css"> tr:nth-child(2n+1){ background:lightblue; } tr:hover{ background: yellow; } tr:active{ background: orangered; } </style>1.5、虛擬元素
標準的虛擬元素應該使用::，但單:也行，只是為了相容。
樣本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>偽類</title> <style type="text/css"> a::before { content: "網站"; display: inline-block; background: red; color: white; } </style> </head> <body> <h2>虛擬元素</h2> <a href="http://www.baidu.com">百度</a> <a href="http://best.cnblogs.com">部落格園</a> </body></html>
運行結果：
三、特殊性（優先順序）a)、同類型，同層級的樣式後者先於前者
b)、ID > 類樣式 > 標籤 > *
c)、內聯>ID選取器>偽類>屬性選取器>類別選取器>標籤選取器>通用選取器(*)>繼承的樣式
d)、具體 > 泛化的，特殊性即css優先順序
e)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
內嵌樣式：內嵌在元素中，<span style="color:red">span</span>
內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
外聯樣式表：單獨存在一個css檔案中，通過link引入或import匯入的樣式
f)、!important 權重最高，比 inline style 還要高
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>優先順序</title> <style type="text/css"> * { color: yellow; } p { color: red !important; } .cls1 { color: deeppink; } .cls2{ color: blueviolet; } #p1{ color:blue; } </style> </head> <body> <div> <p id="p1" class="cls2 cls1" style="color:#ccc">p1</p> <span>span1</span> </div> </body></html>
運行結果：
3.2、計算特殊性值important > 內嵌 > ID > 類 > 標籤 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 萬用字元
權重、特殊性計演算法：
CSS樣式選取器分為4個等級，a、b、c、d
1.如果樣式是行內樣式（通過Style=“”定義），那麼a=1，1,0,0,0
2.b為ID選取器的總數 0,1,0,0
3.c為屬性選取器，偽類別選取器和class類別選取器的數量。0,0,1,0
4.d為標籤、虛擬元素選取器的數量 0,0,0,1
5.!important 權重最高，比 inline style 還要高
比如結果為：1093比1100，位元壓縮，從左至右，只要一位高於則立即勝出，否則繼續比較。
樣本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>優先順序</title> <style type="text/css"> html body #div1 { background: red; } .cls1 #div1{ background: blue; } </style> </head> <body> <div class="cls1"> <div id="div1">div1 </div> <div id="div2">div2 </div> </div> </body></html>
運行結果：
因為html body #div1的特殊性值為：0102，而.cls1 #div1的特殊性值為0110，後者勝出。
四、刻度在CSS中刻度是用於設定元素尺寸的單位。
特殊值0可以省略單位。例如：margin:0px可以寫成margin:0
一些屬性可能允許有負長度值，或者有一定的範圍限制。如果不支援負長度值，那應該變換到能夠被支援的最近的一個長度值。
長度單位包括包括：相對單位和絕對單位。
相對長度單位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
絕對長度單位包括有： cm, mm, q, in, pt, pc, px
4.1、絕對長度單位
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
4.2、文本相對長度單位em
相對長度單位。相對於當前對象內文本的字型尺寸。如當前對行內文本的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。(相對父元素的字型大小倍數)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
瀏覽器的預設字型大小為16像素，瀏覽器預設樣式也稱為user agent stylesheet，就是所有瀏覽器內建的預設樣式，多數是可以被修改的，但chrome不能直接修改，可以被使用者樣式覆蓋。
範例程式碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>em與rem</title> <style type="text/css"> #div2{ background: blue; height: 5em; } </style> </head> <body> <div id="div1"> <div id="div2"> Hello em </div> </div> </body></html>
結果：
div2的高度為80px，是因為user agent stylesheet預設樣式中字型大小為16px，按照這個規則我們可以手動修改字型大小，div2的高度將發生變化。
樣本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>em與rem</title> <style type="text/css"> #div1 { font-size: 20px; } #div2 { color: white; background: blue; height: 5em; } </style> </head> <body> <div id="div1"> <div id="div2"> Hello em </div> </div> </body></html>
結果：
rem
rem是CSS3新增的一個相對單位（root em，根em），相對於根項目(即html元素)font-size計算值的倍數
只相對於根項目的大小
rem（font size of the root element）是指相對於根項目的字型大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字型大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根項目一個是依賴父元素計算。（相對是的HTML元素的字型大，預設16px）
樣本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>em與rem</title> <style type="text/css"> #div1 { font-size: 20px; } #div2 { color: white; background: blue; height: 5rem; } </style> </head> <body> <div id="div1"> <div id="div2"> Hello em </div> </div> </body></html>
運行結果：
樣本：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>em與rem</title> <style type="text/css"> html { font-size: 10px; } body { font-size: 16px; } #div1 { font-size: 20px; } #div2 { color: white; background: blue; height: 5rem; } </style> </head> <body> <div id="div1"> <div id="div2"> Hello em </div> </div> </body></html>
結果：
按理說高度為5*10px=50像素高度，但這裡為60，是因為chrome瀏覽器限制了最小字型大小為12px，從可以看出。
4.3、Web App與Rem為了實現簡單的響應式布局，可以利用html元素中字型的大小與螢幕間的比值設定font-size的值實現當螢幕解析度變化時讓元素也變化，以前的tmall就使用這種辦法，樣本如下：
樣本一：
View Code運行結果：
樣本二：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>web app 與rem</title> <style type="text/css"> html { font-size: 20px; } body { font-size: 16px; } #div2 { color: white; background: blue; height: 3rem; width: 3rem; font-size: .7rem; } </style> </head> <body> <div id="div2"> Hello rem </div> <script type="text/javascript"> function resize() { var w = document.documentElement.clientWidth; document.documentElement.style.fontSize = w * 20 / 290 + "px"; } window.onresize =resize; resize(); </script> </body></html>
運行結果：
變螢幕變寬時元素大小也隨之發生變化，但這裡並沒有考慮高度，但為響應式布局與hack提供了思路。
CSS3（一）概要、選取器、特殊性與刻度單位
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
