我要成為前端工程師的學習筆記:HTML & CSS 篇 - CSS 介紹 Day2


關於 CSS

在 Web 中 HTML 屬於網頁的結構,其中有 h1~6、p、a ...等等的語法,而 CSS 它是屬於樣式,就是幫 HTML 結構做一些樣式的變化,像是文字大小、顏色、排版等等功用,來美化整個網頁。

如何設定 CSS 樣式

首先我們需要 HTML 結構,這邊先寫個簡單的 HTML,然後套用 CSS 來做樣式變化,以下範例是網頁上寫一個 h1 的結構標題,在標題文字上把顏色變成藍色,字體大小改成 40px 大小。
如何套用 CSS 樣式,我們要先建立一個 CSS 檔案,下面範例的 CSS 檔案是 style.css,接下來是幫 index.html 載入 style.ccs

語法設定:
要在 < head > 裡面寫入這一行, < link rel="stylesheet" href="style.css" >
< link > 是載入一個連結, rel="stylesheet" 是載入主要針對的樣式, href="style.css" 是載入檔案的位置
這樣就能套用 CSS 樣式了。

HTML: index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS 常用語法</title>
  </head>
  <body>
    <h1>標題</h1>
  </body>
 </html>

CSS: style.css

//  style.css <-- CSS 檔
h1 {
  color: blue;
  font-size: 40px;
}

畫面:

CSS 寫法詳解

這裡我們直接用程式碼做寫法講解,h1 是選擇器,color 跟 font-size 是屬性,blue 是 color 屬性設定,40px 是 font-size 屬性設定。

//  CSS 寫法
h1 {
  color: blue;
  font-size: 40px;
}

//  CSS 寫法詳解 (對照上面程式碼)
選擇器 {
  屬性: 設定;
  屬性: 設定;
}
#html #css







你可能感興趣的文章

第九天:完成 API Server

第九天:完成 API Server

第二章:4 製作策略濾網

第二章:4 製作策略濾網

關於 React 小書:使用 JSX 描述 UI

關於 React 小書:使用 JSX 描述 UI






留言討論