(C) Dekoracja tekstu*

Dekoracja tekstu

Dekoracja tekstu

Dekoracja tekstu (Podstawy)

  • text-indent: Rozmar; – Określa wcięcie pierwszego wiersza tekstu.
  • text-size: Rozmar; – Określa rozmiar spacji.
  • text-algin: Ułożenie; – Określa ułożenie tekstu względem elementu rodzica.
    • left – Tekst wyświetlany od lewej strony.
    • right – Tekst wyświetlany od prawej strony.
    • center – Tekst wyświetlany po środku.
    • justify – Tekst wyjustowany.
    • inherit – Element dziedziczy styl od rodzica.
  • text-transform: Transformacja; – Określa wielkość liter w tekście.
    • none – Tekst bez zmian.
    • capitalize – Wszystkie pierwsze litery w wyrazie są pisane z dużej litery.
    • uppercase – Wszystkie litery są pisane z dużej litery.
    • lowercase – Wszystkie litery są pisane z małej litery.
    • inherit – Element dziedziczy styl od rodzica.
  • letter-spacing: Rozmiar; Określa odległości pomiędzy poszczególnymi literami.
  • word-spacing: Rozmiar; – Określa odległości pomiędzy wyrazami.
  • word-wrap: break-word; – Załamuje tekst wystający poza obszar elementu rodzica.

Dekoracja tekstu (Podkreślenie / Znaki nad tekstem)

  • text-decoration: Typ Kolor Styl; – Dekoruje tekst za pomocą linii poziomej.
    • Typ (none, underline, overline, line-through).
    • Styl (double, dotted, dashed, wavy).
  • text-decoration-color: Kolor; – Definiuje kolor podkreślenia tekstu.
  • text-decoration-style: Styl; – Definiuje styl podkreślenia tekstu.
    • double, dotted, dashed, wavy.
  • text-decoration-line: Typ; – Definiuje typ podkreślenia tekstu.
    • none – Tekst bez dekoracji.
    • underline – Tekst podkreślony od dołu.
    • overline – Tekst podkreślony od góry.
    • line-through – Tekst przekreślony.
  • text-emphasis: Typ Kształt Kolor; – Wyświetla symbol nad każdym znakiem w danym tekście.
    • Typ (filled, open).
    • Kształt (circle, double-circle, dot, triangle, sesame).
  • text-emphasis-style: Typ Kształt; – Definiuje typ / kształt wyświetlanych znaków.
    • Typ (filled, open).
    • Kształt (circle, double-circle, dot, triangle, sesame).
    • Przykład (text-emphasis-style: open triangle;)
  • text-emphasis-color: Kolor; – Definiuje kolor wyświetlanych znaków.
  • text-emphasis-posytion: Horyzontalnie Wertykalnie; – Definiuje lokalizację wyświetlanych znaków.
    • Horyzontalnie (over, under).
    • Wertykalnie (right, left).

Cienie / kontur tekstu

Kontury tekstu działają jedynie z dodatkowym dopiskiem: -webkit-.

  • text-shadow: X Y Rozmycie Kolor; – Określa wielkość X Y cieni tekstu, rozmycie oraz kolor.
  • text-stroke: Rozmiar Kolor; – Określa grubość oraz kolor kontur tekstu.
  • text-fill-color: Kolor; – Definiuje kolor wypełnienia tekstu (Ma pierwszeństwo nad color: Kolor;).
  • text-stroke-color: Kolor; – Definiuje kolor kontur tekstu.
  • text-stroke-width: Rozmiar; – Definiuje grubość kontur tekstu.

Kierunek wyświetlania tekstu

  • writing-mode: Kierunek; – Określa kierunek wyświetlania tekstu.
    • vertical-lr – Wyświetla tekst wertykalnie (Od lewej strony).
    • vertical-rl – Wyświetla tekst wertykalnie (Od prawej strony).
    • horizontal-tb – Wyświetla tekst horyzontalnie.
  • text-orientation: Orientacja; – Określa tryb wyświetlania tekstu pionowego (wertykalnego).
    • mixed – Znaki są odwrócone o 90 stopni.
    • upright – Znaki są wyświetlane poprawnie.
  • direction: ltr / rtl; – Określa kierunek wyświetlania tekstu (Horyzontalnego).

Dekoracja fontu

Dekoracja fontu

  • color: kolor; – Określa kolor wyświetlanego tekstu, działa na między innymi znaczniki <a><p> czy<q>.
    • rgba(0, 0, 255, 0.8) – Określa kolor na podstawie RGBA.
    • hsl(80, 60%, 50%) – Określa kolor na podstawie HSL.
    • black – Określa kolor na podstawie nazwy.
    • #69733F – Określa kolor na podstawie ciągu szesnastkowego.
  • font-family: Czcionka; – Określa rodzaj czcionki, wyświetlanego tekstu.
  • font-size: Rozmiar; – Określa rozmiar, wyświetlanego tekstu.
  • font-style: Styl; – Określa styl, wyświetlanego tekstu.
    • normal – Podstawowy niezmieniony styl.
    • italic – Styl pochylony.
    • oblique – Styl pochylony.
    • inherit – Element dziedziczy styl od rodzica.
  • font-weight: Waga; – Określa wagę, wyświetlanego tekstu.
    • normal – Podstawowa niezmieniona grubość.
    • bold – Tekst pogrubiony.
    • bolder – Tekst bardziej pogrubiony.
    • inherit – Element dziedziczy styl od rodzica.
    • 100-300 – Tekst pisany cienkimi znakami.
    • 400 – Podstawowa niezmieniona grubość.
    • 700 – Tekst pogrubiony.
  • fort-variant: Wariant; – Określa wielkość znaków w tekście.
    • normal – Wyświetla domyślą wielkość znaków.
    • small-caps – Zmienia wszystkie małe litery w tekście na drukowane, pisane mniejszą czcionką.
  • line-height: Rozmiar; – Określa wielkość interlinii pomiędzy wierszami.

Pozostałe tematy związane z CSS

Kaskadowe arkusze stylów

Inspiracje CSS

PDFPRINT

Robert T Kucharski

Cisco Network Engineer in GPW.

Dodaj komentarz