iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 10
0

會寫HTML了,可是放在瀏覽器看起來卻很單調,接下來就可以用CSS幫它做樣式,之前從CSS zen garden可以看出,CSS的功能是很強大的,可以做出各式各樣的視覺樣式。

CSS的套用方法,可以直接寫入html檔,也可以另外建立css檔來引入。通常建議另外引入,否則html與css的語法混在一起,可讀性會變得很低。而且最重要的是,如果都直接寫入html,就沒辦法豐富地套用多個層次的樣式(這跟之後要講的選擇器與權重有關)。

將樣式寫在元素內

用style屬性來指定字的顏色為紅色,寫在開始標籤內,元素的內容就會改變樣式。

<p>我是段落</p>
<p style="color: red;">我是段落</p>
<p>我是段落</p>

缺點:

  • html語法跟css語法混在一起,導致可讀性很低,如果需要修改的話,會眼花撩亂。
  • 無法一次幫多個元素寫樣式,必須一個一個元素寫入css。
  • 權重被寫死,樣式套用的靈活度低。(權重是套用css樣式時,依各種因素計算哪個樣式會勝出被顯示,這將在之後的文章作介紹。)

將樣式寫在<head>元素內

還記得我們之前學到的<head>元素嗎?文檔內的頭腦,用來裝載元數據,並影響<body>的內容展示。我們可以在這裡加<style>元素,並在元素內寫入要指定的樣式(看不懂怎麼指定的沒關係,下一篇會開始講選擇器)。

  • 關於<style>元素:

    用來寫入樣式,通常是寫css樣式,所以沒有指定類型時,它的type預設值為text/css,也就是css的寫入方式。

      <style type="text/css">
    

缺點:

  • <head>的內容會太多太雜,過於冗長。

用<link>引入css檔

這是目前最普遍的做法,它的優點是:

  • html檔與css檔區分得很清楚,可以各自編輯。
  • 將樣式套用的順序放在css檔內,權重較好管控。
  1. 首先建立一個css檔,取名為style.css。建立css檔就跟html檔一樣很直覺,副檔名叫css檔可以了。

  1. 然後在<head>元素內,用<link>元素引入css檔內寫的樣式。(也可以引入<body>內,但通常引入<head>是比較好的。因為關乎整個文檔被瀏覽器讀取的順序。)

  • 關於<link>元素:
    • <link>是外部連結元素,通常用來引入樣式表,除了css檔之外,也可以引入其它網路上現有的資源。
    • rel屬性,語意為relationship,屬性值stylesheet是樣式表。
    • type屬性,屬性值為text/css,代表引入的樣式表是css檔的樣式表。
    • href是來源,指定要的來源是我們寫好的css檔。

用@import匯入css檔

  • 這個方法可以寫在html檔,它特殊在於也可以用在css檔內。只是這個方法通常比較少人使用,我目前也沒有用到過@import,期待未來會發現它的奧妙之處。

  • 注意:它必須先於其他的樣式描述,除了@charset之外。

  • @import的語法有兩種,這兩個的效果都一樣。

    @import “css檔”
    @import url("css檔")
    
  • 用在html檔內:
    建立一個css檔,並取名為style.css,然後透過<style>元素匯入。它必須寫於其他樣式描述,例如文檔中的 p{ color: blue }。

        <head>
        	<style>
        	    @import "style.css";
              @import url("style.css");
              p{
                  color: blue;
              }
          </style>
        </head>
    
  • 用在css檔內:
    一樣除了@charset外,要寫在其它樣式之前。(否則不會傳送@import的請求)

        @charset: UTF-8;
        @import "style.css";
        @import url("style.css");
        .nav{
            background-color: pink;
        }
    

今天的筆記到這裡,明天見~/images/emoticon/emoticon41.gif

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day9 動手寫HTML(4)
下一篇
Day11 CSS selector (1)
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言