iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 15

[Day 15] 阿嬤都看得懂的開始寫第一支 .css 檔案囉!

阿嬤都看得懂的開始寫第一支 .css 檔案囉!

昨天我們介紹了怎麼使用 style 標籤,把所有 CSS 樣式獨立收整到檔案最前面。這樣做固然更加清楚明晰,但是要上上下下對照這些選擇器和標籤,也是很麻煩勞心的工作。這樣不行啊!不是說工程師都很懶嗎?我就是因為這樣,才讓我阿嬤來當工程師的耶!

沒錯,所以更多時候,我們連 style 標籤都不用,而是會把整個 CSS 都拆出來,變成 .css 的檔案。那就讓我們先把上面這個檔案的 CSS 拆成另個檔案吧!我們先把整個 style 標籤剪下來,然後貼在另個新的記事本上。同樣地,選擇儲存成所有檔案,然後檔名就取 "gavagai_style.css" 吧!

等等,那拆出來以後,我原本的 .html 檔怎麼知道,它要去哪個 .css 檔案找這些 HTML 標籤對應的樣式呢?我要寫些什麼文字,才能告訴瀏覽器怎麼這個檔案呢?

沒關係,先不管我們用什麼文字告訴瀏覽器這個資訊,這段文字應該被渲染出來嗎?不應該對吧。這個情境是不是似曾相識呢?

是的,就像前面我們引入 style 這個特殊標籤一樣,我們又需要引入其他特殊標籤囉!這個標籤叫作

  • link,意思就是連結到其他檔案。不過,既然是要連結到其他檔案,我們至少必須告訴瀏覽器
    1. 這個檔案在哪裡:我們會在 link 標籤中,加上 href 字樣,並且在後面加上等於以後,再加上想引入檔案的位址。href 的 "h" 是 "hyper",超連結的「超」,只是個炫炮的說法,"ref" 是 "reference",意思是參考,所以就是請瀏覽器參考這個位置來找檔案的意思。這個檔案位址可能是網址,也可能是某個資料夾。
      那麼,如果是想引用某個資料夾中的檔案,應該怎麼辦呢?讓我們對著想引用的檔案按右鍵後,選內容

      就可以在「位置」這邊看到檔案夾的路徑囉!

      因此,這個檔案在 link 標籤中的引入方式,就會是
href="D:\鐵人賽\06\gavagai_style.css"

沒錯,不過,當我們把要引入的檔案,例如這邊的 gavagai_style.css,和引用檔案的檔案,例如這邊的 gavagai.html,放在同個資料夾中時,我們可以偷懶,只寫檔名就好:

href="gavagai_style.css"
  1. 另外,就算瀏覽器知道去哪邊引入檔案,瀏覽器還是不知道這個檔案引進來之後要幹嘛,所以我們也必須告訴瀏覽器,這個檔案和現在渲染網頁的關係是什麼。關係的英文是 relationship,我們偷懶只寫前 3 個字母 rel 就可以了。現在引入這個檔案,是想當作樣式表 (stylesheet) 來使用。因此,我們會這樣寫
rel="stylesheet"

綜合上面這些討論,我們可以發現,我們的 link 標籤長這樣:

	<link href="gavagai_style.css" rel="stylesheet">

讓我們把這個 link 標籤放到 gavagai.html 這個檔案的最上方:

<link href="gavagai_style.css" rel="stylesheet">
<div>
	<div class="gavagai">區塊一</div>
	<div class="gavagai" style="background-color:violet">區塊二</div>
	<div class="gavagai">區塊三</div>
	<div class="gavagai">區塊四</div>
</div>

儲存檔案,然後再開啟看看,就會發現同樣的結果囉!不過整個檔案看起來,是不是清爽多了呢?

不知道大家是否有感覺,在今天的討論過程中,我們逐漸將樣式從元件中抽離出來,進行獨立的書寫與管理。當然,某部分原因是工程師都很懶,不想一直複製貼上。不過,我們也可以思考看看:假使在上面的例子中,我們都還是使用行內樣式,不把樣式獨立成分類,而是每個 div 標籤就寫一次樣式。結果客戶突然說,所有區塊都需要改成寬高都 80px,而非原本的 100px,這時候,我們就需要改 4 次。那還是因為我們只有 4 個區塊喔,如果我們有 100 個區塊,我們就需要改 100 次了!不過,因為我們把樣式抽離出來,變成分類了,我們就只要改 1 次就搞定了!這樣有體會到 DRY 的妙處嗎?

工程師都很懶,也因此我們必須很聰明。把不同功能的程式碼獨立拆開,各司其職,通常是個方便管理、修改、與擴充的聰明方法。


想一想:當我們把被引用的檔案 A,以及引用 A 檔案的檔案 B,都放在同個資料夾時,我們可以直接在 B 裡面,寫上 A 的檔名,電腦就會知道要找同資料夾中,檔名為 A 的檔案。這種方法不寫出完整路徑,而是相對著檔案 B 所處的資料夾。那麼,我們是否可以有其他相對的方式,來更方便地引用檔案呢?例如,如果檔案 A 是放在檔案 B 的上一層資料夾,或者下一層資料夾,我們是否也有這種相對路徑的檔案引用方式?


上一篇
[Day 14] 阿嬤都看得懂的 style 標籤怎麼用
下一篇
[Day 16] 阿嬤都看得懂的通用 .html 檔案結構
系列文
你阿嬤成為網頁前端工程師的第一步30

尚未有邦友留言

立即登入留言