2

kurs

html

Lekcja 8: Atrybuty

html

W miarę tworzenia strony www pojawia się na niej coraz więcej elementów. Taki dokument będzie zawierał powtarzające się znaczniki takie jak elementy blokowe - div, nagłówki, akapity.

Każdy z tych elementów będzie miał wspólny wygląd zdefiniowany w pliku CSS. Zatem co zrobić w sytuacji, gdy zajdzie potrzeba zastosowania odrębnego stylu dla określonego znacznika? W takim przypadku poszczególnym elementom możemy nadać atrybuty.

Atrybuty możemy zdefiniować lokalnie, czyli bezpośrednio w dokumencie HTML lub w pliku zewnętrznym. Zalecam tę drugą metodę, gdyż oddzielenie struktury strony od jej wyglądu uporządkuje i ułatwi pracę nad stroną.

Styl lokalny

W pierwszym przykładzie przygotujemy formatowanie lokalnie.

<p style="background-color: blue; color: white;">Styl dla akapitu 
zdefiniowany lokalnie.</p>
Przykład

Styl dla akapitu zdefiniowany lokalnie.

Styl z pliku zewnętrznego

Teraz ten sam efekt przygotujemy w pliku zewnętrznym. Wcześniej, aby plik CSS wiedział do którego akapitu ma zastosować formatowanie nadamy akapitowi klasę atrybut.

W pliku HTML umieścimy następujący zapis:

<p class="atrybut">Styl dla akapitu z zewnętrznego pliku CSS.</p>

W pliku CSS przygotujemy deklarację definiującą wygląd naszego akapitu.

p.atrybut { background-color: blue; color: white; }

W rezultacie otrzymamy efekt taki jak w przypadku stylu lokalnego.

Przykład

Styl dla akapitu z zewnętrznego pliku CSS.

comments powered by Disqus

Do góry