# Podstawy arkuszy stylów

### Tworzenie stylów w HTML

Istnieją kilka sposobów umieszczania informacji o stylach...

- umieszczenie `<LINK REL=STYLESHEET TYPE="text/css" HREF="sheetaddress" TITLE="Sheetname">` w części nagłówkowej <HEAD>
- użycie tagów <STYLE> w części nagłówkowej :

       <STYLE TYPE="text/css">  <!--
            @import url(sheetaddress) mediatype;
            H1 { color: blue }
       --> </STYLE>
            .........
        <H1>This headline becomes blue</H1>

- użycie `@import url(sheetaddress)` w secji STYLE, aby wykorzystać style określone w zewnętrznych plikach, jak to pokazano wyżej. `mediatype` to opcjonalna, oddzielona przecinkiem lista mediów obsługiwanych przez arkusz.
- użycie atrybutów STYLE w ramach tagów HTML, choć nie jest to zalecane:

          <P STYLE="color: green">paragraph is green.</P>

### Dołączanie stylu z zewnętrznego pliku

Jest kilka sposobów, za pomocą których można określać zewnętrzny styl (urządzenie odbiorcze, czyli np. przeglądarka, musi dawać czytelnikowi strony możliwość wyboru arkusza stylów; w przeciwnym razie nie ma alternatywy, co jest typową sytuacją - przyp. tłum.):

- Preferowany arkusz : Arkusz, który ma być używany przez czytelników, gdyż ty to sugerujesz. Dodaj do sekcji <HEAD> odsyłacz o następującym formacie :
  `<LINK href="`stylesheetname.css`" title="`(your title or description)`" rel="stylesheet" type="text/css2">`
- Alternatywa : Pozwala ona czytelnikowi wybrać arkusz, który najbardziej mu odpowiada. Dodaj do sekcji <HEAD> następujący kod:
  `<LINK href="`stylesheetname.css`" title="`(your title or description)`" rel="alternate stylesheet" type="text/css2">`
- Brak alternatywy : Gdy dostępny jest tylko jeden styl, nie określaj tytułu, czyli title :
  `<LINK href="`stylesheetname.css`" rel="stylesheet" type="text/css">`

### Zależność od docelowego typu mediów

Możesz ustalić oddzielne wartości domyślne dla różnych typów mediów, za pomocą oddzielnych poleceń `<LINK href="`stylesheetname.css`" title="`(your title or description)`" rel="stylesheet" type="text/css2" media="`mediatype`">` dla poszczególnych typów mediów. LINK, który odnosi się do wszystkich innych typów, powinien być umieszczony na końcu, bez atrybutu media=.
Idź na stronę media, gdzie jest lista dostępnych wartości dla typów mediów.

### Ogólna konstrukcja informacji o stylu CSS

Gdy informacja o stylu jest zawarta w tagu <STYLE> lub zewnętrznym pliku, stosuje się następującą konwencję :

      selector1,selector2,...,selectorn
    	{
    	property1: value ;
    	property2: value ;
    	}

Jest to lista elementów HTML, do których będą się odnosić style, po której znajduje się lista informacji o stylach, rozdzielonych średnikami (;) i ujętych w nawiasy klamrowe.
n.p. `H1,H5 { color: blue}`

### Komentarze

Są one oznaczane za pomocą par znaczników `/* ... */`, znanych z języka C.
n.p. `H1 { color: red } /* comments go here */`

### Dziedziczenie informacji o stylach

Jeśli jakiś znacznik nie ma przypisanej żadnej własności, a jest zawarty w ramach innej pary tagów, które mają przypisaną własność, dziedziczy wartość tego znacznika.

      <H1 style="color:green"> text <EM>moretext</EM> end of heading</H1>

Zakładając, że <EM> nie ma przypisanego gdzieś indziej koloru, "moretext" będzie wyświetlone w kolorze zielonym, gdyż znajduje się wewnątrz "zielonych" tagów <H1> </H1>. W ten sposób można przyjąć pewne wartości domyślne, przypisując je nadrzędnemu (najwyższemu w hierarchii) elementowi - BODY.
Pewne wartości mogą być podawane w procentach domyślnej wartości dziedziczonej, n.p. `P { line-height: 120% }`. Należy pamiętać, że elementy, które dziedziczą tę wartość, odziedziczą ją w postaci numerycznej, a nie procentowej.