文件輸入01 - HTML及CSS語法簡易教學

Posted in

使用教學

文件輸入01 - HTML及CSS語法簡易教學

　　網頁中的文字及圖形是以HTML及CSS語言來編排呈現，本篇教學僅介紹幾個常用到的HTML及CSS語法，以利作者編排文字，方便讀者閱覽。

1、<p> </p> 段落標記，用來標示一個段落的範圍。

2、<b> </b> 粗體標記，用來標示粗體字的範圍。

3、<p style=" "> </p> CSS在HTML中的寫法。

4、font-size: large; CSS語言，選擇「large」的字型大小。

5、text-indent: 2em; CSS語言，首行縮排，em表示字元，此例為首行退縮2個字元（英文字母為0.5字元），負號表示為首行凸排。

6、margin-left: 2em; CSS語言，左邊界，此例為段落的所有行皆退縮2個字元。

7、margin-top: 12px; CSS語言，上邊界，此例為段落的上邊界下移12px（負值為上移）。

　　綜合上面的語法舉例說明：

<p style="text-indent: -2em; margin-left: 4em; margin-top: -12px;"> </p> 顯示的結果如下：

未加HTML+CSS語言：

一、這是第一個段落的第一行文字。----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- --- 這是第一個段落的第二行文字。----- ----- ----- ----- ----- ----- ----- ----- -----

二、這是第二個段落的第一行文字。----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- --- 這是第二個段落的第二行文字。----- ----- ----- ----- ----- ----- ----- ----- -----

加入HTML+CSS語言之後：

一、這是第一個段落的第一行文字。----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- 這是第一個段落的第二行文字。----- ----- ----- ----- ----- ----- ----- ----- ----- -----

二、這是第二個段落的第一行文字。----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- 這是第二個段落的第二行文字。----- ----- ----- ----- ----- ----- ----- ----- ----- -----

　　上面的例子說明，利用text-indent及margin-left兩個語法可以控制段落的縮排、首行縮排或凸排，以便於讀者了解文章段落的層階概念。而margin-top: -12px是因為程式預設段落之間有12px的間隔，設定-12px可以把兩段落的間隔移除。

表格的語法

常用的語法如下，其餘的請查書或網路。

<table> </table> 表格標記，用來標示一個表格的範圍。

<tbody> </tbody> 表格本體標記，用來標示一個表格本體的範圍。

<tr> </tr> 表格列標記，用來標記一個列。

<td> </td> 儲存格標記，用來標記一個儲存格。

width 設定寬度 *CSS不適用

height 設定高度 *CSS不適用

align 水平對齊方式：left左、center中、right右、justity分散對齊 *CSS不適用

valign 垂直對齊方式：top上、middle中、bottom下、baseline基準線 *CSS不適用

border 外框線寬度