Struktura i reguły CSS
2009
Podstawowy syntaks
Ruguły
Selektory
Każdy element HTML może być selektorem CSS. Selector jest elementem, który linkuje do konkretnego stylu. Na przykład:
P { text-indent: 3em }
Selektory klas
Selektor może posiadać różne klasy, pozwalając aby ten sam element posiadał różne style, np.: projektant może chcieć aby element CODE miał różne kolory w zależności od języka:
code.html { color: #191970 }
code.css { color: #4b0082 }
Powyższy przykład storzył dwie klasy: css i html dla elementu CODE.
Klasy można również tworzyć nie przypisując do nich żadnego elementu:
.uwaga { font-size: small }
W powyższym przykładzie, klasa uwaga może zostać dodana do każdego elementu.
Najlepiej nazywać klasy wedłuch ich funkcji. Nazwa klasy: uwaga jest o wiele lesza aniżeli nazwa small, która może stracić swoje znaczenie jeśli projektant zdecyduje się na zmiane wielkości ten klasy.
Selektory ID
Selektory ID są stosowane jedynie raz dla danego elementu, dlatego powinny być rzadko używane. Definiuje sie je poprzez “#” , który poprzedza nazwę. Na przykład:
#svp94O { text-indent: 3em }
W dokumencie HTML pojawi sie nastepujący atrybut:
<P ID="svp94O">Text indented 3em</P>
Selektory kontekstualne
Selektory kontekstualne są ciagami selektorów oddzielonych spacją. Seletory te mogą definiować właścowości według zasad kolejności kaskad i są one ważniejsze niż selektory proste. Na przykład:
P EM { background: yellow }
Powyższa reguła mówi, że uwypuklony tekst powinien mieć kolor żółty jedynie w paragrafie. Nie bedzie on miał tego samego stylu w nagłówku.
Deklaracje
Właściwości
Właściwość jest nadawana selektorowi w celu określenia jego stylu, np.: kolor, czcionka, margines.
Wartości
Wartość nadawana jest konkretnej właściwości np.: właściwośc color otrzymuje wartość red.
Grupowanie
W celu uniknięcia niepotrzebnych powtórzeń w arkuszu, można zastosować grupowanie selektorów posiadajacych wspólne deklaracje, np.:
H1, H2, H3, H4, H5, H6
{
color: red;
font-family: sans-serif }
Dziedziczenie
Selektory, które znajdują się wewnątrz innych selektorów dziedziczą wartości właściwości tych selektorów, pod warunkiem, ze nie sprecyzuje się inaczej. Na przykład: kolor zdefiniowany dla elementu BODY pojawi sie również w elemencie P.
Istnieją klasy, których wewnętrzne selektory nie dziedziczą wartości, np.: margin-top. Paragraf nie będzie miał takiego samego marginesu jak BODY. Wynika to z logiki.
Komentarze
Komentarze maja nastepujący format:
/* Komentarze wewnątrz komentarzy są niedozwolone */
Pseudoklasy i pseudoelementy
Pseudoklasy i pseudoelementy są specjalnymi klasami i elementami uznawanymi przez przeglądarki. Pseudoklasy przypisywane są różnym typom elementów, np.: kink aktywny lu odwiedzony są dwoma różnymi typami tego samego elementu A. Pseudoelementy odnoszą sie do jakieś podczęści danego elementu, np.: pierwszej litery paragrafu.
Regułu pseudoklas i pseudoelementów wygladają nastepująco:
selector:pseudo-class { property: value }
lub
selector:pseudo-element { property: value }
Pseudoklasy i pseudoelementy uywane s z normalnymi klasami i elementami:
selector.class:pseudo-class { property: value }
lub
selector.class:pseudo-element { property: value }
Pseudoklas Anchor
Pseudoklasy mona przypisywać elementowi A aby wyświetlał linki odwiedzane i aktywne w inny sposób. Element A posiada pseudoklasy takie jak: link, visited lub active. Link odwiedzony może posiadać inny kolor, czcionkę lub styl czcionki.
Interesującym rozwiązaniem jest prezentowanie linków aktywnych w troszeczkę większym rozmiarze i innym kolorze. Kiedy strona jest odwiedzona ponownie, odwiedzony link może być mniejszy i w innym kolorze. Na przykład:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
Pseudoelement First Line
Często w gazetach pierwsza linia tekstu pojawia się w czcionce pogrubionej lub druku. CSS pozwala na zastosowanie pseudoelementu first-line, który może odnosić się do np.: P, H1, itp. Na przykład:
P:first-line
{
font-variant: small-caps;
font-weight: bold
}
Pseudoelement First Letter
Pseudoelement first-letter stosowany jest jedynie dla pierwszej litery paragrafu lub nagłówka lub innego elementu, np.:
P:first-letter { font-size: 300%; float: left }
wstawi czcionkę trzy razy wiekszą niż normalna dla pierwszej litery paragrafu.
Kolejność kaskad
Kiedy używa się wielu arkuszy stylów dla pojedynczej strony, mogą one walczyć pomiędzy sobą o kontrolę nad danym selektorem. W takich sytuacjach powinny pojawić się reguły określające, które deklaracje selektorów powinny mieć pierwszeństwo. Robi się to w nastepujący sposób:
- ! important
Reguły mogą być precyzowane z określeniem ! important. Arkusz z takim określeniem jest nadrzędny w stosunku do innych. Ponieważ zarówno autor strony jak i jej użytkownik mogą okreslać ważne reguły, reguły autora są zawsze ważniejsze od reguł użytkownika. Przykład zastosowania ! important:
BODY {
background: url(bar.gif) white;
background-repeat: repeat-x
! important
} - Pochodzenie reguł (autor kontra użytkownik)
Zarówno autorzy jak i użytkownicy mogą używać arkuszy stylów. Kiedy istnieje konflik pomiędzy regułami autora i użytkownika, reguły autora są ważniejsze. Autorzy powinni uważać na stosowanie zwrotu ! important ponieważ tego typu reguły będą nadrzędne w stosunku do ważnych reguł użytkownika. Może to spowodować problemy związane z wielkością czcionek, kolorem, itp. Należy pamiętać, że użytkownik może mieć problemy ze wzrokiem i tego typu reguły uniemożliwią mu przeglądanie strony.
- Reguły selektorów
Arkusze mogą również być zmieniane w oparciu o ich precyzję. Bardziej precyzyjne reguły zawsze wygrywają.
- Kolejność
Dla ułatwienia, jesli takie same reguły mają ta samą wagę, ostatnia wygrywa.
Szybkie menu
- Styluj!
- Szybki tutorial
- Struktura i reguły CSS
- Właściwości CSS
- Linkowanie arkuszy z HTML
- Zależność od arkuszy stylów
- Sprawdzanie CSS