JQuery 學習之路_Lesson1（環境建置、開發軟體、靜態網頁html&CSS）

此系列主要跟大家介紹、分享 JQuery 的應用。要學會炒出一盤菜之前要先認識烹飪的器具、食材等等，所以這篇文章先跟大家簡略介紹開發工具、靜態網頁 html 和 CSS。

編輯器軟體安裝、介紹 - Visual Studio Code

一開始先來認識我們需要的開發程式系統的器具吧！這裡我推薦的是 VS Code (Visual Studio Code) ，當然啦！鍋子那麼多品牌不是只有~~阿基師代言~~的那款而已，但 VS Code 的優點真的很多很多唷！網路上估狗會親自告訴你，在此不做介紹～

下載頁面，支援很多ＯＳ系統唷（Mac、Linux、Windows），根據你目前正在使用的ＯＳ系統來選擇下載。

有超多好用的擴充功能可以下載，至於在編輯器的擴充功能是什麼呢？就像你我使用的 Google Chrome 瀏覽器一樣可以安裝很多好用的插件。

下載完的結果大概就是這樣，這是我已經下載好開啟的畫面。背景主題可自行調整，有非常多種類可以選擇。

HTML & CSS 語法

先來練習基本的HTML語法，去呈現靜態的頁面。

html5格基本格式

標題<h1>~<h6>、段落<p>、換行標籤<br>

幫字體換顏色、大小

在W3School這個網站有更多關於html、CSS語法和屬性的使用字典。

屬性	範例
Background-color	p style=“background-color:blue”
Color	p style=”color:blue”
Font-family	p style="font-family:courier"
Font-size	p style="font-size:160%" p style="font-size:20px"
Text-align	p style="text-align:center"

認識CSS的四種屬性：行內樣式、id、類別、標籤

如果要在一個網頁中，一段用紅色一段用灰色可以怎麼做呢？

行內樣式(inline style)

第一種方法是使用行內樣式，行內樣式其實就是上面教的方法，直接安插在< p 這後面。

類別(class)

另一種方式是建立類別，建立類別的方式就和建立變數一樣。在變數前面要加上句號「.」。首先要在head之間建立style，然後利用「.」建立類別，句點後面可以輸入類別名稱（可以自己取），大括弧裡面則是輸入上面所講的語法就可以了。

在原本的段落中，插入要引用的class並讓兩段不同色

標籤(tag)

另一種方法是透過標籤，標籤的使用一樣是在head裡面撰寫

這時候，在段落裡面如果你沒有使用類別或行內標籤，則會根據標籤的樣式呈現

這四種方式的階層分別是「行內樣式>ID>類別>標籤」，
id的使用方法則是在變項前面加上「#」，那怎麼記比較不會忘記呢？
因為我是從後端學到前端所以 class 會這樣記 .class 那 ID 自然就是 # 囉！！
這在後面的文章中，會在多做介紹。

程式範例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .first {
      color: red;
      font-size: 30px
    }

    p {
      color: paleturquoise;
      font-size: 30px
    }
  </style>
</head>

<body>
  <h1>Day 1 </h1>
  <p>換行囉!</p>
  <br>
  <p class="first">段落描述1 段落描述1</p>
  <p class="first">段落描述2</p>
  <p style="color: gray; font-size: 20px">來個灰色的字體，字體大小20px吧！</p>
  <p style="color: red; font-size: 150%; font-family:微軟正黑體">嘿！來個微軟正黑體的紅色字，字體放大150倍！！</p>
</body>

</html>

Peter's TechKnowledge

搜尋此網誌