Kurs XHTML: 1.1, 1.0 / HTML: 4.01, 4.0, 3.2, 3.0, 2.0 / CSS: 2.1, 2.0, 1.0 z przykładami

[Start] • [Elementy XHTML/HTML] • [Atrybuty XHTML/HTML] • [Style CSS]
[0] [A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]

font

OPIS

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 - CSS: 2.1, 2.0, 1.0

styl czcionki, np. font: italic;

• font-variant - CSS: 2.1, 2.0, 1.0

wariant czcionki, np. font: small-caps;

• font-weight - CSS: 2.1, 2.0, 1.0

grubość (waga) czcionki, np. font: bold;

• font-size - CSS: 2.1, 2.0, 1.0

wielkość czcionki, np. font: 14px;

• font-family - CSS: 2.1, 2.0, 1.0

rodzina czcionki, np. font: sans-serif;

• caption - CSS: 2.1, 2.0

czcionka systemowa, jak w przyciskach, np. font:caption;

• icon - CSS: 2.1, 2.0

czcionka systemowa, jak w ikonach, np. font: icon;

• menu - CSS: 2.1, 2.0

czcionka systemowa, jak w menu, np. font: menu;

• message-box - CSS: 2.1, 2.0

czcionka systemowa, jak w komunikatach, np. font: message-box;

• small-caption - CSS: 2.1, 2.0

czcionka systemowa, jak w dymkach, np. font: small-caption;

• status-bar - CSS: 2.1, 2.0

czcionka systemowa, jak w pasku statusu, np. font: status-bar;

• inherit - CSS: 2.1, 2.0

przejęcie wartości "rodzica", np. font: inherit;

POZOSTAŁE CECHY

• CSS: 2.1, 2.0, 1.0
• dziedziczony: tak
• odpowiedniki HTML: font, i, b

PRZYKŁADY ZASTOSOWAŃ

• 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 { font: 14px helvetica, sans-serif; }
b {font: bold 16px helvetica, sans-serif; }
--></style>