從零開始用github架設靜態網站入門(3) - CSS客製化 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

從零開始用github架設靜態網站入門(3) - CSS客製化

html 靜態網站 css css教學 github-pages

tw40210 2021-07-15 14:20:54 ‧ 2618 瀏覽

分享至

對於HTML裡面編寫的大多數元素我們都可以賦予它特別的屬性，像是在前面章節我們提到，將div賦予了class=”row”的屬性後，瀏覽器會將其內的文字看作同一行並對超過的部分自動換行，而除了這種功能型的屬性之外，還有一個非常常見的修飾屬性style，style屬性後面可以接所謂的css語法對物件作各類修飾，例如顏色、形狀、位置等等，接下來我們會介紹一些比較常見的css語法讓大家參考。

CSS常見語法

color、background - 板塊內字體和背景的顏色，可以用顏色也可以用色碼指定，關於色碼的對應可以參考這個網站。
Ex: color: red; background: #F05F5C;
font-family – 文字的字型，一些Google的字型可以從這個網站獲得，點選想要的字型之後，把左邊的link標籤像是在引入Bootstrap一樣放進head標籤裡就可以使用了。
Ex: font-family: 'Open Sans' ;
margin - 用來調整位置用，不過其實我比較常用margin-top、margin-left來指定要在哪個方向取出間隔，可能不是個好習慣，但我覺得這樣比較直觀一點(懶)。
Ex: margin-top - 12px;
width、height - 物件的長寬屬性，一樣是給一個數值當作參數。
Ex: width: 12px;
border-radius – 物件的邊緣圓滑程度，可以給一個數值也可以給百分比當參數，像是圓形的按鈕或是圓角的長方形都是用這個屬性控制的。
Ex: border-radius: 50%;

CSS樣式檔編寫&引入

剛剛所有的屬性都可以在物件後面接著style定義，但是如果一個頁面中很多文字或物件都是類似的樣式，那在每個物件後定義太麻煩了，也會影響整體程式碼的整潔，所以這時我們就需要一個專門控管樣式的檔案，在裡面告訴瀏覽器哪些物件要一起套用一樣的樣式，以此來維持我們的程式碼閱讀性。

首先，我們需要創建一個檔名以.css結尾的檔案，然後把這個檔案在head中引入，告訴瀏覽器之後就按照這個表幫我修飾物件。

<link rel="stylesheet" href="css/style.css">

接著，在CSS樣式檔內我們可以這樣指定我們要的樣式。

h1,h2,h3,h4,h5,h6{
    font-family: 'Noto Sans';
} \\ <h1>~<h6>的標籤都以這個屬性修飾

p.lead{
    font-weight: 600;
    color: black;
} \\ <p>標籤如果class屬性是”lead”都以這個屬性修飾

#intro .jumbotron{
    height: 70vh;
} \\ 在id屬性為”intro”的標籤內，如果class屬性是” jumbotron”都以這個屬性修飾
\\ id屬性通常就是用來特別指定某個物件用的像是，<div class=”row” id=”intro”>

header nav a img{
    width: 38px;
} \\ 在<header>標籤內的<nav>標籤內的<a>標籤內的<img>標籤都以這個屬性修飾
\\ 主要是想展示如何指定包在其他標籤內的標籤

瀏覽器開發者工具

看完上面的做法有沒有人開始實做看看的啊？如果有的話，應該會發現這樣子先寫好給數值再去瀏覽器看效果，不滿意的話再修改再看效果，真的很沒有效率，所以這邊要介紹一個Chrome內建的開發者工具 (我不太確定是不是每個瀏覽器都有內建)，可以讓你在瀏覽器上面直接改樣式設定，這樣就不用來回確認了，不過要記得，在開發者工具內的修改都是暫時的，確定好樣式設定之後一定要再寫回檔案內，財不會前功盡棄。

以下就來一步步說明開發者工具的使用流程。

1.先對想要修改的物件按右鍵-檢查
3_1