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':
/* otwórz plik 'style.css' który tworzyłeP 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:160; // 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
|
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:-)
|
