文章目錄
- 一、CSS（一）
-
- 1. CSS簡介
-
- 1.1 CSS文法規範
- 1.2 CSS代碼風格
- 2. CSS基礎選擇器
-
- 2.1 CSS選擇器的作用
- 2.2 選擇器分類
- 2.3 标簽選擇器
- 2.4 類選擇器
- 2.4 多類名選擇器
- 2.5 id選擇器
- 2.6 通配符選擇器
- 2.7 選擇器總結
- 3. CSS字型屬性
-
- 3.1 字型系列
- 3.2 字型大小
- 3.3 字型粗細
- 3.4 文字樣式
- 3.5 字型的綜合寫法
- 3.6 字型總結
- 4. CSS文本屬性
-
- 4.1 文本顔色
- 4.2 文本對齊
- 4.3 裝飾文本
- 4.4 文本縮進
- 4.5 行間距
- 5. CSS樣式表
-
- 5.1 行内樣式表（行内式）
- 5.2 内部樣式表（嵌入式）
- 5.3 外部樣式表（連結式）
- 6. Chrome調試工具
一、CSS（一）
1. CSS簡介
CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡稱，有時我們也會稱之為 CSS 樣式表或級聯樣式表。
CSS 是也是一種标記語言。
CSS 主要用于設定 HTML 頁面中的文本内容（字型、大小、對齊方式等）、圖檔的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。
CSS 讓我們的網頁更加豐富多彩，布S局更加靈活自如。簡單了解：CSS 可以美化 HTML , 讓 HTML 更漂亮， 讓頁面布局更簡單。
CSS 最大價值: 由 HTML 專注去做結構呈現，樣式交給 CSS，即 結構 ( HTML ) 與樣式( CSS ) 相分離。
1.1 CSS文法規範
1、使用 HTML 時，需要遵從一定的規範，CSS 也是如此。要想熟練地使用 CSS 對網頁進行修飾，首先需要了解CSS 樣式規則。
2、CSS 規則由兩個主要的部分構成：選擇器以及一條或多條聲明。
- 選擇器是用于指定 CSS 樣式的 HTML 标簽，花括号内是對該對象設定的具體樣式
- 屬性和屬性值以“鍵值對”的形式出現
- 屬性是對指定的對象設定的樣式屬性，例如字型大小、文本顔色等
- 屬性和屬性值之間用英文“:”分開
- 多個“鍵值對”之間用英文“;”進行區分
所有的樣式，都包含在 <style> 标簽内，表示是樣式表。<style> 一般寫到 </head> 上方
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
1.2 CSS代碼風格
1、樣式格式書寫
（1）緊湊格式
h3 {
color: deeppink;font-size: 20px;
}
（2）展開格式
h3 {
color: pink;
font-size: 20px;
}
強烈推薦第二種格式， 因為更直覺。
2、樣式大小寫風格
（1）小寫格式
h3 {
color: pink;
}
（2）大寫格式
H3 {
COLOR: PINK;
}
強烈推薦樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母，特殊情況除外。
3、樣式空格風格
h3 {
color: pink;
}
屬性值前面，冒号後面，保留一個空格
選擇器（标簽）和大括号中間保留白格
2. CSS基礎選擇器
2.1 CSS選擇器的作用
選擇器(選擇符)就是根據不同需求把不同的标簽選出來這就是選擇器的作用。 簡單來說，就是選擇标簽用的。
找到所有的 h1 标簽。 選擇器（選對人）
設定這些标簽的樣式，比如顔色為紅色（做對事）。
2.2 選擇器分類
基礎選擇器又包括：标簽選擇器、類選擇器、id 選擇器和通配符選擇器
2.3 标簽選擇器
标簽選擇器（元素選擇器）是指用 HTML 标簽名稱作為選擇器，按标簽名稱分類，為頁面中某一類标簽指定統一的 CSS 樣式。
文法：
标簽選擇器{
屬性：屬性值
...
}
作用：
标簽選擇器（元素選擇器）是指用 HTML 标簽名稱作為選擇器，按标簽名稱分類，為頁面中某一類标簽指定統一的 CSS 樣式。
2.4 類選擇器
如果想要差異化選擇不同的标簽，單獨選一個或者某幾個标簽，可以使用類選擇器.
文法：
.類名 {
屬性1: 屬性值1;
...
}
結構需要用class屬性來調用 class 類的意思
<div class="類名"> 變紅色 </div>
1、如果想要差異化選擇不同的标簽，單獨選一個或者某幾個标簽，可以使用類選擇器。
2、類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點“.”号顯示。
3、類選擇器使用“.”（英文點号）進行辨別，後面緊跟類名（自定義，我們自己命名的）。
4、可以了解為給這個标簽起了一個名字，來表示。
5、長名稱或詞組可以使用中橫線來為選擇器命名。
6、不要使用純數字、中文等命名，盡量使用英文字母來表示。
7、命名要有意義，盡量使别人一眼就知道這個類名的目的。
8、命名規範：見附件（ Web 前端開發規範手冊.doc）
2.4 多類名選擇器
我們可以給一個标簽指定多個類名，進而達到更多的選擇目的。 這些類名都可以選出這個标簽。
簡單了解就是一個标簽有多個名字.
多類名的具體使用：
<div class="red font20">亞瑟</div>
注意：
1、在标簽class 屬性中寫 多個類名
2、多個類名中間必須用空格分開
3、這個标簽就可以分别具有這些類名的樣式
2.5 id選擇器
id 選擇器可以為标有特定 id 的 HTML 元素指定特定的樣式。
HTML 元素以 id 屬性來設定 id 選擇器，CSS 中 id 選擇器以“#" 來定義。
文法：
#id名 {
屬性1: 屬性值1;
...
}
注意：id 屬性隻能在每個 HTML 文檔中出現一次
id選擇器和類選擇器的差別：
1、類選擇器（class）好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用。
2、id 選擇器好比人的身份證号碼，全中國是唯一的，不得重複。
3、id 選擇器和類選擇器最大的不同在于使用次數上。
4、類選擇器在修改樣式中用的最多，id 選擇器一般用于頁面唯一性的元素上，經常和 JavaScript 搭配使用。
2.6 通配符選擇器
文法：
* {
屬性1: 屬性值1;
...
}
通配符選擇器不需要調用， 自動就給所有的元素使用樣式
特殊情況才使用，後面講解使用場景(以下是清除所有的元素标簽的内外邊距,後期講)
* {
margin: 0;
padding: 0;
}
2.7 選擇器總結
3. CSS字型屬性
3.1 字型系列
CSS使用font-family屬性定義文本的字型系列。
文法：
p { font-family:"微軟雅黑";}
div {font-family: Arial,"Microsoft Yahei","微軟雅黑";}
- 各種字型之間必須使用英文狀态下的逗号隔開
- 一般情況下,如果有空格隔開的多個單詞組成的字型,加引号
- 盡量使用系統預設自帶字型，保證在任何使用者的浏覽器中都能正确顯示
- 最常見的幾個字型：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }
3.2 字型大小
CSS 使用 font-size 屬性定義字型大小。
文法：
p {
font-size: 20px;
}
- px（像素）大小是我們網頁的最常用的機關
- 谷歌浏覽器預設的文字大小為16px
- 不同浏覽器可能預設顯示的字号大小不一緻，我們盡量給一個明确值大小，不要預設大小
- 可以給 body 指定整個頁面文字的大小
3.3 字型粗細
CSS 使用 font-weight 屬性設定文本字型的粗細。
文法：
p {
font-weight: bold;
}
3.4 文字樣式
CSS 使用 font-style 屬性設定文本的風格。
文法：
p {
font-style: normal;
}
3.5 字型的綜合寫法
字型屬性可以把以上文字樣式綜合來寫, 這樣可以更節約代碼:
body {
font: font-style font-weight font-size
line-height font-family;
}
使用 font 屬性時，必須按上面文法格式中的順序書寫，不能更換順序，并且各個屬性間以空格隔開 。
不需要設定的屬性可以省略（取預設值），但必須保留 font-size 和 font-family 屬性，否則 font 屬性将不起作用。
3.6 字型總結
4. CSS文本屬性
4.1 文本顔色
color 屬性用于定義文本的顔色。
文法：
div {
color: red;
}
開發中最常用的是十六進制
4.2 文本對齊
text-align 屬性用于設定元素内文本内容的水準對齊方式。
文法：
div {
text-align: center;
}
4.3 裝飾文本
文法：
div {
text-decoration：underline;
}
4.4 文本縮進
文法：
div {
text-indent：20px;
}
div {
text-indent：2em;
}
em 是一個相對機關，就是目前元素（font-size) 1 個文字的大小, 如果目前元素沒有設定大小，則會按照父元素的 1 個文字大小。
4.5 行間距
line-height 屬性用于設定行間的距離（行高）。可以控制文字行與行之間的距離
文法：
p {
line-height: 26px;
}
行高的文本分為 上間距 文本高度 下間距 = 行間距
5. CSS樣式表
按照 CSS 樣式書寫的位置（或者引入的方式），CSS 樣式表可以分為三大類：
5.1 行内樣式表（行内式）
行内樣式表（内聯樣式表）是在元素标簽内部的 style 屬性中設定 CSS 樣式。适合于修改簡單樣式。
文法：
<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div>
- style 其實就是标簽的屬性，在雙引号中間，寫法要符合 CSS 規範
- 可以控制目前的标簽設定樣式
- 由于書寫繁瑣，并且沒有展現出結構與樣式相分離的思想，是以不推薦大量使用，隻有對目前元素添加簡單樣式的時候，可以考慮使用
- 使用行内樣式表設定 CSS，通常也被稱為行内式引入
5.2 内部樣式表（嵌入式）
内部樣式表（内嵌樣式表）是寫到html頁面内部. 是将所有的 CSS 代碼抽取出來，單獨放到一個 <style> 标簽中。
文法：
<style>
div {
color: red;
font-size: 12px;
}
</style>
- <style> 标簽理論上可以放在 HTML 文檔的任何地方，但一般會放在文檔的<head>标簽中
- 通過此種方式，可以友善控制目前整個頁面中的元素樣式設定
- 代碼結構清晰，但是并沒有實作結構與樣式完全分離
- 使用内部樣式表設定 CSS，通常也被稱為嵌入式引入，這種方式是我們練習時常用的方式
5.3 外部樣式表（連結式）
實際開發都是外部樣式表. 适合于樣式比較多的情況. 核心是:樣式單獨寫到CSS 檔案中，之後把CSS檔案引入到 HTML 頁面中使用。
引入外部樣式表分為兩步：
1、建立一個字尾名為 .css 的樣式檔案，把所有 CSS 代碼都放入此檔案中。
2、在 HTML 頁面中，使用<link> 标簽引入這個檔案。
文法：
<link rel="stylesheet" href="css檔案路徑">
6. Chrome調試工具
1、Ctrl+滾輪 可以放大開發者工具代碼大小。
2、左邊是 HTML 元素結構，右邊是 CSS 樣式。
3、右邊 CSS 樣式可以改動數值（左右箭頭或者直接輸入）和檢視顔色。
4、Ctrl + 0 複原浏覽器大小。
5、如果點選元素，發現右側沒有樣式引入，極有可能是類名或者樣式引入錯誤。
6、如果有樣式，但是樣式前面有黃色歎号提示，則是樣式屬性書寫錯誤。