輕鬆上手css(I) – 不可不知篇

輕鬆上手 CSS 系列文

我之前有發了一篇「學 css 前要準備什麼?」,如果你已經閱覽過這篇文章也準備好了,就讓我們跨出學習 css 的第一步吧。

如果你開啟了自己寫 css 的工具(例如記事本、DreamWeaver ),那我要在這邊跟你說聲抱歉,請先默默的將他縮小或關閉。

因為對初學者來說最重要的還是概念,請先別一頭熱的想要開始寫 css ,否則會適得其反唷。 當然,假使你已經不是初學者,或者你有過人的慧根,這篇文章也可以選擇跳過不看啦,因為今天寫的這一篇文章完全是針對 CSS 初學者喔。

你知道css不能獨立生存嗎?

CSS(Cascading Style Sheets)有一個很難記的中文名詞:串樣式列表,它是 W3C 經定義,用來替 html 以及 xml 這種檔案添加樣式的語言。

因此他必須要搭配 html 才可以產生出一張張動人的網頁,只有 css 的檔案充其量只是一堆語言,不具任何意義。(你硬要說他有參考價值的意義我也不反對啦:P)

你知道css和html之間的關聯嗎?

首先,這邊有一張很簡單的html網頁語法:

HTML

接著以下是利用剛剛提供的html語法製成的簡易網頁圖:

以第 1 行 <div id="header">我是 header</div> 為例,「我是 header」這段話是html的文字,他會直接秀在網頁上,而我們都知道在 html 裡頭,透過<>標記的標籤是不會顯示在網頁上面。

這段 html 語言的意思是:我是一個 id 叫做 header 的圖層,圖層裡頭包含「我是header」 這句話。

我們可以把 div(圖層)想像成是一個區塊,這個區塊的長寬可以隨你的意思做調整,而包含在這個區塊裡頭的內容就是靠 ,

這個標籤做設置。如果想要針對 id 叫做 header 的這個圖層區塊做修改,可以在 css 裡頭這麼寫:

CSS

☞ 補充

「id」在 css 語言中不叫做「id」,他有另外一個稱呼叫做「#」;
同理而言,「class」在css語言中則是叫做「.

你知道 id 和 class 有什麼不同嗎

其實在 html 裡頭設置 css 標籤自由度非常的高,他不像 html 一樣, font 代表的是字體、 color 代表的是顏色, html 每個標籤都有規定的意思不能更改,但 css 不同,css 完全可以依照你自已的選擇做設定,這個區塊你想取名叫做 muki ,那個區塊想叫做 space ,沒人會反對。如果真要說什麼規定,就是他的標籤只能用英文來命名吧

假使還要再說一項規定,就要談到 id 以及 class 的差別之處了。

  • id=header:這個 header 在一張網頁裡頭只能 出現一次 (這邊指的網頁是從 html 開始到結束,不是像 php 那種 include 的包法)
  • class=header:這個 header 在一張網頁裡頭可以出現無數次

★ 會撰寫 java script 的朋友這邊也要特別注意, id 可以被 js 裡頭的 GetElementByID 函數所運用, class 則不行。
★ 最後要提醒大家一點,在 css 裡頭大小寫是有差別的。你今天寫 id=header 以及 id=Header 這是兩種不同的屬性選擇器,請多多注意唷!!!

你知道 div 以及 span 的差異嗎

同樣的今天我寫了一張html網頁:

HTML

以下是呈現出來的網頁效果:

簡單的一個概念:使用 span 他不會有換行的效果,所以我們可以用 span 來做更細部的 css 修改。

瀏覽器兼容

網路上有非常多的瀏覽器,IE6、IE7、Firefox、Opera、Google..等等。我們都希望自己的網頁在每個瀏覽器瀏覽時都是最漂亮的、最符合自己理想的。無奈的是有的瀏覽器並不會乖乖照著 W3C 的規範去走,偏偏他又是目前市佔率最高的瀏覽器,那這該如何是好呢?

其實每個 css designer 都會碰到這樣的困擾,包含我自己也還在學習當中,所以 如果你有志設計css樣板給大家使用,就不得不正視這個問題!! 我的建議是多裝幾套瀏覽器測試一下效果,勤做修改吧!另外就是基礎一定要穩,別被每種瀏覽器給嚇著亂了陣腳唷。

學css前要準備什麼?

輕鬆上手 CSS 系列文

做專題之後,陸陸續續會聽到同學也想學習 css,互相研究,加上有的朋友會問我該怎麼學習 css,如何上手?該從哪些資料開始著手?

這邊簡單跟大家分享我的經驗,也希望對想要學習 css 的人有所幫助:)

學 css 要買相關書籍嗎??

這一點並沒有正確的答案,端看你自己學習的狀況來判定。

大家可以先試著回想自己在學習其他軟體、語言的時候,是買市面上的書籍回家研究呢?還是在網路上找大家的教學來學習?

要看你自己習慣哪種模式,就跟著一貫的學習方式走吧。

另外一種建議方式,我是認為你可以先想想你是否為「 css 完全初學者」?

如果以下 10 個問題,如何有 7 項以上都符合你的狀態,那你就是 css 完全初學者。

  1. 如果不查資料,我不知道 css 的全名是什麼?
  2. 在我的印象裡頭,css 就等於是讓排版美觀的意思。
  3. 我不懂 html,也不懂怎麼把 html 還有 css 兜在一起。
  4. 看到很漂亮的網站,我會發自內心的讚嘆。卻不會去思考如何建構他的排版。(意思就是我不會去想他怎麼分割、怎麼寫…就只是單純欣賞.羨慕)
  5. 如果不查資料,我不懂 margin 以及 padding 的差別。
  6. 我一直不能理解標籤怎麼控制我的版面
  7. 打開一份 css 文件,我不懂要從何開始學習、觀看,甚至修改。
  8. 如果我成功的修改了字型大小、顏色還有超連結的狀態,我會覺得自己很厲害。
  9. 給我一份完全沒有 css 標籤的 html 檔案,我沒辦法獨力將他加上標籤、搭配 css 呈現出來。
  10. 我真的很想學 css ,可是我不知道從何學起。

測驗結束,如果你符合「css完全初學者」,那我會建議你買一本書,但是這本書一定要從頭開始把整個css的架構都講的很清楚,讓你可以從基本的概念學起

muki有沒有推薦的書籍??

這邊要跟大家說聲抱歉,我只買過一本實體書籍:「FrontPage2000」,其他 html 以及 css 都是從網路上自學而來。所以我並沒有買過相關書籍,也無從推薦你們哪本比較好。

建議如果要買書的朋友,可以先問問週遭會 css 的朋友,有沒有覺得不錯的書?但最重要的是,希望大家可以親自到實體書店走一趟,翻翻每本書的內容,看哪一本的編排最適合你。

不要只是聽了朋友的推薦就衝動買下來,到時候如果不喜歡書本的解說、或者覺得內容太難,就欲哭無淚囉。(這邊有Carrie推薦的幾本css、html書籍,大家可以去看看)

我要準備什麼工具??

假設你買好了書(或者從網路上蒐集到教學資訊),你可能會躍躍欲試,馬上就要開始寫 css。

但是你可能會發現無從下手?會不會因為你不知道要用什麼工具呢?

首先我們要知道一個概念,css 這個文件他無法單獨在瀏覽器中讀取,就算讀到也只是文字而已,css 必須搭配 html 才可以呈現他的效果

我常常拿大家熟悉的「人」來做例子。
今天你要出門,你一定要穿衣服才能出門吧!!!

  • 「裸體的你、什麼都沒穿的你」就是 html
  • 「穿在你身上的衣服、配件」就是 css

要搭配衣服(css)穿上自己(html)的身上,才可以有美麗的效果。所以說任何的美化一定要搭配一個實體的東西,否則就等於 0。

講到這裡,相信大家應該都懂了。

你的首要工具(知識),就是你一定要懂基礎的html,否則免談。如果你真的不懂,可能你要買的書籍就不是純粹的css,而是要搭配html的css書籍

假設你會基礎的 html,要開始學習 css,這時候你的工具選擇有兩種方式:

  1. 網頁編輯器的軟體輔助你使用 css (ex. DreamWeaver),網路上也有許多是小型免費的網頁編輯器軟體可供下載,大家也可以用用看。
  2. 文字編輯器的軟體輔助你使用 css (ex. VScode, Sublime, Brackets)。

我推薦大家使用網頁編輯的軟體(雖然我是用文字編輯),因為對初學者來說,大家不可能都把每一段 css 背的很熟,靠軟體輔助慢慢學習會比較好。

開始上手css

最後,有了好的教學書籍,有了很棒的輔助軟體,就要歡迎你來到 css 的世界囉!!

一開始你會學的很愉快,因為 css 普遍來說並不難。但是隨著接觸的資料愈多,需要用到更高深的技巧,甚至是 CSS3 搭配 HTML5 的變化時,可能會有很嚴重的挫敗感。不過請不要氣餒,因為學起來了就是你的!!!

css 不是一蹴可及的東西,他需要不斷的練習、學習,你才可以將他運用自如。
而且 css 一直在進化,我們都需要不斷上網學習新知識,才可以讓自己的網頁排版功力一直進步唷XD。