Podstawy arkuszy stylów
Tworzenie stylów w HTML
Istnieją kilka sposobów umieszczania informacji o stylach...
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.