• Artykuł

          

Encyklopedia: Jak umieszczać style CSS - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-09-15

Często spotykanym problemem podczas projektowania strony WWW jest wybór sposobu umieszczenia stylów CSS. Style CSS można umieszczać na trzy sposoby:

  1. w osobnym dokumencie,
  2. w nagłówku strony,
  3. wewnątrz znacznika, w celu nadania mu określonego stylu.

Pierwszy sposób, polegający na umieszczeniu stylów w osobnym dokumencie, stosowany jest najczęściej w przypadku, gdy chcemy określić jednakowy styl dla całej strony, to znaczy dla każdej z podstron. W ten sposób kod nie jest powielany, a w celu zmodyfikowania wyglądu całej strony nie ma potrzeby zmiany kodu każdej podstrony osobno. Style umieszcza się w pliku z rozszerzeniem .css, który jest wskazywany w nagłówku strony HTML za pomocą znacznika link:

<link href="nazwa_pliku.css" type="text/css" rel="stylesheet" />

Możemy również użyć dyrektywy @import, umieszczanej wewnątrz znacznika style:

<style type="text/css">@import url("nazwa_pliku.css");</style>

Drugi sposób, polegający na umieszczeniu stylów w nagłówku strony, służy określeniu indywidualnego wyglądu podstrony. Style umieszcza się w nagłówku strony bezpośrednio pomiędzy znacznikami <style type="text/css"> i </style>.

Dla zmodyfikowania stylu jednego znacznika na stronie stosuje się tzw. style in-line, to znaczy umieszczone wewnątrz danego znacznika. Aby umieścić styl in-line należy dodać do znacznika atrybut style, a jako wartość podać deklarację stylu.

Koniecznie zobacz jak dziedziczone są style w zależności od miejsca ich zdefiniowania.

Przykład

Przykład umieszczenia stylów w odrębnym dokumencie.

Kod w pliku style.css, który musi być umieszczony w tym samym katalogu co plik index.html:

h1 { color: red; }

Kod w pliku index.html:

<html>
    <head>
    <title>Styl umieszczony w odrębnym dokumencie</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        p { color: blue;} 
    </style>
    </head>
    <body>
        <h1>Nagłówek sformatowany w odrębnym pliku</h1>
        <p>Akapit sformatowany w nagłówku strony</p>
        <p style="color: green;">Akapit sformatowany in-line</p>
    </body>
</html>

W przeglądarce internetowej plik index.html wygląda tak, jak na Rys. 1.

Rys. 1. Dokument po umieszczeniu formatowania na trzy różne sposoby.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać style CSS w samouczku: