一. 地址

網(wǎng)頁上引入或鏈接到外部文件，需要定義文件的地址，常見引入或鏈接外部文件包括以下幾種：

<!-- 引入外部圖片   -->
<img src="images/001.jpg" alt="圖片" />

<!-- 添加一個圖片 -->
<img src="C:\course5\03day\images\001.jpg" alt="圖片" />


<!-- 鏈接到另外一個網(wǎng)頁   -->
<a href="002.html">鏈接到網(wǎng)頁2</a>

<!-- 鏈接到另外一個網(wǎng)頁   -->
<a href="C:\source2\002.html">鏈接到網(wǎng)頁2</a>


<!-- 外鏈一個css文件   -->
<link rel="stylesheet" type="text/css" href="css/main.css" />

<!-- 外鏈一個js文件   -->
<script type="text/javascript" src="js/jquery.js"></script>

這些地址分為相對地址和絕對地址:

1. 相對地址

相對于引用文件本身去定位被引用的文件地址，相對地址的定義技巧：

• “ ./ ” 表示當(dāng)前文件所在目錄下，比如：“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片，這個使用時可以省略。

• “ ../ ” 表示當(dāng)前文件所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當(dāng)前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

  ?

2. 絕對地址

相對于磁盤的位置去定位文件的地址:

例如:<img src="C:\course5\03day\images\001.jpg" alt="圖片" />

絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對地址就沒有這個問題。

二. CSS盒子模型

盒子模型解釋

元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現(xiàn)實中盒子來做比喻，幫助我們設(shè)置元素對應(yīng)的樣式。盒子模型示意圖如下：

這里寫圖片描述

把元素叫做盒子，設(shè)置對應(yīng)的樣式分別為：盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內(nèi)的內(nèi)容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

設(shè)置寬高 width height

width:200px;  /* 設(shè)置盒子的寬度，此寬度是指盒子內(nèi)容的寬度，不是盒子整體寬度(難點) */ 
height:200px; /* 設(shè)置盒子的高度，此高度是指盒子內(nèi)容的高度，不是盒子整體高度(難點) */

設(shè)置邊框 border

設(shè)置一邊的邊框，比如頂部邊框，可以按如下設(shè)置：

border-top:10px solid red;

其中10px表示線框的粗細(xì)；solid表示線性。

設(shè)置其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設(shè)置左邊，換成'right'就是設(shè)置右邊，換成'bottom'就是設(shè)置底邊。

四個邊如果設(shè)置一樣，可以將四個邊的設(shè)置合并成一句：

border:10px solid red;

設(shè)置內(nèi)間距 padding

設(shè)置盒子四邊的內(nèi)間距，可設(shè)置如下：

padding-top：20px;     /* 設(shè)置頂部內(nèi)間距20px */ 
padding-left:30px;     /* 設(shè)置左邊內(nèi)間距30px */ 
padding-right:40px;    /* 設(shè)置右邊內(nèi)間距40px */ 
padding-bottom:50px;   /* 設(shè)置底部內(nèi)間距50px */

上面的設(shè)置可以簡寫如下：

/* 四個值按照順時針方向，分別設(shè)置的是 上 右 下 左  四個方向的內(nèi)邊距值。 */
padding：20px 40px 50px 30px; 

padding后面還可以跟3個值，2個值和1個值，它們分別設(shè)置的項目如下：

padding：20px 40px 50px; /* 設(shè)置頂部內(nèi)邊距為20px，左右內(nèi)邊距為40px，底部內(nèi)邊距為50px */ 
padding：20px 40px; /* 設(shè)置上下內(nèi)邊距為20px，左右內(nèi)邊距為40px*/ 
padding：20px; /* 設(shè)置四邊內(nèi)邊距為20px */

設(shè)置外間距margin
外邊距的設(shè)置方法和padding的設(shè)置方法相同，將上面設(shè)置項中的'padding'換成'margin'就是外邊距設(shè)置方法。

外間距居中技巧
如果子元素是塊元素，且它的寬度小于父元素，可以將子元素左右設(shè)置auto來水平居中子元素

/* 子元素上下外邊距設(shè)為0，左右設(shè)置為auto */
margin:0px auto;

盒子的真實尺寸
盒子的width和height值固定時，如果盒子增加border和padding，盒子整體的尺寸會變大，所以盒子的真實尺寸為：

• 盒子寬度 = width + padding左右 + border左右
• 盒子高度 = height + padding上下 + border上下

三. 列表 標(biāo)簽

前端中列表分為兩種:

• 有序列表
• 無序列表

1. 無序列表

無序列表一般應(yīng)用在布局中的新聞標(biāo)題列表和文章標(biāo)題列表以及菜單，它是含有語義的，標(biāo)簽結(jié)構(gòu)如下：

使用方式:         ul>li{列表標(biāo)題}*3


<ul>
    <li>列表標(biāo)題</li>
    <li>列表標(biāo)題</li>
    <li>列表標(biāo)題</li>
</ul>

列表的內(nèi)容一般是可以鏈接的，點擊鏈接到新聞或者文章的具體內(nèi)容，所以具體結(jié)構(gòu)一般是這樣的：

ul>(li>a[href=#]{列表標(biāo)題 $})*3

<ul>
    <li><a href="#">列表標(biāo)題 1</a></li>
    <li><a href="#">列表標(biāo)題 2</a></li>
    <li><a href="#">列表標(biāo)題 3</a></li>
</ul>

顯示效果:

這里寫圖片描述

2. 有序列表

使用方式:         ol>li{列表標(biāo)題}*3

<ol>
    <li>列表標(biāo)題</li>
    <li>列表標(biāo)題</li>
    <li>列表標(biāo)題</li>
</ol>

顯示效果:

這里寫圖片描述

請進(jìn)行如下的 emmet 語法練習(xí):

.box>.box1+.box2

#page>div.logo+ul#navigation>li*5>a{Item $}

div#header+div.page+div#footer.class1.class2.class3

總結(jié):

• 我們在寫頁面的時候經(jīng)常會使用列表標(biāo)簽

• 寫列表標(biāo)簽的時候, 我們可以去掉前面的點或者是序號:

  • <style>
        li {
            list-style:none; /* 取消列表前面的序號或者是點 */
        }
    </style>
    

• 寫所有 html 頁面的時候, 都可以使用 emmet 語法

四. HTML表單

表單用于搜集不同類型的用戶輸入，表單由不同類型的標(biāo)簽組成，相關(guān)標(biāo)簽及屬性用法如下：

1、<form>標(biāo)簽 定義整體的表單區(qū)域

action屬性 定義表單數(shù)據(jù)提交地址

method屬性 定義表單提交的方式，一般有“get”方式和“post”方式

使用方式:

<form action="" method="">
    
</form>

2、<label>標(biāo)簽 為表單元素定義文字標(biāo)注

label 的 for 屬性值可以和 input 的 id 名書寫一致, 使 label 的點擊也能夠觸發(fā) input 的聚焦

label的使用方式:
<label for="">Male</label>
<label for="">Female</label>

label的for屬性設(shè)置: 
<label for="male">用戶名:
<input type="text" id="male">

3、<input>標(biāo)簽 定義通用的表單元素

• type屬性
  • type="text" 定義單行文本輸入框
  • type="password" 定義密碼輸入框
  • type="radio" 定義單選框
  • type="checkbox" 定義復(fù)選框
  • type="file" 定義上傳文件
  • type="submit" 定義提交按鈕
  • type="reset" 定義重置按鈕
  • type="button" 定義一個普通按鈕
• value屬性 定義表單元素的值
• name屬性 定義表單元素的名稱，此名稱是提交數(shù)據(jù)時的鍵名

使用方法:

<input type="text" name="username" placeholder="請您輸入姓名">

<input type="password" name="password">

<input type="radio" name="gender" value="1"> 男
<input type="radio" name="gender" value="0"> 女

<input type="checkbox" name="hobby" value="1"> 唱歌

<input type="file" name="file"> 

<input type="submit">
<input type="reset">
<input type="button" value="按鈕1">

4、<textarea>標(biāo)簽 定義多行文本輸入框

使用方法:
<textarea name="" placeholder="提示信息..." id="" cols="30" rows="10">
    textarea的使用
</textarea>

5、<select>標(biāo)簽 定義下拉表單元素

6、<option>標(biāo)簽 與<select>標(biāo)簽配合，定義下拉表單元素中的選項

使用方法: 

創(chuàng)建帶有 4 個選項的選擇列表：
<select name="province" id="">
    <option value="1">北京</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
    <option value="4">湖北</option>
</select>

練習(xí):

這里寫圖片描述

注冊表單實例：

<form action="http://www..." method="get">
        <p>
            <label>姓名：</label>
            <input type="text" name="username" />
        </p>
        <p>
            <label>密碼：</label>
            <input type="password" name="password" />
        </p>
        <p>
            <label>性別：</label>
            <input type="radio" name="gender" value="0" /> 男
            <input type="radio" name="gender" value="1" /> 女
        </p>
        <p>
            <label>愛好：</label>
            <input type="checkbox" name="like" value="sing" /> 唱歌
            <input type="checkbox" name="like" value="run" /> 跑步
            <input type="checkbox" name="like" value="swiming" /> 游泳
        </p>
        <p>
            <label>照片：</label>
            <input type="file" name="person_pic">
        </p>
        <p>
            <label>個人描述：</label>
            <textarea name="about"></textarea>
        </p>
        <p>
            <label>籍貫：</label>
            <select name="site">
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">廣州</option>
                <option value="3">深圳</option>
            </select>
        </p>
        <p>
            <input type="submit" name="" value="提交">
            <input type="reset" name="" value="重置">
        </p>
</form>

單行文本框文字提示

• placeholder 設(shè)置input輸入框的默認(rèn)提示文字。

總結(jié):

• 在前端頁面中, 我們往往用表單來制作用戶的注冊, 登錄等功能.
• 表單包含很多內(nèi)容, 例如:
  • 單選: radio
  • 多選: checkbox
  • 密碼: password
  • 文本: text
  • 按鈕: reset, submit, file
  • 多行文本輸入: textarea
  • 下拉菜單: select option
• 表單( form )可以直接提交: 提交方法包含 get post
  • action: 提交的服務(wù)器地址
  • method: 提交的方法

五. 表格元素及相關(guān)樣式

1、<table>標(biāo)簽

聲明一個表格

2、<tr>標(biāo)簽

定義表格中的行

3、<td>和<th>標(biāo)簽

定義列以及列中的標(biāo)題

td代表列，th表示列中的標(biāo)題部分(加粗)

它們的常用屬性如下：

• colspan 設(shè)置單元格水平合并，設(shè)置值是數(shù)值
• rowspan 設(shè)置單元格垂直合并，設(shè)置值是數(shù)值

表格相關(guān)樣式屬性

• border-collapse 設(shè)置表格的邊線合并，如：border-collapse:collapse;
• border='1' 可以設(shè)置table的邊框大小
• text-align 可以設(shè)置對齊方式: left right center

總結(jié):

• 在網(wǎng)頁中, 表格用一般用 table 標(biāo)簽來做
• 表格中分為 行 和 列
• 表格中的行為 tr 標(biāo)簽
• 表格中的列為 td 標(biāo)簽
  • 其中每一列都可以有一個標(biāo)題, 我們可以使用 th 標(biāo)簽

<table>
    <tr>
        <th>標(biāo)題一</th>
        <th>標(biāo)題二</th>
        <th>標(biāo)題三</th>
        <th>標(biāo)題四</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

顯示效果:

這里寫圖片描述

六. CSS屬性進(jìn)階

1.文本常用樣式屬性進(jìn)階：

• text-align 設(shè)置文字水平對齊方式，如text-align:center 設(shè)置文字水平居中
• text-indent 設(shè)置文字首行縮進(jìn)，如：text-indent:32px; 設(shè)置文字首行縮進(jìn)32px

CSS部分: 
<style>
    .box {
        width:80px;
        height:30px;
        background: pink;
        text-align: center;
    }
    .pbox {
        /* css里面默認(rèn)的字體大小是16px */
        font-size: 20px;
        text-indent: 32px;
    }
</style>

HTML部分:
<div class="box">
    <p>
        你好世界
    </p>
</div>
<p class="pbox">
    大頭兒子小頭爸爸
    一對好朋友 快樂父子倆
    兒子的頭大手兒小
    爸爸的頭小手兒很大
    大手牽小手
    走路不怕滑
    走呀走呀走 走 走
    轉(zhuǎn)眼兒子就長大
    轉(zhuǎn)眼兒子就長大
</p>

2. display屬性

作用: 第一個決定了當(dāng)前元素是否應(yīng)該顯示, 第二個決定了當(dāng)前元素應(yīng)該以什么類型顯示

display 屬性規(guī)定元素應(yīng)該生成的框的類型。

display 的默認(rèn)屬性值是 inline, 此元素會被顯示為內(nèi)聯(lián)元素

display屬性是用來設(shè)置元素的類型及隱藏的，常用的屬性有：

• none 元素隱藏且不占位置
• block 此元素會被顯示為塊元素
• inline 此元素會被顯示為內(nèi)聯(lián)元素

CSS部分: 
<style>
    div {
        display: inline;  
    }
    
    a {
        display: block;
    }
    
    .pbox {
        width: 200px;
        height: 200px;
        background: pink;
        display: none;
    }
</style>

HTML部分:
<div>
    <div>我是要成為海賊王的男人</div>
    <div>海賊王下面的div</div>
    
    <a href="#">這是第一個鏈接</a>
    <a href="#">這是第二個鏈接</a>
    
    <p class="pbox" style="display:block">
        葫蘆娃 葫蘆娃 一根藤上七朵花 小小樹藤是我家 啦啦啦啦 叮當(dāng)當(dāng)咚咚當(dāng)當(dāng)　澆不大 叮當(dāng)當(dāng)咚咚當(dāng)當(dāng) 是我家 啦啦啦啦
    </p>
</div>

3. CSS元素溢出

這里寫圖片描述

當(dāng)子元素的尺寸超過父元素的尺寸時，需要設(shè)置父元素顯示溢出的子元素的方式，設(shè)置的方法是通過overflow屬性來設(shè)置。

overflow的設(shè)置項：

1、visible 默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。

2、hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。

3、scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。

4、auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。

CSS部分: 
<style>
    div {
        width:100px;
        height:100px;
        overflow: auto;
    }
</style>

HTML部分:
<div>
    格嘰格嘰~
    <br><br>
    格嘰格嘰~~
    <br><br>
    格嘰~格嘰~~
    <br><br>
</div>

七. 定位

這里寫圖片描述

把某一個標(biāo)簽, 安置到某一個位置去, 這個過程稱為定位.

1. 文檔流概念( 了解 )

文檔流，是指盒子按照 HTML 標(biāo)簽編寫的順序依次從上到下，從左到右排列，塊元素占一行，行內(nèi)元素在一行之內(nèi)從左到右排列，先寫的先排列，后寫的排在后面，每個盒子都占據(jù)自己的位置。

2. 定位分類:

我們可以使用 CSS 的 position 屬性來設(shè)置元素的定位類型，position 的設(shè)置項如下：

• static 默認(rèn)值. 沒有定位: 元素出現(xiàn)在正常的流中(忽略top, bottom, left, right 或者 z-index 聲明)

• relative 生成相對定位元素，一般是將父級設(shè)置相對定位，子級設(shè)置絕對定位，子級就以父級作為參照來定位，否則子級相對于body來定位。

• absolute: 生成絕對定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對于上一個設(shè)置了定位的父級元素來進(jìn)行定位，如果找不到，則相對于body元素進(jìn)行定位。

• fixed: 生成固定定位的元素，相對于瀏覽器窗口進(jìn)行定位。

  元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

定位元素的偏移

定位的元素還需要用left、right、top或者bottom來設(shè)置相對于參照元素的偏移值。

1. 相對定位:

CSS部分: 
<style>
    .con {
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
    }

    .con div {
        width:200px;
        height:70px;
        margin:10px;
    }

    .box01 {
        background:lightgreen;
        /* 設(shè)置相對定位 */
        position:relative;
        left:50px;
        top:50px;
    }

    .box02 {
        background: lightskyblue
    }

    .box03 {
        background: lightpink;
    }
</style>


HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

2. 絕對定位:

<style>
    .con{
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
        /* 父級設(shè)置為相對定位，不設(shè)置偏移，子級就可以以它為參照做絕對定位 */
        position: relative;
        /* 設(shè)置父級的溢出隱藏 */
        overflow: hidden;
    }

    .con div{
        width:200px;
        height:70px;
        margin:10px;
    }

    .box01{
        background:lightgreen;
        /* 設(shè)置絕對定位 */
        position:absolute;
        left:131px;
        top:50px;
    }

    .box02{
        background: lightskyblue
    }

    .box03{
        background: lightpink;
    }
</style>


HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

3. 固定定位

<style>
    .con{
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
    }

    .con div{
        width:200px;
        height:70px;
        margin:10px;
    }

    .box01{
        background:lightgreen;
        /* 設(shè)置固定定位 */
        position:fixed;
        right:131px;
        bottom:50px;
    }

    .box02{
        background: lightskyblue
    }

    .box03{
        background: lightpink;
    }
</style>

HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

3. 元素層級

絕對定位元素是浮動在正常的文檔流之上的，可以用 z-index 屬性來設(shè)置元素的層級

例如:

這里寫圖片描述

偽代碼如下:

.box01{
    ......
    position:absolute;  /* 設(shè)置了絕對定位 */
    left:200px;         /* 相對于參照元素左邊向右偏移200px */
    top:100px;          /* 相對于參照元素頂部向下偏移100px */
    z-index:10          /* 將元素層級設(shè)置為10 */
}

CSS部分: 
<style>
    .con{
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
        position: relative;
    }

    .con div{
        width:200px;
        height:70px;
        margin:10px;
        position:absolute;
    }

    .box01{
        background:lightgreen;
        left:0px;
        top:0px;

        /* 設(shè)置定位元素的層級 */
        z-index:6;
    }

    .box02{
        background: lightskyblue;
        left:30px;
        top:30px;
        z-index:7;
    }
    .box03{
        background: lightpink;
        left:60px;
        top:60px;
        z-index:8;
    }
</style>

HTML部分: 
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <!-- 如果不設(shè)置z-index屬性，定位元素的層級安裝代碼書寫的順序，先寫的排列在下面，后寫的排列在上面 -->
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

4 . 練習(xí): 用固定定位創(chuàng)建彈窗

這里寫圖片描述

<style>
    .pop{
        width:500px;
        height:300px;
        border:1px solid black;
        background:white;
        position: fixed;

        /* 彈框水平垂直居中的寫法： */
        left:50%;
        top:50%;
        margin-left:-251px;
        margin-top:-151px;
        /* 設(shè)置彈框的層級,設(shè)置比較大的值，蓋住其他所有的元素*/
        z-index:9999;
    }
    .pop h3{
        margin:5px;
        background: lightskyblue;
        line-height:40px;
    }

    .mask{
        position:fixed;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background:black;
        z-index:9998;

        /* 設(shè)置背景的透明度 */
        opacity:0.3;
        /* 透明度兼容寫法，兼容IE */
        filter:alpha(opacity=30);

    }

    /* 設(shè)置pop_con的隱藏，可以同時將彈框和背景隱藏起來 */
    .pop_con{
        display:none;
    }  
</style>

HTML部分:
<h1>網(wǎng)頁內(nèi)容</h1>
    <div class="pop_con" style="display:block">
        <div class="pop">
            <h3>彈框標(biāo)題</h3>
            <p>彈框的文字內(nèi)容</p>
    </div>
    <div class="mask"></div>
</div>

八. 頁面嵌套

這里寫圖片描述

在一個頁面中可以開一個局部的窗口，嵌入另外一個頁面

制作這樣的功能我們一般使用: iframe 標(biāo)簽來實現(xiàn)

使用方法: 

<iframe src="" frameborder="">

</iframe>

• src: 設(shè)置另一個網(wǎng)頁的地址
• frameborder: 設(shè)置這個局部窗口邊框的粗細(xì)

**提升: **

iframe 可以和 a 標(biāo)簽搭配使用, 呈現(xiàn)切換的效果:

我們知道 a 標(biāo)簽有 target 屬性:

target="_blank" : 新開一個瀏覽器窗口顯示鏈接的頁面

如果 target 的值和 iframe 的 name 值保持相同, 則 a 標(biāo)簽切換后的 href 將作用到 iframe 的 src 上:

<a href="001.html" target="name">001頁面</a>
<a href="002.html" target="name">002頁面</a>
<a href="003.html" target="name">003頁面</a>

<iframe src="001.html" frameborder="0" name="name"></iframe>

九. 元素居中顯示技巧

1. 居中顯示:

這里寫圖片描述

想要使某個元素能夠居中顯示, 需要設(shè)置其 margin 屬性為: 0px auto:

CSS部分:
<style>
.box{
    width: 300px; 
    height: 300px;
    background: gold;
    margin:0px auto;
}
</style>

HTML部分: 
<div class="box"></div>

總結(jié):

• 如果想要某個元素居中, 則需要設(shè)置他的 margin : 0px auto;
• 多個元素想要居中, 則每個單獨的元素都需要設(shè)置該屬性.
• margin: 0px auto; =====> margin: 0px auto 0px auto; (上, 右, 下, 左)

十. CSS權(quán)重值計算 ( 簡單了解 )

什么是權(quán)重值:

例子: 根據(jù)分?jǐn)?shù), 決定排名

小明的分?jǐn)?shù): 總分( 550 )

• 英語: 100
• 數(shù)學(xué): 130
• 語文: 90
• 理綜: 230

小紅的分?jǐn)?shù): 總分 ( 530 )

• 英語: 110
• 數(shù)學(xué): 120
• 語文: 100
• 理綜: 200

因為 小明的分?jǐn)?shù) > 小紅的分?jǐn)?shù) , 所以 小明的排名高于小紅的排名

我們上面說的各個學(xué)科, 其實就相當(dāng)于各個選擇器, 各學(xué)科有分?jǐn)?shù), 各選擇器也有分?jǐn)?shù), 分?jǐn)?shù)相加最高的 顯示在最上面, 覆蓋掉分?jǐn)?shù)低的. 各個選擇器的分?jǐn)?shù)就是權(quán)重.

1.權(quán)重了解

• 內(nèi)聯(lián)樣式的權(quán)重值最高: 1000 (內(nèi)聯(lián): 寫在標(biāo)簽上的樣式)
• 標(biāo)簽選擇器的權(quán)重值為最低: 1
• 類選擇器的權(quán)重值為: 10 ( 了解 )
• 偽類選擇器權(quán)重值為: 10 ( 了解 )
• id 選擇器的權(quán)重值為: 100

CSS部分:
<style>
    /* 權(quán)重值：1 */
    div{
        color:red;
    }

    /* 權(quán)重值：1+10+10+1=22 */
    body .con .box h3{
        color:#8e6758;
    }

    /* 權(quán)重值：10+10+1=21 */
    .con .box h3{
        color:red;
    }
</style>

HTML部分:
<!-- style的權(quán)重值：1000 -->
<div style="color:blue">這是一個div</div>
    <div class="con">
        <div class="box">
            <h3>這是一個h3標(biāo)簽</h3>
        </div>
    </div>

十一. Photoshop

1. photoshop的使用:

1) 什么是 photoshop ?

Adobe Photoshop，簡稱 “PS”，是由 Adobe Systems 開發(fā)和發(fā)行的圖像處理軟件。

Photoshop 主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進(jìn)行圖片編輯工作。PS 有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。

2) 我們這里使用 PS 來輔助測量和取色

圖片預(yù)覽的方法:

• 圖片縮放
• 圖片平移

尺寸測量方法:

• 設(shè)置單位
• 矩形框測量, 調(diào)整矩形框
• 文字大小的測量

取色方法:

• 取色工具
• 前景色按鈕

CSS 顏色表示法:

CSS 顏色值主要有三種表示法:

• 顏色名表示, 比如 : red 紅色, pink 金色;
• 16 進(jìn)制數(shù)值表示, 比如: #ff0000 表示紅色