Element <style> i atrybut style

Lekcja 11.7: Element <style> i atrybut style

Strona główna > Rozdział 11: Zaawansowane funkcje HTML > Element <style> i atrybut style

Dodawanie stylów CSS do HTML

Chociaż głównym i zalecanym sposobem dodawania stylów CSS do strony HTML jest użycie zewnętrznych arkuszy stylów (plików .css) linkowanych za pomocą znacznika <link rel="stylesheet" href="..."> w sekcji <head>, istnieją również dwa inne sposoby definiowania stylów bezpośrednio w dokumencie HTML:

Wewnętrzny arkusz stylów (Internal Stylesheet): Użycie elementu <style> w sekcji <head>.
Style wbudowane (Inline Styles): Użycie atrybutu style bezpośrednio w znaczniku HTML, którego wygląd chcemy zmienić.

W tej lekcji przyjrzymy się obu tym metodom, ich zastosowaniom oraz wadom i zaletom w porównaniu do zewnętrznych arkuszy stylów.

Wewnętrzny arkusz stylów: Element <style>

Element <style> umieszcza się w sekcji <head> dokumentu HTML. Pomiędzy znacznikami <style> a </style> można pisać reguły CSS, tak samo jak w zewnętrznym pliku .css. Style zdefiniowane w ten sposób mają zastosowanie tylko do bieżącego dokumentu HTML.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Wewnętrzny Arkusz Stylów</title>
  <style>
    /* Reguły CSS dla tej konkretnej strony */
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f8ff; /* AliceBlue */
    }
    h1 {
      color: navy;
      text-align: center;
    }
    p {
      color: #333;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Tytuł strony</h1>
  <p>To jest paragraf stylizowany za pomocą wewnętrznego arkusza stylów.</p>
</body>
</html>

Kiedy używać <style>?

Gdy style są unikalne dla jednej, konkretnej strony i nie będą reużywane gdzie indziej.
Do szybkiego prototypowania lub testowania stylów dla pojedynczej strony.
W sytuacjach, gdy nie można użyć zewnętrznych plików CSS (np. w niektórych systemach mailingowych - choć tam częściej używa się stylów wbudowanych).

Wady <style>:

Style nie są współdzielone między stronami, co prowadzi do powtarzania kodu.
Zmiana wyglądu wielu stron wymaga edycji każdej z nich osobno.
Mieszanie struktury (HTML) i prezentacji (CSS) w jednym pliku.
Brak możliwości cache'owania stylów przez przeglądarkę (w przeciwieństwie do zewnętrznych plików .css).

Style wbudowane: Atrybut `style`

Atrybut style można dodać do dowolnego elementu HTML w sekcji <body>. Jego wartością jest ciąg znaków zawierający deklaracje CSS (właściwość: wartość;), które mają być zastosowane bezpośrednio do tego konkretnego elementu.

<h2 style="color: green; text-decoration: underline;">Podtytuł ze stylami wbudowanymi</h2>

<p style="font-size: 18px; font-weight: bold; background-color: yellow; padding: 10px;">
  Ten paragraf ma indywidualne style zdefiniowane za pomocą atrybutu <code>style</code>.
</p>

Wynik w przeglądarce:

Podtytuł ze stylami wbudowanymi

Ten paragraf ma indywidualne style zdefiniowane za pomocą atrybutu style.

Kiedy używać atrybutu `style`?

Do zastosowania unikalnego stylu do jednego, konkretnego elementu.
W sytuacjach, gdy style są generowane dynamicznie przez JavaScript.
W edytorach WYSIWYG lub systemach CMS, które pozwalają użytkownikom na formatowanie treści.
W HTML emailach, gdzie obsługa zewnętrznych i wewnętrznych arkuszy stylów jest ograniczona.

Wady atrybutu `style`:

Najwyższa specyficzność: Style wbudowane mają najwyższy priorytet (poza !important) i nadpisują style z wewnętrznych i zewnętrznych arkuszy, co może utrudniać zarządzanie i debugowanie stylów.
Bardzo słaba reużywalność: Style dotyczą tylko jednego elementu.
Mieszanie struktury i prezentacji: Kod HTML staje się zaśmiecony deklaracjami stylów.
Utrudniona konserwacja: Zmiana wyglądu wymaga znalezienia i edycji każdego elementu z atrybutem style.
Brak możliwości użycia pseudoklas, pseudoelementów, media queries.

Generalnie, należy unikać nadmiernego używania stylów wbudowanych. Są one przydatne w specyficznych przypadkach, ale dla ogólnego stylowania strony znacznie lepsze są zewnętrzne arkusze CSS.

Kaskadowość i specyficzność

Przeglądarka stosuje style do elementów zgodnie z zasadami kaskadowości i specyficzności:

Kaskada (źródło stylów): Style przeglądarki (domyślne) < Style użytkownika < Style autora (zewnętrzne, wewnętrzne, wbudowane).
Specyficzność selektora: Bardziej specyficzne selektory (np. ID) mają pierwszeństwo przed mniej specyficznymi (np. klasy, znaczniki).
Kolejność w kodzie: Jeśli selektory mają tę samą specyficzność, wygrywa reguła zdefiniowana później w kodzie.

W kontekście metod dodawania stylów, ich priorytet (od najniższego do najwyższego) wygląda zazwyczaj tak:

Style przeglądarki
Style z zewnętrznego arkusza CSS (<link>)
Style z wewnętrznego arkusza CSS (<style>)
Style wbudowane (atrybut style)
Style z deklaracją !important (należy używać bardzo ostrożnie!)

Oznacza to, że style wbudowane nadpiszą style zdefiniowane w <style> lub w zewnętrznym pliku .css dla tego samego elementu i tej samej właściwości (chyba że użyto !important).

Podsumowanie: Której metody używać?

Zewnętrzne arkusze stylów (<link rel="stylesheet">): Zdecydowanie preferowana metoda dla większości stylów na stronie. Zapewnia najlepszą organizację, reużywalność, cache'owanie i łatwość konserwacji.
Wewnętrzne arkusze stylów (<style>): Używaj oszczędnie, głównie dla stylów specyficznych dla pojedynczej strony lub do szybkiego testowania.
Style wbudowane (atrybut style): Używaj tylko w wyjątkowych sytuacjach, gdy potrzebujesz nadać unikalny styl jednemu elementowi lub gdy style są generowane dynamicznie. Unikaj ich do ogólnego stylowania.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Utwórz stronę HTML z nagłówkiem <h1> i dwoma paragrafami <p>. Użyj wewnętrznego arkusza stylów (<style>), aby nadać wszystkim paragrafom kolor tekstu niebieski (blue). Następnie, użyj stylu wbudowanego (atrybut style), aby tylko drugi paragraf miał dodatkowo pogrubioną czcionkę (font-weight: bold;).

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Style Wewnętrzne i Wbudowane</title>
  <style>
    /* Wewnętrzny arkusz stylów */
    p {
      color: blue; /* Styl dla wszystkich paragrafów */
    }
  </style>
</head>
<body>

<h1>Testowanie stylów CSS</h1>

<p>To jest pierwszy paragraf. Ma tylko styl z wewnętrznego arkusza (niebieski kolor).</p>

<p style="font-weight: bold;">
  To jest drugi paragraf. Ma styl z wewnętrznego arkusza (niebieski kolor) 
  oraz dodatkowy styl wbudowany (pogrubienie).
</p>

</body>
</html>

W wyniku, oba paragrafy będą miały niebieski tekst (ze względu na regułę w <style>), ale tylko drugi paragraf będzie dodatkowo pogrubiony (ze względu na atrybut style).

Dodatkowe zadania do samodzielnego wykonania:

Dodaj do wewnętrznego arkusza stylów regułę dla h1, która ustawia kolor na czerwony.
Do pierwszego paragrafu dodaj atrybut style ustawiający rozmiar czcionki na 14px.
Spróbuj w atrybucie style drugiego paragrafu ustawić kolor tekstu na zielony (color: green;). Zobacz, jak nadpisuje to regułę z wewnętrznego arkusza.

Najczęściej zadawane pytania

Jakie są trzy sposoby dodawania CSS do HTML?

Zewnętrzne arkusze stylów (<link rel="stylesheet">), wewnętrzne arkusze stylów (<style> w <head>) oraz style wbudowane (atrybut style w elementach).

Która metoda dodawania CSS jest najlepsza?

Zdecydowanie preferowane są zewnętrzne arkusze stylów (.css) ze względu na separację kodu, reużywalność, cache'owanie i łatwość zarządzania.

Do czego służy element <style>?

Pozwala na zdefiniowanie reguł CSS (wewnętrznego arkusza stylów) bezpośrednio w sekcji <head> dokumentu HTML. Style te dotyczą tylko tej jednej strony.

Co to są style wbudowane (atrybut style)?

Są to deklaracje CSS umieszczone bezpośrednio w atrybucie `style` danego elementu HTML. Mają one najwyższą specyficzność (poza !important) i dotyczą tylko tego jednego elementu.

Kiedy unikać stylów wbudowanych?

Należy ich unikać do ogólnego stylowania strony, ponieważ utrudniają zarządzanie, zaśmiecają kod HTML i mają bardzo wysoką specyficzność, co może prowadzić do problemów z nadpisywaniem stylów.