利用html混合css刻出簡易網頁
先備環境
使用vscode + Live Server插件進行開發
- VScode 大眾編輯器 可以編寫大部分文字檔案
- Live Server 能夠即時預覽結果
- 跨平台可使用
HTML
認識HTML
HTML是HyperText Markup Language的縮寫
中文翻譯為超文本標記語言
是網頁顯示最基本的骨架
它並非程式語言
目前主流使用的版本是HTML5
最著名的功能就是對多媒體的支援
以往若要在網頁嵌入影片等多媒體是相對麻煩的事情
現在能夠透過<video>等標籤輕易完成
HTML網頁主要由標籤(tag)構成
而標籤通常是成對的
會由"起始標籤"和"結束標籤"組成
少部分的標籤會單獨存在
如換行的<br>與<img>等
例如
<h1>這是1級標題</h1> <br> <img src="https://i.imgur.com/NCimijS.png" \ style="width:250px"/>
基本架構
我們可以將HTML的結構視為一個人的頭和身體
- html
- 頭 (head) : 負責紀錄屬性和連結css檔案等作用
- 身體 (body) : 使用者可以看到的部分
實例上大概可以看成這樣
<html> <head> </head> <body> </body> </html>
網頁的內容
前面提過 網頁可以透過不同標籤去呈現
這裡簡略介紹部份常用的標籤
網頁標題
可以在瀏覽器上面看到的標題 會放在<head>裡面
<title>這是網頁的標題</title>
文字排印
<h1> ~ <h6> : 標題(heading)
用於呈現出不同等級的標題
<h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6>
<p> : 段落(paragraph)
用於將文字進行分段
<p>第一段文字</p> <p>第二段文字</p>
<img> : 圖片(images)
<img src="#" />
src : 來源(source)路徑連結 需直接連結至檔案本身
範例:
<img src="https://i.imgur.com/NCimijS.png" style="width:250px"/>
這樣將會顯示一張Rick Astley的圖片在網頁上
CSS
認識CSS
CSS是Cascading Style Sheets的縮寫
中文譯為層疊樣式表
用來為HTML網頁添加樣式
(如顏色、大小、背景等等)
可以將網頁想像成捏臉系統
html就是他的骨架
css就是那些調整五官、頭髮、身材等等的參數
目前主流使用的版本為css3
能夠處理立體和動畫等等功能
套用CSS
目前使用CSS主要有3種方式
分別是
- 行內(標籤內)套用
- 連結CSS檔案套用
- style標籤套用
標籤內套用
在起始標籤中，加入style=""
中間替換為欲使用的樣式。
例:
<font style="font-family: 'Ubuntu Mono', \ monospace;">$whoami</font>
$whoami
連結CSS檔案
在<head>標籤中
加入<link>標籤
連結至CSS檔。
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
其中：
- <link> 為連結檔案的標籤
- rel 為連結關係，這裡選擇”樣式表”(stylesheet)
- type 為類型，由於是css文本，所以填入”text/css”
- href 內填入連結位址
Style標籤
利用<style>標籤直接嵌在html裡面
例：
<style> .h { font-family: 'Ubuntu Mono'; } </style> <h1 class="h">owo</h1>
CSS 用法
首先先介紹CSS的基本語法
選擇器(selector) { 屬性(property) : 值(value) ; }
- 選擇器: 在這裡我們填入標籤名(如h1)
- 屬性: 填入想要更改的樣式名(如color)
- 值: 屬性對應的數值(如color可以填入red)
注意: 大括號( {} ) 和 分號( ; )
例如這樣
.h { font-family: 'Ubuntu Mono'; }
CSS 常用屬性
color: 文字/前景 顏色
color的值有現成的色彩英文可以輸入
像是常見的green.red.blue.black.white等等
也支援用RGB色光來表示色彩
例如白色可以表示為rgb(255,255,255)
最常見的是以十六進位標籤表示顏色
例如白色也可表示成#FFFFFF。
<font color='red'>紅色ㄉ字</font>
紅色ㄉ字
font-size: 文字大小
絕對單位習慣用"像素"(px)來設定
如果考慮到對不同裝置的支援
也可以用相對的百分率(%)來表示。
text-align: 對齊文字
常見有向左(left)、向右(right)、置中(center)
background-color: 背景顏色
這部分類似於前面所提到的設定文字顏色部分。
background-image: 背景圖片
在CSS中，要提供圖片的位址，可以使用url()。
background-size: 調整背景大小
可以使用寬度和高度來調整，單位仍然支援絕對與相對。