第三章: CSS快速上手

一. CSS簡介
1 CSS的基本概念
1) 什么是CSS
CSS(Cascading Style Sheets) ，通常稱為CSS樣式表或層疊樣式表
2) CSS的作用
CSS的作用就是用來規(guī)定每個HTML元素表現(xiàn)的樣子, 比如
●字體的大小
●顏色
●擺放位置...

CSS也被稱為網(wǎng)頁的化妝師

再比如, 如果說HTML是毛坯房的話, 加上CSS就是精裝修房

3) CSS的書寫位置
●外聯(lián)
●內(nèi)嵌
●行內(nèi)

在目前的學(xué)習(xí)階段, 為了調(diào)試方便, 我們將CSS寫在html文件的<style>標簽中

4) CSS的基礎(chǔ)語法

語法

主要由?選擇器+聲明塊?組成

示例

將h1的字體改成紅色

二. 選擇器

1 什么是選擇器

選擇器的主要作用就是從一堆元素中選出特定的符合要求的元素

更多的選擇器, 參考css選擇器手冊

比如, 上圖中有一堆小黃人, 現(xiàn)在需要統(tǒng)一改變單眼小黃人的顏色為紅色, 該如何操作呢?

• 第一步: 選出所有的單眼小黃人

• 第二步: 修改顏色為紅色

CSS的思想也是類似的

• 第一步: 通過選擇器, 找出符合要求的HTML元素(選元素)

• 第二步: 修改找出來的元素的屬性(改屬性)

常見的選擇器包括

• 元素選擇器

• 類選擇器

• id選擇器

2 基本選擇器

1) 元素選擇器

作用

根據(jù)標簽名, 將同一種標簽元素選擇出來

語法

示例

修改所有p標簽的顏色為紅色

2) 類選擇器

作用

選擇某一類元素, 該元素通過class屬性指定

語法

示例

多類名使用空格隔開

3) id選擇器

作用

選擇某一個元素, 該元素通過id屬性指定

語法

示例

練習(xí)

實現(xiàn)'Google'圖標

提示

• 使用span讓多個元素在同一行排列

• 使用class類選擇器

• 使用color定義顏色

• 使用font-size:100px指定大小

答案

方法

更多選擇器的用法, 查手冊CSS手冊

3 復(fù)合選擇器

1) 后代選擇器

作用

選擇某一個元素的子孫后代, 使用?空格

語法

示例

2) 并集選擇器

作用

同時選擇多個選擇器, 使用?逗號

語法

3) 交集選擇器

作用

同時滿足條件

語法

現(xiàn)在有這樣一個需求

h1和p都是應(yīng)用的同一個類表示強調(diào), 但是我們希望h1的強調(diào)是紅色, p的強調(diào)是藍色

示例

4) a元素的偽類選擇器

作用

選擇同一元素的不同狀態(tài)

語法

• a:link /?未訪問的鏈接?/

• a:visited /?已訪問的鏈接?/

• a:hover /?鼠標移動到鏈接上?/

• a:active /?選定的鏈接?/

書寫順序: lvha, 愛恨法則, love & hate

示例

練習(xí)

在不修改以上結(jié)構(gòu)代碼的前提下，完成以下任務(wù)：

1. 鏈接 登錄 的顏色 為 紅色

2. 鼠標經(jīng)過 登錄 時顏色 為 藍色

3. 主導(dǎo)航欄里面的所有的鏈接改為橙色

三. 文本相關(guān)屬性

1 font相關(guān)

1) 大小font-size

作用

設(shè)置字體大小

示例

2) 字體font-family

作用

設(shè)置字體

示例

• san-serif : 非襯線字體(文字的筆畫粗細是一樣的, 如黑體)

• serif: 襯線字體(文字的筆畫有尖角, 如宋體)

會依次查找電腦上的字體, 如果都沒有, 就使用一種非襯線字體

3) 粗細font-weight

作用

設(shè)置文本的粗細

示例

4) 風(fēng)格font-style

作用

設(shè)置文本的傾斜

5) 常用連寫

font是可以連寫的, 通常連寫也是很常見的

示例

2 外觀

1) color

作用

color屬性用于定義文本的顏色

R: red紅色,?#00~#FF(0~255), 前兩位

G: green綠色,?#00~#FF(0~255), 中間兩位

B: blue藍色,#00~#FF(0~255), 后兩位

2) 文本對齊

text-align

作用

設(shè)置文本內(nèi)容的水平對齊方式

3) 行高

line-height

作用

屬性用于設(shè)置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高

設(shè)置單行文本垂直居中

4) 裝飾線

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

四. 背景相關(guān)屬性

什么是叫背景

背景的概念最早提出是在攝影和圖像處理領(lǐng)域,

主要目的是為了突出主體, 通常會用一個背景來襯托. 比如證件照

網(wǎng)頁一開始主要也是來處理文字和圖片, 就借鑒了背景這個概念

背景可以純色的, 也可以是一張圖片

1 背景顏色(color)

語法

如果要設(shè)置背景, 元素必須有寬高!

2 背景圖片(image)

語法

3 背景平鋪(repeat)

默認情況下背景圖片是鋪滿整個容器的, 就好比貼地板, 這樣做的好處是可以減小整個圖片的體積, 加快網(wǎng)站的訪問速度

語法

示例

4 背景位置(position)

語法

5 背景簡寫

建議

background: 背景顏色 背景圖片地址 背景平鋪 背景位置

示例

五. 盒子模型

1 盒子分類

每個元素都有默認的顯示方式, 包括

• 塊盒: 獨占一行, 可以設(shè)置寬高

• 行盒: 不獨占一行, 不能設(shè)置寬高(不生效)高度由字體大小撐開

顯示方式是由display屬性控制的

display常見的值:

• block: 塊盒

• inline: 行盒

• inline-block: 行內(nèi)塊

2 盒子模型

現(xiàn)實中的盒子有

●邊框(厚度): border

●填充泡沫: padding

●內(nèi)容: content

盒子與盒子之間的距離就是外邊距

代碼中的盒子模型, 打開瀏覽器, 通過調(diào)試窗口, 可以看到

示例

1) 邊框border

語法

邊框的樣式包括:

• none：沒有邊框即忽略所有邊框的寬度（默認值）

• solid：邊框為單實線(最為常用的)

• dashed：邊框為虛線

• dotted：邊框為點線

示例

圓角邊框

在新的設(shè)計語言里, 圓角邊框也是非常常見的表現(xiàn)形式

在CSS3中新增了border-radius

比如:

示例

通過調(diào)整border-radius的值改變弧度, 當(dāng)值為height的一半時, 就是表現(xiàn)為一個半圓形

也可以通過border-radius: 50%畫一個圓

2) 內(nèi)邊距padding

內(nèi)邊距也叫內(nèi)填充, 是內(nèi)容和邊框border之間的距離

簡寫

按順時針的方向: 上右下左

示例

一般, 寫兩個值的情況比較常見

分別表示: 上下和左右

示例

實戰(zhàn)案例

新浪導(dǎo)航欄的核心就是因為里面的字數(shù)不一樣多，所以我們不方便給具體的寬度

這個時候, 我們就可以通過設(shè)置padding的方式撐開盒子

答案

3) 外邊距margin

外邊距通常用來設(shè)置兩個盒子之間的距離, 可以用來確定盒子之間的相對位置關(guān)系

塊盒水平居中

• 盒子必須指定了寬度（width）

• 左右的外邊距都設(shè)置為auto

示例

清除默認內(nèi)外邊距

由于瀏覽器會有一個默認的樣式, 為了使我們的網(wǎng)頁在所有的瀏覽器中看起來是一樣的效果, 通常我們會先清除一些默認樣式, 這個過程叫reset

示例

六. 浮動

1 為什么需要浮動

首先, 思考一下下面的問題:

1. 如何讓多個塊盒(div)水平排列成一行？

2. 如何實現(xiàn)塊盒的左右對齊?

2 什么是浮動

概念

設(shè)置了浮動屬性的元素會

1. 脫離標準流(整個HTML文檔的元素, 從上而下, 從左到右排列)

2. 移動到指定位置

浮動最早的出現(xiàn), 是為了實現(xiàn)圖文混排的, 但是隨后, 大家發(fā)現(xiàn)可以通過浮動來實現(xiàn)布局

3 語法

讓一個元素向左或向右浮動

4 特性

1) 脫標

設(shè)置了浮動的元素會脫離標準流, 不再占用原來的位置, 后面的盒子會向上跑

2) 改變display

float屬性會改變元素display屬性。

任何元素都可以浮動。浮動元素會生成一個塊盒，而不論它本身是何種元素。

生成的塊盒和我們前面的行內(nèi)塊極其相似

• 同在一行顯示

• 可以設(shè)置寬高

5 應(yīng)用

我們知道，浮動是脫標的，會影響下面的標準流元素

因此, 我們需要給浮動的元素添加一個標準流的父元素，這樣可以最大化的減小了對其他標準流的影響

1) 實現(xiàn)頭部布局

• 左邊是一個logo

• 右邊是導(dǎo)航

2) 實現(xiàn)內(nèi)容布局

6 清除浮動

1) 為什么要清除浮動

因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0，就影響了下面的標準流盒子

2) 如何清除浮動

目前使用最多的方式, 使用:after偽元素

示例

八. 定位

1 為什么需要定位

如果想實現(xiàn)下面的效果, 只靠浮動是沒有辦法實現(xiàn)的

像上面這種, 讓一個盒子固定在某個位置的情況, 需要使用定位來實現(xiàn)

2 什么是定位

定位也是用來布局的，它有兩部分組成：

定位 = 定位模式 + 邊偏移

定位模式包括:

• 絕對定位:?posistion: absolute

• 相對定位:?position: relative

• 固定定位:?position: fixed

邊偏移包括

定位的盒子有了邊偏移才有價值。 一般情況下，凡是有定位地方必定有邊偏移。

3 定位模式詳解

1) 相對定位

相對定位參考自己在標準流中的位置偏移

效果圖

特點

1相對于自己原來在標準流中位置來移動的

2原來在標準流的區(qū)域繼續(xù)占有，后面的盒子仍然以標準流的方式對待它

效果圖

2) 絕對定位

絕對定位參考最近的帶有定位的父級元素偏移

• 如果父級沒有定位, 就參考瀏覽器的左上角偏移

• 如果父元素有定位, 參考父元素的左上角偏移

示例

規(guī)律

如果給一個元素設(shè)置絕對定位, 一定要記得給其父元素設(shè)置相對定位, 否則會出現(xiàn)意料之外的情況

簡記:?子絕父相?——?子級是絕對定位，父級要用相對定位

3) 固定定位

固定定位參考瀏覽器可視窗口偏移

示例

微信公眾號底部布局

4 z-index

在使用定位布局時，可能會出現(xiàn)盒子重疊的情況

加了定位的盒子，默認后來者居上， 后面的盒子會壓住前面的盒子

應(yīng)用?z-index?層疊等級屬性可以調(diào)整盒子的堆疊順序

如果文章對你有幫助的話，也請你幫我2個忙吧 (*?▽?*)

給這篇文章一鍵三連吧，對我很重要啦~

關(guān)注一下我 @新中地職業(yè)培訓(xùn)學(xué)校，聽說現(xiàn)在關(guān)注的，以后都是尊貴的老粉啦！

獲取更多GIS開發(fā)相關(guān)課程資源V：gis2210