第一章、css高階

阿新 • • 發佈：2022-05-10

一、html
二、css
三、案例
- 1、錨點

一、html

1、文件宣告與字元編碼

* <!DOCTYPE html>：特殊且固定的文件宣告標籤
* <html lang="en">：搜尋引擎優化和瀏覽器有幫助
    - lang：檔案使用的語言。瀏覽器的翻譯此頁功能與此相關
* <meta charset="UTF-8">：
    - charset：瀏覽器解碼檔案的方式。開發者編碼檔案的方式應與其一致

2、常用語義標籤

a、常用語義標籤

* 文字標題
    - <h1></h1> ~ <h6></h6>
* 段落文字
    - <p></p>
* 換行
    - <br/>
* 水平線
    - <hr/>
* 加粗
    - <b></b>
    - <strong></strong>（推薦）
* 傾斜
    - <em></em>（推薦）
    - <i></i>
* 刪除線
    - <s></s>
    - <del></del>（推薦）
* 下劃線
    - <u></u>
* 下標
    - <sub></sub>
* 上標
    - <sup></sup>

b、hr標籤

<!-- 標籤的屬性和值一樣時，可省略賦值 -->
<hr color="red" width="300" align="left" noshade="noshade"/>

3、特殊符號

顯示結果	描述	實體名稱
<	小於號	<
>	大於號	>
	非間斷空格
	em空格	&emsp;
©	版權所有	©
®	註冊商標	®
™	商標	™

4、常用標籤

a、div和span標籤

<!-- 沒有具體含義，用來劃分頁面的區域，獨佔一行 -->
<div></div>
<!-- 沒有實際意義，主要應用在對於文字獨立修飾的時候，內容有多寬就佔用多寬的空間距離 -->
<span></span>

b、ol-li有序列表

<!--
 - type：預設值1，可取值1、a、A、i、I
 - start：預設值1，列表開始值
 -->
<ol type="a" start="27">
    <li>黃婷婷</li>
    <li>孟美岐</li>
    <li>張婧儀</li>
</ol>

c、ul-li無序列表

<!--
 - type：
     disc：預設值，實心圓
     circle：空心圓
     square：實心方塊
     none：空
 -->
<ul type="none">
    <li>黃婷婷</li>
    <li>孟美岐</li>
    <li>張婧儀</li>
</ul>

d、dl-dt-dd自定義列表

<dl>
    <dt>黃婷婷</dt>
    <dd>孟美岐</dd>
</dl>

e、img標籤

<!--
 1、路徑：
     - 相對路徑：./、../
     - 斜槓路徑：http://localhost:63342/
     - 絕對路徑：file:///C:/
 -->
<img src="./gongping.png"
     title="滑鼠懸停上去之後的提示資訊"
     alt="圖片不顯示之後（載入失敗）的提示資訊"
     width="200px"
     height="200px">

f、a標籤

<!--
 - target：
     _self：預設值
     _blank：新視窗開啟
 -->
<a href="https://www.baidu.com" target="_self"></a>

g、table表格

<!--
 * table：
     - width：寬度（px、百分比）
     - height：高度
     - border：邊框
     - bordercolor：邊框顏色
     - bgcolor：背景顏色
     - align：水平對齊，可取值left、right、center
     - cellspacing：單元格與單元格之間的間距
     - cellpadding：單元格與內容之間的空隙
 * tr：
     - height：高度
     - bgcolor：背景顏色
     - align：水平對齊，可取值left、right、center
     - valign：垂直對齊，可取值top、middle、bottom
 * td：
     - width：寬度
     - height：高度
     - bgcolor：背景顏色
     - align：水平對齊，可取值left、right、center
     - valign：垂直對齊，可取值top、middle、bottom
     - colspan：合併列
     - rowspan：合併行
 -->
<table width="100%"
       height="200px"
       border="10"
       bordercolor="red"
       bgcolor="green"
       align="center"
       cellspacing="10"
       cellpadding="10">
    <tr height="200px"
        bgcolor="blue"
        align="left"
        valign="top">
        <th>姓名</th>
        <th>年齡</th>
        <th>地址</th>
    </tr>
    <tr>
        <td width="200px"
            height="200px"
            bgcolor="yellow"
            align="right"
            valign="bottom">黃婷婷
        </td>
        <td colspan="2" rowspan="2">18</td>
    </tr>
    <tr>
        <td>無錫</td>
    </tr>
</table>

h、form表單

<!--
 - method：可取值GET、POST
 -->
<form action="http://www.baidu.com" method="GET">
    使用者名稱：<input type="text" name="username" placeholder="使用者名稱"/><br/>
    密&emsp;碼：<input type="password" name="password" placeholder="密碼"/><br/>
    <button type="submit">提交</button>
    <input type="reset"/>
    <input type="button" value="註冊"/>
</form>

二、css

1、樣式表

<!--
 1、樣式表分類
     - 外部樣式表：@import、link
     - 內部樣式表：style標籤
     - 行內樣式表：元素標籤
 2、@import和link對比
     - @import：頁面載入完畢，再載入樣式表。
     - link：頁面載入完畢，同時樣式表也載入完畢。相容性好。可以dom操作（推薦）
 -->
<style>@import url("./index.css");</style>
<link rel="stylesheet" href="./index.css">

2、選擇器

<!--
 1、選擇器分類
     - 萬用字元選擇器：*
     - 標籤選擇器：div
     - class屬性選擇器：.box
     - id屬性選擇器：#app
     - 群組選擇器：div,span
     - 後代選擇器：div span
     - 子代選擇器：div>span
     - 偽類選擇器：span:hover
 -->
<div class="box" id="app">
    <span>這是一段中文</span>
</div>

3、選擇器的權重

* 選擇器的權重
    - 標籤選擇器：1
    - class屬性選擇器：10
    - id屬性選擇器：100
    - 包含選擇器：選擇器權重之和
    - 內聯樣式：1000
    - !important：10000
* 優先順序
    - 權重不同：高權重選擇器 > 低權重選擇器
    - 權重相同：後面的樣式 > 前面的樣式

4、文字屬性

屬性	描述	說明
font-size	字型大小	瀏覽器預設16px
font-family	字型	字型中有空格，需加雙引號。字型以逗號分隔，按從左往右順序解析，直到有字型
color	顏色	red #ff0000 rgb(255,0,0)
font-weight	加粗	bolder bold normal lighter 100-900
font-style	傾斜	italic：傾斜 oblique：更傾斜 normal
text-align	文字水平對齊	left right center justify：兩端對齊，多行起作用，英文效果明顯
line-height	行高	line-height=height：文字垂直居中
text-indent	首行縮排	只對第一行起作用
letter-spacing	字間距	英文單詞間距使用word-spacing屬性
text-decoration	文字修飾	none underline overline line-through 可多值同時設定
text-transform	文字變換	capitalize：英文首字母大寫 uppercase lowercase none
font	文字簡寫	font: font-style? font-weight? font-size/line-height? font-family; 順序固定

5、列表屬性

屬性	描述	說明
list-style-type	定義列表符合樣式	disc circle square none
list-style-image	將圖片設定為列表符合樣式	url("")
list-style-position	設定列表項標記的放置位置	outside：預設值 inside
list-style	簡寫	list-style: list-style-type? list-style-image? list-style-position?; none：去除列表符號

6、背景屬性

屬性	描述	說明
background-color	背景顏色	red #ff0000 rgb(255,0,0)
background-image	背景圖片	url("")
background-repeat	背景圖片的平鋪	no-repeat repeat repeat-x repeat-y
background-position	背景圖片的定位	background-position: 水平位置垂直位置;
background-attachment	背景圖片的固定	scroll：隨元素滾動 fixed：相對瀏覽器視窗固定（視覺差案例）
background	簡寫	background: background-color? background-image? background-repeat? background-position? background-attachment?; 未取值的會取預設值，要注意放後面會覆蓋前面的值
background-size	背景圖片的尺寸	px、百分比 cover：寬高比例不變，元素覆蓋 contain：寬高比例不變，元素留白

7、浮動屬性

float

* 可取值：left、right、none
* 作用：
    - 使文字圍繞該元素顯示
    - 豎排列變橫排列
* 橫排列原則（B元素的上一個元素是A元素，B是浮動的）：
    - A不是浮動的，則B在A的下面
    - A也是浮動的，則B在A的後面，一行放不下則會擠到下一行，擠到下一行的B頂部與A底部對齊

clear

* 可取值：left、right、both、none
* 清楚浮動原則：
    - float元素會脫離文件流，所以在父元素中不會佔據高度
    - 清除浮動只改變元素自身的排列方式（換行，頂部與已排列最高元素的底部對齊）
* 浮動塌陷問題解決方式
    - 浮動元素後面補一個塊元素設定clear: both;
    - overflow: hidden;bfc方式讓浮動元素計算高度

8、盒子模型

padding

* padding取值方式
    - 一個值：上下左右
    - 兩個值：上下 左右
    - 三個值：上 左右 下
    - 四個值：上 右 下 左
* 單一方向取值：padding-top、padding-right、padding-bottom、padding-left
* 背景會蔓延到內邊距

border

屬性	描述	說明
border-width	邊框寬度	可以一個值、兩個值、三個值、四個值
border-color	邊框顏色	可以一個值、兩個值、三個值、四個值
border-style	邊框風格	可以一個值、兩個值、三個值、四個值可取值：solid、double、dashed、dotted
border	簡寫	border: border-width? border-color? border-style; 單一方向取值：border-top、border-right、border-bottom、border-left 背景會蔓延到邊框

margin

* margin取值方式
    - 一個值：上下左右
    - 兩個值：上下 左右
    - 三個值：上 左右 下
    - 四個值：上 右 下 左
* 單一方向取值：margin-top、margin-right、margin-bottom、margin-left
* 背景不會蔓延到外邊距
* 支援取負值
* 水平居中：margin: 0 auto;
* 特性問題
    + 盒子是兄弟關係
        - 垂直方向：取相鄰外邊距最大值
        - 水平方向：取相鄰外邊距之和
    + 盒子是父子關係
        - 垂直方向：子盒子外邊距會傳遞給父盒子。解決方式：
            ~ 父盒子：border: 1px solid transparent;
            ~ 父盒子或子盒子：float: left;
            ~ 父盒子：overflow: hidden;
        - 水平方向：子盒子外邊距不會傳遞給父盒子

9、溢位屬性

overflow

* 可取值：
    - visible：預設值，溢位顯示
    - hidden：溢位隱藏
    - scroll：滾動
    - auto：溢位滾動
    - inherit：繼承父元素
* Y軸溢位滾動，X軸溢位隱藏：overflow-y: auto;overflow-x: hidden;

white-space

* 可取值：
    - normal：預設值
    - nowrap：文字不換行，直到遇到<br/>
    - pre：顯示空格，顯示回車，不自動換行（<pre></pre>：預格式化文字標籤）
    - pre-wrap：顯示空格，顯示回車，自動換行
    - pre-line：不顯示空格，顯示回車，自動換行
    - inherit：

text-overflow

* 可取值：
    - clip：預設值
    - ellipsis：顯示省略號
* 文字溢位顯示省略號：width: ;overflow: hidden;white-space: nowrap;
  text-overflow: ellipsis;

10、元素顯示型別

分類	特性	舉例	display
塊元素	縱向排列可以設定寬高 p元素不可以作為塊級元素的容器	div、p、ul-li、ol-li、dl-dt-dd、h1~h6	block、list-item
行內元素	橫向排列不可以設定寬高盒子模型：左右支援，上下不支援	a、b、em、i、span、strong	inline
行內塊元素	橫向排列可以設定寬高	img、input	inline-block
隱藏元素	不顯示且脫離文件流	所有	none

11、定位

position

* 可取值：
    - static：預設值
    - absolute：絕對定位，脫離文件流。相對於定位的父元素位置，沒有定位的父元素則相對於body元素位置
    - relative：相對定位。相對於自身的初始位置
    - fixed：固定定位，脫離文件流。相對於瀏覽器視窗位置
    - sticky：粘性定位。可以做吸頂效果
* 配合屬性：
    - top：px、百分比
    - right：px、百分比
    - bottom：px、百分比
    - left：px、百分比
* 行內元素轉塊元素：
    - display: block;
    - float: left;
    - position: absolute;

z-index

* 兄弟元素層級優先順序
    - 定位元素與未定位元素之間，z-index大於等於0，則定位元素層級高於未定位元素，否則反之
    - 定位元素與定位元素之間，z-index數值越大層級越高。z-index可取負值
    - 定位元素與定位元素之間，z-index數值相同，後面元素的層級高於前面元素
* 父子定位元素層級優先順序
    - 子定位元素z-index小於0，則父定位元素層級高於子定位元素