CSS教學分享文 – 固定背景圖之語法練習

大家好!這次飛肯的教學文,要來分享的是,如何利用 CSS-div 語法排版,將背景圖片固定在自己想要的網頁位置上,雖然是個很簡單的範例,不過各種常用的 background 語法設定幾乎都可以從這次範例中一起學到喔。
此外,版型中還附加了兩個 CSS3 的特殊效果語法,來讓大家認識一下:分別是圓角效果,以及文字的陰影效果,現在就請大家跟著以下步驟,一起完成今天的 CSS 語法練習吧!

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok17


【步驟一】HTML 網頁架構

按照慣例,我們先從 HTML 網頁架構開始著手,請大家先參考底下圖示,建立一個新的檔案 :

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok1

比較需要注意的是, body 內設有兩個 id 選擇器(分別命名為 “BOX” 以及 “CONTENT” ),主架構則很簡單,只有 h1 標題以及 p 段落標籤。


【步驟二】附加 CSS 外部樣式表

再來,開啟一個新的 CSS 外部樣式表,並附加在 HTML 中;如下圖,樣式表檔名為「 layout.css 」。

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok2

在「 layout.css 」樣式表中,第一行請各位一樣利用匯入「 reset.css 」這個檔案來做重置歸零的動作,如果有新同學不清楚的話,歡迎參考飛肯之前的這一篇教學專文,裏頭有詳細的說明: 《Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化》

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok3

更不要忘記將「 reset.css 」這個檔案下載之後,與我們正在編寫的「 layout.css 」放在同一個資料夾喔。


【步驟三】CSS 排版 – body

從這個步驟開始,咱們來正式編寫 CSS 語法吧~關於本篇分享文最重要的背景圖片之設定,都是寫在 body 裡面!

要請大家先準備一張用來當作固定背景圖片的小圖示,在範例中,小編選用了一個 256 px * 256 px 的 PNG 圖檔,並希望圖片可以單獨且固定在網頁的右下方,

CSS 語法的部分,就請大家直接依照下方圖示說明:

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok4-1

完成之後,網頁如下 :

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok5


【步驟四】CSS 排版 – BOX

在 BOX 區包含了 h1 標題以及 p 文字段落,為網頁的主要畫面,我們在這裡要設定的有寬度與文字字體,又,因為已經設好寬度,所以只要將 margin-left 跟 margin-right 都設 auto,畫面即可置中。

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok6-1

完成之後,網頁如下 :

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok7


【步驟五】CSS 排版 – CONTENT

在 CONTENT 區,我們利用 padding 以及背景色的設定,可讓 h1 標題跟 p 段落之間,視覺上面有明顯區隔;

最後一行就是要分享給大家的 CSS3 特效之一 : 圓角效果,如果想要角度大一點的話,只要將像素數字再加大就可以了。

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok8

完成之後,網頁如下 :

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok9


【步驟六】CSS 排版 – h1 標題

在 h1 標題的語法部分,幾乎都是常用的文字設定,關於文字設定的專文,歡迎大家參考底下這一篇喔~

《CSS 教學 – 基本文字設定 : font-size 與 line-height》

比較需要說明的只有「 text-transform : uppercase 」,這句語法可以讓英文字母設為全部大寫。相反的,假如希望英文字母變小寫的話,將 “uppercase” 改為 “lowercase” 就可以囉!

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok10

完成之後,網頁如下 :

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok11

在這段語法的最後,請大家再加註一行,這也是今天要分享給大家的第二個 CSS3 特效 : 文字的陰影效果( text-shadow )。

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok12-1

陰影的範圍及程度,大家可以參照圖示中的數值,或是自己也可以 try 看看不同的設定,完成之後,就可以看見 h1 標題呈現出明顯的立體感囉。

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok13

由於 h1 同時包含 FLYCAN 跟課程名稱,一眼看去辨識度不高,所以請大家回到一開始 HTML 架構中,這邊小編有嵌入了一個 b 標籤 : 也就是字體加粗;

接下來,為了想要讓課程名稱更跳色醒目一點,我們可以直接指定 b 標籤的顏色:

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok14

這樣子,就可以完成 h1 標題的整體美化作業了。

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok15


【步驟七】CSS 排版 – p 文字段落

p 段落的語法很簡單,就是基本的文字設定,大家請直接參考下圖:

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok16

完成之後,我們來檢視一下整個網頁吧~

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok17-1

唉唷~看起來不錯唷!(給自己拍拍手)

……可是,大家先不要走開!

教學文還沒結束喔!


【附錄一】background 語法的縮寫方式

現在,請大家回顧一下步驟三,光是 background 的設定就用掉了5行,是不是可以簡化一點呢?

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok4-1-1

嘿嘿嘿…….當然是沒問題,這邊就教各位如何簡化的進階寫法。

我們可以將所有與 background 相關的設定,全部縮寫在同一行語法中,縮寫之屬性先後順序並無嚴格規定,但大家可以記熟一種固定的順序以免遺漏喔。

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok19-11


【附錄二】當文字內容增加時…如何保持版型的完整性?

在本篇一開始的 HTML 架構中,因為小編只有放入一小段文字內容在 p 段落中,所以最後整個網頁可以完整呈現在畫面中 :

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok17-2

假如,我們需要增加內容文字時,那會導致甚麼情形呢?…

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok18

哎呀!雖然咖啡跟筆記還是完美的固定在畫面右下角,可是,p 段落與網頁最下緣完全緊貼在一起了… 囧

為了避免出現這種窘況,小編提醒一下大家,請同樣回到步驟三: body 的語法排版中,只要再加註一行 :

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok19-2

打好之後,來看看結果發生甚麼變化吧~

CSS 語法 - 網頁設計  - CSS教學分享文 - 固定背景圖之語法練習 - ok20

唷呼~這樣子,就算得上是一個專業又完美的 Ending 啦!

這次的 CSS 語法教學就做到這邊結束,謝謝各位同學有耐心地跟著飛肯小編一起練習,希望大家都能夠有所收穫喔!

 

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , , , , , .

迴響已被關閉。