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

輕鬆上手 CSS 系列文

  • 學 CSS 前要準備甚麼?
  • 輕鬆上手css(I) – 不可不知篇
  • 輕鬆上手css(I) – 叫叫 ABC 篇
  • 學 css 前要準備什麼?」,如果你已經閱覽過這篇文章也準備好了,就讓我們跨出學習 css 的第一步吧!!!

    如果你開啟了自己寫 css 的工具(例如記事本、DreamWeaver ),那我要在這邊跟你說聲抱歉,請先默默的將他縮小或關閉。因為對初學者來說最重要的還是概念,請先別一頭熱的想要開始寫 css ,否則會適得其反唷。

    當然,假使你已經不是初學者,或者你有過人的慧根,這篇文章也可以選擇跳過不看啦,因為今天寫的這一篇文章完全是針對css初學者

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

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

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

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

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

    <html>
    <head>
      <title>html+css</title>
      <body>
        <div id="header">我是header</div>
        <div class="nav">我是nav(導覽列)</div>
        <div class="content">
          <div class="entry">
            我是muki<br />muki space*<br />http://muki.tw
          </div>
        </div>
      </body>
    </head>
    </html>

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

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

    <div id="header">以及</div>這段 html 語言的意思是:我是一個 id 叫做 header 的圖層,圖層裡頭包含「我是header」 這句話

    我們可以把 div(圖層)想像成是一個區塊,這個區塊的長寬可以隨你的意思做調整,而包含在這個區塊裡頭的內容就是靠<div>, </div>這個標籤做設置。如果想要針對 id 叫做 header 的這個圖層區塊做修改,可以在 css 裡頭這麼寫:

    #header {
    background: #ccc;  /*設置區塊的背景顏色*/
    font-size: 16px;  /*設置區塊裡的文字大小*/
    }

    「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網頁:

    <body>
      <div class="div1">div1</div>
      <div class="div2">div2</div>
      span1
      span2
    </body>

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

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

    如果還是不太清楚,這邊再舉一個例子:

    span文字 測試
    div文字 <div>測試</div>

    呈現出來的效果:

    span文字測試 (不會換行)

    div文字
    測試 (他會當成兩個區塊所以會換行)

    ★ 瀏覽器兼容

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

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