HTML & CSS上課筆記
概述
定義
Hyper Text Markup language超文字標記語言，用於描述頁面結構的語言
Cascading Style Sheets層疊式樣式表，用於描述頁面長什麼樣子
學習態度
- 心態平和
- 多練習
- 不要你以為懂了，就可以不練習，這是IT領域常常出現的幻覺
一些術語
- web ---> 網際網路
- w3c ---> 全球資訊網聯盟，非盈利性的組織，為網際網路提供各種標準
- XML ---> 可擴充套件的標記語言，Extension Markup Language，用來定義文件結構，相對於HTML而言，他可以自定義標籤
- MDN ---> 可以查一些資料，官方定義和解釋
瀏覽器
包括：
- shell：外殼
- core：核心 ---> (渲染引擎，js引擎，其他模組)
主流瀏覽器
| 主流瀏覽器 | 核心 |
|---|---|
| IE | trident |
| Firefox | Gecko |
| Google chrome | Webkit(谷歌和蘋果聯合開發的)/blink(與蘋果公司分歧後，自己研發的) |
| Safari | Webkit |
| Opera | presto(以前)/blink(現在) |
HTML核心1
基礎知識
讀者可以自己去看html5元素週期表
元素（也就是常說的標籤） = 起始標記 + 結束標記 + 元素內容 + 元素屬性
屬性 = 屬性名 + 屬性值
屬性的分類：
- 區域性屬性：某些元素特有
- 全域性屬性：每個元素都有
有些元素沒有結束標記，這樣的元素叫做：空元素
空元素的寫法有兩種：
-
<img src="">html5 -
<img src="" />以前的寫法
元素的關係：
- 父元素（爸爸）
- 子元素（兒子）
- 祖先元素（爹）
- 子孫元素（孫子）
- 兄弟元素（哥哥姐姐弟弟妹妹）
<!DOCTYPE html> 文件宣告，告訴瀏覽器，當前瀏覽器使用的HTML的標準是5；不寫的話，將導致瀏覽器進入怪異渲染模式，可能顯示不正常 <html lang="en"> 根元素，一個頁面只有一個，並且該元素是所有元素的父元素或祖先元素，HTML5中沒有強制寫這個元素 lang="en"表示language，全域性屬性，表示該元素內部的文字是使用哪一種自然語言書寫的 lang="cmn-hans"表示中國官方語言，簡體（simple）漢語（han）/也可以這麼寫lang=“zh-CN”但是已經過時了 <head>文件頭部，不會顯示在頁面上 meta元素表示文件的元資料：附加屬性 <meta charset="UTF-8">charset 是區域性屬性，告訴網頁用的是哪一個字元編碼表，也就是UTF-8,相當於一個字典 比如說中國使用的是GB2312，臺灣是GBK UTF-8是Unicode的一個版本，也就是萬國碼，包含所有的語言 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 適配手機端的 <title>Document</title> 表示的是網頁標題 </head> <body> 文件體 </body> </html>
語義化
每個元素都有本身的含義
- a元素：連結（當然還有別的作用，但是用的最多的是連結）
- p元素：段落
- h1：一級標題
元素與展示效果無關
-
元素展示到頁面上應該由css來控制
-
因為瀏覽器帶有預設的css樣式，所以每個元素都有一些預設的樣式
-
比如你寫h1的時候，裡面的內容就會顯示很大，並且加粗，這些都是css控制的，可以改的
-
重要：選擇什麼元素，取決於內容的含義，而不是展示的效果**
為什麼要語義化
為了優化搜尋引擎（SEO）
搜尋引擎比如：百度，Google，bing，等等，每隔一段時間，搜尋引擎會從整個網際網路中，抓取頁面的原始碼。
為了讓瀏覽器理解網頁
比如說：閱讀模式，語音模式
文字元素
h元素
標題：head
有六個：h1~h6
p元素
段落：paragraph
亂數假文，沒有任何實際意思的文字，使用lorem觸發
span元素
官方解釋：無語義的容器
以前：有些元素會獨佔一行（塊級元素），有些元素不會（行級元素）
但是現在，在html5中，已經放棄這種叫法了,mdn中的原話:
HTML 標準中塊級元素和行內元素的區別至高出現在 4.01 標準中。在 HTML5，這種區別被一個更復雜的內容類別代替。”塊級“類別大致相當於 HTML5 中的流內容類別，而”行內“類別相當於 HTML5 中的措辭內容類別，不過除了這兩個還有其他類別。
pre元素
預格式化文字元素
空白摺疊：在原始碼中的連續空白字元（空格，換行，製表符,等等），在頁面顯示的時候，會被摺疊為一個空格
在pre元素中的內容不會觸發空白摺疊，也就是說pre元素中的內容會按照原始碼的形式顯示在頁面上
該元素通常用於在網頁中顯示原始碼
pre元素的本質：他有一個預設的css樣式（white-space:pre;）
顯示程式碼的時候，通常套在code元素的裡面，code表示程式碼區域
html實體
實體字元：HTML Entity
實體字元通常用於在頁面中顯示一些特殊的字元，因為有些單詞或者字母是由特殊含義，不能直接在頁面中顯示，實體字元的寫法有兩種方式：
- &單詞;
- &#數字;
一般使用第一種方式。
常用的：
- 小於號<：& l t ;(由於markdown會識別，所以我寫的時候中間加了空格，實踐上是沒有的，希望不要帶來誤解)
- 大於號>：& g t ;(和上面一樣)
- 空格：& n b s p ;(non-breaking space 因為普通的元素的內容會觸發空白摺疊，所以如果當你想要輸出多個空格的時候，就要用到這個)
- &符號：& a m p ;
a元素
超連結
href：hyper reference：通常表示跳轉地址
<a href=""></a>
用途：
-
跳轉地址（跳到這個頁面之外）
<a href="https://www.baidu.com">百度一下</a> -
跳轉到某個錨點（在這個頁面進行跳轉）
這是很常見的，比如說“點選回到頂部”，還有一些目錄，可以點選到那個位置
id屬性：是一個全域性屬性，是元素在文件中的唯一標識
<a href="#chapter">章節二</a> <p id="chapter"></p> -
功能連結
點選觸發某個功能
-
執行js程式碼
<a href="javascript:alert('你好！')">點選彈出你好</a> -
傳送郵件
<a href="mailto:[email protected]">點擊發送郵件</a> -
打電話
<a href="tel:12345678912">點選打電話</a>
-
a元素裡面還有一個屬性，target，控制開啟的頁面的視窗位置
如果你將前面的程式碼運行了，你就會發現每次跳轉都是在當前的視窗，也就是覆蓋了之前的內容，這個其實就是target控制的
現在只講兩種屬性:
<a href="" target="_self"></a>這個是預設的，也就是在當前頁面內開啟，覆蓋當前頁面
<a href="" target="_blank"></a>這個就是在新視窗開啟
路徑的寫法
首先你要了解站內資源和站外資源。
-
站內資源：當前網站的資源
-
站外資源：非當前網站的資源
第二個你要了解兩種路徑：絕對路徑和相對路徑。站內資源可以使用絕對路徑，也可以使用相對路徑；但是站外資源只能使用絕對路徑。
絕對路徑的寫法：
協議://主機名:埠號/路徑
schema://host:port/path
協議名有很多，比如：http，https，file等等
主機名：域名或者IP地址
埠號：如果協議是http，那麼預設的埠號是80；如果協議是https，預設的埠號是443.可以省略。
當跳轉地址和當前地址的協議名是一樣的時候，可以省略協議名
相對路徑的寫法：
以./開頭，./表示當前資源所在的目錄；../表示返回上一級目錄。
相對路徑中./可以省略
圖片
<img src="https://wx1.sbimg.cn/2020/07/04/2lICV.jpg" alt="李一桐女神" title="好看嗎">//應用站外資源
<img src="img/2lICV.jpg" alt="李一桐女神" title="好看嗎">//引用站內資源
alt屬性：當圖片資源失效時，就會使用該屬性的文字代替圖片顯示
與a元素一起使用
<a href="https://baike.baidu.com/item/%E6%9D%8E%E4%B8%80%E6%A1%90/19299474?fr=aladdin">
<img src="https://wx1.sbimg.cn/2020/07/04/2lICV.jpg" alt="李一桐女神" title="好看嗎">
</a>
與map元素一起使用
<a href="https://baike.baidu.com/item/%E6%9D%8E%E4%B8%80%E6%A1%90/19299474?fr=aladdin">
<img usemap="#liyitong" src="https://wx1.sbimg.cn/2020/07/04/2lICV.jpg" alt="李一桐女神" title="好看嗎">
</a>
<map name="liyitong">
<area shape="circle" coords="360,204,48" href="https://www.baidu.com" alt="">
<area shape="rect" coords="140,37,623,74" href="https://www.baidu.com" alt="">
<area shape="poly" coords="601,371,123,456,123,159" href="https://www.baidu.com" alt="">
</map>
網頁中的座標原點是左上角，向右x增加，向下y增加
map元素，特定的區域點選觸發效果。circle是圓形，360，204是圓心的座標，48是半徑，單位是畫素；rect是矩形，140，37是左上角座標，623，74是右下角座標；poly是多邊形，需要依次寫出每個點的座標。
這裡可以使用qq截圖來進行測量距離，但是你如果用的是筆記本，你開啟設定，會發現這個
就是說預設是放大了，這樣用qq截圖的時候，就不是很準。那麼這個時候，你要麼把它調成100%，要麼使用一些專業的測量工具， 比如ps，pxcook。
與figure元素一起使用
指代，定義，通常用於把圖片，圖片標題，描述包裹起來
子元素：figcaption
多媒體元素
分為video和audio，也就是視訊和音訊。
video
<video controls="controls" src="video/1.mp4"></video>
這裡面有個屬性，controls，取值只能為controls
這裡再拓展一下，某些屬性的取值只有兩種，第一種是不寫，也就是不適用這個屬性；第二種是取值為屬性名，比如上面的controls。這種屬性叫做布林屬性。
而且在HTML5中，這種屬性可以不寫屬性值。如下面所示：
<video controls src="video/1.mp4"></video>
還有一個屬性，也是布林屬性，autoplay：自動播放
但是這裡要說的是，有些瀏覽器不允許自動播放，據說是怕嚇到使用者（你開啟一個網頁，然後突然有聲音出來了，可能會嚇到使用者）那麼這個時候就要用到另外的一個屬性，muted：靜音播放。muted也是一個布林屬性。
<video controls muted src="video/1.mp4"></video>
還有一個屬性，loop，也是一個布林屬性，迴圈播放。
audio
和視訊完全一致。參考上面
這裡講一下相容性的問題
- 舊版本的瀏覽器不支援這兩個元素
- 不同的瀏覽器支援的音視訊格式可能不一樣
視訊有兩種，mp4 或者webm，音訊就只有一種mp3。所以一般開發的時候是這麼寫的：
<video controls autoplay muted loop>
<source src="1.mp4"> \
<source src="1.webm">
<p>
對不起，您的瀏覽器不支援該video元素，請點選這裡下載最新版本的瀏覽器
</p>
</video>
如果瀏覽器不支援mp4 ，就會執行下面的webm，如果兩種都不支援，就會輸出下面的那句話。
列表元素
分為有序列表和無序列表
有序列表
ol : ordered list
li : list item
這裡面有個屬性，type，有五種取值：
- a 表示小寫英文字母編號
- A表示大寫英文字母編號
- i 表示小寫羅馬數字編號
- I 表示大寫羅馬數字編號
- 1 表示數字編號（預設）
<ol type="1">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
Note: 這個屬性在 HTML4中棄用，但是在 HTML5 中被重新引入。除非列表中序號很重要（比如，在法律或者技術檔案中條目通常被需要所引用），否則請使用 CSS
list-style-type屬性替代。
其實還有一個屬性，reversed，也就是倒序顯示。是一個布林屬性。
<ol type="1" reversed>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
無序列表
ul : unordered list
和有序列表一樣，只需要將ol改成ul即可。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
無序列表常用於製作選單 和 新聞列表
定義列表
通常用於一些術語的定義
dl : definition list
有兩種屬性：
- dt : definition title
- dd : definition description
<dl>
<dt>HTML</dt>
<dd>
超文字標記語言
</dd>
<dt>元素</dt>
<dd>
組成HTML的部分,xxxxxxx
</dd>
</dl>
容器元素
很重要！
該元素代表一個區域，內部用於放置其他的元素
div元素
沒有語義，沒有任何的預設的樣式。
那麼這個就是和語義化是相反的，所以在HTML5中新加了很多語義化容器元素
語義化容器元素
header元素
通常用於表示頁頭，也可以用於表示文章的頭部
HTML
<header>元素用於展示介紹性內容，通常包含一組介紹性的或是輔助導航的實用元素。它可能包含一些標題元素，但也可能包含其他元素，比如 Logo、搜尋框、作者名稱，等等。
footer元素
通常用於表示頁尾，也可以用於表示文章的尾部
HTML
article元素
通常用於表示整篇文章，也就是文章正文
HTML
<article>元素表示文件、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可複用的結構，如在釋出中，它可能是論壇帖子、雜誌或新聞文章、部落格、使用者提交的評論、互動式元件，或者其他獨立的內容專案。
section元素
通常用於表示文章的章節
HTML
元素表示一個包含在HTML文件中的獨立部分，它沒有更具體的語義元素來表示，一般來說會有包含一個標題。
aside元素
通常用於表示側邊欄
HTML
<aside>元素表示一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響。其通常表現為側邊欄或者標註框（call-out boxes）。
元素包含關係
以前： 塊級元素可以包含行級元素，行級元素不可以包含塊級元素，a元素除外
現在的元素包含關係非常複雜，元素的包含關係是由元素的內容類別決定。這些包含關係可以上MDN 上查
一般的話，你記住下面的關鍵點，是不會出錯的，如果真的錯了，你就上mdn上查。
關鍵點：
- 容器元素可以包含任何元素
- a元素幾乎可以包含任何元素
- 某些元素有固定的子元素（ul>li ol>li dl>dt,dd）
- 標題元素和段落元素不能相互巢狀，並且不能包含容器元素
CSS基礎1
為網頁新增樣式
h1{
color: red;
background-color: lightblue;
text-align: center;
}
這樣的一個形式就叫做CSS規則
CSS規則： 選擇器 + 宣告塊
選擇器
元素選擇器
p{
color: red;
}
比如說這個，可以選擇文件中所有的同名元素
id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#test{ //先寫上一個井號，然後寫id名
color: red;
}
</style>
</head>
<body>
<p id="test">你好</p>
<p>你好</p>
</body>
</html>
比如說這個，選中的是第一個p元素，將“你好”修改成紅色。
類選擇器（最常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test{ //先寫上一個英文的句號，然後寫類名
color: red;
}
</style>
</head>
<body>
<p class="test">你好</p>
</body>
</html>
當有多個class的時候，你可以這樣寫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.test{
color: red;
}
.big{
font-size: 3em;
text-align : center;
}
</style>
</head>
<body>
<p class="test big">你好</p>
</body>
</html>
宣告塊
也就是上面的打括號裡面的內容
宣告塊中包含很多的宣告（屬性），每一個宣告（屬性）表達了某一個方面的樣式，而每一個宣告（屬性）又包括屬性名和屬性值。如上面的color: red; 以屬性名開頭，以分號結尾。
CSS程式碼書寫位置
內部樣式表
書寫在style中，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
書寫在這裡
</style>
</head>
<body>
</body>
</html>
內聯樣式表
<p style="color:red;background-color: lightblue;text-align:center;">你好</p>
直接書寫在元素的style中
外部樣式表（這是以後做開發，用的最多的方式）
也就是將樣式寫在單獨的檔案裡面，檔案的字尾名為.css,如圖：
那麼現在讀者可能在想，怎樣才能讓html的檔案使用這個樣式表呢？
只需要在html檔案中的頭部加入link這個元素，注意，這個元素是個空元素，裡面的地址寫法參考前面的路勁寫法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<p class="test">你好</p>
</body>
</html>
裡面的rel="stylesheet"表示連結的型別，是一個樣式表。所以你應該可以想到，link元素不僅可以連線css檔案，這裡不多說。
為什麼推薦使用外部樣式表
- 外部樣式可以解決多頁面樣式重複的問題
- 有利於瀏覽器快取，提高頁面的載入速度
- 程式碼分離，有利於閱讀和後期的維護
常見的樣式宣告
color
元素內部的文字顏色，有多種方式：
預設值：已經設定好的單詞，比如說red，blue等等
三原色，色值：光學三原色（紅，綠，藍），每個顏色可以使用0~255之間的數字來表達，有兩種書寫方式：
第一種rgb法：
color:rgb(0~255,0~255,0~255);
其中r代表red，g代表green，b代表blue。
其實還有一種方式：
color:rgba(0~255,0~255,0~255,0~1);
a代表是透明度，比如說0.1。
第二種方式，hex（16進位制）表示法：
color:#008c8c;
每兩個數字代表色值，依次是紅，綠，藍，最小為00，最大為ff
而且當三對數字中兩個數字相同的時候，可以寫成一個，比如#00ffcc;可以寫成#0fc;
一些常見的顏色：
淘寶紅：#ff4400(#f40)
黑色：#000000(#000)
白色：#ffffff(#fff)
紅色：#ff0000(#f00)
綠色：#00ff00(#0f0)
藍色：#0000ff(#00f)
紫色：#ff00ff(#fof)
青色：#00ffff(#0ff)
黃色：#ffff00(#ffo)
灰色：#cccccc(#ccc)
background-color
元素背景顏色
font-size
元素內部文字的大小
有兩種單位：
- px,是一個絕對單位，可以簡單地理解成文字所佔高度的畫素
- em,是一個相對單位，相對於父元素的字型大小（也就是父元素的多少倍）
每個元素都必須有字型大小，如果沒有設定字型大小，那麼就要繼承父元素的字型大小，如果父元素也沒有，就繼續向上繼承，如果沒有父元素，則使用基準字號
基準字號就是瀏覽器的設定裡面的字型大小
font-weight
文字的粗細程度，取值可以為數字，也可以為預設值
strong和em元素預設是加粗
預設值
- normal（預設），也就是正常的字型，相當於數字值400
- bold，粗體，相當於數字值700
- bolder，定義比繼承值更重的值
- lighter,定義比繼承值更輕的值
數字值
取值範圍：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-family
文字型別，簡單點說就是我們常說的字型
另外，你的計算機中必須有你設定的字型，這樣才會生效
基於這一點，就出現了下面這種寫法：
font-family:arial,consolas,微軟雅黑
如果使用者電腦中沒有第一種字型，就會向後匹配，知道匹配到為止。
font-family:arial,consolas,微軟雅黑,sans-serif
其實用的最多的是這種，也就是在最後面加上一個sans-serif：表示非襯線字型，也就是文字的邊緣沒有修飾，一般的電腦裡面都有一種非襯線字型。這麼寫也是為了匹配大眾。對應的還有襯線字型，也就是文字的邊緣加了修飾，比如宋體
font-style
字型樣式，通常用它來設定斜體
em元素和i元素，預設的樣式是斜體；但是在使用過程中，通常用它來表示一個圖示（icon）
取值：
normal： 指定文字字型樣式為正常的字型
italic： 指定文字字型樣式為斜體。對於沒有設計斜體的特殊字型，如果要使用斜體外觀將應用oblique
oblique： 指定文字字型樣式為傾斜的字型。人為的使文字傾斜，而不是去選取字型中的斜體字
text-decoration
這裡麵包括text-decoration-line，text-decoration-style，text-decoration-color，我們這裡講的是第一個。
文字修飾，簡單點就是給文字加線
a元素，預設加了下劃線
del元素，表示錯誤的內容，預設加了中劃線
s元素，表示過期的內容，也是預設加了中劃線
取值：
none： 指定文字無裝飾
underline： 指定文字的裝飾是下劃線
overline： 指定文字的裝飾是上劃線
line-through： 指定文字的裝飾是貫穿線
blink： 指定文字的裝飾是閃爍。
text-indent
首行文字縮排，單位可以實px，也可以是em
line-height
每行文字的高度，也就是我們常說的行高，這個值越大，每行文字的距離越大
設定行高為容器的高度，可以讓單行文字垂直居中
行高可以設定為純數字值，表示相對於當前元素的字型大小
width
寬度，單位是px
height
高度，單位是px
letter-spacing
表示文字間隙，單位可以是px，也可以是em
text-align
元素內部文字的水平排列方式。
常用的三個：
left： 內容左對齊。
center： 內容居中對齊。
right： 內容右對齊。
選擇器
選擇器可以幫你精準的選中你想選中的元素
簡單選擇器
ID選擇器
元素選擇器
類選擇器
以上三個在前面已經講過（為網頁新增樣式），所以這裡就不再講了
萬用字元選擇器
*{
xxxxx:xxxxxx;
}
這個選中的是所有的元素，也就是說這裡面的內容對所有的元素都有效
屬性選擇器
這個是根據屬性名和屬性值來選擇元素
選中所有具有href屬性的元素
[href]{
xxxxx:xxxxx;
}
選中所有屬性href的屬性值為https://www.baidu.com的元素
[href="https://www.baidu.com"]{
xxxxx:xxxxx;
}
當然這個用法還有很多，讀者可以自己去查mdn 屬性選擇器
偽類選擇器
選中某些元素的某些狀態，寫法是加一個冒號
-
hover
表示滑鼠懸停在上面會發生什麼變化
這樣寫選中的所有的元素 :hover{ xxxxx:xxxxx; } 這樣寫選中的就是a元素 a:hover{ xxxxx:xxxxx; } -
active
啟用狀態，也就是當滑鼠按下的時候會發生什麼變化
:active{ xxxxx:xxxxx; } -
link
超連結未被訪問時的狀態
-
visited
超連結被訪問過的狀態
當然還有很多，讀者可以自己去查偽類選擇器 mdn
（別名）愛恨法則：love ，hate
如果你全部都要寫，那麼就要遵循一定的順序，link,visited,hover,active，以這樣的順序來寫。
偽元素選擇器
生成並選中某個元素內部的第一個子元素或者最後一個子元素，寫法是加兩個冒號
目前的話，只講兩個
-
before
意思是在span元素最前面生成一個沒有名字的子元素
span::before{ content:"《";//裡面有個屬性為content，意思是加一個文字 } -
after
意思是在審判元素最後面生成一個沒有名字的子元素
span::after{ content:"》"; }
選擇器的組合
並且
多個選擇器連一起寫，中間不加任何東西
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque ex quia doloribus quae amet ea.</p>
<p class="red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum suscipit iure ea at harum assumenda.</p>
p{
text-indent:2em;//選中的是所有的p元素
}
p.red{
color:red;//選中的是類名為red的p元素
}
後代（用的非常多）
多個選擇器連在一起寫，中間加空格
<div>
<ul>
<li>Lorem.</li>
<li>Quam.</li>
<li>Porro!</li>
<li>Consequatur!</li>
</ul>
</div>
div ul li{
color:red;
}
子元素
多個選擇器連在一起寫，中間加>
<div class="abc">
<p class="red"></p>
</div>
.abc>.red{
color:red;
}
相鄰兄弟元素
多個選擇器寫在一起，中間加+
選擇的是之後的一個兄弟元素
<div class="abc">
<p>你好</p>
<p class="red">你好</p>
<p>你好</p>
</div>
.abc .red+p{
color:red;
}
選中的是最後一個p元素
兄弟元素
多個選擇器寫在一起，中間加~
<div class="abc">
<p>你好</p>
<p class="red">你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
</div>
.abc .red~p{
color:red;
}
選中的是後面所有的兄弟元素
選擇器的並列
多個選擇器，中間用逗號隔開
一般在程式碼有重複的時候使用
.red{
color:red;
}
p{
color:red;
font-size: 10px;
}
可以寫成
.red,p{
color:red;
}
p{
font-size: 10px;
}
層疊
我們知道css叫做層疊樣式表，那麼現在我們就來說明什麼叫做層疊
在說明這個之前，我們首先要了解的是宣告衝突
宣告衝突：同一個樣式，多次引用到同一個元素裡面
層疊：解決宣告衝突的過程，是瀏覽器自動完成的（權重計算）
那麼現在我們就要了解這個過程，有三種比較方式，最後只有一種能勝出，比較順序如下：
比較重要性
作者樣式表：開發者書寫的樣式
重要性從高到低：
-
作者樣式表中的!important樣式，如：
color:red;!important -
作者樣式表中的普通樣式
-
瀏覽器預設樣式表中的樣式
比較特殊性
當比較重要性不能比較出來的時候，就是用這個
依據就是看選擇器
總體規則：選擇器選中的範圍越窄，越特殊
具體規則：通過選擇器，計算出一個四位數（xxxx）
千位：如果為內聯樣式（行間樣式），千位為1；否則為0
百位：等於選擇器中所有id選擇器的數量
十位：等於選擇器中所有的類選擇器，屬性選擇器，偽類選擇器的數量
個位：等於選擇其中所有元素選擇器，偽元素選擇器的數量
注意：這個四位數是256進位制
| 選擇器 | 權重值（256進位制） |
|---|---|
| !important | Infinity |
| 行間樣式（內聯樣式） | 1000 |
| id選擇器 | 100 |
| 類選擇器/屬性選擇器/偽類選擇器 | 10 |
| 元素選擇器/偽元素選擇器 | 1 |
| 萬用字元 | 0 |
比較源次序
如果上面的還是不能比較出來，就要用到最後一個了，也就是比較原始碼的次序
程式碼書寫靠後的勝出
應用
重置樣式表
書寫作者樣式表，覆蓋瀏覽器的預設樣式表（因為不同的瀏覽器的預設樣式表不一樣）
常見的重疊樣式表：normalize.css，reset.css，meyer.css
愛恨法則
為什麼要按照順序寫，也就是這樣link>visited>hover>active
這是出於人們的需求，利用了層疊的知識
繼承
子元素會繼承父元素的某些css屬性
通常，和文字相關的屬性都能被繼承
所以一般字型相關的設定再body裡面
body{
font: italic 1.2em "Fira Sans", serif;
}
屬性值的計算過程
瀏覽器渲染一個頁面，是一個元素一個元素依次渲染，順序按照頁面的樹形目錄結構進行
渲染每個元素的前提條件是：該元素的所有css屬性必須有值
一個元素，從所有的屬性沒有值，到所有的屬性都有值，這個過程就叫做css屬性值計算過程。這個過程有四個步驟：
-
確定宣告值
參考樣式表中沒有衝突的宣告，作為css屬性值
-
層疊衝突
對樣式表中有宣告衝突的使用層疊規則，確定css屬性
-
使用繼承
對仍然沒有值的屬性，若可以使用繼承，則繼承父元素的值
-
使用預設值
對仍然沒有值的屬性，使用預設值（因為每一個css屬性都有一個預設值）
下面出個題：問你這兩段文字分別是什麼顏色？
div{
color:red;
}
<div>
<a href="">
舉個例子
</a>
<p>
舉個例子
</p>
</div>
原因：這裡就要用到剛才學的知識，a元素是有宣告的（本來要上傳截圖的，但是他說圖片違規了，我笑了），既然上傳不了，讀者可以自己在電腦上看，按照上面的順序，如果有宣告，就不會用到繼承，所以第一段文字不是紅色。然後看p元素，它是沒有宣告的，也不會發生層疊，所以他會用到繼承，所以第二段文字是紅色。這也就是為什麼a元素不繼承
特殊的兩個css取值：
inherit//強制繼承，可以解決上面的問題
initial//初始值，將該屬性的值設定為預設值
盒模型
每個元素再頁面中都會生成一個矩形區域，這個區域就叫做盒子
盒子模型：
- 行盒：display屬性值為inline的元素
- 塊盒：display屬性值為block的元素
行盒在頁面中不換行，塊盒獨佔一行
display預設值為inline
行盒display屬性預設是inline，塊盒預設是block，但是是可以改的，畢竟它只是一個css屬性
預設的塊盒：容器元素，h1~h6，p元素
預設的行盒：span，img，a，video，audio
盒子的組成部分
無論是行盒還是塊盒，都具有以下的組成部分，從內到外分別是：
-
內容 content
width，height設定的是盒子內容的寬高
內容部分通常叫做整個盒子的內容盒
-
填充（內邊距） padding
盒子邊框到盒子內容的距離，有四個值：
padding-left,pading-right,padding-top,padding-bottom
可以簡寫：padding:xxxx;可以同時設定多個值
數字個數 意思 一個值 代表四個方向 兩個值 代表上下 左右 三個值 代表上 左右 下 四個值 代表上 右 下 左 填充區 + 內容區 = 填充盒 padding-box
-
邊框 border
邊框包含三個屬性，邊框寬度（border-width），邊框樣式（border-style），邊框顏色（border-color）
邊框有四個方向
預設情況下，border-width為0，border-style為none，border-color預設是字型的顏色。
border-style有很多的取值，讀者可以自行檢視取值
速寫：border:寬度 樣式 顏色
邊框 + 填充區 + 內容 = 邊框盒 border-box
-
外邊距 margin
邊框到其他盒子的距離，有四個方向，取值同padding
盒模型的應用
改變寬高範圍
預設情況下，（寬度）width，（高度）height設定的是內容盒寬高
頁面重構師 將psd檔案（也就是設計稿）製作成為靜態頁面
衡量設計稿尺寸的時候，往往使用的是邊框盒，而width和height設定的是內容盒的寬高，有兩種解決方法：
-
精確計算
也就是自己根據設計稿算出來內容盒的高度和寬度
-
CSS3
CSS3中有一個屬性：box-sizing(設定寬高時，設定的是哪一個部分的寬高)
有兩個取值，border-box和content-box（預設值）
改變背景覆蓋範圍
div{
width:100px;
height:100px;
background-color:#008c8c;
padding:30px;
border:5px dashed red;
}
<div>
</div>
讀者可以試著執行一下，你會發現背景覆蓋的範圍是邊框盒
可以通過background-clip來改變，有三個值，border-box（預設值），padding-box，content-box
溢位處理
如果沒有設定寬高，盒子的大小是會隨著內容兒改變的，也就是內容是不會溢位的，但是如果人為的設定了寬高，盒子太小了，就會溢位，但是溢位的內容是可以看到的，比如這樣：
有個屬性：overflow，又來處理溢位的內容，有四個值：
-
visible
預設值，也就是溢位可見的
-
hidden
溢位隱藏
-
scroll
加一個滾動條
-
auto
需要的時候（也就是溢位的時候）加滾動條
當然這是一個速寫屬性，具體的可以單獨設定x和y軸，overflow-x,overflow-y
斷詞規則
word-break，這是一個css屬性，它影響文字在什麼位置被截斷（通俗一點就是，比如說上面那個溢位圖，為什麼要在那些地方換行）
取值：
-
normal
普通，CJK（也就是中國，日本，韓國）字元在文字處截斷，非CJK字元（在單詞處截斷）
-
break-all
截斷所有。所有的字元都在文字處截斷
-
keep-all
保持所有。所有的字元都在單詞處截斷
空白處理
有個屬性：white-space，它有一個值為nowrap。表示當容器不夠時，不換行
還有一個屬性：text-overflow，它有一個值為ellipsis，表示當容器不夠時，最後用三個小圓點表示
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
這是個三件套，效果就是：
當文字寫不下的時候，有三個小圓點表示
行盒的盒模型
常見的行盒：包含具體內容的元素
比如：span，strong，i，img，video，audio
顯著的特點
-
盒子沿著內容延申
-
行盒不能設定寬高
所以你只能通過字型大小，行高，字型型別間接調整
-
內邊距
水平方向上有效，垂直方向上不會實際佔據空間
-
邊距
水平方向上有效，垂直方向上不會實際佔據空間
-
外邊距
水平方向上有效，垂直方向上不會實際佔據空間
行塊盒
display:inline-block
- 不獨佔一行
- 盒模型中所有的尺寸都有效
空白摺疊發生在行盒（行塊盒）內部或者行盒（行塊盒）之間
可替換元素和非可替換元素
大部分元素，頁面上顯示的結果，取決於元素內容，稱為非可替換元素
少部分元素，頁面上顯示的結果，取決於元素屬性，稱為可替換元素
可替換元素：img，video，audio
絕大部分的可替換元素為行盒
可替換元素類似於行塊盒，盒模型中所有尺寸均有效
另外，這裡講到一個屬性，object-fit，它有五種取值：
-
contain
被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個物件在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該物件將被新增“黑邊”。
-
cover
被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果物件的寬高比與內容框不相匹配，該物件將被剪裁以適應內容框。
-
fill
被替換的內容正好填充元素的內容框。整個物件將完全填充此框。如果物件的寬高比與內容框不相匹配，那麼該物件將被拉伸以適應內容框。
-
none
被替換的內容將保持其原有的尺寸。
-
scale-down
內容的尺寸與
none或contain中的一個相同，取決於它們兩個之間誰得到的物件尺寸會更小一些。
CSS基礎2
視覺格式化模型
盒模型：規定單個盒子的規則
視覺格式化模型（佈局規則）：頁面中多個盒子的排列規則
視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
- 常規流
- 浮動
- 絕對定位
常規流
也叫做文件流，普通文件流，常規文件流
所有元素，預設情況下，都屬於常規流佈局
總體規則：塊盒獨佔一行，行盒水平依次排列
包含塊（container block）：每個盒子都有它的包含塊，包含塊決定了盒子的活動範圍
絕大部分情況下：盒子的包含塊，為其父元素的內容盒
塊盒
-
每個塊盒的總寬度，必須剛好等於包含塊的寬度
寬度的預設值為auto：將剩餘的空間吸收掉
margin的取值也可以為auto，不過不是預設值，margin的預設值為0
width的吸收能力比margin強
若寬度，邊距，內邊距，外邊距計算後，仍然有剩餘的空間，則剩餘的空間被（當然，這個和排列有關，如果是從右到左排列，就是margin-left）margin-right全部吸收
在常規流中，塊盒在其包含塊中居中，可以定寬，然後左右margin設定為auto
.parent{ width:300px; height:300px; background:#008c8c; padding:30px; } .child{ height:100px; width:100px; margin-left:auto; margin-right:auto; background:#ccc; } html裡面的內容我就沒寫，很簡單，就是有兩個div，包含關係如圖：
-
每個塊盒垂直方向上的auto值
height：auto，表示適應內容的高度
margin：auto，表示0
-
百分比取值
padding，寬高，margin可以取值為百分比
以上的百分比是相對於包含塊的寬度
高度的百分比：
包含塊的高度取決於子元素的高度
.parent{ width:300px; background:#008c8c; padding:30px; } .child{ width:100px; margin-left:auto; margin-right:auto; background:#ccc; height:50%; }比如說這樣，父元素沒有設定高度，所有父元素的高度適應子元素內容，也就是說跟子元素有關，但是這裡子元素height：50%，說明子元素的高度跟父元素有關，這就相互矛盾了，所以如果是這樣，設定百分比是無關。
包含塊的高度不取決於子元素的高度
百分比相對於父元素的高度
-
上下外邊距的合併
兩個常規流塊盒，上下外邊距相鄰，會進行合併
如果是兩個不同的外邊距，則取最大值
div{ width:100px; height:100px; background:#000; margin:50px; } <div> </div> <div> </div>
如圖：
浮動
應用場景
- 文字環繞
- 橫向排列
浮動基本特點
修改float屬性，有兩種取值：
- left，左浮動，元素在包含塊中靠上靠左
- right，右浮動，元素在包含塊中靠上靠右
預設值為none，也就是不浮動，即常規流
- 當一個元素設定為浮動後，元素會變成塊盒（修改display屬性為block）
- 浮動元素的包含塊和常規流一樣，是父元素的內容盒
盒子尺寸
- 寬度為auto時，表示適應內容寬度
- 高度為auto時，和常規流一樣，適應內容的高度
- margin為auto時，表示的是0
- 邊框，內邊距，百分比設定和常規流一樣
盒子的排列
最基本的就是上面所說的：
-
左浮動的盒子靠上靠左排列
-
右浮動的盒子靠上靠右排列
-
浮動盒子在包含塊中排列時，會避開常規流塊盒
-
常規流塊盒在排列時，會無視浮動的盒子（也就是當浮動的盒子不存在，佔領浮動盒子的位置）
-
行盒在排列時，會避開浮動的盒子
如果文字沒有在行盒中，則瀏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒
-
外邊距合併不會發生
高度坍塌
高度坍塌的原因：常規流盒子的自動高度（也就是沒有設定高度，隨著內容而增大），在計算時，不會考慮浮動的盒子
解決方式是清除浮動，涉及到一個css屬性，clear，有四種取值：
- none，預設值
- left，清除左浮動，該元素必須出現在所有左浮動盒子的下方
- right，清除右浮動，該元素必須出現在所有右浮動盒子的下方
- both，清除左右浮動，該元素必須出現在所有浮動盒子的下方
-
在所有的浮動元素下面加一個元素，元素裡面清除浮動，即可（這個方法不太好，因為加了一個沒有意義的元素）
-
在浮動元素的父元素裡面加一個偽元素
xxx::after{ content:""; display:block; clear:both; }這是一個三件套，用來解決高度坍塌的問題。也就是哪個元素高度坍塌了，就在哪個元素裡面加個偽元素::after，然後用這個三件套。所以你寫程式碼的時候，只要使用到浮動，你就要記住高度坍塌的問題，並使用這個三件套來解決高度坍塌的問題
定位
手動控制元素在包含塊中的精準位置
涉及的css屬性是：position，有幾種取值：
- static，預設值（可以認為是不定位）
- relative，相對定位
- absolute，絕對定位
- fixed，固定定位
一個元素，只要position的值不是static，就認為該元素是一個定位元素
定位元素會脫離文件流（浮動元素也脫離了文件流，相對定位除外）
一個脫離了文件流的元素，有以下特點：
- 文件流中的元素擺放時，會忽略脫離了文件流的元素
- 文件流中元素計算自動高度的時候，會忽略脫離了文件流的元素
相對定位
不會導致元素脫離文件流，只是讓元素在原來的位置上進行偏移
特點：
- 保留原來的位置進行定位
- 相對與自己原來的位置進行定位
可以通過四個css屬性來設定位置：
- top
- bottom
- left
- right
相對定位下，盒子的偏移不會對其他的盒子產生任何影響
而且在設定位置時，不要設定衝突的屬性，比如：
left:50px;
right:50px;
這樣就衝突了，但是瀏覽器預設是left和top優先順序高，所以儘管這樣設定沒有太大的問題，但還是不要這樣設定
絕對定位
- 寬高為auto時，適應內容
- 包含塊變化：找祖先元素中第一個定位元素，該元素的填充盒為它的包含塊；若找不到，則它的包含塊為整個網頁（初始化包含塊）
特點：
-
脫離原來的位置進行定位
就是說如果一個元素變成絕對定位，那麼這個元素之前佔的位置就會空出來，這個時候頁面又要重新排列了
-
相對於最近的有定位的祖先元素進行定位，如果沒有，則相對文件定位
一般用相對定位作為參照，絕對定位用來定位
固定定位
包含塊：固定是視口（瀏覽器的可視視窗，通俗點講，就是你看到的頁面的矩形區域）
這個東西一般用於廣告（無論你怎麼滾動頁面，它就在那兒不動），因為是相對於視口進行定位
其他的東西跟絕對定位一樣、
定位下的居中
某個方向上：
- 定寬（水品方向上），定高（垂直方向上）
- 將左右（上下）的距離設定為0
- 將左右（上下）margin設定為auto
絕對定位和固定定位i中，margin為auto時，會自動吸收剩餘的空間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.item{
width:100px;
height:100px;
background:#008c8c;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
</html>
如圖：
多個定位元素重疊時
前面我們可以看到：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item{
height:100px;
width:100px;
background:#008c8c;
border:2px solid black;
}
.position{
left:100px;
top:100px;
position:absolute;
}
</style>
</head>
<body>
<div class="item"></div>
<div class="item position"></div>
<div class="item"></div>
</body>
</html>
執行出來是這樣的：
你會發現，盒子出現了重疊
這裡就應用到了一個css屬性，z-index，z-index 屬性設定了一個定位元素及其後代元素或 flex 專案的 z-order。 當元素之間重疊的時候， z-index 較大的元素會覆蓋較小的元素在上層進行顯示。z-index mdn
只有定位元素設定z-index才會有效
z-index可以為負數，如果是負數，在遇到常規流 ，浮動元素的時候，會被覆蓋
補充
絕對定位和固定定位一定是塊盒（不是塊盒的，會變成塊盒）
絕對定位和固定定位元素不能浮動
沒有外邊距合併
更多的選擇器
更多的偽類選擇器
first-child，last-child
選中第一個子元素/選中最後一個子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-child{
color:red;
}
</style>
</head>
<body>
<ul>
<li>Lorem.</li>
<li>Velit.</li>
<li>Voluptatibus.</li>
<li>Officia?</li>
<li>Ad!</li>
<li>Delectus?</li>
<li>Laboriosam!</li>
<li>Fuga.</li>
<li>Reprehenderit!</li>
<li>Mollitia!</li>
</ul>
</body>
</html>
如圖：
詳情可以到官網瞭解，first-child mdn
另外補充一點，還有一個偽類，first-of-type/last-of-type
a:first-child{
color:red;選中的是a元素，並且a元素必須是第一個子元素
}
a:first-of-type{
color:red;選中的是子元素中的第一個a元素
}
nth-child,nth-of-type
選中指定位置的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:nth-child(3){
color:red;
}
</style>
</head>
<body>
<ul>
<li>Lorem.</li>
<li>Velit.</li>
<li>Voluptatibus.</li>
<li>Officia?</li>
<li>Ad!</li>
<li>Delectus?</li>
<li>Laboriosam!</li>
<li>Fuga.</li>
<li>Reprehenderit!</li>
<li>Mollitia!</li>
</ul>
</body>
</html>
如圖：
當然括號裡面也可以些變數，比如2n，2n+1
另外有一個even關鍵字，和2n一樣，表示偶數
還有個關鍵字odd，和2n+1一樣，表示奇數
更多的偽元素選擇器
first-letter
選中元素中第一個字母或者文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::first-letter{
color:red;
font-size:2em;
font-weight:bold;
}
</style>
</head>
<body>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, ducimus.</p>
</body>
</html>
如圖：
first-line
選中的是第一行的文字元素
效果很簡單，這裡就不舉例子了
selection
選中被使用者框選的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::selection{
color:red;
background:#008c8c;
}
</style>
</head>
<body>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, ducimus.</p>
</body>
</html>
如圖：
更多的樣式
透明度
- 第一種是用到一個css屬性，opacity，他設定的是整個元素（也就是盒子裡面的所有的東西）的透明度，取值從0~1（0就是完全透明）
- 第二種是在設定顏色的時候設定，也就是rgba
滑鼠
使用css屬性cursor設定
這裡沒有作過多的介紹，讀者可以自行上官網檢視，cursor mdn
當然滑鼠還可以設定為一個圖示（一般是以ico為字尾名的圖片）
比如：cursor:url(img/target.ico),auto;
後面加上一個auto，效果和font-family是一樣的，如果前面的那張圖片失效了，就會使用的瀏覽器的樣式
盒子的隱藏
第一種是display:none;也就是不生成盒子
第二種是visibility:hidden;生成盒子，只是從視覺上移除盒子，盒子仍然佔據著空間
背景圖
首先，img元素是屬於HTML的概念，背景圖是屬於css的概念
- 當圖片屬於網頁內容時，必須使用img元素
- 當圖片僅用於美化頁面，必須使用背景圖
涉及的CSS屬性
-
background-image
<style> div{ width:100px; height:100px; backgroung-image:url(imgs/xxxx.jpg); 這裡有個需要注意的點，如果這個樣式是寫在單獨的css檔案裡面，那麼這個路徑就是相對於這個css檔案 如果寫的是內部樣式，也就是寫在html檔案中，那麼這個路徑就是相對於這個html檔案 } </style> -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ background-image:url("../img/奧運五環.ico"); } </style> </head> <body> </body> </html>由於這個圖片非常小，所以：
也就是說預設情況下，背景圖會在橫座標和縱座標中進行重複，當然這個是可以控制的，需要用到另外一個css屬性
background-repeat,這是一個速寫屬性，分為background-repeat-x和background-repeat- y
單值 等價於雙值 repeat-x repeat no-repeat repeat-y no-repeat repeat repeat repeat repeat space space space round round round no-repeat no-repeat no-repeat 在雙值語法中, 第一個值表示水平重複行為, 第二個值表示垂直重複行為. 下面是關於每一個值是怎麼工作的具體說明:
repeat 影象會按需重複來覆蓋整個背景圖片所在的區域. 最後一個影象會被裁剪, 如果它的大小不合適的話. space 影象會盡可能得重複, 但是不會裁剪. 第一個和最後一個影象會被固定在元素(element)的相應的邊上, 同時空白會均勻地分佈在影象之間. background-position屬性會被忽視, 除非只有一個影象能被無裁剪地顯示. 只在一種情況下裁剪會發生, 那就是影象太大了以至於沒有足夠的空間來完整顯示一個影象.round 隨著允許的空間在尺寸上的增長, 被重複的影象將會伸展(沒有空隙), 直到有足夠的空間來新增一個影象. 當下一個影象被新增後, 所有的當前的影象會被壓縮來騰出空間. 例如, 一個影象原始大小是260px, 重複三次之後, 可能會被伸展到300px, 直到另一個影象被加進來. 這樣他們就可能被壓縮到225px.譯者注: 關鍵是瀏覽器怎麼計算什麼時候應該新增一個影象進來, 而不是繼續伸展. no-repeat 影象不會被重複(因為背景影象所在的區域將可能沒有完全被覆蓋). 那個沒有被重複的背景影象的位置是由 background-position屬性來決定. -
background-size
預設值：cover，contain
cover縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見。和
contain值相反，cover值儘可能大的縮放背景影象並保持影象的寬高比例（影象不會被壓扁）。該背景圖以它的全部寬或者高覆蓋所在容器。當容器和背景圖大小不同時，背景圖的 左/右 或者 上/下 部分會被裁剪。contain縮放背景圖片以完全裝入背景區，可能背景區部分空白。
contain儘可能的縮放背景並保持影象的寬高比例（影象不會被壓縮）。該背景圖會填充所在的容器。當背景圖和容器的大小的不同時，容器的空白區域（上/下或者左/右）會顯示由 background-color 設定的背景顏色。也可以設定數值和百分數，這樣來設定：background-size:橫向 縱向;
-
background-position
設定背景圖的位置
預設值：center left right bottom top
可以這樣：background-position:center;代表橫向和縱向居中；也可以這樣：background-position:center left;代表橫向居中，縱向靠左
也可以設定為數值或者百分數，數值的話，有兩個，比如background-position:100px 100px;代表背景圖距離容器左邊100px，距離容器上面100px
-
background-attachment
通常使用他控制背景圖是否固定
取值：
fixed此關鍵屬性值表示背景相對於視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內容滾動。
local此關鍵屬性值表示背景相對於元素的內容固定。如果一個元素擁有滾動機制，背景將會隨著元素的內容滾動， 並且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。
scroll此關鍵屬性值表示背景相對於元素本身固定， 而不是隨著它的內容滾動（對元素邊框是有效的）。
-
背景圖和背景顏色混合使用
就是盒子中沒有背景圖的地方，用顏色來替代
另外說到，background，這是一個速寫屬性，包括了前面所說的那些
HTML進階
iframe元素
通常用於在網頁中嵌入另外一個頁面
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
iframe元素是可替換元素
可替換元素的特點：
- 通常為行盒
- 通常顯示的內容取決於元素的屬性
- css不能完全控制它的樣式
- 具有行塊盒的特性
另外這裡講一個之前學過的屬性target的另一種用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
iframe{
width:100%;
height:500px;
border:2px solid black;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="myiframe">百度</a>
<a href="https://www.douyu.com" target="myiframe">鬥魚</a>
<a href="https://www.taobao.com" target="myiframe">淘寶</a>
<iframe name="myiframe" src="https://www.baidu.com" frameborder="0"></iframe>
</body>
</html>
以前我們開啟一個新網頁是在當前的視口上開啟或者新開一個頁面開啟，上面這種寫法，就可以在iframe元素盒子中開啟，如圖：
在頁面中使用flash
需要用到object，embed（他們都是可替換元素）這兩個元素，當然這兩個任選一個即可
object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
object{
width:100%;
height:640px;
}
</style>
</head>
<body>
<object data="./example.swf" type=""></object>
</body>
</html>
swf是Macromedia公司的動畫設計軟bai件Flash的專用格式du，是一種支援向量和點陣圖形的動畫檔案格式，被廣泛應zhi用於網頁設計，動畫製作等領域，swf檔案通常也被稱為Flash檔案
object 元素裡面有一個子元素，param，用來設定引數
<object data="./example.swf" type="">
<param name="quality" value="high">
</object>
embed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
embed{
width:100%;
height:640px;
}
</style>
</head>
<body>
<embed src="./example.swf" quality="high" type="">
</body>
</html>
embed元素裡面沒有子元素，那麼設定引數的時候，只能在元素裡面寫，效果和上面的一樣
由於不同的瀏覽器的相容性不一樣，所以一般這樣寫：
<object data="./example.swf" type="">
<param name="" value="">
<embed src="./example.swf" quality="high" type="">
</object>
表單元素
指的是一系列用於收集使用者資訊的元素
input元素
<input type="">
type屬性：用來表示輸入框的型別
value屬性：用來表示輸入框的值
placeholder屬性：用來顯示提示的文字，文字框沒有內容的時候顯示（比如我們常見的請輸入賬號或者郵箱）
下面主要講一下type的取值：
-
text
<input type="text">這個是普通的文字輸入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ width:200px; height:20px; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } </style> </head> <body> <input type="text" placeholder="請輸入賬號或者郵箱"> </body> </html>如圖：
-
password
<input type="password">這個是密碼框，也就是你寫的字元是看不見的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ width:200px; height:20px; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } </style> </head> <body> <input type="password" placeholder="請輸入賬號或者郵箱"> </body> </html>如圖：
-
date
<input type="date">這是一個日期選擇框，注意：有相容性問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ width:200px; height:20px; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } </style> </head> <body> <input type="date"> </body> </html>如圖：
-
search
<input type="search">這是一個搜尋框，舉個例子，你在手機上百度搜索東西的時候，你會發現，在你打完字後，鍵盤的回車變成了開始（當然不同的輸入法可能會有所不同，不過應該差不了多少），注意：同樣的也有相容性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ width:200px; height:20px; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } </style> </head> <body> <input type="search"> </body> </html>如圖：就是多了個叉叉
-
range
<input type="range"這是一個滑塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ width:200px; height:20px; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } </style> </head> <body> <input type="range"> </body> </html>如圖：需要配合js來顯示數值
-
color
<input type="color">這是一個顏色選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ width:200px; height:20px; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } </style> </head> <body> <input type="color"> </body> </html>如圖：
-
number
<input type="number">這是一個數字輸入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ width:200px; height:20px; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } </style> </head> <body> <input type="number"> </body> </html>如圖：
-
checkbox
<input type="checkbox">這是一個多選框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 愛好：<input type="checkbox"> </body> </html>如圖：
有時候頁面上有多個多選框，這個時候就要從邏輯上把他們分開，就需要在input元素中加上一個name屬性，用來分開不同的多選框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 愛好： 計算機<input name="loves" type="checkbox"> 音樂<input name="loves" type="checkbox"> 電影<input name="loves" type="checkbox"> 歷史<input name="loves" type="checkbox"> 人文<input name="loves" type="checkbox"> </body> </html> -
radio
<input type="radio">這是一個單選框，要是想預設選中的話，就是用checked這個布林屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 性別： 男<input name="sex" type="radio"> 女<input name="sex" type="radio"> </body> </html>如圖：注意：這裡必須使用剛才介紹的name屬性，不然就不是單選框
-
file
<input type="file">這是一個選擇檔案的框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="file"> </body> </html>如圖：
input元素還可以用於製作按鈕，但是是很過時的用法，一般不用這種方法，後面的時候會講到新方法
當type的值為reset，submit，button的時候，input分別表示重置按鈕，提交按鈕，普通按鈕
select元素
下拉列表選擇框，通常跟option元素配合使用
<select name="" id="">
<option value=""></option>
</select>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
請選擇城市：
<select name="" id="">
<option value="">成都</option>
<option value="">北京</option>
<option value="">武漢</option>
<option value="">長沙</option>
</select>
</body>
</html>
如圖：
另外，這個也可以有預設顯示的，在那想要預設現實的option中寫上一個布林屬性selected
textarea元素
文字域，也叫做多行文字框
<textarea name="" id="" cols="30" rows="10"></textarea>
其中cols代表有30列，rows代表有10行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
請填寫簡介：
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
如圖：
按鈕元素
button
裡面有個type屬性，有三種取值：reset，button，submit，預設值是submit
<button> </button>
它的用法比input作為按鈕方便，並且多樣性
表單狀態
readonly屬性：是一個布林屬性，是否只讀，不會改變表單顯示的樣式
disabled屬性：是一個布林屬性，是否禁用，會改變表單的顯示樣式
配合表單元素使用的其他元素
label
是一個普通元素，通常配合單選框盒多選框使用
不用這個元素，我們選擇的時候，只能通過點圓點來選擇，也就是這樣：
如果我們使用label這個元素，就可以通過點文字來選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
請選擇性別：
<input id="male" type="radio" name="gender">
<label for="male">男</label>
<input id="female" type="radio" name="gender">
<label for="female">女</label>
</body>
</html>
通過for屬性來進行關聯，for裡面寫的是配合的id名字，比如說男是和第一個input配合的
如圖：
上面這種方式叫做顯示關聯，還有一種隱式關聯：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
請選擇性別：
<label>
<input id="male" type="radio" name="gender">
男
</label>
<label>
<input id="female" type="radio" name="gender">
女
</label>
</body>
</html>
另外注意這種方式，如果想使用隱式關聯的話，就必須把label裡的for屬性刪掉，不然是不行的，讀者可以試試
datalist
資料列表
該元素本身不會顯示到頁面，通常用於和普通文字框配合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input list="browser" type="text">
<datalist id="browser">
<option value="Chrome">谷歌瀏覽器</option>
<option value="Edge">微軟瀏覽器</option>
<option value="Firefox">火狐瀏覽器</option>
<option value="Safari">蘋果瀏覽器</option>
<option value="IE">IE瀏覽器</option>
</datalist>
</body>
</html>
如圖：
form元素
通常會將整個表單元素放置在form元素內部，作用是當提交表單時，會將form元素內部的表單的內容以合適的方式提交到伺服器
form元素對開發靜態頁面沒有什麼意義，具體的操作請自行檢視
fieldset元素
表單分組
具體的操作請自行檢視
美化表單元素
新的偽類
focus
表示元素聚焦時的樣式
由於每個瀏覽器的預設聚焦樣式不同，所以我們需要使用focus偽類選擇器來覆蓋掉瀏覽器的預設聚焦樣式
checked
單選框或者多選框被選中的時候的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:checked+label{
color:red;
}
</style>
</head>
<body>
<input type="radio" name="sex" id="male">
<label for="male">男</label>
<input type="radio" name="sex" id="female">
<label for="female">女</label>
</body>
</html>
如圖：
常見用法
重置表單元素的樣式
因為不同的瀏覽器的預設樣式不一樣，所以我們有必要重置
input,button,textarea,selection{
border:none;
}
input:focus,
selection:focus,
button:focus,
textarea:focus{
outline:none;
outline-offset:none;
}
設定textarea是否可以調整尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
沒有設定之前，預設是可以調整的：
textarea裡面有個屬性：resize，有六種取值：
-
both
預設值，兩個方向都可以調整
-
none
兩個方向都不可以調整
-
horizontal
只能水平調整
-
vertical
只能垂直調整
另外兩個值不管
文字框邊緣到內容的距離
舉個例子
<input type="text">
方法一：
<style>
input{
padding:0 10px;
}
</style>
方法二：
<style>
input{
text-indent:1em;
}
</style>
控制單選和多選的樣式
首先你要知道，一般頁面上好看的單選框或者時多選框都不是使用input元素，都是自己做的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.radio{
width:12px;
height:12px;
border:1px solid #999;
border-radius:50%;
cursor:pointer;
}
.radio.checked{
border-color:#008c8c;
}
.radio.checked::after{
content:"";
display:block;
width:6px;
height:6px;
background:#008c8c;
border-radius:50%;
margin-left:3px;
margin-top:3px;
}
</style>
</head>
<body>
<div class="radio checked">
</div>
</body>
</html>
如圖：
完整的如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.radio-item .radio{
width:12px;
height:12px;
border:1px solid #999;
border-radius:50%;
cursor:pointer;
display:inline-block;
}
.radio-item input:checked+.radio{
border-color:#008c8c;
}
.radio-item input:checked~span{
color:#008c8c;
}
.radio-item input:checked+.radio::after{
content:"";
display:block;
width:6px;
height:6px;
background:#008c8c;
border-radius:50%;
margin-left:3px;
margin-top:3px;
}
input{
display:none;
}
</style>
</head>
<body>
<label class="radio-item">
<input type="radio" name="gender">
<span class="radio"></span>
<span>男</span>
</label>
<label class="radio-item">
<input type="radio" name="gender">
<span class="radio"></span>
<span>女</span>
</label>
</body>
</html>
表格元素
在CSS技術出現之前，網頁通常使用表格佈局，後臺管理系統可能會使用表格佈局
一般一個網站分為前臺和後臺：
前臺：面向使用者
後臺：面向管理員，對介面要求不高，對功能性要求高
表格為什麼不再適用於網頁佈局？
渲染速度太慢
table包括caption（表格標題），thead（表頭），tbody（表格主體），tfoot（表尾），這四個裡面包括tr（表格行），表格行裡面包括th（標題單元格），td（單元格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width:100%;
border-collapse:collapse;
}
table caption{
font-size:2em;
font-weight:bold;
margin:1em 0;
}
th,td{
border:1px solid black;
text-align:center;
padding:20px;
}
thead tr{
background:#008c8c;
color:#fff;
}
tbody tr:nth-child(odd){
background:#eee;
}
tbody tr:hover{
background:#ccc;
}
tbody tr td:first-child{
color:#f40;
}
tfoot td{
text-align:right;
padding-right:20px;
}
</style>
</head>
<body>
<table>
<caption>這是表格的標題</caption>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
<td>資料4</td>
<td>資料5</td>
</tr>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
<td>資料4</td>
<td>資料5</td>
</tr>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
<td>資料4</td>
<td>資料5</td>
</tr>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
<td>資料4</td>
<td>資料5</td>
</tr>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
<td>資料4</td>
<td>資料5</td>
</tr>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
<td>資料4</td>
<td>資料5</td>
</tr>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
<td>資料4</td>
<td>資料5</td>
</tr>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
<td>資料4</td>
<td>資料5</td>
</tr>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
<td>資料4</td>
<td>資料5</td>
</tr>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
<td>資料4</td>
<td>資料5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">合計：xxxx</td>
</tr>
</tfoot>
</table>
</body>
</html>
合併行或者列要使用rowspan或者colspan屬性，如上面的colspan="5"
CSS進階1
@規則（at-rules）
at-rules:@規則，@語句，CSS語句，CSS指令
import
@import "路徑";
匯入另外一個css檔案
@import "reset.css";
charset
@charset "utf-8";
這裡有個注意的點：如果你使用了這個，那麼這一行程式碼必須寫在css檔案的第一行
web字型和圖示
web字型
如果使用者電腦上沒有安裝相應的字型，則會強制讓使用者下載此字型（當然這個過程使用者是看不見的）
使用@font-face指令製作一個新字型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 製作一個新字型，名字叫做"Youzai Ti" */
@font-face{
font-family:"Youzai Ti";/* 這是給你的這個字型取一個名字 */
src:url(./font/悠哉字型.ttf)
}
P{
font-family:"Youzai Ti";
}
</style>
</head>
<body>
<p>長夜將至，我從今開始守望</p>
</body>
</html>
字型圖示
iconfont.cn，這是一個非常好用的圖示網站，這一小節具體的操作方式大家可以自行檢視
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./icon/iconfont.css">
</head>
<body>
<div class="iconfont icon-ditu"></div>
<div class="iconfont icon-yonghu"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2022651_kud5wtxp1tj.css">
</head>
<body>
<div class="iconfont icon-ditu"></div>
<div class="iconfont icon-yonghu"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'iconfont';
/* project id 2022651 */
src: url('//at.alicdn.com/t/font_2022651_kud5wtxp1tj.eot');
src: url('//at.alicdn.com/t/font_2022651_kud5wtxp1tj.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2022651_kud5wtxp1tj.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2022651_kud5wtxp1tj.woff') format('woff'),
url('//at.alicdn.com/t/font_2022651_kud5wtxp1tj.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2022651_kud5wtxp1tj.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont";
font-style:normal;
}
</style>
</head>
<body>
<div class="iconfont"></div>
<div class="iconfont"></div>
</body>
</html>