web前端開發者最最注的內容是三個:HTML、CSS與JavaScript,他們分別在不一樣方面發揮本身的做用,HTML實現頁面結構,CSS完成頁面的表現與風格,JavaScript實現一些客戶端的功能與業務。固然內容與用戶資源也是不能忽視的。儘可能不要跨職責範圍使用,有點「SRP單一職責」的意思,如字體大小應該是CSS控制的,就不該該使用HTML標籤完成,若是CSS能解決的問題儘可能不要用JavaScript完成。javascript
CSS(Cascading Style Sheet)是層疊樣式表的意思,CSS3就是在CSS2.1的基礎上升級的CSS新版本,屬於HTML5的一部分。它能夠有效地對頁面的佈局、字體、顏色、背景、動畫和其它效果實現。CSS3是CSS技術的升級版本,CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜,因此,把它分解爲一些小的模塊,更多新的模塊也被加入進來。這些模塊包括: 盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。css
純CSS3畫出小黃人並實現動畫效果html
HTML頁面:前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>drawLittleHuang</title> <link rel="stylesheet" type="text/css" href="drawLittleHuang.css"> </head> <body> <div class="wrapper"><!-- 容器 --> <div class="littleH"><!-- 小黃人 --> <div class="bodyH"><!-- 身體 --> <div class="trousers"><!-- 褲子 --> <div class="condoleBelt"><!-- 吊帶 --> <div class="left"></div> <div class="right"></div> </div> <div class="trousers_top"></div><!-- 褲子突出的矩形部分 --> <div class="pocket"></div><!-- 褲袋 --> <!-- 三條線 --> <span class="line_left"></span> <span class="line_right"></span> <span class="line_bottom"></span> </div> </div> <div class="hair"><!-- 頭髮 --> <span class="left_hair_one"></span> <span class="left_hair_two"></span> </div> <div class="eyes"><!-- 眼睛 --> <div class="leftEye"><!-- 左眼 --> <div class="left_blackEye"> <div class="left_white"></div> </div> </div> <div class="rightEye"><!-- 右眼 --> <div class="right_blackEye"> <div class="right_white"></div> </div> </div> </div> <div class="mouse"><!-- 嘴巴 --> <div class="mouse_shape"></div> </div> <div class="hands"><!-- 雙手 --> <div class="leftHand"></div> <div class="rightHand"></div> </div> <div class="feet"><!-- 雙腳 --> <div class="left_foot"></div> <div class="right_foot"></div> </div> <div class="groundShadow"></div><!-- 腳底陰影 --> </div> </div> </body> </html>
CSS樣式:java
@charset "utf-8"; body{ margin: 0; padding:0; } .wrapper{ width: 300px; margin:100px auto; } .litteH{ position: relative; } .bodyH{ position: absolute; width: 240px; height: 400px; border:5px solid #000; border-radius: 115px; background: rgb(249,217,70); overflow: hidden; z-index: 2; } .bodyH .condoleBelt{ position: absolute; } .bodyH .condoleBelt .left, .bodyH .condoleBelt .right{ width: 100px; height: 16px; border:5px solid #000; background: rgb(32,116,160); position: absolute; top:-90px; left:-35px; z-index: 2; -webkit-transform:rotate(45deg); } .bodyH .condoleBelt .left{ top:-88px; left:165px; -webkit-transform:rotate(-45deg); } .bodyH .condoleBelt .left:after, .bodyH .condoleBelt .right:after{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: #000; position: absolute; top:4px; left:88px; } .bodyH .condoleBelt .left:after{ left:5px; } .bodyH .trousers{ position: absolute; bottom: 0; width: 100%; height: 100px; border-top: 6px solid #000; background: rgb(32,116,160); } .trousers_top{ width: 160px; height: 60px; border:6px solid #000; border-bottom: none; border-radius: 0 0 5px 5px; background: rgb(32,116,160); position: absolute; bottom: 100px; left:34px; } .pocket{ width: 60px; height: 45px; border:6px solid #000; border-radius: 0px 0px 25px 25px; position: absolute; bottom:65px; left:84px; } .line_right{ width: 30px; height: 30px; border-bottom-left-radius: 100px; border-bottom:6px solid #000; border-left:6px solid #000; position: absolute; left: 0; bottom:60px; -webkit-transform:rotate(-75deg); } .line_left{ width: 30px; height: 30px; border-bottom-right-radius: 100px; border-bottom:6px solid #000; border-right:6px solid #000; position: absolute; right: 0; bottom:63px; -webkit-transform:rotate(75deg); } .line_bottom{ height: 40px; border:3px solid #000; border-radius: 3px; position: absolute; left:118px; bottom: 0px; } .hair{ position: relative; } .left_hair_one{ width: 130px; height: 100px; border-radius: 50%; border-top:8px solid #000; position: absolute; left:17px; top:-17px; -webkit-transform:rotate(27deg); -webkit-animation: lefthair 2s ease-in-out infinite; } @-webkit-keyframes lefthair{ 0%,25%,31%,100%{ } 30%{ -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0); } } .left_hair_two{ width: 80px; height: 80px; border-radius: 50%; border-top:6px solid #000; position: absolute; left:45px; top:-10px; -webkit-transform:rotate(15deg); } .eyes{ position: relative; z-index: 3; } .eyes .leftEye,.eyes .rightEye{ width: 85px; height: 85px; border-radius: 50%; border:6px solid #000; background: #fff; position: absolute; top:60px; left: 27px; } .eyes .leftEye{ left: 124px; } .eyes .leftEye .left_blackEye, .eyes .rightEye .right_blackEye{ width: 40px; height: 40px; border-radius: 50%; background: #000; position: absolute; top:24px; left:22px; -webkit-animation: blackeye 5s ease-in infinite; } @-webkit-keyframes blackeye{ 0%,20%,50%,70%,100%{ -webkit-transform: translateX(0px); } 30%,40%{ -webkit-transform: translateX(15px); } 80%,90%{ -webkit-transform: translateX(-15px); } } .eyes .leftEye .left_blackEye .left_white, .eyes .rightEye .right_blackEye .right_white{ width: 20px; height: 20px; border-radius: 50%; background: #fff; position: absolute; top:7px; left:17px; -webkit-animation: whiteeye 5s ease-in-out infinite; } @-webkit-keyframes whiteeye{ 0%,20%,50%,70%,100%{ -webkit-transform: translateX(0px); } 30%,40%{ -webkit-transform: translate3d(3px,4px,0); } 80%,90%{ -webkit-transform: translate3d(-15px,4px,0); } } .eyes .leftEye .left_blackEye .left_white{ top:4px; left:17px; } .eyes .leftEye:after, .eyes .rightEye:after{ content: ''; width: 28px; height: 18px; background: #000; position: absolute; left:-30px; top:37px; -webkit-transform:skewX(20deg) rotate(7deg); } .eyes .leftEye:after{ left:89px; top:37px; -webkit-transform:skewX(-20deg) rotate(-7deg); } .mouse{ position: relative; } .mouse .mouse_shape{ width: 55px; height: 35px; border:5px solid #000; border-bottom-left-radius: 30px; background: #fff; position: absolute; top:175px; left:98px; z-index: 3; -webkit-transform:rotate(-35deg); -webkit-animation: mouse 5s ease-in-out infinite; } @-webkit-keyframes mouse{ 40%,43%{ width: 45px; height: 25px; top:180px; } 0%,35%,48%,100%{ width: 55px; height: 35px; top:175px; -webkit-transform:rotate(-35deg); } } .mouse .mouse_shape:after{ content: ''; width: 70px; height: 32px; border-bottom:5px solid #000; border-radius:35px 26px 5px 5px; background: rgb(249,217,70); position: absolute; top:-16px; left:3px; -webkit-transform:rotate(34deg); -webkit-animation: mouse_mask 5s ease-in-out infinite; } @-webkit-keyframes mouse_mask{ 40%,43%{ width: 60.5px; top:-19.3px; left:1.5px; } 0%,35%,48%,100%{ width: 70px; top:-16px; left:3px; -webkit-transform:rotate(33deg); } } .hands{ position: relative; } .hands .leftHand, .hands .rightHand{ width: 80px; height: 80px; border:6px solid #000; border-radius: 25px; background: rgb(249,217,70); position: absolute; top:220px; left:-23px; -webkit-transform:rotate(40deg); -webkit-animation:rightHand .8s ease-in-out infinite; } @-webkit-keyframes rightHand{ 0%,50%,100%{ -webkit-transform: rotate(40deg); } 30%{ -webkit-transform: rotate(37deg) translateX(1px); } } .hands .leftHand{ left:182px; top:220px; -webkit-transform:rotate(-40deg); -webkit-animation:leftHand .8s ease-in-out infinite; } @-webkit-keyframes leftHand{ 0%,50%,100%{ -webkit-transform: rotate(-40deg); } 80%{ -webkit-transform: rotate(-37deg) translateX(-1px); } } .hands .leftHand:after, .hands .rightHand:after{ content: ''; width: 6px; border:3px solid #000; border-radius: 3px; position: absolute; left:13px; top:50px; -webkit-transform:rotate(90deg); } .hands .leftHand:after{ left:53px; top:50px; -webkit-transform:rotate(-90deg); } .feet{ position: relative; } .feet .left_foot, .feet .right_foot{ width: 36px; height: 50px; border-bottom-right-radius: 6px; border-bottom-left-radius: 9px; background: #000; position: absolute; top: 406px; left:88px; -webkit-transform-origin: right top; -webkit-animation: rightfoot .8s ease-in-out infinite; } @-webkit-keyframes rightfoot{ 0%,50%,100%{ -webkit-transform: rotate(0deg); } 80%{ -webkit-transform: rotate(10deg); } } .feet .left_foot{ border-bottom-right-radius: 9px; border-bottom-left-radius: 6px; left:130px; -webkit-transform-origin: left top; -webkit-animation: leftfoot .8s ease-in-out infinite; } @-webkit-keyframes leftfoot{ 0%,50%,100%{ -webkit-transform: rotate(0deg); } 30%{ -webkit-transform: rotate(-10deg); } } .feet .left_foot:after, .feet .right_foot:after{ content: ''; width: 60px; height: 35px; border-radius: 20px 10px 21px 15px; background: #000; position: absolute; left:-36px; top:14.4px; -webkit-transform:rotate(5deg); } .feet .left_foot:after{ border-radius: 10px 20px 15px 21px; left:13px; -webkit-transform:rotate(-5deg); } .groundShadow{ width: 200px; height: 2px; border-radius: 50%; background: rgba(0,0,0,0.3); box-shadow: 0 0 2px 4px rgba(0,0,0,0.3); position: relative; top: 455px; left:25px; }
相冊演示的代碼能夠在示例中下載到。git
權威的幫助文檔是最好的學習資料,CSS2的幫助,很是詳細:github
CSS3的幫助文檔:web
若是打開時右邊全是空白,請右鍵->"屬性"—>「解除鎖定」算法
點擊下載幫助文檔,上課示例的「文檔」文件夾中也包含了兩個關鍵的CSS文檔chrome
在使用CSS時咱們首先要作的事情是找到元素,在寫相應的樣式,在CSS2.1中最常使用的是三種選擇器:
a)、ID選擇器:以#開始,引用時使用id,如id="div1"
#div1 { color:red; }
b)、類選擇器:以.開始,使用class屬性引用,能夠有多個,如class="cls1 cls2 cls3"
.cls1 { background-color:#99ccff; }
優先級不以cls1 cls2 cls3在class中出現的順序判斷,而是以定義時的前後,就近原則。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <style type="text/css"> .red { color: red; } .green { color: green; } .blue { color: blue; } </style> <h2 class="red blue green">Hello CSS3!</h2> </body> </html>
結果:
c)、標籤選擇器:以標籤名稱開始,如p,span,div,*
div span { font-size:14px; }
固然還有如僞類選擇,a:hover,a:link,a:visted,a:active。
在CSS3中新增了不少的選擇器,若是你們會jQuery,jQuery中多數選擇器在CSS3中均可以直接使用。
選擇器 | 例子 | 例子描述 | CSS |
---|---|---|---|
.class | .intro | 選擇 class="intro" 的全部元素。 | 1 |
#id | #firstname | 選擇 id="firstname" 的全部元素。 | 1 |
* | * | 選擇全部元素。 | 2 |
element | p | 選擇全部 <p> 元素。 | 1 |
element,element | div,p | 選擇全部 <div> 元素和全部 <p> 元素。 | 1 |
element element | div p | 選擇 <div> 元素內部的全部 <p> 元素。 | 1 |
element>element | div>p | 選擇父元素爲 <div> 元素的全部 <p> 元素。 | 2 |
element+element | div+p | 選擇緊接在 <div> 元素以後的全部 <p> 元素。 | 2 |
[attribute] | [target] | 選擇帶有 target 屬性全部元素。 | 2 |
[attribute=value] | [target=_blank] | 選擇 target="_blank" 的全部元素。 | 2 |
[attribute~=value] | [title~=flower] | 選擇 title 屬性包含單詞 "flower" 的全部元素。 | 2 |
[attribute|=value] | [lang|=en] | 選擇 lang 屬性值以 "en" 開頭的全部元素。 | 2 |
:link | a:link | 選擇全部未被訪問的連接。 | 1 |
:visited | a:visited | 選擇全部已被訪問的連接。 | 1 |
:active | a:active | 選擇活動連接。 | 1 |
:hover | a:hover | 選擇鼠標指針位於其上的連接。 | 1 |
:focus | input:focus | 選擇得到焦點的 input 元素。 | 2 |
:first-letter | p:first-letter | 選擇每一個 <p> 元素的首字母。 | 1 |
:first-line | p:first-line | 選擇每一個 <p> 元素的首行。 | 1 |
:first-child | p:first-child | 選擇屬於父元素的第一個子元素的每一個 <p> 元素。 | 2 |
:before | p:before | 在每一個 <p> 元素的內容以前插入內容。 | 2 |
:after | p:after | 在每一個 <p> 元素的內容以後插入內容。 | 2 |
:lang(language) | p:lang(it) | 選擇帶有以 "it" 開頭的 lang 屬性值的每一個 <p> 元素。 | 2 |
element1~element2 | p~ul | 選擇前面有 <p> 元素的每一個 <ul> 元素。 | 3 |
[attribute^=value] | a[src^="https"] | 選擇其 src 屬性值以 "https" 開頭的每一個 <a> 元素。 | 3 |
[attribute$=value] | a[src$=".pdf"] | 選擇其 src 屬性以 ".pdf" 結尾的全部 <a> 元素。 | 3 |
[attribute*=value] | a[src*="abc"] | 選擇其 src 屬性中包含 "abc" 子串的每一個 <a> 元素。 | 3 |
:first-of-type | p:first-of-type | 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。 | 3 |
:last-of-type | p:last-of-type | 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。 | 3 |
:only-of-type | p:only-of-type | 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。 | 3 |
:only-child | p:only-child | 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,從最後一個子元素開始計數。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 選擇屬於其父元素第二個 <p> 元素的每一個 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,可是從最後一個子元素開始計數。 | 3 |
:last-child | p:last-child | 選擇屬於其父元素最後一個子元素每一個 <p> 元素。 | 3 |
:root | :root | 選擇文檔的根元素。 | 3 |
:empty | p:empty | 選擇沒有子元素的每一個 <p> 元素(包括文本節點)。 | 3 |
:target | #news:target | 選擇當前活動的 #news 元素。 | 3 |
:enabled | input:enabled | 選擇每一個啓用的 <input> 元素。 | 3 |
:disabled | input:disabled | 選擇每一個禁用的 <input> 元素 | 3 |
:checked | input:checked | 選擇每一個被選中的 <input> 元素。 | 3 |
:not(selector) | :not(p) | 選擇非 <p> 元素的每一個元素。 | 3 |
::selection | ::selection | 選擇被用戶選取的元素部分。 | 3 |
紅色字體中選擇器的區別是: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>
運行結果:
示例:
<!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>
<!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>
運行結果:
示例:
<!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>
標準的僞元素應該使用::,但單:也行,只是爲了兼容。
示例:
<!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>
運行結果:
content的特殊值
none:不生成任何內容
attr:插入標籤屬性值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>僞元素</title> <style type="text/css"> a:before { content: attr(title); } a:after { content: attr(href); } </style> </head> <body> <h2>我喜歡的網站</h2> <a href="http://www.cnblogs.com" title="技術">博客園</a> <a href="http://www.baidu.com" title="國內">百度</a> <a href="http://www.google.com" title="國外">谷歌</a> </body> </html>
結果:
url:使用指定的絕對或相對地址插入一個外部資源(圖像,聲頻,視頻或瀏覽器支持的其餘任何資源)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>僞元素</title> <style type="text/css"> a:before { content: url(../img/success.png); } a:after { content: url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png); } </style> </head> <body> <h2>我喜歡的網站</h2> <a href="http://www.cnblogs.com" title="技術">博客園</a> <a href="http://www.baidu.com" title="國內">百度</a> <a href="http://www.google.com" title="國外">谷歌</a> </body> </html>
string:插入字符串
插入的僞元素能夠做爲一個元素使用,元素是被插入在指定元素內部,是父子關係:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>僞元素</title> <style type="text/css"> #div1{ background: red; } #div1:before { content: " "; display: block; background: lightgreen; border-radius: 50px; width: 100px; height: 100px; } </style> </head> <body> <h2>我喜歡的網站</h2> <div id="div1"> Div1 </div> </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>
運行結果:
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
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
calc() = calc(四則運算)
width: calc(100% - 10px)
;示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #container{ background: yellow; width: calc(100% - 40px); margin: 0 auto; height: 400px; } </style> </head> <body> <div id="container"> </div> </body> </html>
結果:
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,從上圖能夠看出。
爲了實現簡單的響應式佈局,能夠利用html元素中字體的大小與屏幕間的比值設置font-size的值實現當屏幕分辨率變化時讓元素也變化,之前的tmall就使用這種辦法,示例以下:
示例一:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>rem phone test</title> <!-- 描述:視口 --> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> html { height: 100%; width: 100%; font-family: 'Heiti SC', 'Microsoft YaHei'; font-size: 20px; overflow: hidden; outline: 0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; } body { height: 100%; margin: 0; overflow: hidden; -webkit-user-select: none; /*取消用戶選擇*/ width: 100%; } header, footer { width: 100%; line-height: 1.5rem; font-size: 1rem; color: #000; border: 1px solid #ccc; text-align: center; background-color: #ccc; } .bd { margin-top: 1rem; margin-bottom: .5rem; margin-right: -.5rem; font-size: 0; } .bd:after { clear: both; } .box { width: 5rem; height: 5rem; display: inline-block; margin-right: .5rem; margin-bottom: .5rem; } .blue-box { background-color: #06c; } .org-box { background-color: #1fc195; } </style> </head> <body> <header>我是頭部</header> <div class="bd"> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> <div class="box blue-box"></div> <div class="box org-box"></div> </div> <footer>我是頁腳</footer> <script> /* ;(function(win){ win.alert("Hello IIEF"); })(window); */ //定義一個方法並執行 (function(doc, win) { //得到文檔的根節點html var docEl = doc.documentElement; //若是window中存在orientationchange對象,則取orientationchange,不然取resize //爲了事件綁定 resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize'; //定義一個方法,從新計算font-size大小 var recalc = function() { //頁面的寬度 var clientWidth = docEl.clientWidth; //若是沒有寬度則退出 if (!clientWidth) return; //從新計算font-size大小,假定320的寬度時字體大小爲20;,當頁面變化時從新設置字體大小 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; //若是瀏覽器不支持添加事件監聽則結束 if (!doc.addEventListener) return; //添加事件監聽,指定事件處理函數的時期或階段(boolean)true表示在捕獲事件執行,false表示冒泡時執行 win.addEventListener(resizeEvt, recalc, false); //當Dom樹加載完成時執行計算,DOMContentLoaded事件要在window.onload以前執行 doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> </body> </html>
運行結果:
示例二:
<!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提供了思路。
https://www.bilibili.com/video/av16530230/
1.一、請完成全部上課示例
1.二、請完成下面的手機頁面,當瀏覽器大小變化時圖片與字體的大小發生變化,圖標請使用字體圖標,注意設定一個下限與上限值
文字必須同樣,圖標顏色必須同樣,圖片能夠自行準備。