Web.Reporter.pl Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przykładami
autor: Dariusz Majgier • ostatnia aktualizacja kursu: 2003.06.01

[Start][Elementy HTML][Atrybuty HTML][Style CSS][Porady online]
[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory][tekst][czcionki][rozmiary][pozycje][tabele][listy][formularze]
[struktura][linki][multimedia][bloki][obramowania][tła][synteza][druk]

font

Styl definiuje właściwości czcionki. Za pomocą tego jednego polecenia można ustalić wszystkie, następujące właściwości czcionki: font-family, font-size, font-style, font-variant, font-weight. Jedno polecenie zamiast kilku jest po prostu wygodne w stosowaniu. Kolejność podawanych wartości ma znaczenie. Można podać wszystkie wartości poniższych styli lub tylko niektóre z nich, ale muszą wystąpić font-size i font-family.

Wartości:

font-style - CSS1 / IE3, N4, O3.5
styl czcionki, np. font:italic;
font-variant - CSS1 / IE4, N6, O3.5
wariant czcionki, np. font:small-caps;
font-weight - CSS1 / IE3, N4, O3.5
grubość (waga) czcionki, np. font:bold;
font-size - CSS1 / IE3, N4, O3.5
wielkość czcionki, np. font:14px;
font-family - CSS1 / IE3, N4, O3.5
rodzina czcionki, np. font:sans-serif;
caption - CSS2 / IE4, N6, O6
czcionka systemowa, jak w przyciskach, np. font:caption;
icon - CSS2 / IE4, N6, O6
czcionka systemowa, jak w ikonach, np. font:icon;
menu - CSS2 / IE4, N6, O6
czcionka systemowa, jak w menu, np. font:menu;
message-box - CSS2 / IE5.5, N6, O6
czcionka systemowa, jak w komunikatach, np. font:message-box;
small-caption - CSS2 / IE5.5, N6, O6
czcionka systemowa, jak w dymkach, np. font:small-caption;
status-bar - CSS2 / IE5.5, N6, O6
czcionka systemowa, jak w pasku statusu, np. font:status-bar;
inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font:inherit;
Pozostałe cechy:
CSS/przeglądarki: CSS1 / IE3, N4, O3.5
odpowiedniki HTML: FONT, I, B
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym 
<span style="font: bold 14px Helvetica, Arial, sans-serif;">
część wyrazów napisana jest inną czcionką</span>. 
A teraz znowu zwykły tekst.

Przykładowy tekst, w którym część wyrazów napisana jest inną czcionką. A teraz znowu zwykły tekst.

• Przykład 2:

<style type="text/css"><!--
body, td, br, p, center {font: 14px helvetica, sans-serif;}
b {font: bold 16px helvetica, sans-serif;}
--></style>

 
• • •
Zobacz porady, skrypty, artykuły i gotowe rozwiązania dla właścicieli stron WWW!