Właściwie, zaznajomienie się z tym textem nie jest potrzebne, by móc z pełnym sukcesem przerobić ten kurs. Jednak na pewno nie zaszkodzi.

Programy:

W zupełności starczy zwykły systemowy notatnik - choć polecam [geany lub PitPad 3.2], a także jakakolwiek przeglądarka internetowa interpretująca CSS - choć odradzam Internet Explorera, gdyż jest przestarzała i nie pozwala w pełni wykorzystywać możliwości drzemiących w CSS. Kurs przygotowywany na Operze 8.0 i FF 1.0. Większość efektów - jeśli nie wszystkie - powinny być identyczne na popularniejszych przeglądarkach.

Dlaczego powstał ten kurs:

Stworzyłem ten kurs dlatego, że [prócz nielicznych wyjątków] żaden, który trafił w na mój monitor nie był w stanie w prosty i zrozumiały sposób wyjaśnić o co tak właściwie chodzi. Ten kurs ma za zadanie pokazać ci jak używać CSS - nie jaki on jest (nie będę Ci kazał na pamięć wykuwać się fragmentów kodu). Po skończeniu tego kursu powieneś wiedzieć jak stosować CSS, by niewielkim nakładem sił uzyskiwać ciekawe efekty.

Dla kogo jest ten kurs:

Najogólniej mówiąc dla wszystkich chętnych między 7 a 150 rokiem życia:-), przyjmując, że dopiero w wieku siedmiu lat człowiek posiada zdolność czytania - z jednym zastrzeżeniem - trzeba znać html przynajmniej całkowite podstawy (podstawy podtstaw). Jeśli nie znasz html-a polecam mój kurs tworzenia stron www, który zbiera pochlebne recenzje wśród początkujących webmasterów. Osobiście wątpie, aby ktokolwiek miał choćby najmniejsze problemy ze zrozumieniem którejś z lekcji - wszystkie starałem się pisać w sposób jak najprostszy, tłumaczą prawie każdy znak. (Swoją drogą tak powinien, moim zdaniem, wyglądać kurs dla początkujących). A więc życzę powodzenia!

Co potem:

Po przerobieniu tego kursu radzę nie zaprzestawać na tym. Style CSS są "trochę" obszerniejsze niż treści przedstawione w tym kursie. [w poszerzaniu swojej wiedzy może posłuzyć "Poradnik dla webmasterów K. Stelmacha", umieszczony razem z ta witryną (patrz 'na koniec')] Na dobry początek starczy ta strona. Po przyswojeniu sobie wiedzy zawartej na niej, każdy będzie w stanie szybko i bez większych trudności przygotować ładnie wyglądającą stronę.

O autorze:

Tak więc (dane na 20:26 02-05-2004) jestem uczniem ogólniaka w Złotowie, najdalej wysuniętym powiecie woj. wielkopolskiego. Moją przygodę z tworzeniem stron zacząłem w gimnazjum. Mam już na koncie kilka stron opublikowanych w sieci [zapraszam dział 'Linki']. Stylami zająłem się tak jakoś "przy okazji" tworzenia jednej strony i stwierdziłem, że jest to naprawdę przyjemne. Moim głównym zainteresowaniem jest informatyka. Z całego ogromu działów informatyki najbardziej podoba mi się internet i jego możliwości. Mam nadzieję, że ten kurs przyda się choć kilku osobom. Tych, którzy zdecydują się na przerobienie go proszę o kontakt. Nie chodzi tu o nic wielkiego, chciałbym jedynie się dowiedzieć jak oceniacie kurs, co było opisane dobrze, co źle itp. Dzięki Wam kurs może być jeszcze lepszy. A teraz zapraszam do głównej części i powodzenia!

Na początku był html, i więcej nic nie było:-) Możnaby lekko żartobliwie rzec. Ale to prawda, na poczatku lat '90 powstał HTML. Język, który miał stać się uniwersalnym językiem wszystkich platform. I udało się. Read more

Do czego służą klasy

Klasy stworzone są po to, by móc obiektom tego samego typu w treści jednej strony przypisywać inne właściwości. Dodatkowo dzięki klasom można zaoszczędzić sporo miejsca, gdyż właściwości konkretnego znacznika opisujemy tylko raz, a potem jedynie się do niego odnosimy.

Dzięki dziedziczeniu webmaster może skrócić swoja pracą o nawet kilkadziesiąt procent bez żadnego uszczerbku na wyglądzie strony.
Dziedziczenie polega na przejmowaniu części cech od "starszego" - zupełnie jak u ludzi. Zobacz na przykład:

{codecitation}p {color: blue;} /* 1 */

p.klasa1 {font-size:8 pt;} /* 2 */

p.klasa2 {font-size:14 pt; } /* 3 */

p.klasa3 {color:red; font-size:8 pt;} /* 4 */{/codecitation}

Opis: 

1 - przypisuję akapitowi, który nie ma klasy, jakieś właściwości. Tak więc wszystkie jego cechy przejdą na pozostałe 'p', nawet takie, które posiadają klasę.
2 - tworzę klasę 'klasa1', która będzie mieć kolor niebieski [blue] odziedziczony po starszym od siebie 'p' i własne cechy, przypisane tylko jej.
3 - tworze kolejną klasę, która ma cechy starszej od siebie 'p', ale także własne cechy.
4 - ta klasa nie odziedziczy nic ze starszej, a to dlatego, że opisałem także tę właściwość, którą miałaby odziedziczyć i zmieniłem jej wartość.

I tu właśnie znajduje się miejsce do popisu dla webmasterów, którzy mają bzika na punkcie zmniejszania rozmiarów stron. Otóż jeśli masz kilka klas jednego obiektu np. 'p', to nie musisz w każdym opisywać tej samej cechy, starczy, że opisze ją raz w obiekcie głównym. Wtedy każde dziecko zawierać będzie automatycznie cechy opisane w obiekcie rodzicu.

czyli przykładowo:

{codecitation}<p>Ten txt jest niebieski</p>

<p class="klasa1"> Ten txt jest niebieski (odziedziczony kolor) i ma rozmiar 8pt (z klasy)</p>

<p class="klasa2"> Ten txt jest niebieski (odziedziczony kolor) i ma rozmiar 14pt (z klasy)</p>

<p class="klasa3"> Ten txt jest czerowny (zerwane więzi:-)) i ma rozmiar 8pt (z klasy obydwa)</p>{/codecitation}

Schemat dziedziczenia:

Oczywiście jest to tylko przykładowy, bardzo pobieżny schemat, bo przycież znaczników html jest dużo więcej i ogólnie jest to trochę bardziej złożone, ale sądzę, ze teraz jesteś i tak już skołowany, więc chyba to starczy.

Istnieje kilka podstawowych metod łaczenia CSS z HTML-em. W tej lekcji opiszę po krótce każdy z nich.

W treści strony:

Jest to najdłuższy i najgorszy sposób, ponieważ nie można wtedy tworzyć klas - a więc za każdym razem trzeba od nowa opisywać właściwości kolejnego obiektu, nawet kiedy jest identyczny do poprzedniego.

Przykład:

{codecitation}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Tytuł strony</title></head>
<body>
<p style=" // 1
color: blue; text-decoration: underline;"> // 2
To jest przykładowy text</p> // 3
</body>
<html>
{/codecitation}

Opis:
1 - otwieram tag akapitu 'p' i zaczynam określać stylami CSS wygląd tylko i wyłącznie tego akapitu.
2 - opisuję każdą właściwość po kolei wg schematu: właściwość1:wartość; właściwość2:wartość;
3 - Przykładowy napis, tak to wygląda.

Jak widzisz jest to sposób prosty, aczkolwiek bardzo pracochłonny. Przypuśćmy, że nagle chciałbyś zmienić kolor każdego nagłówka na stronie (tych nagłówków byłoby ze 100) :-( - mnóstwo roboty. Dlatego odradzam używanie tego sposobu jako podstawowej metody umieszczenia stylów.

W nagłównku strony:

Jest to już sposób lepszy od poprzedniego. Pozwala na wielokrotne wykorzytanie fragmentu kodu, ale tylko w obrębie danej strony. Cały opis dla poszczególnych obiektów umieszczamy w sekcji head między znacznikami <style type="text/css"> </style>

Przykład:

{codecitation}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<style type="text/css">
p.klasa1 { właściwość1:wartość; właściwość2:wartość;} // 1
table {właściwość1:wartość; właściwość2: wartość;} // 2
span.gorne {właściwość1:wartość; właściwość2: wartość;} // 3
</style>
</head>
<body>

<p class="klasa1">To jest przykładowy text</p> // 4
<table> // 5 <tr> <td> ... </td> </tr> </table>
<span >To jest fragment textu</span> // 6
</body>
</html>
{/codecitation}

Opis:
* - wg najnowszych standardów W3C tag font jest przestarzały. Należy używać span.
1,2,3 - w sekcji head wstawiam kolejno opis właściwości kolejnych selektorów
4 - wstwiam tag i przypisuję do niego klasę. Przeglądarka wie, że wcześniej taka klasa została opisana i nadaje wszystkie cechy tej klasy danemu selektorowi [obiektowi na stronie]
5 - Zobacz na opis tabeli w sekcji head - nie użyłem klasy. Tak więc każda tabela będzie posiadać cechy przypisane do 'table'.
6 - Tekst, który bedzie miał właściwości klasy 'gorne'

Jak widzisz nazwy klas mogą być inne niż klasa1, klasa2, itp. Wykorzystując ten sposób zaoszczędziłem sporo miejsca. Być może nie jest to tak widoczne w tej chwili, ale gdybym wstawił jeszcze kilka tabel i akapitów, a każdy miałby wyglądać tak samo, to różnica byłaby już baaardzo widoczna.- (zamiast zrobić jedną klasę, musiałbym za każdym razem wpisywać kilka linijek kodu).

W osobnym pliku:

Jest to najlepszy i najpopularniejszy sposób łączenia htm z css. Aby móc skorzystać z tej metody należy w jakiś sposób poinformować przeglądarkę z jakiego pliku ma czytać. Wszystko dzieje się w sekcji head:

Przykład:

{codecitation}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" // 1
href="plikstyli.css" // 2
type="text/css" /> // 3
</head>
<body>
W tym miejscu umieszczasz treść strony. Możesz skorzystać ze wszystkich klas opisanych w pliku 'plikstyli.css'.

</body>
</html>{/codecitation}

Opis:
1 - każę przeglądarce nastawić się na to, że za chwilę będzie wczytywać plik css [stylesheet].
2 - Podaję ściężkę do pliku, w którym są opisane style. Powinien to być plik o rozszerzeniu *.css.
3 - Określamy typ.

W tym miejscu nie muszę pisać chyba żadnego schematu, ponieważ w tym wypadku należy zmienić jedynie ścieżkę do pliku, aby wszystko działało jak trzeba. Główną zaletą tej metody jest to, że dzięki odesłaniu do jednego pliku cały wygląd strony może być opisany w jednym miejscu, tak więc oszczędność miejsca i czasu w ewentualnych zmianach. Z jednego pliku może korzystać nawet kilka witryn, gdyż można wpisać np. 'href="http//www.strona.pl/plik.css"' - a to sprytne!:-)

Mieszanka

Istnieje jeszcze jedna możliwość - pomieszanie wszystkich metod. Przykładowo, chcesz aby wszystkie tabele na twojej witrynie wyglądały identycznie. Jest jednak jedna tabele, którą chcesz jakoś szczególnie oznaczyć. Możesz wtedy wczytać plik '*.css' w sekcji head, przypisać tabeli odpowiednią klasę, a dodatkowo w tej wyjątkowej tabeli opisać style.

Przykład:

{codecitation}<table class="tabele" style="właściwość1:wartość; właściwość2:wartość;...właściwośćn:wartość;">
<tr>
<td> ... </td>
</tr>
</table>{/codecitation}

Opis:
Zasada jest bardzo prosta -im "bliżej" znacznika tym bardziej znaczący opis. Czyli najważniejszy jest opis w style=" ", trochę mniej ważny jest opis w sekcji head, a najmniej znaczący w osobnym pliku. Oczywiście chodzi jedynie o sytuacje, kiedy właściwości jakiegoś selektora opisane są w więcej niż w jednym miejscu.

Tym sposobem skończyła się część teoretyczna tego kursu - przechodzimy do praktyki! Jak na razie nie próbuj niczego ćwiczyć - po następnej lekcji będzie to wskazane, ale nie teraz, gdyż jeszcze nie znasz żadnych właściwości:-) opisywanych przez CSS, ale już spokojnie, ten stan nie utrzyma się długo:-). Zapraszam dalej!

Od tej lekcji zaczyna się praktyczna część kursu. Jest to kurs dość nietypowy, gdyż będziesz przy mojej pomocy tworzyć własną stronę! Co lekcję poznasz nowe możliwości, które potem w przy większej lub mniejszej mojej pomocy wstawisz na stronę. Tak więc zacznijmy!

Najpierw zbudujmy stronę w html-u.
Strona ta bedzie mieć trzy tabele, jedna pod drugą. I tu nowość. W html-u zrobiłoby się jedną głowną tabelę i w niej umieszczało kolejne - po co? Dzięki stylom wszystko bedzie zgrabniejsze i prostsze.

Budowanie strony:

{codecitation} <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <title>Tytuł strony</title>

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

</head>

<body>

    <table width="780" cellpadding="0" cellspacing="0"> // 2

        <tr>

            <td> </td> // 3

        </tr>

    </table>

     <table width="780" cellpadding="0" cellspacing="0">

         <tr>

            <td> </td> // 4

            <td> </td> // 5

        </tr>

    </table>

     <table width="780" cellpadding="0" cellspacing="0">

        <tr>

            <td> </td> // 6

        </tr>

    </table>

</body>

</html>{/codecitation}

Opis:

1 - wczytuję plik z opisanymi stylami.

2 - przy budowie tabeli nadal będę używał html-a, a to dlatego, że rzadko na stronie zdarza się, by kilka table miało taki sam wygląd. Oczywiści można zrezygnować z html-a również w tym wypadku, ale o tym jak w następnej lekcji. Osobiści w tym miejscu byłbym jeszcze za zostawieniem starego poczciwego html-a.3 - to miejsce jest przeznaczone na tytuł strony, lub banner

4 - menu

5 - treść strony

6 - stopka strony, czyli miejsce, w którym umieszcza się kontakt z autorem, datę powstania strony itp.

Być może dziwisz się, że w kursie CSS wita cię html - nie przejmuj się zaraz będzie i css. Stworzyliśmy już stronę główną. Napisz taki kod w notatniku i zapisz w jakimś oddzielnym folderze jako 'index.htm'. Teraz zajmiemy się budową pliku 'style.css'.

Budowanie pliku 'style.css':

{codecitation}/* najpierw otwórz zwykły systemowy notatnik następnie wpisz co następuje ukośniki i liczby opuść - służą jedynie dla opisu */

body { /* 1*/

    background-color: #CBD1D3; /* 2 */

    text-align: center; /* 3 */

} /* 4*/

table {

    margin-left: auto; /* 5*/

    margin-right: auto; /* 6*/

}

/* zapisz jako 'style.css' w tym samym folderze, w którym zapisałeś 'index.htm' */{/codecitation}

Opis:

1 - piszę co chcę deklarować (mogą by to być także 'table' lub 'p'), chcę opisywać wygląd ciała strony. Jak zauważyłeś po 'BODY' wstawiłem klamrę '{', klamrę '}' wstawiłem także na końcu. Oznacza to początek i koniec opisywania stylów dla danego selektora. Kolor strony można opisywać angielskimi nazwami [white, red, blue] lub kodem szesnastkowym [jak w przykładzie].

2 - określam kolor tłą strony. Można oczywiście za pomocą stylów wstawić także grafikę (patrz niżej). Na końcu każdej właściwości należy postawić średnik ';'. Wyjątek - ostatnia właściwość - osobiście i tak polecam wstawianie tam średnika (to nic nie zmienia, ale czasem ułatwia życie).

3 - określam, że text ma być na środku, a w rzeczywistości wszystko co umieszcze na stronie będzie wyśrodkowane [możliwości: left, right, center]. Taki sposób działa jednak tylko w MSIE6.0. Dla nowszych przeglądarek należy stosować 5,6.

4 - i zamykam obszar określania styli ciała 'BODY'.Tym sposobem twoja strona powinna być koloru siwo-niebieskiego. Na razie nic nie będzie widać. Ale to się zmieni na następnych lekcjach. 5,6 - ustawiam prawy i lewy margines strony na 'auto' - dzięki temu w Operze i FF tabele będą wyśrodkowane [pamiętaj o dziedziczeniu].

Inne wartości background:

- background-image: url(tlo.gif); // wstawienie obrazka jako tło
- background-attachment: scroll; // grafa w tle ma się przesuwać razem z treścią strony. [możliwości: -scroll, fixed (zawieszone-nie przesuwa się)]
- background-repeat: no-repeat; // powtarzanie tła [możliwości: repeat, repeat-x, repeat-y, no-repeat (-powtarzaj, powt. poziomo, powt. pionowo, nie powtarzaj]].
- background-repeat: no-repeat; // powtarzanie tła [możliwości: repeat, repeat-x, repeat-y, no-repeat (powtarzaj, powt. poziomo, powt. pionowo, nie powtarzaj]].
background-position: X Y; // początkowe ustawienie tła. Odległość od lewej [x] i od góry [y]. Jednostki: px, em, cm, in, %.

Więcej na ten temat możesz znaleźć w 'Poradniku dla webmasterów Krzysztofa Sztelmacha' - dział 2.2 Kolor i tło.

Na tym skończymy tą lekcję - jak widzisz sporo pisania, ale nic trudnego. Jeśli czegoś nie zrozumiałeś to wróć i jeszcze raz spokojnie przeczytaj, wtedy ruszaj dalej. Pamiętaj aby tworzyć podczas kursu stronę, bo naprawdę dzięki temu dużo szybciej się nauczysz - zawsze na przykładach łatwiej się uczyć.

Pamiętam, że kiedy po raz pierwszy ujżałem kolorowy pasek przewijania byłem w szoku, myślałem - "jak on to zrobił?" Dzisiaj dziwię się jeśli na stronie pasek ma standardowe kolory... Dlatego właśnie umieściłem całą jedną lekcję o zmianie koloru paska przewijania - choć nie jest to nic trudnego.

Wszelkie zmiany w zabarwieniu scrollbara umieszczamy w opisie sekcji body. Czyli może to być definicja body [<body style="i określamy;">] lub też w osobnym pliku, co ja właśnie tu zastosuję.

Zmiany w pliku 'style.css':

/* otwórz plik 'style.css' który utworzyłeś na poprzedniej lekcji */
BODY {
background-color: #CBD1D3;
text-align: center;
/* to wszystko powinno już tam być */

/* a teraz opis scrollbara */
scrollbar-3dlight-color:silver; // 1
scrollbar-arrow-color:black; // 2
scrollbar-base-color:white; // 3
scrollbar-dark-shadow-color:black; // 4
scrollbar-face-color:white; // 5
scrollbar-highlight-color:silver; // 6
scrollbar-shadow-color:silver // 7
}


TABLE {
 margin-left: auto;
 margin-right: auto; }

Opis:
* - jeśli nie za bardzo zrozumiesz opisu, to sprobuj na osobnej stronie pozmieniać kolory, wtedy sam zobaczysz co konkretny fragment zmienia. Pamiętaj o usunięciu komentarzy [napisów za '//' i między '/* ...*/'].
1 - Kolor efektu 3d.
2 - Kolor strzałki.
3 - Kolor toru przesuwaka.
4 - Kolor prawego i dolnego skraju.
5 - Kolor całego scrolla.
6 - Kolor lewego i górnego skraju.
7 - Kolor cienia.

Schemat:

scrollbar-właściwość-color: kolor;

Podobnie jak w poprzednim przypadku na stronie nie zmieniło się zbyt wiele - jedynie kolor paska przesuwania, który w tej chwili i tak jest raczej mało widoczny. A w treści strony nie było żadnej zmiany. Ale spokojnie za parę lekcji zobaczysz już pierwsze rezultaty swojej pracy. Jeśli pracujesz na Operze lub FF to nie zobaczysz, gdyż te przeglądarki nie kolorują suwaka.

Prawdopodobnie jak zaczniesz szukać to znajdziesz jeszcze inne właściwości suwaków, ale to są podstawowe, które w zupełności starczają na pełne określenie scrollbara.

Nanastępnej lekcji nauczysz się zmieniać wygląd kursora, więc także niewiele się zmieni w wyglądzie strony. Za to już w kolejnych lekcjach twoja strona będzie, wręcz rewolucyjnie, ulegac zmianom.

Uwaga!!! Niektóre przeglądarki [np. Firefox, Opera] nie pozwalają na zmianę koloru paska przewijania. Jest to niezgodne ze standardami W3C. Choć np. najnowsze Safari pozwala na jeszcze większą ingerencję w wygląd tego elementu przeglądarki.

Kursor jak wygląda - każdy widzi:-). A na tej lekcji nauczysz się zmieniąć jego wygląd!

Zmiany w pliku 'style.css':

{codecitation}/* otwórz plik 'style.css' który tworzyłeś na poprzednich lekcjach */

body {

    background-color: #CBD1D3;

    text-align: center;

    scrollbar-3dlight-color:silver;

    scrollbar-arrow-color:black;

    scrollbar-base-color:white;

    scrollbar-dark-shadow-color:black;

    scrollbar-face-color:white;

    scrollbar-highlight-color:silver;

    scrollbar-shadow-color:silver;

    /* to wszystko powinno już tam być */
    /* a teraz coś mowego */
    cursor: crosshair; /* 1 */
}

table {

    margin-left: auto;

    margin-right: auto;

}{/codecitation}

Opis:

1 - Tym sposobem zmieniłem kształt kursora na krzyżyk [najedź tu].

Jak zawsze nie jest to jedyna możliwośc jaką daję CSS.

Inne możliwości:

- crosshair [efekt]
- hand [efekt - tylko MSIE]
- move [efekt]
- e-resize [efekt]
- ne-resize [efekt]
- nw-resize [efekt]
- n-resize [efekt]
- se-resize [efekt]
- sw-resize [efekt]
- w-resize [efekt]
- text [efekt]
- wait [efekt]
- help [efekt]
- default [efekt]

Jak można łatwo zauważyć wyborów jest sporo. Jednak zalecam szczególną rozwagę w stosowaniu tych określeń. Bo czy widziałeś kiedyś stronę, na której kursor byłby zmieniony? Radzę stosować to w wyjątkowych sytuacjach. Na tej lekcji chciałem Ci pokazać, że tak można, jednak w dalszej częściu kursu zrezygnuję z tej linijki. Oczywiście jeśli chcesz, możesz zostawić sobie ten fragment:-)

Jak już mogłeś spostrzec na poprzednich lekcjach do opisywania tabeli nadal używałem html-a. Dlaczego? Dlatego, że rzadko zdarza się, by na stronie trafiły się 2 takie same tabele. Poza tym opisywanie tamtych właściwości nie jest krótsze w CSS niż w HTML. Po trzecie, z przyzwyczajenia. Procent udziału CSS w opisie wyglądzu strony będzie różny dla różnych witryn. Na tej lekcji nauczysz się jak opisywać tabele, bo mimo wszystko czasem będziesz tego używał, nawet na tym kursie.

Zmiany w pliku 'style.css':

{codecitation}/* otwórz plik 'style.css' który tworzyłeś na poprzednich lekcjach */

body {

    background-color: #CBD1D3;

    text-align: center;

    scrollbar-3dlight-color:silver;

    scrollbar-arrow-color:black;

    scrollbar-base-color:white;

    scrollbar-dark-shadow-color:black;

    scrollbar-face-color:white;

    scrollbar-highlight-color:silver;

    scrollbar-shadow-color:silver;

}

/* to wszystko powinno już tam być */

td { /* 1 */

    vertical-align: top; /* 2 */

}

td.menu {

    border-left:1px solid white; /* 3 */

    width:160px; /* 4 */

    background-color: #AFB4C0; /* 5 */

}

td.txt {

    border-left:1px solid white; /* 3 */

    border-top:1px solid white;/* 3 */

    border-bottom:1px solid white; /* 3 */

}

td.gorne {

    padding: 25px 0 25px 0; /* 6 */

    border-top: 1px solid white; /* 3 */

    border-right:1px solid black; /* 3 */

    border-left:1px solid white; /* 3 */

    background-color: #AFB4C0;/* 3 */

}{/codecitation}

Opis:

1 - Zaczyna deklarować komórkę. Każda komórka będzie mieć jej właściwości (o ile w klasie nie będzie to zmienione - potęga dziedziczenia!).

2 - Pionowe wypozycjonowanie ustalam na 'top' [góra], czyli cała treść każdej komórki będzie podsuwana do samej góry (komórki).

3 - Określam właściwości obramowania komórki. Każdą stronę opisuję osobno [strony: left(lewa), right(prawa), top(góra), bottom(dół)] wg schematu: border-strona: Qpx typ kolor , gdzie 'Q' - liczba pixeli; typ - jedno z możliwych rozwiązań [patrz niżej]; kolor - kolor ramki, nazwa może być po angielsku [red, blue itp.], kodem heksadecymalnym [np. #AFB4C0] lub kodem RGB.

4 - Określam szerokość komórki w pixelach. Można także określić wysokość - height: Q , gdzie 'Q' to liczba pixeli lub procent. Zawsze należy podać jednostkę, tylko wartość 0 jej nie wymaga.

5 - Kolor tła, sposób określania identyczny jak w przypadku określania tła całej strony.

6 - Padding, czyli odległość wypełnienia komórki od obramowania. Okraślane kolejno strony wg schematu: padding: góra prawa dół lewa określane w pixelach.

Jednostki [wartości przykładowe]:

- procent, zapis: 100%,
- punkt, zapis: 5pt,
- inch(cal), zapis: 2in,
- centymetr, zapis: 3cm,
- względem, zapis: 0.3em [to kropka, nie przecinek],
- piksel, zapis: 4px

Typy obramowań:

- żadne, zapis: border: 1px none white,
- kropkowane, zapis: border: 1px dotted white,
- kreskowane, zapis: border: 1px dashed white;,
- normalnie, zapis: border: 1px solid white,
- podwójna ciągła, zapis: border: 1px double white,
- cieniowane, zapis: border: 1px groove white,
- odwrotnie cieniowane, zapis: border: 1px ridge white,
- cieniowane, zapis: border: 1px inset white,
- odwr. cieniowane, zapis: border: 1px outset white

Masz już w tej chwili gotowe style dla prawie wszystkich tabel. Teraz czas dodać kilka słów do pliku 'index.htm'.

Aby wszystko działało jak trzeba to musisz:
- wpisać do pierwszej od góry komórki <td >
- wpisać do pierwszej komórki drugiej tabeli <td class="menu">
- wpisać do drugiej komórki drugiej tabeli <td class="txt">

Text zabarwiony należy dopisać. Text czarny powinien już tam być.

Na razie nic nie wpisuj do ostatniej tabeli. Zapisz wszystko i obejrzyj efekt. Jeśli nic nie będzie widoczne, to powpisuj do poszczególnych komórek jakiekolwiek napisy, np. 'Hello world!'. Lub nazywam się Bond:-)

W zwykłym html-u można stworzyć całkiem ciekawe listy, ale nigdy nie będą one tak różnorodne jak te, stworzone przy pomocy css.

Może najpierw pokaże jakąś listę, bo nie każdy wie co to jest:

Można także sprawić by były numerowane i by przy kolejnych pozycjach były inne "znaczki". No, ale skoro świat idzie do przodu, wymyślono CSS to czemu z niego nie skorzystać, szczególnie, że dzięki niemu można uzyskać dużo lepsze efekty, a dodatkowo wszelkie zmiany w wyglądzie 100 stron dokonywane są przez zmianę w jednym pliku. Więc zacznijmy.

Skopiuj plik 'index.htm' i nadaj kopi nazwę 'listy.htm'. Od tego momentu wszelkie zmiany na stronie index.htm (w 99%) będziesz musiał także przeprowadzić na innych stronach - poradzisz sobie! (choćby dlatego, że musisz:-)) )

Budowanie strony 'listy.htm':

{codecitation}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>Tytuł strony</title>

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

    </head>

<body>

    <table width="780" cellpadding="0" cellspacing="0">

        <tr>

            <td > </td>

        </tr>

    </table>

    <table width="780" cellpadding="0" cellspacing="0">

        <tr>

            <td class="menu"> </td>

            <td class="txt">

                <ul // 1

                    style="list-style-image: // 2

                    url('lista.gif');"> // 3

                    <li>Pierwsza pozycja</li> // 4

                    <li>Druga pozycja</li> // 4

                </ul>

            </td>

        </tr>

    </table>

     <table width="780" cellpadding="0" cellspacing="0">

        <tr>>

            <td> </td>

        </tr>

    </table>

</body>

</html>{/codecitation}

Opis:
* - spokojnie, specjalnie zrobiłem takie małe napisy w górnej i dolnej części strony, ponieważ są mało istotne. Najważniejsza treść jest bordowo-brązowa.
1 - 'ul' oznacza lista punktowana (taka jak w przykładzie na górze strony). Inną możliwością jest 'ol' wtedy lista będzie numerowana.
2 - określam wygląd dla tej konretnej listy. I tak kolejno mówię przeglądarce co chciałbym zmienić list-style-image: url('lista.gif'); co możnaby przetłumaczyć na dla_listy[list]-wygląd[style]-obrazek[image].
3 - zostanie wczytany plik 'lista.gif', zamiast tych zwykłych czarnych punktów. Nazwa pliku może być dowolna, odradzam jednak stosowania polskich liter i spacji. Mogłeś już spostrzeć, że zawsze kiedy jest możliwość wczytania pliku graficznego schemat jest ten sam obiekt-image: url('ścieżka/plik.gif'); Podobna sytuacja była już wcześniej z tłem [ background-image: url(plik.gif);].
4 - znacznik <li> oznacza początek pierwszej pozycji.

Jak zawsze CSS daje jeszcze kilka możliwości. Opiszę tu jedną z najczęściej używanych. Otóż jest to dodawanie jako punktów jakichś symboli, które są ładowane na poziomie przeglądarki [kwadraty na górze strony]. Mogą to być:

• style="list-style-type: disc;"
• style="list-style-type: circle;"
• style="list-style-type: square;"
• style="list-style-type: decimal;"
• style="list-style-type: lower-roman;"
• style="list-style-type: upper-roman;"
• style="list-style-type: lower-alpha;"
• style="list-style-type: upper-alpha;"
• style="list-style-type: none;"

W przypadku list można jak najbardziej robić także klasy. Tu ich nie używałem ponieważ w ten sposób było mi łatwiej i krócej przeprowadzić tę lekcję.

A teraz zadanie bojowe dla Ciebie: zrób klasę, w której będą opisane właściwości listy. Popróbuj także nadać jej inne właściwości - tło, obramowanie itp (prawie wszystko czego do tej pory nauczyłeś się w tym kursie będzie działać!). Stworzoną wcześniej stronę zachowaj. Próby możesz przeprowadzać w niej. Niech na tej stronie w komórce określonej klasą 'txt' znajdzie się kilka przykładów. Ich treść i liczba zależy jedynie od Ciebie!