Kaskadowe arkusze stylów

• Styl − układ poleceń formatujących (dot. czcionki, koloru, formatowania akapitów, tabel, tła, ...) obowiązujący dla

a)   pojedynczego wystąpienia znacznika html  (tzw. styl wbudowany)
b)  wszystkich wystąpień znacznika na danej stronie www  (styl osadzony)
c)  wszystkich wystąpień znacznika w obrębie całej witryny  (styl zewnętrzny)
 

• Styl wbudowany  umieszcza się bezpośrednio w opisie znacznika

<a style="font-family: Comic Sans MS; color: #808000;
font-style: italic; font-weight: bold" href="file3.htm"> Klinknij tu! </a>
 

Klinknij tu!
 

• Styl osadzony  znajduje się w nagłówku strony, określa sposób formatowania wybranych elementów (znaczników) html
  
  <style>
  <!--
  a  { font-family: Comic Sans MS; color: #808000; font-style: italic;
       font-weight: bold }
  ol { list-style-type: upper-alpha; font-weight: bold; margin-top: 6;
       margin-bottom: 9 }
  p  { font-family: Tahoma; font-size: 14pt; text-align: left }
  -->
  </style>
  
   
• Styl zewnętrzny  znajduje się w osobnym pliku z rozszerzeniem "css" (cascade style sheet) i składa się ze specyfikacji dla poszczególnych konstrukcji html jak wyżej. Aktywacja stylu zewnętrznego odbywa się poprzez instrukcję jego podłączenia umieszczaną w nagłówku strony:

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

• Mechanizm kaskadowy  polega na hierarchicznym uporządkowaniu stylów:

ustawienia standardowe → styl zewnętrzny → styl osadzony → styl wbudowany.

Kolejne style w tej hierarchii "przysłaniają" specyfikacje zadane w stylach poprzednich, cechy stylu, które nie są określone w sposób jawny są dziedziczone z poziomu wyższego.

 

Przykłady użycia

 

• Przykład 1 (styl wbudowany + ustawienia standardowe)

• Przykład II (styl osadzony i wbudowany + ustawienia standardowe)