網頁設計之第二節CSS筆記-1

CSS簡介這節的目錄

• • CSS簡介
  • • 1.1 HTML和CSS的差別
    • 1.2 CSS文法
  • CSS基礎選擇器
  • • 2.1選擇器的作用
    • 2.2 選擇器的分類
    • • 2.2.1 基礎選擇器
      • • 标簽選擇器
        • 類選擇器
        • • 類選擇器-多類名
        • id選擇器
        • 通配符選擇器
        • 總結
  • CSS字型屬性
  • • 字型系列
    • • 3.1 font-family
      • 3.2 font-size
      • 3.3 font-weight
      • 3.4 font-style
      • 3.5 font 複合屬性
      • 總結
  • CSS文本屬性
  • • 外觀系列
    • • 4.1 color
      • 4.2 text-align 水準對齊方式
      • 4.3 text-decoration 文本裝飾
      • 4.4 text-indent 首行縮進
      • 4.5 line-height 行間距
      • 4.6 white-space 空白符處理
      • 4.7 letter-spacing 字間距
      • 4.8 word-spacing 單詞間距
      • 4.9 text-transform 文本轉換
      • 總結
  • CSS引入方式
  • • 5.1 行内樣式表
    • 5.2 内嵌式樣式表
    • 5.3 鍊入式樣式表
    • 5.4 導入式樣式表
  • Emmett文法
  • • 6.1 快速生成HTML結構文法
    • 6.2 快速生成CSS結構文法
  • CSS的進階特性
  • • 7.1 CSS複合選擇器
    • • 7.1.1 标簽指定式
      • 7.1.2 後代選擇器(重要)
      • 7.1.4 子選擇器(重要)
      • 7.1.3 并集選擇器(重要)
      • 7.1.4 僞類選擇器
      • • 連結僞類選擇器
        • :focus僞類選擇器
      • 總結
    • 7.2 CSS的元素顯示模式
    • • 7.2.1 塊元素
      • 7.2.2 行内元素
      • 7.2.3 行内塊元素
      • 總結
      • 7.2.4 元素顯示模式的轉換
      • 案列：小米側邊欄
    • 7.3 CSS的背景
    • • 7.3.1 background-color
      • 7.3.2 background-image
      • 7.3.3 background-repeat
      • 7.3.4 background-position
      • 7.3.5 background-attachment
      • 7.3.6 background
      • 背景色半透明
      • 總結
      • 案例：五彩缤紛導航
    • 7.4 CSS的三大特性
    • • 7.4.1 重疊性
      • 7.4.2 繼承性
      • 行高的繼承
      • 7.4.3 優先級

CSS簡介

CSS是層疊樣式表的簡稱，有時我們也會稱為CSS樣式表或級聯樣式表。

1.1 HTML和CSS的差別

CSS可以美化HTML，讓HTML更漂亮，讓頁面布局更簡單。

總結：

1. HTML主要是做結構，顯示元素内容
2. CSS美化HTML，布局網頁
3. CSS最大價值：由HTML專注去做結構呈現，樣式交給CSS，即結構(HTML)與樣式(CSS)相分離。

1.2 CSS文法

樣式規則

CSS規則由兩個主要的部分構成：選擇器以及一條或多條聲明。

選擇器{屬性1：屬性值1；屬性2：屬性值2；}

• 選擇器是用于指定CSS樣式的HTML标簽，花括号内是對該對象設定的具體樣式
• 屬性和屬性值以"鍵值對"的形式出現
• 屬性是對指定的對象設定的樣式設定的樣式屬性，例如字型大小、文本顔色等
• 屬性和屬性值之間用英文 “:” 分開
• 多個"鍵值對"之間用英文 “;” 進行區分

CSS基礎選擇器

2.1選擇器的作用

選擇器就是根據 不同需求把不同的标簽選出來 這就是選擇器的作用.

CSS做了兩件事:

1. 找到了标簽,選擇器 (選對人)
2. 設定這些标簽的樣式,比如顔色為紅色 (做對事)

2.2 選擇器的分類

2.2.1 基礎選擇器

基礎選擇器包括：标簽選擇器、類選擇器、id選擇器和通配符選擇器

标簽選擇器

類選擇器

樣式點定義 結構類(class)調用 一個或多個 開發最常用

類選擇器-多類名

多類名使用方式：

1. 在class屬性中寫多個類名
2. 多個類名中間必須用空格分開
3. 這個标簽就可以分别具有這些類名的樣式

使用場景：

1. 可以把一些标簽元素相同的樣式(共同的部分)放到一個類裡面
2. 這些标簽都可以調用這個公用的類，然後再調用總結獨有的類
3. 進而節省CSS代碼，統一修改非常友善

id選擇器

id選擇器可以為标有特定id的HTML元素指定特定的樣式

HTML 元素以id屬性來設定id選擇器，CSS 中id 選擇器以"#"定義

樣式#定義 結構id調用 隻能調用一次 别人切勿使用

通配符選擇器

1. *是全部的意思
2. 不需要調用

總結

CSS字型屬性

字型系列

3.1 font-family

CSS 使用 font-family 屬性定義文本的字型系列

• 各種字型之間必須使用英文狀态下的逗号隔開
• 一般情況下，如果有空格隔開的多個單詞組成的字型，加引号
• 盡量使用系統預設自帶字型，保證再任何使用者的浏覽器中都能正确顯示
• 在有英文字型和中文字型時，規定中文字型寫在英文字型的後面

3.2 font-size

CSS 使用 font-size 屬性定義文本的大小

• px(像素)大小是我們網頁的最常用的機關
• 可以給body指定整個頁面文字大小
• 标題标簽比較特殊，需要單獨指定大小

3.3 font-weight

CSS 使用 font-weight 屬性定義文本字型的粗細

font-weight 除了 bold 還有以下屬性：

屬性值	作用
normal(常用給标題不加粗)	預設值，定義标準的字元
bold	定義粗體字元
bolder	定義更粗的字元
lighter	定義更細的字元
100-900(100的整數倍)	400=normal，700=bold

3.4 font-style

CSS 使用 font-style 屬性定義文本的風格

屬性值	作用
normal	預設值，浏覽器會顯示标準預設的字型樣式
italic(常用)	顯示傾斜字型
oblique	顯示傾斜字型

3.5 font 複合屬性

• 書寫有順序，屬性與屬性之間空格隔開
• size 和 family 不能不寫，否則font屬性将不起作用

總結

CSS文本屬性

外觀系列

4.1 color

表示方式	屬性值
預定義的顔色值	red，green blue
十六進制	#FF6600
RGB代碼	rgb(255,0,0)或rgb(100%,100%,100%)

4.2 text-align 水準對齊方式

text-align 屬性用于設定元素内文本内容的 水準對齊方式

屬性值	解釋
left	左對齊(預設值)
right	右對齊
center	居中對齊

4.3 text-decoration 文本裝飾

屬性值	描述
none	預設值。沒有裝飾線
underline	下劃線 。标簽a自帶下劃線，可以設定取消
overline	上劃線
line-through	删除線

4.4 text-indent 首行縮進

通過設定該屬性，所有元素的第一行都可以縮進一個 給定的長度 ，甚至該長度可以為負值

em 是一個相對機關，就是目前元素(font-size)1個文字的大小，如果目前元素沒有設定大小，則會按照父元素的1個文字大小。

4.5 line-height 行間距

4.6 white-space 空白符處理

屬性值	解釋
normal	預設值，文本中的空格、空行無效
pre	預格式化，按文檔的書寫格式保留白格、空行原樣顯示
nowrap	強制文本不能換行，除非遇到 br ,内容超出浏覽器頁面則會自動出現滾動條

4.7 letter-spacing 字間距

letter-spacing 用來定義字元與字元之間的空白。

• 其屬性值可以為不同機關的數值(常用px)
• 允許使用負值
• 預設為normal

4.8 word-spacing 單詞間距

word-spacing 用來定義英文單詞之間的間距，對中文字元無效

• 其屬性值可以為不同機關的數值(常用px)
• 允許使用負值
• 預設為normal

注意：

相同：word-spacing 和 letter-spacing 均可以對英文進行設定。

不同：letter-spacing定義的為字母之間的間距，而word-spacing 定義的為英文單詞之間的間距

4.9 text-transform 文本轉換

用來控制英文字元的大小寫

屬性值	作用
none	預設值，不轉換
capitalized	首字母大寫
uppercase	全部字元轉換為大寫
lowercase	全部字元轉換為小寫

總結

CSS引入方式

5.1 行内樣式表

5.2 内嵌式樣式表

5.3 鍊入式樣式表

5.4 導入式樣式表

Emmett文法

6.1 快速生成HTML結構文法

1. 生成标簽 直接輸入标簽名按tab鍵即可 比如 div 然後tab鍵 就可以生成一對div标簽
2. 生成多個相同标簽 加上 * 即可 比如 div*3就可以生成3個div
3. 如果有父子級關系的标簽 用>即可 比如 ul>li 就可以
4. 如果有兄弟關系的标簽 用+即可 比如 div+p
5. 如果生成帶有類名或者id名字的，直接寫.demo或者#two 按tab鍵就可以了
6. 如果生成的div類名是有順序的，可以用自增符号$
7. 如果想要在生成的标簽内部寫内容可以用{}表示

6.2 快速生成CSS結構文法

第一個字母簡寫 ，按tab鍵就可…

CSS的進階特性

7.1 CSS複合選擇器

7.1.1 标簽指定式

由兩個選擇器構成，标簽和class/id，之間不能有空格

7.1.2 後代選擇器(重要)

外層寫前面，内層寫後面，中間空格隔開，不限于兩個元素

7.1.4 子選擇器(重要)

隻能選擇作為某元素的最近一級子元素，可以了解為長子選擇器。

7.1.3 并集選擇器(重要)

有多個标記具有相同的屬性，用逗号隔開，進行集體說明且任何選擇器都可以作為并集選擇器的一部分

7.1.4 僞類選擇器

用于向某些選擇器添加特殊的效果

連結僞類選擇器

屬性	作用
a:link	選擇所有未被通路的連結
a:visited	選擇所有已被通路的連結
a:hover	選擇滑鼠指針位于其上的連結
a:active	選擇活動連結(滑鼠按下未彈起的連結)

一點細節

:focus僞類選擇器

用于選取獲得焦點的表單元素

焦點就是滑鼠的光标

下面示例意思是光标停在哪個表單裡面，哪個表單的背景色為黃色。

總結

7.2 CSS的元素顯示模式

元素顯示模式就是元素(标簽)以什麼方式進行顯示

HTML元素一般分為塊元素和行内元素兩種類型

7.2.1 塊元素

塊元素的特點：

1. 比較霸道，自己獨占一行
2. 高度、寬度、外邊距以及内邊距都可以控制
3. 寬度預設是容器(父級寬度)的100%
4. 是一個容器及盒子，裡面可以放行内或者塊級元素

注意： 文字類的元素内不能使用塊級元素

7.2.2 行内元素

行内元素的特點：

1. 相鄰行内元素在一行上，一行可以顯示多個
2. 高、寬直接設定是無效的
3. 預設寬度就是它本身内容的寬度
4. 行内元素隻能容納文本或其他行内元素

注意：連結裡面不能放連結，但是特殊情況下a裡面可以放塊級元素，最好給a 轉換為塊級模式更安全。

7.2.3 行内塊元素

1. 一行可以顯示多個
2. 預設寬度就是本身内容的寬度
3. 高度、行高、外邊距以及内邊距都可以控制

總結

7.2.4 元素顯示模式的轉換

display 其屬性	作用
inline	将元素顯示為行内元素
block	将元素顯示為塊元素
inline_block	将元素顯示為行内塊元素

案列：小米側邊欄

代碼：

7.3 CSS的背景

頁面元素既可以添加背景顔色和背景圖檔

7.3.1 background-color

7.3.2 background-image

background-image實際開發常用logo或者一些裝飾性的小圖檔或者是超大的背景圖檔，優點是非常便于控制位置

7.3.3 background-repeat

參數值	作用
no-repeat	背景圖像不平鋪
repeat	背景圖像平鋪
repeat-x	背景圖像在橫向上平鋪
repeat-y	背景圖像在縱向平鋪

7.3.4 background-position

利用background-position：x y;

參數代表的意思是：x坐标和y坐标，可以使用方位名詞和精準機關

參數值	說明
length	百分數，由浮點數字和機關辨別符組成的長度值
position	top center bottom left center right 方位名詞

背景圖檔位置

1.參數是方位名詞

• 如果指定的兩個值都是方位名詞，則兩個值前後順序無關
• 如果隻指定了一個方位名詞，另一個值省略，則第二個值預設居中對齊

2.參數是精準機關

• 如何參數值是精準坐标，那麼第一個肯定是x坐标，第二個一定是y坐标
• 如果隻指定一個數值，那該數值一定是x坐标，另一個預設垂直居中

3.參數是混合機關

• 如果是精确機關和方位名詞混合使用那麼第一個肯定是x坐标，第二個一定是y坐标

7.3.5 background-attachment

background-attachment設定背景圖像是否固定或者随着頁面的其餘部分滾動

background-attachment後期可以制作視差滾動的效果

參數	作用
scroll	背景圖像是随對象内容滾動
fixed	背景圖像固定

7.3.6 background

當使用簡寫屬性時，沒有特定的書寫順序，一般習慣約定順序為：

背景色半透明

• 最後一個參數時alpha透明度，取值範圍在0~1之間
• 我們習慣把0.3的0省略掉

  

總結

案例：五彩缤紛導航

7.4 CSS的三大特性

7.4.1 重疊性

7.4.2 繼承性

行高的繼承

7.4.3 優先級

當同一個元素指定多個選擇器，就會有優先級的産生

• 選擇器相同，則執行層疊性
• 選擇器不同，則根據選擇器權重執行

選擇器權重如下表所示：

選擇器	選擇器權重
繼承或者 *
标簽選擇器	1
類選擇器，僞類選擇器	10
ID選擇器	100
行内樣式 style=“”	1000
！important	無窮大

标簽選擇器<類選擇器<id選擇器<行内樣式表<！inportant