Określanie właściwości strony

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-15

szukaj: background tło kurs css

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 będzie mieć trzy tabele, jedna pod drugą. I tu nowość. W html-u zrobiłoby się jedną główna tabelę i w niej umieszczało kolejne - po co? Dzięki stylom wszystko będzie zgrabniejsze i prostsze.

<!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>

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':

/* 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' */

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ła 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 umieszczę 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-position: X Y; // początkowe ustawienie tła. Odległość od lewej [x] i od góry [y]. Jednostki: px, em, cm, in, %.

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ć.

Patryk 'yarpo' Jar

szukaj: background tło tło kurs css

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!