CSS - Kaskadowe arkusze stylów

Wprowadzenie

Html - odpowiedzialny za strukturę strony
Css - odpowiedzialny za wygląd i rozmieszczenie elementów na stronie

Prezentacja możliwości CSS: http://www.csszengarden.com/

Ogólne polecenie stylu ma postać

selektor { cecha1: wartość1; cecha2: wartość2 }

Selektor określa do jakich elementów strony zostanie zastosowany styl.
W nawiasach klamrowych są umieszczone pary nazwa cechy i wartość cechy.
Przykład:
p {
    font-family: Arial, Helvetica;
    font-size: 10pt; 
    font-weight:normal;
    text-indent: 3 em; 
}

Umieszczanie CSS na stronie

Istnieje kilka możliwości umieszczania plików CSS na stronie. Tutaj bedzie podany jeden:
Wszystkie style umieszczamy w osobnym pliku z rozszeżeniem css, np:
arkusze.css
W nagłówku(w środku <head></head>) strony umieszczamy linijkę:

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

czyli zgodnie z przykładem:
<link rel="stylesheet" href="arkusze.css" type="text/css">

Selektory

Wybiera wszystkie elementy:

* {color:red; font-weight:bold; }

Wybiera wszystkie paragrafy:
p {font-family: Helvetica, sans-serif; font-size: 14pt; font-weight: bold; color: lime; }

Wybiera wszystkie elementy posiadające atrybut class="BardzoWazne"
.BardzoWazne {font-family: Helvetica, sans-serif; font-size: 14pt; font-weight: bold; color: lime; }

Wybiera wszystkie paragrafy posiadające atrybut class="BardzoWazne"
p.BardzoWazne {font-family: Helvetica, sans-serif; font-size: 14pt; font-weight: bold; color: lime; }

Stosuje styl do nagłówków 1, 2 i 3 poziomu:
h1, h2, h3 {font-family:Helvetica; color:blue; }

Stosuje styl do wszystkich elementów wyliczenia nieuporządkowanego zagnieżdzonego w innym wyliczeniu tego typu:
ul ul li {color:green; }

Dziedziczenie

Dziedziczenie polega na tym, że elementy zagnieżdżone w danym elemencie dziedziczą jego formatowanie

p { color: lime; }
.BardzoWazne{ color: red;}
.MniejWazne{ }
<p> To jest test o kolorze lime <span class="BardzoWazne">a to tekst czerwony</span>i znowu lime</p>
<p> To jest test o kolorze lime <span class="MniejWazne">ciagle lime</span>i znowu lime</p>

Tag <span>

Stosowany wtedy gdy chcemy tylko określić klasę danego fragmentu strony.

np

<p> Normalny tekst<span class="innytekst"> inaczej sformatowany tekst</span> </p>

Najważniejsze własności

Lista najpopularniejszych własności css służących do formatowania jest tutaj.

Zadanie 05

polecenie: sformatować tekst, tabeleki i wykazy na swojej stronie zastępując dotychczas istniejące formatowanie(jeśli takie bylo) stosując przynajmniej raz następujące typy selectorów:
* wybranie elementu, np. p
* wybranie klasy, np .wazne
* wybranie elementu o danej klasie, np. p.wazne
* wybranie elementu zagnieżdzonego w innym, np. ul li

! wszystkie pliki należy umieścić na swoim koncie ftp

deadline: 29.03.2008
punkty: 3

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy