CSS3 各種屬性設置

字體

font-size

    smaller|small|medium|large|larger

    Npx

    N% 相對於父元素字體大小的百分比

font-variant

    normal     大寫變小寫

    small-caps 小寫變大寫

font-style

    normal

    italic 傾斜

font-weight

    normal|bold|bolder|lighter

    100~900 (bold if > 600)

font-family 字體

文本

text-decoration

    underline

    overline

    line-through

    blink [not used]

text-transform

    uppercase

    lowercase

    capitalize

text-shadow

    N N N COLOR 分別表明

    水平偏移 垂直偏移 陰影模糊度 陰影顏色

text-align

    left|right|center

    justify 兩端對齊

    start 開始邊界

    end 結束邊界

white-space 處理空白排版的方式

    normal 空白符被壓縮 文本自動換行

    nowrap 空白符被壓縮 文本不換行

    pre 空白符被保留 遇換行符則換行

    pre-line 空白符被壓縮 文本排滿或遇換行符時換行

    pre-wrap 空白符被保留 文本排滿或遇換行符時換行

letter-spacing 文本間距 Npx

word-spacing 英文單詞間距 Npx

line-height 段落行高 Npx | % 例如%200

word-wrap 過長的英文單詞斷開 break-word

text-indent 文本首行縮進 Npx

盒模型

大小 [max|min]<-><width|height> 

padding 內邊距

magrin 外邊距

overflox 溢出 overflow-[x|y]

    auto 溢出顯示滾動條

    hidden 切掉溢出內容

    scroll 出現滾動條

    visible 不論是否溢出都顯示內容 默認

visibility 可見

    visible 可見 默認

    hidden 不可見但佔據空間

    collapse 不可見 隱藏表格行和列 不是表格則同hidden

display 元素級別 行內元素表明 <span> 塊級元素表明 <div>

    block 塊級

    inline 行內

    inline-block 行內塊級

    none 不可見 不佔位

float 元素浮動

    left | right | none

clear 浮動堆疊處理

    none 容許兩邊浮動

    left 禁止左浮動

    right 禁止右浮動

    both 禁止兩邊浮動

邊框 border [width style color]

    border-width 大小

        thin|medium|thick

        Npx

    border-style 樣式

        dashed | dotted | double | groove

        inset | outset | ridge | solid

    border-color 顏色

    單獨設置邊線 border-<left|right|top|bottom>-<width|style|color>

    border-radius 邊框圓角

    border-<bottom|top>-<left|right>-radius

background 背景

    background-color

    background-image URL

    background-repeat

        repeat[-<x|y>]

        no-repeat

    background-position

        <top | left | right | bottom | center>

        Npx | %

    background-size

        cover 等比例縮放圖像 有可能超出容器

        contain 等比例縮放圖像 使寬度|高度較大者重合容器邊界

    background-attachment

        scroll 背景固定在容器上 不會隨內容一塊兒滾動 默認

        fixed 背景固定在視窗上 內容滾動時背景不動

    background-origin 繪製背景

        border-box 盒子內部繪製背景

        padding-box 盒子內邊距繪製背景

        content-box 盒子內部繪製背景

    background-clip 裁剪背景

        border-box

        padding-box

        content-box