Czcionki
Wielkość
selektor { font-weight: rozmiar }
Imienne wartości absolutne:
- xx-small - najmniejsza
- x-small - mniejsza
- small - mała
- medium - średnia
- large - duża
- x-large - większa
- xx-large - największa
Rodzaj
selektor { font-weight: rodzaj,rodzaj1,rodzaj2,... }
Rodziny ogólne
- serif - czcionka szeryfowa (końcówki znaków posiadają "ozdobniki"), np.: 'Times New Roman', Georgia, Garamond, Bodoni
- sans-serif - czcionka bezszeryfowa (końcówki znaków są proste), np.: Arial, Verdana, 'Trebuchet MS', Helvetica, Univers, Futura
- monospace - czcionka o stałej szerokości znaków - monotypiczna (wygląda, jak pisana na maszynie), np.: Courier, 'Courier New'
- cursive - czcionka mająca pewne cechy pochyłej (wygląda, jak pisana ręcznie)
- fantasy - czcionka fantazyjna (dekoracyjna)
To jest czcionka 'Courier New'
To jest czcionka 'Times New Roman'
To jest czcionka Verdana
To jest rodzina ogólna serif
To jest rodzina ogólna sans-serif
To jest rodzina ogólna monospace
To jest rodzina ogólna cursive
To jest rodzina ogólna fantasy
Czcionki osadzone
Na koniec ostatnia (najbardziej zaawansowana) możliwość ustalania kroju czcionki - czcionki osadzone. Jak czytelnik zapewne zauważył, ustalenie rodzaju czcionki, wcale nie jest takie proste. O czcionce przy użyciu której zostanie wyświetlona nasza strona WWW, decyduje zestaw "fontów" zainstalowanych przez użytkownika (w jego systemie operacyjnym). Praktycznie nie można przewidzieć rezultatu, gdyż na dobrą sprawę nie wiemy, jaki system posiada internauta odwiedzający nasz serwis. Używanie podstawowych rodzajów czcionek ('Times New Roman', Arial, 'Courier New', Helvetica), nie zawsze musi nam odpowiadać, a poza tym nie gwarantuje oczekiwanego rezultatu w stu procentach.
Okazuje się jednak, że istnieje sposób, pozwalający używać na stronie WWW dowolne czcionki, bez obawy o niepoprawne wyświetlanie. Możliwe jest umieszczenie na serwerze specjalnego pliku z czcionkami, z którego korzysta przeglądarka, podczas wyświetlania strony. Nawet jeśli użytkownik nie będzie posiadał wymaganego kroju, zostanie on automatycznie pobrany z Internetu i dynamicznie tymczasowo zainstalowany w jego systemie. Użytkownik nie będzie mógł z takiej czcionki korzystać po wyjściu z serwisu - chroni to prawa autorskie producentów czcionek.
Osadzanie czcionki bezpośrednio na stronie, odbywa się w arkuszu stylów (wewnętrznym lub zewnętrznym)
Styl
selektor { font-style: styl }
- normal - czcionka normalna (podstawowa)
- italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique)
- oblique - również czcionka pochylona (podobna jak poprzednio)
Polecenie pozwala nadać czcionce określony styl. Może to być: czcionka zwyczajna, pochylona lub pochylona drugiego rodzaju. Dwie ostatnie są wyświetlane bardzo podobnie. Różnica między nimi polega na tym, że czcionka italic faktycznie jest osobnym krojem, natomiast oblique może zostać wygenerowana przez pochylenie zwykłej czcionki.
styl normal
styl italic
styl oblique
Waga
selektor { font-weight: waga }
- Wartości absolutne:
- normal - czcionka normalna (podstawowa)
- bold - czcionka pogrubiona
- 100, 200, 300, 400 (odpowiednik "normal"), 500, 600, 700 (odpowiednik "bold"), 800, 900 - każdy następny numer wskazuje wagę czcionki przynajmniej tak samo wytłuszczonej jak dla poprzedniej wartości w sekwencji
waga normal (400)
waga bold (700)
waga 100
waga 200
waga 300
waga 400 (normal)
waga 500
waga 600
waga 700 (bold)
waga 800
waga 900
2.Wartości względne:
- lighter - czcionka mniej wytłuszczona od odziedziczonej lub przypisanej do znacznika (np. typowo znaczniki <b>...</b> oraz <strong>...</strong> mają przypisaną domyślną wagę "bold")
- bolder - czcionka bardziej wytłuszczona
Wariant
selektor { font-weight: wariant }
Natomiast jako "wariant" należy wpisać:
- normal - czcionka normalna (podstawowa)
- small-caps - kapitaliki
Polecenie pozwala wybrać wariant czcionki jako "kapitaliki", czyli tekst napisany wielkimi literami, lecz czcionką o wielkości małych liter.
Wariant normal
Wariant small-caps
Atrybuty mieszane
selektor { font-weight: wartość atrybutu }
Natomiast jako "wartości atrybutów" należy wpisać konkretne wartości atrybutów, dotyczących czcionek, które będą oddzielone od siebie spacjami. Należy je wpisywać w następującej kolejności (przy czym można niektóre pominąć):
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
Polecenie to pozwala w wygodny sposób zdefiniować wszystkie atrybuty dotyczące czcionek. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości.
Wszystkie wartości należy wpisywać w określonej kolejności (przy czym można niektóre pominąć), a także oddzielić je od siebie spacjami. Dodatkowo przed line-height (odstęp między wierszami) należy obowiązkowo postawić ukośnik (ponieważ atrybuty font-size oraz line-height mogą mieć takie same wartości, a więc musimy je jakoś odróżnić). Nie ma wymogu, aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna.
Rozciągnięcie
selektor { font-weight: rozciąg }
Natomiast jako "rozciąg" należy wpisać:
- ultra-condensed - najbardziej ścieśniona
- extra-condensed
- condensed - ścieśniona
- semi-condensed
- normal - czcionka normalna (podstawowa)
- semi-expanded
- expanded - rozciągnięta
- extra-expanded
- ultra-expanded - najbardziej rozciągnięta
Polecenie pozwala ustalić poziome rozciągnięcie czcionki na ekranie. Tekst rozciągnięty będzie zajmował więcej miejsca w linii, natomiast ściśnięty - mniej.
Proporcje
selektor { font-weight: proporcje }
Natomiast jako "proporcje" należy wpisać konkretną wartość, określającą stosunek wysokości małej litery do wysokości całej czcionki (liczba z przedziału 0...1).
Subiektywny odbiór wielkości czcionki - a przez to jej czytelność - zależy bardziej od wysokości małej litery (1ex) niż od wysokości całej czcionki (1em). Dzieje się tak dlatego, ponieważ pomimo określenia takiego samego rozmiaru, różne czcionki posiadają różne proporcje, czyli stosunek wysokości małej litery do wysokości całej czcionki (1ex/1em). Oto proporcje wybranych czcionek:
- Times New Roman - 0.46 (domyślna w Internet Explorerze)
- Verdana - 0.58
- Comic Sans MS - 0.54
- Trebuchet MS - 0.53
- Georgia - 0.5
- Myriad Web - 0.48
- Minion Web - 0.47
- Gill Sans - 0.46
- Bernhard Modern - 0.4
- Caflish Script Web - 0.37
- Flemish Script - 0.28
Przy deklarowaniu rodzaju czcionki zawsze istnieje niebezpieczeństwo, że użytkownik nie będzie posiadał zdefiniowanych przez Ciebie czcionek. Wtedy cały tekst na ekranie zostanie napisany czcionką domyślną. Może się jednak zdarzyć tak, że przy podanym rozmiarze, czcionka domyślna będzie dużo mniej czytelna lub zbyt "wysoka" i przez to strona straci estetykę. Powodem są właśnie znacznie różniące się proporcje. Aby zabezpieczyć się na taki wypadek, należy określić proporcje czcionki, za pomocą powyższego polecenia. Dzięki temu, niezależnie od rodzaju czcionki, tekst będzie tak samo czytelny, ponieważ przeglądarka automatycznie dobierze odpowiednią jej wielkość - zgodnie ze wzorem:
w' = w * (p / p')
gdzie:
- w - wysokość czcionki określona w poleceniu
- p - proporcje określone w poleceniu
- w' - obliczona wysokość
- p' - proporcje dostępnej czcionki
Tekst
Kolor
selektor { color: kolor }
Natomiast jako "kolor" należy podać definicję koloru.
Polecenie pozwala ustalić dowolny kolor tekstu.
kolor red
kolor #66AAFF
kolor #69C
kolor rgb(255,33,170)
kolor rgb(25%,75%,75%)
kolor systemowy Highlight
Dekoracja
selektor { text-decoration: dekoracja }
- none - bez zmian
- underline - podkreślenie
- line-through - przekreślenie
- overline - nadkreślenie
- blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera 7)
Polecenie umożliwia na wybór określonej dekoracji tekstu (np. podkreślenie).
dekoracja none
dekoracja underline
dekoracja line-through
dekoracja overline
dekoracja blink (tylko Netscape/Mozilla/Firefox i Opera 7)
Transformacja
selektor { text-transform: transformacja }
- 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
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.
Wyrównanie
selektor { text-align: wyrównanie }
- 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)
Polecenie pozwala wybrać jeden z możliwych sposobów wyrównania tekstu, czyli jego ułożenia na ekranie.
Wcięcie
selektor { text-indent: wcięcie }
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).
Cień
selektor { text-shadow: poziom pion rozmycie kolor,... }
Wartości "poziom pion rozmycie kolor" określają 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)
Wartości "poziom", "pion" oraz "rozmycie" należy podać, używając jednostek długości.
Odstęp między wierszami
selektor { line-height: odstęp }
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.
Odstęp między wyrazami
selektor { word-spacing: odstęp }
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.
Odstęp między literami
selektor { letter-spacing: odstęp }
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.
Białe znaki
selektor { white-space: sposób }
- 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, Firefox 3, Chrome, Konqueror)
- pre-line - (CSS 2.1) jak wyżej z tym, że sąsiadujące spacje są zamieniane na jedną
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ą.
