iT邦幫忙

0

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

對於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' ;
    Font_site

  • 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

2.在Style欄位中,對element.style修改樣式,這是對單一物件的樣式修改,如果你想要直接像樣式檔一樣對所有標籤修改,那就不要選element.style選你要的那個標籤群.btn之類的。

在這裡我原本就有兩行樣式設定了,Chrome會自動幫你帶入。
3_2

3.現在假設我們想要加入一個字體大小的設定,就在括號內連點兩下新增或是選取修改。接著,修改好之後,上方的原始碼就會是你檔案內應該要有的樣子,把有修改的地方複製到原本的檔案內貼上,注意不要放錯地方,或是多複製到東西了。
3_3

以上就是CSS在網站內的基本使用了,有了以上的技巧之後,應該可以依照自己的喜好搭建出基本可以展示資訊的靜態網站了,後面的章節會再介紹一些小工具的插入等等,讓網站更豐富一點,大家快去試做看看這次的技巧吧~

相關文章

從零開始用github架設靜態網站入門(1) - 介紹&環境搭建
從零開始用github架設靜態網站入門(2) - HTML & Bootstrap
從零開始用github架設靜態網站入門(3) - CSS客製化
從零開始用github架設靜態網站入門(4) - 其他小功能製作
從零開始用github架設靜態網站入門(5) - 部署到Github Pages


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言