自學日記

學習程式相關知識及學習法

0%

關於HTML CSS基本介紹

發表於 更新於

關於HTML CSS基本介紹

針對目前了解的HTML標籤及初步了解的CSS屬性作介紹筆記

HTML

  • 如需編輯網站時，必須將所有相關檔案放入同一資料夾中，

HTML常用標籤

標題

1
2
3
<h1>大標題</h1>
<h2>次標題</h2>
<h3>中標題</h3>

內文

1
<p>內文</p>

清單

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--有序清單(order list)  -->
<ol>
<li>清單一</li>
<li>清單二</li>
<li>清單三</li>
</ol>

<!--無序清單(unorder list) -->
<ul>
<li>清單</li>
<li>清單</li>
<li>清單</li>
</ul>

有序清單

無序清單

粗體與斜體

粗體有<b></b>與<strong></strong>，斜體有<i></i>與<em></em>，兩者達到效果相同，但細分為物理標記與邏輯標記，前者為單純視覺上的效果，後者有表達語意的效果。

強調

1
2
<strong>粗體</strong>
<em>斜體</em>

超連結與選單

1
2
3
4
5
6
7
<!--補充:nav元素，包含導航資訊,通常是一系列連結，另外放於header也合理  -->
<nav>
<!-- a href 為超連結的語法 -->
    <a href= "">選單</a>
    <a href= "">選單</a>
    <a href= "">選單</a>
</nav>

超連結語法

1
2
3
4
5
<a href="連結的URL " target="連結目標" title="連結替代文字">要顯示的連結文字或圖片</a>
<!--target 是連結目標的意思，可以用來設定用何種方式前往連結，
常見的有另開視窗（_blank）、直接於現在的視窗開起（_self）、開啟於父層框架（_parent）等，
target 在 HTML a href 屬性中為非必要項目。
  -->

選單呈現

圖片

1
2
3
4
5
<!--figure為html5出現的功能，主要使用為包裹圖片-->
<figure>
    <img src="圖片來源.jpg" alt="替代文字">
    <figcaption>詳細說明文字</figcaption>
</figure>

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--這裡為方便呈現理解，呈現改為增加<tabel border="2">  -->
  <table>
<!--tr=table row(行的意思)    -->
        <tr>
<!--td=table data (列的意思)          -->
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </table>

表格呈現

  • 未加border原圖
  • 增加border後(一般於css去做修飾):

表格輸入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--action表示發送位置  -->
<form action="http://XXX.com">
<!--br表示斷行，但大部分都是由css去做行距部分修正  -->
        First name: <br>
<!-- type於下方補充屬性值         -->
<!--placeholder為提醒你要輸入什麼。用淺灰色表示)  -->
<!--placeholder 属性可用於以下<input> 的類型：
text, search, url, telephone, email 以及 password  -->
        <input type="text" name="firstname" placeholder="提示欲輸入之文字">
        <br>
        Lastname:<br>
<!-- 此處為輸入類型，value為呈現內容         -->
        <input type="text" name="lastname" value="Mouse">
        <br><br>
<!-- 此為為按鈕類型，value為按鈕上顯示的文字         -->
        <input type="submit" value="Submit">
    </form>

表格輸入呈現

input type常見屬性值

input value 補充說明

輸入類型的value代表欄位中的內容。按鈕類型的value代表按鈕的顯示文字

div區塊

用於將資料包裹使用，作為同一區資料，方便之後CSS編輯排版，
一組標準的 HTML div 區塊是由一個開頭<div>標籤與一個結束 </div> 標籤所組成，其間背包起來的部份就是區塊內容，可以是文字、圖片、影片、框架 … 等網頁內容，開頭的 <div> 區塊內可以設置 id、class 或直接開始一段樣式設計，也就是 style 的部份。

1
2
<!--style的部分，可以忽略另外採用css編輯，也可以保留直接做此段編輯  -->
<div id="自訂" class="自訂" style="自訂">區塊內容</div>

css語法

一般會另外建一個css檔方便修改，而如果在html檔內，<style>加在<head>裡，而一般ccs寫法為:

1
2
3
4
5
/*以{}括起，欲設定的屬性內容以:去表示  */
p {
color: red
font-size: 20px
}

css表示圖

css 常用選擇器class及id撰寫法

class 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別;id 屬性是讓你為元素命名的，整個頁面中的元素名稱也不可重複，是唯一的。

選取器 class以”.”後輸入名稱表示，id可以”#”撰寫後輸入名稱表示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*指h1的元素會被指定  */
h1 {
color : red
}
/*指spcial的class標籤分類會被指定  */
.special {
color :red
}
/*指data的id標籤名稱會被指定  */
#data {
color :red
}
/*進階:指h1 中的超連結 <a href>  */
h1 a{
color : red
}

內部css及外部css

內部CSS

外部CSS

另外建立css檔案以方便日後如需修改方便維護，而HTML檔必須於title後加上如下CSS連結:

1
2
/*href 撰寫css檔名  */
<link rel="stylesheet" href="style.css">

CSS 常用屬性設定

背景

background-color背景色設定

用來設定網頁背景顏色，也可以用來設定網頁元素的背景顏色，例如 DIV 區塊、span 區域、表格背景甚至是文字背景顏色。

1
background-color: 顏色名稱或色碼 ;

參考:CSS background-color 背景顏色

background-image背景圖片

基礎語法

1
background-image: url( ' 圖片網址 ' );

網頁背景圖片範例
直接在 body 設 background-image 是許多設計師常用的手法，優點是管理整個網頁背景較為便利，若遇到圖片未正常顯示的情況，至少還有背景顏色可以顯示，這也是設計網頁背景時的一種保險技巧。

1
2
3
4
5
6
body {
　background-image:url( ' 要顯示的圖片網址 ' );
/* 背景圖片不要重覆顯示  */
　background-repeat:no-repeat;
　background-color: 背景顏色;
}

參考:CSS background-image 背景圖片

文字

color 文字顏色

CSS 的文字顏色設計採用的是 color 標示，不需要寫成 font-color 這樣，但在其他元素如邊框顏色就要使用border-color、背景顏色要使用 background-color 來標示，設計師可將 color 寫在DIV 區塊、span 區域、超連結內甚至是直接寫在 <body> 標籤內。

1
color: 顏色的英文或色碼 ;

參考:CSS color 文字顏色

font-size 文字大小

單位長度的類型可以分成 2 種：相對和絕對。 絕對單位與長度的物理單位相關。 例如，in 和 mm 分別代表着英寸和毫米。 絕對長度單位會接近屏幕上的實際測量值，不過不同屏幕的分辨率會存在差異，這就可能會造成誤差。

相對單位長度，比如 em 和 rem，它們的實際值會依賴其他長度的值而決定。 比如 em 的大小基於元素字體的字體大小。 如果使用它來設置 font-size 值，它的值會跟隨父元素的 font-size 值來改變。


參考:CSS font-size 文字大小

text-decoration 文字裝飾

CSS text-decoration 用來替網頁的文字做特效，例如增加文字的上線、文字底線或刪除線的效果，取代以往用 HTML 標籤一個個去標註網頁文字的耗時工作，透過 text-decoration 可以輕鬆快速的管理網頁內的文字特效，網頁設計師常常利用此計巧，直接管理整個網頁內的文字超連結底線，text-decoration 是 CSS 文字特效的標準語法。

1
text-decoration: 文字特效參數;


參考:CSS text-decoration

text-indent 文字首行縮排

作為排版用，可使用其他單位，例如 em 或 cm 。另外也可以使用負值的，相對第一個字會向前凸出去。

1
2
3
p {
　text-indent: 10px;
}

參考:CSS text-indent 段落首字縮排

尺寸

width寬度屬性

CSS width 寬度屬性是用來控制網頁元素寬度的功能，width 可以接受自動判斷寬度（auto）、自訂寬度百分比（%），CSS width 屬性可以用在 DIV 區塊、span 區域、圖片（img 標籤）、文字輸入欄位（textarea）、按鈕（button）… 等諸多網頁元素的寬度設計，width 寬度屬性常常與高度的 height 屬性一起使用 。

1
width: 寬度值;


參考:CSS width 寬度屬性

border 邊框

CSS 對於 border 的設計不只局限於 DIV 區塊或 span 的邊框，也可以應用到其他的網頁元素的邊框上，例如網頁標題的邊框、圖片的邊框（img border）… 等。

1
border: 邊框粗細 邊框顏色 邊框樣式 ;

標準的 css border 規則由左至右共有三個參數，每個參數間用半形空格隔開，第一個參數為邊框的粗細（border-width），一般使用 px、em 等標準網頁單位，第二個參數標示邊框的顏色（border-color），可以使用色標準色碼或顏色的英文名稱，第三個參數是邊框樣式（border-style），可以設定實線、虛線、雙實線、連續點 … 等許多不同的風格。也可以單邊設計:

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
#BorderBox{
　border-top:5px black solid;　//上方邊框寬度設為 5px，顏色為黑色
　border-right:8px red double;　//右邊的邊框寬度設為 8px，顏色為紅色，樣式為 double
　border-left:7px yellow dotted;　//左邊的邊框寬度設為 7px，顏色為黃色，樣式為 dotted
　border-bottom:3px blue dashed;　//下方邊框寬度設為 3px，顏色為藍色，樣式為 dashed
　padding:30px;
}
</style>
<div id="BorderBox">四個不同的邊框設計</div>

參考:CSS border 邊框

padding 內距

透過 CSS padding 內距的設定，可以控制區域如 DIV 或 span 的內部距離，也可以控制 HTML 的表格內部距離（例如文字或圖片與邊框的距離），padding 本身就是內距的設定，padding 是不可以設定負值的唷！這點與 margin 不同。

1
2
3
4
padding:上 右 下 左;　
padding:上下 左右;　
padding:上 左右 下;　
padding:四個邊同樣値;

padding 可能的値
padding:auto;　//代表讓瀏覽器自己去設定。
padding:長度單位;　//就是給數字跟單位，單位可以是 em、px、pt 等値。
padding:%;　//讓瀏覽器自己去設定，跟邊界元素有關。
參考:[CSS padding 內距屬性與用法範例] (https://www.wibibi.com/info.php?tid=111)

margin外邊界距離

CSS margin 屬性用來定義一個區域（例如 DIV 或 span）的外邊界距離，俗稱外距，與常用的 padding（內距）剛好不同。margin 可以讓你一次設定四個邊的外距，也可以分別設定每個邊不同的外距，特別的是 margin 可以設定負値。

1
2
3
4
margin:上 右 下 左;　
margin:上下 左右;　
margin:上 左右 下;　
margin:四個邊同樣値;

margin 可以的值有 auto、長度單位與 %，各種値應用範圍不一定相同
margin:auto;　//代表讓瀏覽器自己去設定分配剩下的空間畫面，但上下不會有作用，只有左右會有作用。
margin:長度單位;　//就是給數字跟單位，單位可以是 em、px、pt 等値。
margin:%;　//讓瀏覽器自己去設定，跟邊界元素有關。
參考:CSS margin 屬性與用法範例

height高度屬性

用來控制網頁元素高度的一個標準屬性，網頁設計師常常會使用 CSS height 屬性來調整 DIV 區塊的高度、圖片的高度、表格的高度或者是文字輸入欄位的高度，

1
height: 高度參數值;


參考:CSS height 高度屬性

line-height 行高

line-height 通常與 font-size（文字大小）搭配使用

1
line-height: 設定値;

參考:CSS line-height 設定字體範圍高度（行間距）

position 定位

用來設定元素位置的語法，你可以定義出某個元素（如圖片、DIV 區塊、h1、h2 … 等）要在網頁的哪個位置呈現。

1
position: 位置參數;


參考:CSS position 位置屬性（定位）

HTML 及 CSS可參考網站

MDN
W3School
wibibi網頁設計教學百科