隨手記錄

【CSS】部落格 - 框線 - 範例 002

對不懂CSS程式語法的我們，看到別人的部落格各種的框線、排版時，想要學，卻也沒有那麼簡單。既然已經學不會，那就直接用「複製、貼上大法」。再直接修改裏面的原始碼。所以著手收集看到的格式。

■ 使用方法：

1. 直接複製下面的「原始碼」，並貼到自己的部落格即可。
2. 想到修改樣式，則參考「說明|註解」處即可。
3. 建議使用電腦查看此網頁。

■ 框線 樣式

■ 原始碼(使用時，直接複製此處即可)

<div class="jane_bar" style="margin: auto auto 35px;
	padding: 10px;
	border-width: 0px 0px 0px 5px;
	border-style: solid dotted dotted solid;
	border-color:gray gray gray rgb(2, 141, 106);
	border-image: initial;
	font-style: normal;
	font-variant-ligatures: normal;
	font-variant-caps: normal;
	font-variant-numeric: inherit;
	font-variant-east-asian: inherit;
	font-stretch: inherit;
	line-height: 50px;
	vertical-align: baseline;
	letter-spacing: 1px;
	orphans: 2;
	text-indent: 0px;
	text-transform: none;
	white-space: normal;
	widows: 2;
	word-spacing: 0px;
	-webkit-text-stroke-width: 0px;
	text-decoration-thickness: initial;
	text-decoration-style: initial;
	text-decoration-color: initial;
	border-radius: 0px;
	background-color: rgb(207, 236, 224);
	box-sizing: border-box;
	text-align: center;
	"><font color="#000000" face="microsoft jhenghei, cwtexhei, open sans"><span style="font-size: 20px"><strong>標題文字寫在這</strong></span></font></div>

■ 說明|註解

以下列出常會修改的幾個地方。margin、padding、border-style因較為複雜，補充在後面。

而文字的樣式在pixnet中，則可用內建的工具直接修改即可。文字顏色、大小則修改紅色部分

<div class="jane_bar" style="margin: auto auto 35px;  //外邊距。語法。
    padding: 10px;                                    //內距
    border-width: 0px 0px 0px 5px;                //邊框寬度
    border-style: solid dotted dotted solid;     //框線樣式
    border-color:gray gray gray RGB(2, 141, 106);         //框線顏色
    border-image: initial;            //邊框圖片
    font-style: normal;                //字體樣式
    font-variant-ligatures: normal;           //文字連字表現形式
    font-variant-caps: normal;                 //控制大寫字母特殊字元的使用
    font-variant-numeric: inherit;            //控制數字，分數和序號標記的替代字形的使用
    font-variant-east-asian: inherit;         //控制東亞腳本(如日文和中文)的交替符號的使用
    font-stretch: inherit;                          //字體定義一個正常或經過伸縮變形的字體外觀，這個屬性並不會通過伸展/縮小而改變字體的幾何外形，如font-feature-settings和font-variant屬性，它僅僅意味著當有多種字體可供選擇時，會為字體選擇最適合的大小。
    line-height: 50px;              //設置多行元素的空間量
    vertical-align: baseline;
    letter-spacing: 1px;
    orphans: 2;
    text-indent: 0px;
    text-transform: none;
    white-space: normal;
    widows: 2;
    word-spacing: 0px;
    -webkit-text-stroke-width: 0px;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    border-radius: 0px;
    background-color: RGB(207, 236, 224);    //背景顏色
    box-sizing: border-box;
    text-align: center;  //文字置中
    "><font color="#000000" face="microsoft jhenghei, cwtexhei, open sans"><span style="font-size: 20px"><strong>標題文字寫在這</strong></span></font></div>

■ margin 

❏ 功能：用來設定邊界距離的語法，透過 margin 可以設定各元素間的間距。margin 是屬於外距。

❏ 語法一：

• margin-top：設定上邊界距離。
• margin-left：設定左邊界距離。
• margin-right：設定右邊界距離。
• margin-bottom：設定下邊界距離。
• margin：一次設定上下左右四個邊距。

❏ 語法二：

margin：屬性值

屬性值可以是 1~4個值

• 1個值：該值會統一應用到全部四個邊的外邊距上。
• 2個值：上下　左右。第一個值會應用於上邊和下邊的外邊距，第二個值應用於左邊和右邊。
• 3個值：上　左右　下。第一個值會應用於上邊，第二個值會應用於左右邊，第三個值會應用於下邊。
• 4個值：上　右　下　左。第一個值會應用於上邊，第二個值會應用於右邊，第三個值會應用於下邊，第三個值會應用於左邊。

❏ 可填入的值：

• margin：auto;　//代表讓瀏覽器自己去設定。
• margin：長度單位;　//就是給數字跟單位，單位可以是 em、px、pt 等値。
• margin：%;　//讓瀏覽器自己去設定，跟邊界元素有關。

■ Padding 

❏ 功能：內距的設定

❏ 語法一：

• padding-top：上方的內距
• padding-right：右方的內距
• padding-bottom：下方的內距
• padding-left：左方的內距
• padding：一次設定上下左右四個內距。

❏ 語法二：

padding：屬性值

屬性值可以是 1~4個值

• 1個值：該值會統一應用到全部四個邊的內邊距上。
• 2個值：上下　左右。第一個值會應用於上邊和下邊的內邊距，第二個值應用於左邊和右邊。
• 3個值：上　左右　下。第一個值會應用於上邊，第二個值會應用於左右邊，第三個值會應用於下邊。
• 4個值：上　右　下　左。第一個值會應用於上邊，第二個值會應用於右邊，第三個值會應用於下邊，第三個值會應用於左邊。

❏ 可填入的值：

• padding：auto;　//代表讓瀏覽器自己去設定。
• padding：長度單位;　//就是給數字跟單位，單位可以是 em、px、pt 等値。
• padding：%;　//讓瀏覽器自己去設定，跟邊界元素有關。

■ border-style 

❏ 功能：設定邊框樣式

❏ 語法：

border-style：樣式；

• border-style：設定四個邊框樣式    
• border-top-style：僅設定上邊框樣式
• border-right-style：設定右邊框樣式
• border-bottom-style：僅設定下邊框樣式
• border-left-style：設定左邊框樣式 

❏ 樣式：

• solid 實線
• dashed 虛線
• double 雙線
• dotted 點線
• groove 凹線
• ridge 凸線
• inset 嵌入線
• outset 浮出線
• none 沒有線