Wikibooks

CSS/Umieszczanie stylów w dokumencie

< CSS

Arkusz stylów CSS może być osadzony na trzy sposoby: jako arkusz zewnętrzny, zagnieżdżony oraz 'inline'. Najlepszą metodą z punktu widzenia przejrzystości kodu jest podpięcia arkusza zewnętrznego, pozostałe sposoby są najbardziej przydatne na etapie projektowania strony.

Metoda 'inline' edytuj

Polega na bezpośrednim przypisaniu stylu do elementu (X)HTML poprzez atrybut style 

<p style="color:blue;">Akapit na niebiesko</p>

Metoda raczej niezalecana, gdyż powoduje wymieszanie w kodzie strony treści i wyglądu w sposób niewiele różniący się od starych metod. Należy stosować wyłącznie wtedy, gdy poniższe sposoby okażą się niewystarczające bądź niedostępne.

Arkusz zagnieżdżony edytuj

Jest to arkusz umieszczony wewnątrz znacznika style w części nagłówkowej strony (wewnątrz znacznika <head>). 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
  <head>
   <title>Przykład działania CSS</title>
   <style type="text/css">                 <!-- początek stylu zagnieżdżonego... -->
    p {
     font-weight:bold;
    }
   </style>                                <!-- ...a tu jego koniec -->
  </head>
  <body>
   <p>Paragraf pogrubiony przez arkusz zagnieżdżony.</p>
  </body>
 </html>

Arkusz ten definiuje style dla elementów w całym dokumencie.

Arkusz zewnętrzny edytuj

Najbardziej zalecany. Polega na umieszczeniu definicji stylów w oddzielnym pliku o rozszerzeniu .css, a w dokumencie go używającym umieszczeniu instrukcji importującej w części nagłówkowej strony.

W HTML arkusz zewnętrzny jest dołączany przez element <link>. Posiada on trzy atrybuty: rel informuje przeglądarkę o rodzaju linkowanego zasobu, type wskazuje rodzaj arkusza stylu. Atrybut href zawiera adres URL arkusza. 

<head>
  <title>Przykład działania CSS</title>
  <link rel="stylesheet" type="text/css" href="styl.css" />
</head>

Innym, nowszym sposobem jest skorzystanie z dyrektywy @import w zagnieżdżonym arkuszu: 

<style type="text/css">
 	@import url('styl.css');
 	/* pozostałe atrybuty */
</style>

Zaletą takiego rozwiązania jest kompletne oddzielenie kodu zawartości od wyglądu. Ponadto przypisanie jednego arkusza do wielu dokumentów oznacza łatwiejszą kontrolę nad wyglądem całości serwisu. Wystarczy zmodyfikować jeden plik .css a znajdzie to odbicie we wszystkich dokumentach w których jest dołączony.

Kaskadowość edytuj

Ze sposobem umieszczania stylów wiąże się pojęcie kaskadowości. Definiuje ona hierarchię źródeł stylów.

Kaskadowość określa, iż w pierwszej kolejności brane są pod uwagę style pochodzące z arkusza zewnętrznego. Te z kolei mogą zostać nadpisane przez style zdefiniowane w arkuszu zagnieżdżonym. Style zdefiniowane 'inline' znajdują się na końcu tego "łańcuszka" jako znajdujące się najbliżej opisywanego elementu strony.

Źródło: „https://pl.wikibooks.org/w/index.php?title=CSS/Umieszczanie_stylów_w_dokumencie&oldid=417555”