CSS3與頁面佈局學習總結（一）——概要、選擇器、特殊性與刻度單位

時間  2019-11-12
標籤 css3 css 頁面 佈局 學習 總結 概要 選擇器 特殊性 刻度 單位 欄目 CSS 简体版
原文   原文鏈接

web前端開發者最最注的內容是三個：HTML、CSS與JavaScript，他們分別在不一樣方面發揮本身的做用，HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。固然內容與用戶資源也是不能忽視的。儘可能不要跨職責範圍使用，有點「SRP單一職責」的意思，如字體大小應該是CSS控制的，就不該該使用HTML標籤完成，若是CSS能解決的問題儘可能不要用JavaScript完成。javascript

1、CSS3概要

CSS（Cascading Style Sheet）是層疊樣式表的意思，CSS3就是在CSS2.1的基礎上升級的CSS新版本，屬於HTML5的一部分。它能夠有效地對頁面的佈局、字體、顏色、背景、動畫和其它效果實現。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。css

1.一、特色

1.二、效果演示

純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>
View Code

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;
}
View Code

相冊演示的代碼能夠在示例中下載到。git

1.三、幫助文檔與學習

權威的幫助文檔是最好的學習資料，CSS2的幫助，很是詳細：github

CSS3的幫助文檔：web

 

若是打開時右邊全是空白，請右鍵->"屬性"—>「解除鎖定」算法

點擊下載幫助文檔，上課示例的「文檔」文件夾中也包含了兩個關鍵的CSS文檔chrome

2、選擇器

在使用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>
View Code

 結果：

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

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.二、組合選擇器

示例：

<!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.三、屬性選擇器

<!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.四、僞類

 示例：

<!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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </table>
        <hr />
        <table border="1" width="100%">
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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.五、僞元素

標準的僞元素應該使用::，但單:也行，只是爲了兼容。

示例：

<!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>

結果：

3、特殊性（優先級）

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.二、計算特殊性值

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，後者勝出。

4、刻度

在CSS中刻度是用於設置元素尺寸的單位。

特殊值0能夠省略單位。例如：margin:0px能夠寫成margin:0
一些屬性可能容許有負長度值，或者有必定的範圍限制。若是不支持負長度值，那應該變換到可以被支持的最近的一個長度值。
長度單位包括包括：相對單位和絕對單位。
相對長度單位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
絕對長度單位包括有： cm, mm, q, in, pt, pc, px

 

4.一、絕對長度單位

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

4.1.一、動態計算長度值

calc() = calc(四則運算)
用於動態計算長度值。
  • 須要注意的是，運算符先後都須要保留一個空格，例如：width: calc(100% - 10px)；
  • 任何長度值均可以使用calc()函數進行計算；
  • calc()函數支持 "+", "-", "*", "/" 運算；
  • calc()函數使用標準的數學運算優先級規則； 

示例：

<!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>

結果：

 

4.二、文本相對長度單位

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.三、Web App與Rem

爲了實現簡單的響應式佈局，能夠利用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>
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提供了思路。

5、示例與幫助下載

https://git.coding.net/zhangguo5/CSS301.git

https://git.coding.net/zhangguo5/HTML5_143.git

 幫助文檔與示例下載

6、視頻下載

https://www.bilibili.com/video/av16530230/

7、做業

1.一、請完成全部上課示例

1.二、請完成下面的手機頁面，當瀏覽器大小變化時圖片與字體的大小發生變化，圖標請使用字體圖標，注意設定一個下限與上限值

文字必須同樣，圖標顏色必須同樣，圖片能夠自行準備。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程