Trzy sposoby dodawania CSS do strony

Trzy sposoby dodawania CSS do strony (inline, wewnętrzny, zewnętrzny)

CSS możesz dodać do strony HTML na trzy różne sposoby. W tej lekcji dowiesz się, czym różnią się te metody, jak ich używać oraz kiedy warto z nich korzystać.

Metody dodawania CSS do strony internetowej:

Style inline (wewnątrz elementów HTML)
Style wewnętrzne (w sekcji <head> w elemencie <style>)
Style zewnętrzne (w osobnym pliku CSS)

1. Style inline (wewnętrzne w tagu HTML)

To najprostszy sposób dodania stylów, bezpośrednio do konkretnego elementu HTML. Stosuje się atrybut style, w którym zapisujesz reguły CSS.

Składnia:

<element style="właściwość: wartość;">Treść</element>

Przykład:

<p style="color: red; font-size: 18px;">To jest czerwony akapit z większą czcionką.</p>

Efekt w przeglądarce:

To jest czerwony akapit z większą czcionką.

Zalety:

Prosty i szybki do zastosowania.
Działa bezpośrednio na konkretny element.

Wady:

Trudny do utrzymania w większych projektach.
Utrudnia rozdzielenie struktury (HTML) od wyglądu (CSS).
Nie zalecany przy dużych stronach – wymaga zmian w każdym elemencie osobno.

—

2. Style wewnętrzne (w nagłówku dokumentu HTML)

Style wewnętrzne umieszcza się w sekcji <head> dokumentu HTML w elemencie <style>. Dzięki temu możesz zastosować style dla wielu elementów na stronie w jednym miejscu.

Składnia:

<head>
  <style>
    selektor {
      właściwość: wartość;
    }
  </style>
</head>

Przykład:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 20px;
    }
  </style>
</head>
<body>

  <p>Ten tekst jest zielony i ma rozmiar 20px.</p>

</body>
</html>

Efekt w przeglądarce:

Ten tekst jest zielony i ma rozmiar 20px.

Zalety:

Łatwiejsze zarządzanie niż przy stylach inline.
Style można zastosować do wielu elementów jednocześnie.
Przydatne do prostych, jednorazowych stron lub testowania.

Wady:

Style działają tylko w obrębie jednej strony HTML.
Nie ma rozdziału między strukturą a stylami (całość jest w jednym pliku).

—

3. Style zewnętrzne (w osobnym pliku CSS)

Najlepszy i najbardziej profesjonalny sposób dodawania CSS to używanie zewnętrznego pliku. Style zapisujesz w osobnym pliku z rozszerzeniem .css, a do strony HTML podłączasz go za pomocą znacznika <link>.

W HTML wygląda to tak:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <p>Ten tekst zostanie ostylowany przez zewnętrzny plik CSS.</p>

</body>
</html>

Zawartość pliku style.css:

p {
  color: purple;
  font-size: 22px;
}

Efekt w przeglądarce:

Ten tekst zostanie ostylowany przez zewnętrzny plik CSS.

Zalety:

Rozdzielenie struktury od wyglądu – kod HTML i CSS są w osobnych plikach.
Łatwiejsze zarządzanie stylami na wielu stronach jednocześnie.
Lepsza wydajność – plik CSS jest wczytywany raz i używany przez całą stronę.
Współpraca z innymi osobami jest łatwiejsza (programiści mogą pracować nad HTML, a graficy nad CSS).

Wady:

Wymaga dodatkowego pliku, co w małych, prostych projektach może być niepotrzebne.

—

Porównanie trzech metod dodawania CSS

Sposób	Zastosowanie	Zalety	Wady
Inline	Pojedynczy element	Prosty, szybki	Trudny do utrzymania, miesza strukturę i styl
Wewnętrzny	Pojedyncza strona	Lepsze zarządzanie, centralizacja stylów	Ograniczone do jednej strony
Zewnętrzny	Cała strona/wiele stron	Czysty kod, łatwa aktualizacja, lepsza wydajność	Wymaga dodatkowego pliku CSS

—

Podsumowanie

Poznałeś trzy sposoby dodawania CSS: inline, wewnętrzny i zewnętrzny.
Najlepszą praktyką w projektach komercyjnych jest używanie zewnętrznych arkuszy stylów.
Wewnętrzne i inline przydają się głównie do testów lub prostych stron.

Testuj swój kod w JSFiddle

Możesz przetestować każdy z tych sposobów samodzielnie w JSFiddle. Przykład z użyciem stylu wewnętrznego:

<style>
  h1 {
    color: darkgreen;
  }
  p {
    font-size: 18px;
  }
</style>

<h1>Nagłówek ostylowany CSS</h1>
<p>Przykładowy tekst akapitu.</p>

Previous Temat

Back to Zagadnienie

Next Temat