前端(二)：css樣式_ZenDei技術網路在線

本節筆記根據css中文手冊整理，內容已做成思維導圖。下載地址https://files.cnblogs.com/files/kuaizifeng/css.xmind.zip。 css（Csacading Style Sheet）級聯樣式表，是控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言 ...

　　本節筆記根據css中文手冊整理，內容已做成思維導圖。下載地址https://files.cnblogs.com/files/kuaizifeng/css.xmind.zip。

　　css（Csacading Style Sheet）級聯樣式表，是控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。也就是說，css的作用基本有兩個：1.將樣式定義從html中獨立出來，更方便地設置樣式；2.給標記的對象(html元素)設置樣式，所以必須要先有對象。

　　語法: Selector {property: value}

一、引入方式

　　1.外鏈引用(Linking to a Style Sheet)

　　寫在<head>頭部標簽內即可。href屬性指向本地(或伺服器)的靜態資源路徑。

　　type="text/css"是允許不支持這類型的瀏覽器忽略樣式表單。

<link rel="stylesheet" type="text/css" href="/c5_20171220.css" />

　　2.內部定義(Embedding a Style Block)

　　在<head>頭部標簽內定義<style>標簽，並將樣式寫在style內部。

<style type="text/css">
    #father p.c2{
        color:black;
    }
    #father #son{
        color:blue;
    }
</style>

　　3.內聯定義(Inline Styles)

　　在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。

<p style="margin-left; 0.5in; margin-right:0.5in">這一行被增加了左右額外補丁</p>

二、特性

　　1.層疊性

　　在權重相同的情況下，在同一個標簽中樣式發生衝突，後面定義樣式會將前面定義的樣式給覆蓋掉。

　　2.繼承性

　　在預設情況下，如果子元素沒有設置樣式，那麼該子元素會受父元素的樣式影響。CSS繼承性只能發生在標簽嵌套結構中。

　　可繼承的屬性：

　　　　- color 可以被繼承

　　　　- font-size 可以被繼承 

　　　　- 與font屬性相關的屬性都可以被繼承

　　　　- 行高（line-height）可以被繼承 

　　　　- text-align 可以被繼承

　　繼承性中特殊標簽：

　　　　- a標簽不能直接受父元素中的文字顏色影響

- 標題標簽不能直接受父元素中的文字大小影響

三、選擇器及其權重

　　1.選擇器

　　選擇器用於選擇標記對象，以便給其賦予樣式。選擇器分為以下幾種選擇器。

　　通配符(Universal Selector)

　　語法: *{sRules}

　　必寫的選擇器，用於給所有DOM對象設置共有的樣式。

*{
    margin: 0;
    padding: 0;
}

　　標簽選擇器(Type Selectors)

　　語法: E{sRules}

　　必寫的選擇器，選擇某一類標簽元素(Element)設置樣式。

a {
    text-decoration: none;
}

　　通配符+類型選擇器一般用於初始化整個DOM的樣式。

　　類選擇器(Class Selectors)

　　語法: .className{SRules}

　　最常用的選擇器，選擇某一類class屬性值相同的對象設置樣式。

.nav{
    background-color: pink;
    height: 50px;
    width: 50px;
}

<div  class="nav">
　　...
</div>

　　ID選擇器(ID Selectors)

　　語法: #ID {sRules}

　　特殊對待某個標簽元素的選擇器，選擇具有唯一標識符id的元素作為操作對象。

#nav{
    background-color: pink;
    height: 50px;
    width: 50px;
}

<div  id="nav">
　　...
</div>

　　組合選器

　　- 包含選擇器(Descendant Selectors):

　　　　多個選擇器可以同時寫在一行並用空格符隔開，等價於選擇同時符合這些選擇器的元素對象。

　　　　語法 E1 E2 {sRules}

　　- 選擇器分組(Grouping)

　　　　多個選擇器用"，"號隔開，等價於選擇只要滿足某個選擇器的所有元素對象。

　　　　語法 E1, E2 {sRules}

　　- 屬性選擇器(Attribute Selectors)

　　　　在已有選擇器的基礎上，根據某個屬性進行再次過濾選擇對象元素。

　　　　語法 E1[Attribute=value] {sRules}

　　- 子對象選擇器(Child Seletors)

　　　　在已有選擇器的基礎上，根據某個子對象再次過濾選擇器元素對象。

　　　　語法 E1 > E2 {sRules}

　　擴展的選擇器

　　偽類(Pseudo-Classes)和偽元素(Pseudo-Elements):於設置特定事件觸發的特殊效果，如滑鼠懸浮時變色等。

　　常見的偽類:

屬性	描述	CSS
:active	向被激活的元素添加樣式。	1
:focus	向擁有鍵盤輸入焦點的元素添加樣式。	2
:hover	當滑鼠懸浮在元素上方時，向元素添加樣式。	1
:link	向未被訪問的鏈接添加樣式。	1
:visited	向已被訪問的鏈接添加樣式。	1
:first-child	向元素的第一個子元素添加樣式。	2
:lang	向帶有指定 lang 屬性的元素添加樣式。	2

　　常見的偽元素:

屬性	描述	CSS
:first-letter	向文本的第一個字母添加特殊樣式。	1
:first-line	向文本的首行添加特殊樣式。	1
:before	在元素之前添加內容。	2
:after	在元素之後添加內容。	2

　　簡單記憶：四種基礎選擇器，四種組合選擇器，偽類及偽元素。

　　2.權重計算

　　下表為權重計算表，數值只代表等級而不是真實值。

選擇器	權重
繼承	0
通配符	1
標簽選擇器	10
類選擇器	100
id選擇器	1000
行內樣式	10000
!important	100000

　　由於選擇器具有優先順序，所以選擇器連寫時最好從大到小寫。

　　3.選擇器練習

　　練習一：選擇元素並設置樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        .title{
            text-align:center;
            /*font-size:28px;
            font-family:"微軟雅黑";
            font-weight:normal;*/
            font:normal 28px "微軟雅黑";
        }
        .sub_title{
              text-align:center;
        }
        .sub_title .time{
            color:#aabbcc;
            font-size:14px;
        }
        .sub_title .nows_title{
             color:#990000;
             font-size:14px;
        }
        p{
             text-indent:2em;
             line-height:28px;
        }

        p span{
             color:#3399cc;
        }
        /* 屬性選擇器 */
        input[type="button"]{
             color: green;
             font-weight:700;
        }
        input[type="text"]{
            color:red;
            font-size:12px;
        }
    </style>
</head>
<body>
　　<div class="box">
     　<h2 class="title">中乙隊賽前突然換帥仍勝毅騰 高原黑馬欲阻擊舜天</h2>
     　<div class="sub_title"> 
        　<span class="time">2014年07月16日20:11</span> 
        　<span class="nows_title">新浪體育 評論中大獎（11人參與）</span> 
        　<a href="#">收藏本文</a>
        　<input type="text"  value="請輸入查詢條件">
        　<input type="button" value="搜索">
     　</div>
　　　　<hr>
　　　　<p>新浪體育訊　7月16日是燕京啤酒<span>[微博]</span>2014中國足協杯第三輪比賽，麗江嘉雲昊隊主場迎戰哈爾濱毅騰隊的比賽日。然而就在比賽日中午，麗江嘉雲昊隊主帥李虎和另外兩名成員悄然向俱樂部提出了辭呈，並且收拾行囊準備離開。在這樣的情況下，麗江嘉雲昊隊不得不由此前的教練員楊貴東代理指揮了本場比賽。</p>
　　　　<p>在昨日麗江嘉雲昊隊主帥李虎就缺席了賽前的新聞發佈會，當時俱樂部給出的解釋是李虎由於身體欠佳，去醫院接受治療。然而今日李虎出現在俱樂部時，向記者否認了這一說法，並且坦言已經向俱樂部提出了辭呈。</p>
　　　　<p>據記者多方瞭解的情況，李虎<span>[微博]</span>極其教練組近來在執教成績上承受了不小的壓力，在聯賽間歇期期間，教練組曾向俱樂部提出能夠多引進有實力的球員補強球隊，然而由於和俱樂部在投入以及成績指標上的分歧，李虎最終和教練組一起在比賽日辭職。</p>
　　　　<p>這樣的情況並沒有影響到麗江嘉雲昊隊<span>[微博]</span>的隊員，在比賽中麗江隊在主場拼的非常凶，在暴雨之中仍然發揮出了體能充沛的優勢，最終憑藉點球擊敗了中超球隊哈爾濱毅騰，順利晉級下一輪比賽。<strong>根據中國足協杯的賽程，麗江嘉雲昊隊將在本月23日迎戰江蘇舜天隊。</strong></p>
　　　　</div>
</body>
</html>

選擇器設置樣式

　　練習二：jquery操作選擇器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>問卷調查</title>
    <link rel="stylesheet" type="text/css" href="d3.css" />
</head>
<body>
<div id="total">
    <div class="inner">
        <p>你喜歡哪個城市?</p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>東京</li>
            <li>首爾</li>
        </ul>
        <br><br>
        <p>你喜歡哪款單機游戲?</p>
        <ul id="game">
            <li id="rl">紅警</li>
            <li>實況</li>
            <li>極品飛車</li>
            <li>魔獸</li>
        </ul>
        <br /><br />
        <p>你手機的操作系統是?</p>
        <ul id="phone">
            <li>IOS</li>
            <li id="android">Android</li>
            <li>Windows Phone</li>
        </ul>
    </div>
    
    <div class="inner">
        gender:
        <input class="hello" type="radio" name="gender" value="male"/>
        Male
        <input class="hello" type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div><button id="btn01">查找#bj節點</button></div>
    <div><button id="btn02">查找所有li節點</button></div>
    <div><button id="btn03">查找name=gender的所有節點</button></div>
    <div><button id="btn04">查找#city下所有li節點</button></div>
    <div><button id="btn05">返回#city的所有子節點</button></div>
    <div><button id="btn06">返回#phone的第一個子節點</button></div>
    <div><button id="btn07">返回#bj的父節點</button></div>
    <div><button id="btn08">返回#android的前一個兄弟節點</button></div>
    <div><button id="btn09">返回#username的value屬性值</button></div>
    <div><button id="btn10">設置#username的value屬性值</button></div>
    <div><button id="btn11">返回#bj的文本值</button></div>
</div>
<script type="text/javascript">
    function myClick(click, fun) {
        var btn = document.getElementById(click);
        btn.onclick = fun;
    }
    //---------------------獲取節點操作-----------------------------
    myClick("btn01",function() {
        var obj = document.getElementById("bj");
        alert(obj.innerText);
    });
    myClick("btn02",function() {
        var obj = document.getElementsByTagName('li');
        for(var i=0; i<obj.length; i++){
            alert(obj[i].innerHTML);
        }
    });
    myClick("btn03",function() {
        var obj = document.getElementsByName("gender");
        for(var i=0; i<obj.length; i++){
            alert(obj[i].tagName);
        }
    });
    //---------------------獲取子節點操作-----------------------------
    // getElementsByTagName[..],childNodes, firstChild, lastChild
    myClick("btn04",function() {
        var obj = document.getElementById("city");
        var sub = obj.getElementsByTagName("li"); // 註意這兩個的查詢方式
        // alert(sub.length);
        for(var i=0; i<sub.length; i++){
            alert(sub[i].innerHTML);
        }
    });
    myClick("btn05",function(ev) {
        var obj = document.getElementById("city");
        // var sub = obj.childNodes; // 屬性,這貨會把所有的子節點都帶上，包括註釋、換行等等
        var sub = obj.children;
        for(var i=0; i<sub.length; i++){
            alert(sub[i].innerText);
        }
    });
    myClick("btn06",function() {
        var obj = document.getElementById("phone");
        // var first = obj.firstChild; // 這貨同樣是啥東西都包含
        var first = obj.firstElementChild; // 這裡是獲取真正的第一個元素, 同last...
        alert(first.innerHTML);
    });
    myClick("btn07", function() {
        var obj = document.getElementById("bj");
        // var father = obj.parentNode; // 同樣包含換行和註釋，父節點是包含所有子節點的一個大節點
        var father = obj.parentElement;
        alert(father);
    });
    //---------------------獲取父節點操作-----------------------------
    // parentNode、previousSibling、nextSibling
    myClick("btn08", function() {
        var obj = document.getElementById("android");
        // var before = obj.previousSibling; // 註意，和前面的一樣
        var before = obj.previousElementSibling;
        alert(before.innerHTML);
    });
    myClick("btn09", function() {
        var obj = document.getElementById("username");
        alert(obj.value);
    });
    myClick("btn10", function() {
        var obj = document.getElementById("username");
        obj.value = "what the hell?";
        alert(obj.value);
    });
    myClick("btn11", function() {
        var obj = document.getElementById("bj");
        alert(obj.innerText);
    });
</script>
</body>
</html>

jquery選擇器練習

　　選擇器是溝通html元素、css樣式以及js事件的橋梁。

四、屬性

　　1.字體

　　- font: font-style || font-variant || font-weight || font-size || line-height || font-family 設置字體是否傾斜、粗細、大小、行高和字體風格等。

　　- letter-spacing: 設置文字之間的間隔，該間隔數值作用到每個文字或英文字母(不包括最後一個)之後。

　　- word-spacing: 設置英文單詞之間的間隔，該間隔數值作用到每個英文單詞之後，對漢字無效。

　　2.文本

　　- color: 設置文本顏色

　　- line-height: 設置行高。行高=文字大小+上下間距，預設行高18px；行高作用：設置文字垂直居中；影響行高的因素：文字大小和文字字體可以改變行高。
　　- t