山姆雪莉

對象

代號名稱

冒號+可輸入內容

調整內容

文字

font-size

數字px / 數字% / 數字cm

xx-large / x-large / large

medium

small / x-small / xx-small

大小

font-family

字型名稱1 , 字型名稱2…

(可以用很多個，依觀看者電腦字體套用)

字型 (使用以下字型較不影響速度)

中文：思源黑體 , 微軟正黑體 , 蘋方黑體 , 華康麗黑體

英文：Helvetica , Arial , sans-serif , serif

color

Transparent (透明)

#色號 (色碼表)

顏色

font-weight

數字 /  

bold (厚)、bolder (更厚)、normal (正常)

粗度

text-align

Left 左 / Right 右

Center 中間 / Justify 左右對齊

對齊

line-height

數字px / 數字% / 數字cm

行距

margin-bottom

數字px / 數字% / 數字cm

段落距離

letter-spacing

數字px / 數字% / 數字cm

字距

內容

width

700px

寬度

float

None / Left / Right / center

浮動，大頁面文字呈現的範圍

overflow

Visible 完全呈現

hidden放不下不顯示

scroll強制加入捲軸

auto放不下時，加上捲軸

當內容放不下時的處理方式

opacity

0(透明)~1(不透明) / 數字%

不透明度

背景

background

Transparent (透明)

#色號 (色碼表)

顏色

GOOGLE顏色挑選器

url(“圖片網址.jpg/png”)

圖片

background-size

Auto / px / pt / em / ex / %

cover (不變形)  

contain (不裁切)

圖片尺寸

邊框

margin

5px 0px 0px 5px

與邊界的距離

依序是【上、右、下、左】

也可分為top/left/bottom/right

Border (框的四面)

--------------------------

border-top (上)
border-left (左)
border-bottom (下) border-right (右)

5px solid #fff

----------------------------------

border-top:4px solid #7B7B7B ;

solid實線

dashed虛線

double雙線

dotted點線

groove凹線

ridge凸線

inset嵌入線

outset浮出線

border-radius

0px 0px 0px 10px

設定邊框線的邊角是否有弧度

【左上、右上、右下、左下】

padding

0px 0px 0px 10px

與邊框的距離

依序是【上、右、下、左】

也可分為top/left/bottom/right

box-shadow

3px 3px 20px #7B7B7B

設定框架的陰影

依序是【X軸陰影、Y軸陰影、陰影模糊半徑、陰影顏色】

其他

display: none;

不顯示

!important ;

強制蓋過原本的設定

/*--單一功能區塊標題'--*/

.box-title{

        font-weight: 600;

        font-size: 16px;

        width: 310px;

        height: 25px;

    border: 5px solid #fff;    

    border-radius: 20px;

        background: #8E8E8E ;

        text-align: center top ;

        font-size: medium ;

        color: white;

        margin-bottom: 10px ;

}

/*--   --*/  →內容不顯示

字體粗度：600

字體大小：16px

寬度：310px

行距：25px

邊框：粗度5px 實線 #FFF色

圓角：20px

底色：#8E8E8E

文字對齊：中間.置頂

文字大小：中等

文字顏色：白

邊距底部：10px