3_CSS層疊樣式表基礎

第3章-CSS層疊樣式表基礎

學習目標(Objective)

掌握標簽選擇器的使用
掌握類選擇器的使用
了解id選擇器和通配符選擇器
掌握font屬性和color屬性的應用

1.HTML的局限性

如果要改變下高度或者變一個顏色，就需要大量重復操作

總結：

HTML滿足不了設計者的需求
操作html屬性不方便
HTML里面添加樣式帶來的是無盡的臃腫和繁瑣

2.CSS 網頁的美容師

讓我們的網頁更加豐富多彩，布局更加靈活自如。
CSS的最大貢獻就是：讓 HTML 從樣式中脫離，實現了 HTML 專注去做結構呈現，樣式交給css

3.CSS初識

概念：CSS(Cascading Style Sheets) ，通常稱為CSS樣式表或層疊樣式表（級聯樣式表）
作用：
- 主要用于設置 HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及布局和外觀顯示樣式。提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。

4. 引入CSS樣式表

4.1 行內式（內聯樣式）

是通過標簽的style屬性來設置元素的樣式<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>實際上任何HTML標簽都擁有style屬性，用來設置行內式。
<div style="color: red; font-size: 12px;">比屋出品 必屬精品</div>

缺點：
- 沒有實現樣式和結構相分離

4.2 內部樣式表（內嵌樣式表）

其基本語法格式如下：

<head>
<style type="text/CSS">選擇器（選擇的標簽） {屬性1: 屬性值1;屬性2: 屬性值2; 屬性3: 屬性值3;}
</style>
</head>案例 type="text/css"  在html5中可以省略。只能控制當前的頁面,沒有徹底分離
<style>div {color: red;font-size: 12px;}
</style>

4.3 綜合案例

思考：
?1. 如何實現結構與樣式完全分離？
?2. 如何實現css樣式共享？

4.4 外部樣式表（外鏈式）

其基本語法格式如下：

將所有的樣式放在一個或多個以**.CSS**為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中
<head><link rel="stylesheet" type="text/css" href="css文件路徑">
</head>

注意：
- link 是個單標簽
- link標簽需要放在head頭部標簽中，并且指定link標簽的三個屬性

屬性	作用
rel	定義當前文檔與被鏈接文檔之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。
type	定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。我們都可以省略
href	定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。

4.5 三種樣式表總結（位置）

樣式表	優點	缺點	使用情況	控制范圍
行內樣式表	書寫方便，權重高	沒有實現樣式和結構相分離	較少	控制一個標簽（少）
內部樣式表	部分結構和樣式相分離	沒有徹底分離	較多	控制一個頁面（中）
外部樣式表	完全實現結構和樣式相分離	需要引入	最多，強烈推薦	控制整個站點（多）

5. 代碼風格

樣式書寫一般有兩種：

一種是緊湊格式 (Compact)

h3 { color: deeppink;font-size: 20px;}

一種是展開格式（推薦）

h3 {color: deeppink;font-size: 20px;
}

6. 總結CSS樣式規則

使用HTML時，需要遵從一定的規范。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，

具體格式如下：

7 CSS選擇器（重點）

1. CSS選擇器作用（重點）

選擇器的作用：找到滿足條件的HTML頁面元素

div {color: red;
}1. 這段代碼就是2件事， 把div選出來， 然后 把它變成了紅色。 以后我們都這么干。
2. 選擇器分為基礎選擇器和 復合選擇器，我們這里先講解一下 基礎選擇器。

2. CSS基礎選擇器

2.1 標簽選擇器

標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

作用：標簽選擇器可以把某一類標簽全部選擇出來
優點：是能快速為頁面中同類型的標簽統一樣式
缺點：不能設計差異化樣式。

2.2 類選擇器

基本語法

.類名  {   屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;     
}

優點：
- 可以為元素對象定義單獨或相同的樣式。可以選擇一個或者多個標簽

課堂案例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><head><meta charset="utf-8"><style>.blue {color: blue;font-size: 100px;}.red {color: red;font-size: 100px;}.orange {color: orange;font-size: 100px;}.green {color: green;font-size: 100px;}</style></head><body><span class="blue">G</span><span class="red">o</span><span class="orange">o</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span></body></span></span>

2.3 類選擇器特殊用法- 多類名

我們可以給標簽指定多個類名，從而達到更多的選擇目的。

注意：

各個類名中間用空格隔開。
多類名選擇器在后期布局比較復雜的情況下，還是較多使用的。

2.4 id選擇器

其基本語法格式如下：

<span style="background-color:#f8f8f8"><p id="id名"></p>id選擇器使用`#`進行標識，后面緊跟id名
#id名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }</span>

W3C標準規定，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。
- 類選擇器：好比人的名字，是可以多次重復使用的
- id選擇器：好比人的身份證號碼，具備唯一性

2.5 通配符選擇器

其基本語法格式如下：

通配符選擇器用`*`號表示，  *   就是 選擇所有的標簽* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。

* {margin: 0;                    /* 定義外邊距*/padding: 0;                   /* 定義內邊距*/
}

注意：會匹配頁面所有的元素，降低頁面響應速度，不建議隨便使用

2.7 基礎選擇器總結

選擇器	作用	缺點	使用情況	用法
標簽選擇器	可以選出所有相同的標簽，比如p	不能差異化選擇	較多	p { color：red;}
類選擇器	可以選出1個或者多個標簽	可以根據需求選擇	非常多	.nav { color: red; }
id選擇器	一次只能選擇器1個標簽	只能使用一次	不推薦使用	#nav {color: red;}
通配符選擇器	選擇所有的標簽	選擇的太多，有部分不需要	不推薦使用	* {color: red;}

8. CSS字體樣式屬性調試工具

1.font字體

1.1 font-size:大小

作用：font-size屬性用于設置字號

p {  font-size:20px; 
}

單位：
- 相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。

注意：

我們文字大小以后，基本就用px了，其他單位很少使用
谷歌瀏覽器默認的文字大小為16px
但是不同瀏覽器可能默認顯示的字號大小不一致，我們盡量給一個明確值大小，不要默認大小。一般給body指定整個頁面文字的大小

1.2 font-family:字體

作用：font-family屬性用于設置哪一種字體。

p{ font-family:"微軟雅黑";}

網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑
可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體，如果都沒有，則以我們電腦默認的字體為準。

p{font-family: Arial,"Microsoft Yahei", "微軟雅黑";}1. 各種字體之間必須使用英文狀態下的逗號隔開。
2. 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
3. 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
4. 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

1.3 font-weight:字體粗細

在html中如何將字體加粗我們可以用標簽來實現
- 使用 b 和 strong 標簽是文本加粗。
可以使用CSS 來實現，但是CSS 是沒有語義的。

屬性值	描述
normal	默認值（不加粗的）
bold	定義粗體（加粗的）

1.4 font-style:字體風格

在html中如何將字體傾斜我們可以用標簽來實現
- 字體傾斜除了用 i 和 em 標簽，
可以使用CSS 來實現，但是CSS 是沒有語義的

font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：

屬性	作用
normal	默認值，瀏覽器會顯示標準的字體樣式 font-style: normal;
italic	瀏覽器會顯示斜體的字體樣式。

1.5 font:綜合設置字體樣式 (重點)

font屬性用于對字體樣式進行綜合設置

基本語法格式如下：

選擇器 { font: font-style  font-weight  font-size/line-height  font-family;}

注意：
- 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
- 其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

1.6 font總結

屬性	表示	注意點
font-size	字號	我們通常用的單位是px 像素，一定要跟上單位
font-family	字體	實際工作中按照團隊約定來寫字體
font-weight	字體粗細	記住加粗是 700 或者 bold 不加粗是 normal 或者 400 記住數字不要跟單位
font-style	字體樣式	記住傾斜是 italic 不傾斜是 normal 工作中我們最常用 normal
font	字體連寫	1. 字體連寫是有順序的不能隨意換位置 2. 其中字號和字體必須同時出現

9. CSS外觀屬性

9.1 color:文本顏色

作用：color屬性用于定義文本的顏色
其取值方式有如下3種：

表示表示	屬性值
預定義的顏色值	red，green，blue，還有我們的御用色 pink
十六進制	#FF0000，#FF6600，#29D794
RGB代碼	rgb(255,0,0)或rgb(100%,0%,0%)

注意：我們實際工作中，用 16進制的寫法是最多的

9.2 text-align:文本水平對齊方式

作用：text-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性
其可用屬性值如下：

屬性	解釋
left	左對齊（默認值）
right	右對齊
center	居中對齊

9.3 line-height:行間距

作用：line-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。
單位：
- line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px

9.4 text-indent:首行縮進

作用：text-indent屬性用于設置首行文本的縮進
屬性值
- 其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值,
- 建議使用em作為設置單位。

1em 就是一個字的寬度如果是漢字的段落， 1em 就是一個漢字的寬度

p {/*行間距*/line-height: 25px;/*首行縮進2個字  em  1個em 就是1個字的大小*/text-indent: 2em;  }

9.5 text-decoration 文本的裝飾

text-decoration 通常我們用于給鏈接修改裝飾效果

值	描述
none	默認。定義標準的文本。取消下劃線（最常用）
underline	定義文本下的一條線。下劃線也是我們鏈接自帶的（常用）
overline	定義文本上的一條線。（不用）
line-through	定義穿過文本下的一條線。（不常用）

9.6 CSS外觀屬性總結

屬性	表示	注意點
color	顏色	我們通常用十六進制比如而且是簡寫形式 #fff
line-height	行高	控制行與行之間的距離
text-align	水平對齊	可以設定文字水平的對齊方式
text-indent	首行縮進	通常我們用于段落首行縮進2個字的距離 text-indent: 2em;
text-decoration	文本修飾	記住添加下劃線 underline 取消下劃線 none