Atrybuty typograficzne w CSS 2

W oczekiwaniu na CSS 3 i lepsze wsparcie mechanizmów typograficznych przez przeglądarki, pozostaje nam cieszyć się możliwościami CSS 2. Przyjrzyjmy się temu, co mamy do dyspozycji.

Typograficzne atrybuty CSS

Znajomość samych atrybutów i ich wartości to rzecz postawowa. Sprawna zmiana tekstu za pomocą tych atrybutów może zająć trochę czasu, ponieważ opiera się zwykle na żmudnych testach. Bardzo pomocne mogą w takim przypadku narzędzia, które pozwolą w wizualny sposób dobrać odpowiednie wartości:

Podstawowe parametry typograficzne kontrolowane są za pomocą:

Atrybuty first-letter i first-line nie są poprawnie obsługiwanie przez wszystkie przeglądarki.

Zestawienie atrybutów CSS mających zastosowanie w typografii internetowej

  1. Czcionki
    • font-family
      Wartości: nazwa kroju pisma (w przypadku nazwy ze spacją otoczona znakami cudzysłowia lub apostrofami)
    • font-size
      Wartośći: rozmiar, larger, smaller
    • font-weight
      Wartośći: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
    • font-style
      Wartości: normal, italic, oblique
    • font-variant
      Wartości: normal, small-caps
    • font-stretch
      Wartości: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit
    • font

      font to skrót zastępujący większość powyższych.
      Sposób użycia: font: font-style | font-variant | font-weight | font-size | line-height | font-family

  2. Text
    • text-indent
    • text-decoration
      Wartośći: none, underline, overline, line-through, blink
    • text-transform
      Wartośći: capitalize, uppercase, lowercase, none
    • word-spacing
      Wartości: normal, długość
    • white-space
      Wartości: normal, pre, nowrap
    • letter-spacing
      Wartości: normal, długość
    • line-height
      Wartości: normal, długość
  3. Wyrównanie pionowe i poziome
    • text-align
      Wartości: justify, left, right, center
    • vertical-align
      Wartości: baseline, sub, super, top, text-top, middle, bottom, text-bottom, długość
  4. Marginesy
    • margin
    • margin-left, margin-right, margin-top,margin-bottom
  5. Obramowanie
    • border-style
      Wartości: none, hidden, dotted, dashed, solid, double, groove ridge, inset, outset
    • border-style-left, border-style-right, border-style-top, border-style-bottom
      Wartości: takie jak border-style.
    • border-width
      Wartości: thin, medium, thick, 10px, 40pt
    • border-left-width, border-right-width, border-top-width, border-bottom-width
      Wartości: takie jak border-width
    • border-color
    • border-left-color, border-right-color, border-top-color, border-bottom-color
    • border-collapse
      Wartości: collapse, separate
    • border
    • border-left, border-right, border-top, border-bottom
  6. Wysokość, szerokość i odstępy otaczające
    • width
    • height
    • max-width
    • max-height
    • min-width
    • min-height
    • padding
    • padding-left, padding-right, padding-top, padding-bottom
  7. Wypunktowanie, numerowanie
    • list-style-type
      Wartości: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none
    • list-style-position
      Wartości: inside, outside, inherit
    • list-style-image
      Wartości: adres uri, none
  8. Kolor i tło
    • color
    • background
  9. Inne
    • empty-cells
      Wartośći: show, hide