Style formatowania tekstu

Stronę tą wyświetlono już: 5134 razy

font-weight

Styl ten służy do określenia stylu pogrubienia, dopuszczalne są wartości liczbowe: 100, 200, 300, 400, 500, 600, 700, 800, 900 lub tekstowe: normal - normalny, bold - pogrubiony, bolder - grubszy, thinker - cieńszy. Możliwe jest również zastosowanie styli: initial - by przywrócić standardowe ustawienie tego parametru lub inherit - by ustawić wartość tego parametru taką samą jak elementu nadrzędnego.

font-size

Styl ten umożliwia ustawienie rozmiaru czcionki. Istnieje możliwość użycia jednostek bezwzględnych (absolutnych):

• in - cale;
• cm - centymetry;
• mm - milimetry;
• pt - punkty topograficzne (używana jednostka w drukarstwie;
• pc - pika (1pc = 12pt)

oraz jednostek względnych (relatywnych):

• em - określa zmianę wymiaru względem elementu nadrzędnego strony;
• % - określa procentową wartość wymiaru względem szerokości okna przeglądarki lub elementu nadrzędnego;
• ex - jednostka określana względem wysokości litery x;
• px - piksele, określające wymiar względem rozdzielczości ekranu.

Przykład zastosowanie tego stylu:

Rezultat:

color

Zmiana koloru czcionki. Możliwe jest użycie kolorów nazwanych:

Kolor może być również wprowadzony za pomocą kodu szesnastkowego w formacie #ffffff.

white-space

Styl ten określa sposób traktowania przez przeglądarkę białych znaków. Oto lista możliwych ustawień:

• normal - sekwencja białych znaków zamieniana jest na pojedynczy biały znak, a tekst będzie zwijany, gdy jest to konieczne (domyślna wartość);
• nowrap - sekwencja białych znaków zamieniana jest na pojedynczy biały znak a tekst nigdy nie będzie zwijany do następnej linii.
• pre - białe znaki są zachowywane a tekst będzie zwijany w miejscu wystąpienia znaku nowej linii;
• pre-line - sekwencja białych znaków zamieniana jest na pojedynczy biały znak, tekst będzie zwijany gdy zajdzie taka konieczność (pomija znak nowej linii \n);
• pre-wrap - białe znaki są zachowywane przez przeglądarkę, tekst będzie zwijany gdy zajdzie taka konieczność i w miejscu wystąpienia znaku nowej linii \n;
• initial - ustawia domyślną wartość dla tego elementu;
• inherit - ustawia wartość, jaką przyjmuje rodzic tego elementu.

font-family

Umożliwia ustawienie kroju czcionki, można wymienić kilka krojów, jeżeli pierwszy nie będzie dostępny na danym komputerze wykorzystana zostanie kolejna na liście czcionka, która jest dostępna. Na końcu można określić, jaki typ czcionki powinien zostać użyty w przypadku, gdy żadna z domyślnych nie jest dostępna. Kroje czcionek mają różne właściwości w zależności od ich przeznaczenia dostępne są następujące typy: serif, sans-serif, cursive, fantasy, monospace. Oto przykład:

Można tutaj również użyć inherit oraz initial.

Formatowanie koloru i ustawienia grafiki tła

background

Ten styl umożliwia ustawienie koloru, grafiki oraz sposobu jej wyrównywania.

Style powtarzania:

• no-repeat - brak powtarzania;
• repeat-x - powtarzanie w poziomie;
• repeat-y - powtarzanie w pionie;
• repeat - powtarzanie w obu kierunkach;

Style wyrównania w poziomie:

• left - wyrównanie do lewej krawędzi obszaru znacznika, którego styl ten dotyczy;
• center - wyrównanie do środka obszaru znacznika, którego styl ten dotyczy;
• right - wyrównanie do prawej krawędzi obszaru znacznika, którego styl ten dotyczy;
• x - położenie na osi x, gdzie za x powinno podać położenie w jednostkach względnych lub bezwzględnych

Style wyrównania w pionie:

• top - wyrównanie do górnej krawędzi obszaru znacznika, którego styl ten dotyczy;
• center - wyrównanie do środka obszaru znacznika, którego styl ten dotyczy;
• bottom - wyrównanie do dolnej krawędzi obszaru znacznika, którego styl ten dotyczy;
• y - położenie na osi y, gdzie za y powinno podać położenie w jednostkach względnych lub bezwzględnych

background-attachment

Określa sposób zachowania grafiki tła, gdy element jest przewijany. Dostępne opcje:

• scroll - tło jest przewijane wraz z zawartością elementu;
• fixed - tło nie przewija się wraz z zawartością elementu;
• local - tło przewija się wzdłuż wraz z zawartością elementu;

background-color

Styl ten umożliwia ustawienie koloru tła. Format koloru jak w przypadku wcześniej omawianego stylu color.

background-image

Styl ten umożliwia ustawienie grafiki tła.

background-image

Styl ten umożliwia ustawienie grafiki tła.

background-position

Ustawienie położenia grafiki tła (dostępne opcje zostały opisane przy stylu background.

background-repeat

Sterowanie kierunkiem powtarzania grafiki tła (dostępne opcje zostały opisane przy stylu background.

Style pozycjonujące i wyrównujące zawartość znaczników

text-align

Wyrównywanie zawartości danego elementu. Dostępne są następujące style:

• left - wyrównanie do lewej (domyślne);
• center - wyrównanie do środka;
• right - wyrównanie do prawej;
• justify - wyrównywanie do obu stron (wyjustowanie tekstu).

padding

Określa odsunięcie zawartości danego znacznika od jego krawędzi. Podawane są wartości w jednostkach względnych lub bezwzględnych dla poszczególnych krawędzi w kolejności: góra, prawa, dolna, lewa. Pomijając ostatni parametr ustawia się odsunięcie dla pozostałych krawędzi. Gdy wprowadzona zostanie jedna wartość to ustawione zostanie jednakowe podane odsunięcie dla wszystkich krawędzi.

Przykład:

Rezultat:

padding-left

Styl pochodny od padding dotyczący odsunięcia zawartości znacznika od lewej krawędzi.

padding-right

Styl pochodny od padding dotyczący odsunięcia zawartości znacznika od prawej krawędzi.

padding-top

Styl pochodny od padding dotyczący odsunięcia zawartości znacznika od górnej krawędzi.

padding-bottom

Styl pochodny od padding dotyczący odsunięcia zawartości znacznika od dolnej krawędzi.

margin

Określa odsunięcie krawędzi znacznika od pozostałych elementów strony. Podawane są wartości w jednostkach względnych lub bezwzględnych dla poszczególnych krawędzi w kolejności: góra, prawa, dolna, lewa. Pomijając ostatni parametr ustawia się odsunięcie dla pozostałych krawędzi. Gdy wprowadzona zostanie jedna wartość to ustawione zostanie jednakowe podane odsunięcie dla wszystkich krawędzi.

Przykład:

Rezultat:

margin-left

Styl pochodny od margin dotyczący odsunięcia od lewej krawędzi.

margin-right

Styl pochodny od margin dotyczący odsunięcia od prawej krawędzi.

margin-top

Styl pochodny od margin dotyczący odsunięcia od górnej krawędzi.

margin-bottom

Styl pochodny od margin dotyczący odsunięcia od dolnej krawędzi.