HTML (HyperText Markup Language) udostępnia sześć specjalnych znaczników do wyświetlania nagłówków na różnych poziomach. Wszystkie mają domyślne parametry (rozmiar i styl czcionki, ilość wcięć z poprzedniego i następnego elementu itp.). Te opcje można nadpisać za pomocą instrukcji CSS (Kaskadowe arkusze stylów), a tym samym zmienić wygląd nagłówków w tekście strony internetowej.
Instrukcje
Krok 1
Umieść nagłówki o różnych poziomach między odpowiednimi znacznikami otwierającymi i zamykającymi, jeśli nie zostało to jeszcze zrobione w kodzie źródłowym strony internetowej. Na przykład najważniejszy nagłówek (pierwszy poziom) powinien znajdować się między tagami
i
:
Nagłówek pierwszego poziomu
Kolejny najważniejszy podtytuł powinien być umieszczony pomiędzy tagami
i
itp. Ostatnim z przewidzianych poziomów jest szósty -
i
Krok 2
Umieść w nagłówku kodu źródłowego (pomiędzy tagami i) oświadczenie informujące przeglądarkę odwiedzającego, że w tym miejscu znajduje się opis stylów CSS:
/ * Instrukcje CSS będą tutaj * /
Krok 3
Pomiędzy otwierającymi i zamykającymi znacznikami stylu dodaj opisy stylów dla nagłówków każdego poziomu, którego wygląd chcesz zmienić. Na przykład, jeśli potrzebujesz tylko zmienić wygląd nagłówków pierwszego poziomu, ten kod może wyglądać tak:
h1 {
kolor czerwony;
rozmiar czcionki: 20px;
styl czcionki: kursywa;
grubość czcionki: pogrubiona;
margines górny: 30px;
margines-dolny: 20px;
}
Tutaj h1 wskazuje, że opis w nawiasach klamrowych odnosi się do znacznika h1 i jest nazywany „selektorem”. Parametr color określa kolor tekstu, parametr font-size to rozmiar czcionki, styl czcionki z wartością kursywą to krój kursywy, grubość czcionki z wartością bold to pogrubienie, margin-top to góra margines, a margines dolny to margines dolny. W przypadku nagłówków drugiego poziomu dodaj podobny blok z selektorem h2 itp.
Krok 4
Użyj skróconej składni, jeśli istnieje wiele poziomów do opisania. Na przykład w jednym parametrze można umieścić opisy czcionek, a także opisy rozmiarów wcięć. Próba:
h1 {
kolor czerwony;
czcionka: pogrubiona arial 20px;
margines: 30px 0 20px 0;
}
godz.2 {
kolor pomarańczowy;
czcionka: pogrubiona arial 18px;
margines: 25px 0 15px 0;
}
W parametrze margin należy określić marginesy zgodnie z ruchem wskazówek zegara, zaczynając od górnego marginesu, poprzez spację (górny prawy dolny lewy).
