• Selektory - wstęp
• Css - tło
• Css - czcionka
• Css - tekst
• Css - bloki
• Css - listy
• Css - Cienie

Selektory css - Tekst

Odstęp między wyrazami  word-spacing

• Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi wyrazami w bloku. Dzięki temu wyrazy w linijkach mogą być bardziej ścieśnione lub rozciągnięte.
• Wartość: normal | length
• Wartość początkowa: normal
• Używany z: wszystkie elementy
• Dziedziczenie: tak
• Przykład:

Odstęp między literami  letter-spacing

• Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi literami w wyrazach bloku. Dzięki temu cały tekst w linijce może być bardziej ścieśniony lub rozciągnięty.
• Wartość: normal | length
• Wartość początkowa: normal
• Używany z: wszystkie elementy
• Dziedziczenie: tak
• Przykład:

Dekoracja tekstu  text-decoration

• Polecenie umożliwia na wybór określonej dekoracji tekstu (np. podkreślenie). Rodzaje "dekoracji":
  • none - bez zmian
  • underline - podkreślenie
  • line-through - przekreślenie
  • overline - nadkreślenie
  • blink - migotanie tekstu
• Migotanie może nie być interpretowane przez wszystkie przeglądarki!
• Ciekawą możliwością może być łączenie powyższych wartości w jednej deklaracji
• Wartość: none | underline | overline | line-through | blink
• Wartość początkowa: none
• Używany z: wszystkie elementy
• Dziedziczenie: niekiedy
• Przykład:

Cień  text-shadow

• Polecenie pozwala wprowadzić efekt cienia pod tekstem. Możliwe jest również podanie serii efektów, rozdzielonych przecinkami, które będą się nawzajem nakładały.
• Własności cienia (wartości "rozmycie" oraz "kolor" nie są wymagane):
  • poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
  • pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
  • rozmycie - promień efektu rozmycia (opcjonalnie)
  • kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element)
• Text-shadow może być też używany z pseudoelementami :first-letter i :first-line.
• Wartość: none | color | length length [length]
• Wartość początkowa: none
• Używany z: wszystkie elementy
• Dziedziczenie: nie
• Przykład:

Wyrównanie w pionie  vertical-align

• Możliwe wartości:
  • baseline: wyrównuje linię bazową lub dolną część elementu do linii bazowej elementu nadrzędnego
  • middle: wyrównuje środkowy (na wysokość) punkt elementu do linii bazowej elementu nadrzędnego plus połowa x-height
  • sub: obniża linię bazową elementu do pozycji subskryptu elementu nadrzędnego
  • super: podwyższa linię bazową elementu do pozycji superskryptu elementu nadrzędnego
  • text-top: wyrównuje szczyt elementu do szczytu fontu elementu nadrzędnego
  • text-bottom: wyrównuje podstawę elementu do podstawy fontu elementu nadrzędnego
• Inny zestaw własności odnosi się do linii, której element jest częścią:
  • top: wyrównuje szczyt elementu do najwyższego elementu linii
  • bottom: wyrównuje podstawę elementu do najniższego elementu linii
• Wartość: baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage
• Wartość początkowa: baseline
• Używany z: wszystkie elementy
• Dziedziczenie: nie
• Przykład:

Zmiana wielkości liter  text-transform

• Polecenie umożliwia na wybór określonej transformacji tekstu, czyli atrybutów dotyczących zmiany wielkości liter (wielkie/małe) w tekście.
• Możliwe wartości:
  • none - bez zmian
  • capitalize - zamiana pierwszych liter wszystkich wyrazów na wielkie
  • uppercase - zamiana wszystkich liter na wielkie
  • lowercase - zamiana wszystkich liter na małe
• Wartość: capitalize | uppercase | lowercase | none
• Wartość początkowa: none
• Używany z: wszystkie elementy
• Dziedziczenie: tak
• Przykład:

Wyrównanie w poziomie  text-align

• Polecenie pozwala wybrać jeden z możliwych sposobów wyrównania tekstu, czyli jego ułożenia na ekranie.
• Możliwe wartości:
  • left - wyrównanie tekstu do lewego marginesu (domyślnie)
  • right - wyrównanie do prawego marginesu
  • center - do środka (wyśrodkowanie)
  • justify - do obu marginesów jednocześnie (justowanie)
• Wartość: left | right | center | justify
• Wartość początkowa: left
• Używany z: elementy blokowe
• Dziedziczenie: tak
• Przykład:

Wcięcie - w pierwszym wierszu akapitu  text-indent

• Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat). Jako wartość należy podać konkretną wielkość wcięcia, używając jednostek długości. Procenty - względne w stosunku do szerokości elementu nadrzędnego w hierarchii
• Wartość: length | percentage
• Wartość początkowa: 0
• Używany z: elementy blokowe
• Dziedziczenie: tak
• Przykład:

Odstęp między liniami  line-height

• Polecenie to pozwala ustalić odstęp pomiędzy liniami bazowymi wszystkich wierszy w bloku. Dzięki temu linijki mogą być bardziej ścieśnione lub rozciągnięte. Jako "odstęp" należy podać konkretną wielkość odstępu między liniami bazowymi wierszy używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Procenty - względne w stosunku do wielkości czcionki elementu. Następujące polecenia mają ten sam efekt:

   p { line-height: 1.7; font-size: 10pt } p { line-height: 1.7em; font-size: 10pt } p { line-height: 170%; font-size: 10pt }

• Wartość: normal | number | length | percentage
• Wartość początkowa: normal
• Używany z: wszystkie elementy
• Dziedziczenie: tak
• Przykład:

Cytowanie  quotes

• Własność określa, w jaki sposób wyświetlane są cytowania. Wartością jest lista symboli rozdzielonych spacjami, używanych dla każdego poziomu. Cytowania są otwierane i zamykane za pomocą własności content pseudoelementów :before i :after, z zagnieżdżonymi cytowaniami wyświetlanymi za pomocą odpowiednich symboli.
• Wartość: string | string | none | inherit
• Używany z: wszystkie elementy
• Przykład:

q: { quotes: "\201E" "\201D" }q:before { content: open-quote }q:after { content: close-quote } 

Białe znaki  white-space

• Polecenie pozwala sterować wyświetlaniem spacji na ekranie. Domyślnie nie jest możliwe postawienie obok siebie kilku spacji, ponieważ zostaną one automatycznie zamienione na jedną. Nie można również postawić spacji na początku wiersza. Dzięki użyciu komendy white-space: pre, możemy pozbyć się tych niedogodności. Polecenie działa podobnie jak znacznik <pre>...</pre>, lecz tekst jest napisany zwykłą czcionką.

• Ponadto deklaracja white-space: nowrap uniemożliwia przeglądarce przełamanie wiersza i przejście do następnej linii. Stosuje się je, gdy koniecznie zależy nam, aby podany tekst, był wpisany w jednej linijce. Jeśli nie zmieści się on na ekranie, pojawi się suwak do przewijania zawartości strony. Wiersz taki możemy przełamać tylko poprzez zastosowanie znacznika <br>.
• Możliwe wartości:
  • normal - zamiana kilku sąsiadujących ze sobą spacji na jedną; wiersze są przełamywane automatycznie na końcu szerokości strony (domyślnie)
  • pre - umożliwia wyświetlenie wielu spacji obok siebie; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter (tekst preformatowany)
  • nowrap - tryb identyczny jak "normal" z tym, że nie pozwala na przełamanie wiersza (przejście do następnej linii), aż do napotkania znacznika <br>
  • pre-wrap - (CSS 2.1) pozwala wyświetlić kilka sąsiadujących spacji; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter - oraz automatycznie na końcu szerokości strony (Opera 7.5)
  • pre-line - (CSS 2.1) jak wyżej z tym, że sąsiadujące spacje są zamieniane na jedną.