CSS: Właściwości Czcionek, Tekstu i Tła

Temat: Właściwości elementów
Czcionki
selektor {font-family: Arial;}
Istnieje 5 podstawowych rodzin czcionek:
 serif (szeryfowe) np. Times New Roman (posiadają ozdoby na końcach litery)
(nie najlepsze do małego tekstu)
 sans serif (bezszeryfowe) np. Arial (nie posiadają ozdób – dobre do małego
tekstu
 monospace (nieproporcjonalne) każda litera zajmuje tę samą przestrzeń
(Courier New)
 cursive (pisanki) naśladują pismo odręczne np. Apple Chancery
 fantasy – np. Webdings (znaki itd.)
Rozmiar czcionki
selektor {font-size: rozmiar;}
1. według słów kluczowych – pozwalają określić rozmiar czcionki względem
rozmiaru podstawowego

xx-small – czcionka najmniejsza

x-small – czcionka mniejsza

small – czcionka mała

medium – czcionka średnia

large – czcionka duża

x-large – czcionka większa

xx-large – czcionka największa
2. za pomocą wartości względnych – wielkość czcionki jest ustalona względem
wielkości czcionki elementu nadrzędnego

smaller – czcionka mniejsza od bieżącej

larger – czcionka większa od bieżącej
3. poprzez wielkość podaną w jednostkach miary

piksele(px)

punkty (pt)

centymetry (cm)

cale (in)

milimetry (mm)

pica (pc)
4. poprzez wielkość podana w procentach
Styl czcionki
Selektor {font-style: styl;}
 normal – czcionka podstawowa
 italic – czcionka pochylona
 oblique – czcionka pochylona (dostępna jeśli nie dostępna jest italic)
Wariant czcionki
Selektor {font-variant: wartość;}
 normal – czcionka normalna
 small-caps - kapitaliki
Grubość czcionki
Selektor (font-weight: wartość;}
 normal – czcionka normalna
 bold – czcionka pogrubiona
 100, 200, 300 … 900 - wartości od 100 do 900, wielokrotności 100 zwiększa
grubość
 bolder, lighter -– ustawia wagę czcionki jako większą lub mniejszą w
stosunku do wagi tekstu elementu rodzica
Łączenie właściwości czcionki
<font-style><font-variant><font-weight><font-size><font-height><font-family>
oddzielone spacją
h1 {font: italic small-caps bold 26px/32px ”Times New Roman”, Times, serif;}
TEKST
Ozdabianie tekstu
selektor { text-decoration: dekoracja; }
 none - bez zmian
 underline - podkreślenie
 line-through - przekreślenie
 overline - linia umieszczona nad tekstem
 blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera 7)
Ciekawą możliwością może być łączenie powyższych wartości w jednej deklaracji, np.:
selektor { text-decoration: underline line-through overline; }
Transformacja - ustawianie wielkości liter tekstu
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
Wyrównanie - polecenie pozwala wybrać jeden z możliwych sposobów wyrównania
tekstu, czyli jego ułożenia na ekranie.
selektor { text-align: wyrównanie; }
 left - wyrównanie tekstu do lewego marginesu
 right - wyrównanie do prawego marginesu
 center - do środka (wyśrodkowanie)
 justify - do obu marginesów jednocześnie (justowanie)
Wcięcie - definiuje wcięcie pierwszego wiersza akapitu
selektor { text-indent: wartość; }
przykład:
p { text-indent: 20px;}
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)
przykład:
selector{text-shadow: 3px 3px 5px red;}
Odstęp między wierszami
selektor { line-height: wartość; }
przykład:
selektor { line-height: 12px; }
Odstęp między wyrazami
selektor { word-spacing: wartość; }
Odstęp między literami
selektor { letter-spacing: wartość;}
Białe znaki
selektor { white-space: sposób; }
 normal - zamiana kilku sąsiadujących ze sobą spacji na jedną; wiersze są
przełamywane automatycznie
 pre - umożliwia wyświetlenie wielu spacji obok siebie; wiersze są przełamywane po
napotkaniu znaku nowej linii - klawisz Enter (tekst preformatowany)
 nowrap - pozwala na przełamanie wiersza w miejscu napotkania znacznika
napotkania znacznika < br >
 pre-wrap -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
 pre-line - jak wyżej z tym, że sąsiadujące spacje są zamieniane na jedną
Tło i kolor
1. Kolor tła
selektor { background-color: kolor; }
2. Grafika jako tło - umieszczania obrazka jako tła
selektor { background-image: url('ścieżka dostępu do obrazka');}
np. {background-image:url('http://kodcss.pl/img/obrazek.png');}
Zapis url('../img/obrazek.png') oznacza:
 img - folder, w którym znajduje się nasz obrazek
 obrazek - nazwa naszego obrazka, czyli nazwa pliku
 .png - rozszerzenie pliku z naszym obrazkiem
 / - oznacza "wejście" do folderu (przesunięcie się o jeden poziom "do przodu" w
drzewie katalogów)
 ../ - oznacza "wyjście" z folderu (przesunięcie się o jeden poziom "do tyłu" w drzewie
katalogów)
3. Powtarzanie grafiki w tle
selektor { background-repeat:powtarzanie;}
 repeat - powtarzanie tła w obu kierunkach (domyślnie)
 repeat-x - powtarzanie tła tylko w kierunku poziomym
 repeat-y - powtarzanie tła tylko w kierunku pionowym
 no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
4. Blokada grafiki w tle
selektor { background-attachment: blokada; }
 scroll - przewijanie tła (domyślnie)
 fixed - tło nieruchome względem okna przeglądarki
 local - tło nieruchome względem elementu dla którego zostało zdefiniowane
Jeśli tłem strony jest grafika, przesuwa się ona razem z tekstem, w miarę przewijania treści
okna za pomocą suwaka. Możemy jednak sprawić, że tło będzie przez cały czas nieruchome,
nawet jeśli będziemy przewijali zawartość strony.
Wtedy należy użyć polecenia:
selektor{ background-image: url('obrazek.jpg'); background-attachment: fixed; }
5. Pozycja tła - pozwala ustalić pozycję obrazka w tle.
selektor { background-position: pozycja; }
Natomiast jako "pozycja" należy wpisać
jedna wartość:
 center - obrazek na środku (w centrum)
 left - obrazek po lewej
 right - po prawej
 top - na górze
 bottom - na dole
 jednostka długości - odległość od lewej krawędzi
dwie wartości (oddzielone spacją):
 left top - lewy-górny róg
 left bottom - lewy-dolny róg
 right top - prawy-górny róg
 right bottom - prawy-dolny róg
6. Usunięcie tła
selektor { background: none ;}
7. Atrybuty tła – można w dowolny sposób zdefiniować wszystkie właściwości tła
selektor { background: wartości atrybutów;}
 kolor tła
 tło obrazkowe
 powtarzanie tła
 zaczepienie tła
 pozycja tła