CSS排版程式(3)-文字段落樣式

屬性名稱

font(文字樣式):font-style(斜體)、font-weight(粗細)、font-variant(大寫)、font-size(大小)、font-family(字型)

text-decoration(文字效果)、text-transform(大小寫)、direction(文字方向)、letter-spacing(文字間距)、word-spacing(單字間距)、white-space(空白符號設定)

line-height(行高)、text-indent(段落縮排)、text-align(水平位置)、vertical-align(垂直位置)

list-style(項目樣式):list-style-type(項目符號)、list-style-image(項目圖片)、list-style-position(項目間距)

direction

說明:指定文字顯示的方向。此為 CSS 2 的語法,部份瀏覽器可能不支援。

屬性值:ltr(由左至右,預設值)、rtl(由右至左)、inherit(繼承父元素設定)

【範例】

.rtl { direction:rtl; }

【結果】

這行字將由右至左顯示direction

font

說明:設定字型的綜合屬性。是font-style、font-weight、font-variant、font-size、font-family的集合體。屬性值必須按照順序排列,其中font-size、font-family為必填項目。

屬性值:(font-style) (font-weight) (font-variant) (font-size) (font-family)、inherit(繼承父元素設定)

【範例】

.font_all { font:italic bold normal 12pt 標楷體; }
.font_part { font:14pt 標楷體; }

【結果】

一次設定所有的字型屬性
也可以只輸入大小和字型

font-family

說明:設定文字的字型,例如新細明體、標楷體。若是使用者沒有安裝該字型,則會以瀏覽器預設字型來顯示。有些字型即使用戶有安裝,但根據瀏覽器的不同,可能還是會無法顯示。

屬性值:(字型名稱)、inherit(繼承父元素設定)

【範例】

.kaiu { font-family:標楷體; }
.arialBlack { font-family:Arial Black; }
.wingdings { font-family:Wingdings; }

【結果】

標楷體
Arial Black
Wingdings

font-size

說明:設定文字的大小。屬性值根據不同瀏覽器的解讀會有不同差異。

屬性值:(長度)、(百分比)、xx-large(超特大)、x-large(特大)、larger(較大)、large(大)、medium(中)、small(小)、smaller(較小)、x-small(特小)、xx-small(超特小)、inherit(繼承父元素設定)

【範例】

.xsmall { font-size:x-small; }
.unit { font-size:14pt; }

【結果】

特小號字
14pt等於Word的14字,也等於font標籤的4號字

font-style

說明:設定字型的斜體效果。屬性值根據不同瀏覽器的解讀會有不同差異。

屬性值:normal(正常)、italic(斜體)、oblique(偏斜體)、inherit(繼承父元素設定)

【範例】

.italic { font-style:italic; }
.oblique { font-style:oblique; }

【結果】

斜體 偏斜體

font-variant

說明:將英文的小寫字母都變成大寫。

屬性值:normal(正常)、small-caps(將小寫變成大寫)、inherit(繼承父元素設定)

【範例】

.smallcaps { font-variant:small-caps; }

【結果】

small-caps

font-weight

說明:將文字變成粗體。屬性值根據不同瀏覽器的解讀會有不同差異。

屬性值:normal(正常)、lighter(較細)、bold(粗體=700)、bolder(特粗體=900)、100、200、300、400、500、600、700、800、900、inherit(繼承父元素設定)

【範例】

.lighter { font-weight:lighter; }
.bold { font-weight:bold; }
.bolder { font-weight:bolder; }

【結果】

較細 粗體 特粗體

letter-spacing

說明:設定字母與字母之間的字距。

屬性值:normal(正常)、(長度)、inherit(繼承父元素設定)

【範例】

.letterSpacing { letter-spacing:5px; }

【結果】

這段字的字距被設定為5px(letter spacing)

line-height

說明:設定段落行高。

屬性值:normal(正常)、(數字)、(長度)、(百分比)、inherit(繼承父元素設定)

【範例】

.lineHeight { line-height:200%; }

【結果】

這二行之間的行距
被設定為200%

list-style

說明:設定項目清單的綜合屬性。是list-style-type、list-style-image、list-style-position的集合體。順序可以任意排序,無設定時可直接略過。同時有設定符號和圖案時,會以圖案為主。

屬性值:(list-style-type) (list-style-image) (list-style-position)

【範例】

.listStyle {
    list-style:url(http://lh5.ggpht.com/_SAlWJ_xow1Y/TEwR1d4XVwI/AAAAAAAABWk/aMmrVqaGym4/frontpage.png) disc;
}

【結果】

  • 項目一
  • 項目二
  • 項目三

list-style-image

說明:

屬性值:none(無標記)、(網址)、inherit(繼承父元素設定)

【範例】

.listStyleImage {
    list-style-image:url(http://lh5.ggpht.com/_SAlWJ_xow1Y/TEwR1d4XVwI/AAAAAAAABWk/aMmrVqaGym4/frontpage.png);
}

【結果】

  • 項目一
  • 項目二
  • 項目三

list-style-position

說明:指定項目符號與條目內容的間距。

屬性值:inside(縮小間距)、outside(加大間距)、inherit(繼承父元素設定)

【範例】

.listStylePosition { list-style-position:inside; }

【結果】

  • 項目一
  • 項目二
  • 項目三

list-style-type

說明:設定HTML項目符號

      的項目圖案。

      屬性值:none(無標記)、circle(空心圓○)、disc(實心圓●,預設值)、square(實心方塊■)、armenian(亞美尼亞編號)、decimal(編號)、decimal-leading-zero(含0的編號)、georgian(格魯吉亞編號)、lower-alpha(小寫字母)、lower-greek(小寫希臘字母)、lower-latin(小寫拉丁字母)、lower-roman(小寫羅馬編號)、upper-alpha(大寫字母)、upper-latin(大寫拉丁字母)、upper-roman(大寫羅馬編號)、inherit(繼承父元素設定)

      【範例】

      .decimalLeadingZero { list-style-type:decimal-leading-zero; }
      .lowerRoman { list-style-type:lower-roman; }
      

      【結果】

      • 項目一
      • 項目二
      • 項目三
      • 項目一
      • 項目二
      • 項目三

      text-align

      說明:指定內容的水平對齊位置。

      屬性值:left(靠左對齊,預設值)、right(靠右對齊)、center(置中對齊)、justify(左右對齊)、inherit(繼承父元素設定)

      【範例】

      .textAlign { text-align:center; }
      

      【結果】

      置中對齊

      text-decoration

      說明:文字的裝飾效果。

      屬性值:none(無效果)、underline(底線)、overline(上標線)、line-through(刪除線)、blink(閃爍)、inherit(繼承父元素設定)

      【範例】

      .textDecoration { text-decoration:overline; }
      

      【結果】

      上標線

      text-indent

      說明:設定段落的縮排或凸排。

      屬性值:(長度)、(百分比)、inherit(繼承父元素設定)

      【範例】

      .indent { text-indent:2em; }
      .outdent { text-indent:-2em; margin-left:2em; }
      

      【結果】

      將這一段的內容
      設定縮排2個字元

      如果給負數值就會變成凸排
      可以利用margin-left將段落位置移回來

      text-transform

      說明:

      屬性值:none(無效果)、capitalize(首字大寫)、uppercase(全部大寫)、lowercase(全部小寫)、inherit(繼承父元素設定)

      【範例】

      .textTransform { text-transform:capitalize; }
      

      【結果】

      text transform

      vertical-align

      說明:指定內容的垂直對齊位置。部份效果瀏覽器無法支援。

      屬性值:(長度位移)、(百分比位移)、baseline(基線,預設值)、sub(下標)、super(上標)、top(置頂)、text-top(父元素內容頂端)、middle(中間)、bottom(底部)、text-bottom(父元素內容底部)、inherit(繼承父元素設定)

      【範例】

      .verticalAlign { vertical-align:super; }
      

      【結果】

      上標字

      white-space

      說明:設定對空白符號的解讀模式。

      屬性值:normal(正常,連續的空白變成一個空白,文字環繞,預設值)、nowrap(連續的空白變成一個空白,直到
      出現才斷行)、pre(保留所有空白,類似HTML的

      )、pre-line(連續的空白變成一個空白,文字環繞,必要時斷行)、pre-wrap(保留所有空白,必要時換行)、inherit(繼承父元素設定)

      【範例】

      .whiteSpace { white-space:pre; }
      

      【結果】

      中間的 空白都會被保留

      word-spacing

      說明:設定單字與單字之間的距離。中文字沒有效果。

      屬性值:normal(正常)、(長度)、inherit(繼承父元素設定)

      【範例】

      .wordSpacing { word-spacing:10px; }
      

      【結果】

      這段字的字距被設定為10px(word spacing)