CSS Kurs - Kurs CSS dla początkujących! css,style,kaskadowe,beginner,cascading style sheets,kurs,polski,stylesheet



Polecam: drukarnia
Przejrzyj sobie: Fajną stronę dobrej firmy poligraficznej drukarnia Wrocław.




Prosty program do faktur


Pełny szablon HTML i przykładowy CSS

Zacznijmy od przygotowania dwóch kawałków kodu HTML razem i połączny je z przykładowym CSS: Sample HTML + CSS. Możesz znaleść poniżej cały kod, którzy tworzy stronę. Jeśli chcesz możesz skopiować poniższy kod i z nim nieco poeksperymentować.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//PL">
<html lang="pl">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
   <title>Twój tytuł strony</title>
   <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div id="header">
   <h1>Nazwa tej strony</h1>
</div>
<div id="navigation">
   <h2>Nawigacja</h2>
   <ul>
      <li><a href="pierwszy.html">Pierwszy</a></li>
      <li><a href="drugi.html">Drugi</a></li>
      <li><a href="trzeci.html">Trzeci</a></li>
   </ul>
</div>
<div id="content">
   <h2>Zawartość</h2>
   <p>Dodaj tutaj jakąś treść przykładową</p>
</div>
<div id="footer">
   <p>Ta strona została napsana przez [Twoja nazwa] i opara została na
   <a href="http://friendlybit.com">szablonie Friendlybit.com</a>.</p>
</div>

</body>
</html>
Powinieneś już wiedzieć co każda część kodu teraz robi. Zamiast analizować zatem kod HTML przyjrzyjmy się przykładowemu plikowi CSS dla struktury, którą mamy powyżej. Jeśli chciałbyś poeksperymentować z tym kodem CSS, skopiuj zawartość kodu do pliku style.css (albo dojakiegokolwiek innego pliku, który potem wskażesz tagiem w kodzie HTML) w wstaw go w tym samym folderze, w którym znajduje się zawartość HTML.
body {
        background-color: Green;
}
div {
        border: 3px solid Black;
        padding: 7px;
        width: 600px;
}
h1, h2, h3, h4, h5, h6 {
        margin: 0;
}

#navigation {
        float: left;
        width: 150px;
}
#content {
        float: left;
        width: 430px;
}
#footer {
        clear: both;
}
Przejrzyjmy te sześć linijek powyższych. W pierwszej ustawiamy kolor tła (body), które stanowi tło dla całości, zatem będzie miało to takie same konsekwencje jak używanie znacznika bgcolor w dokumencie HTML. Następnie ustanowimy nieco stylów dla wszystkich divów na stronie. Mamy trzy z nich i w tej jednej linijce, które będą na nie mieć wpływ. Najpierw ustawiamy obramowanie, które będzie miało 3 piksele grubości i będzie koloru czarnego. (zwróć uwagę, że jest przestrzeń pomiędzy określeniem grubości i zdefiniowaniem koloru w CSS). Później ustawiamy tak zwany padding (przestrzeń pomiędzy obramowaniem a zawartością, treścią) aby miało 7 pikseli a na końcu ustawiamy szerokość wszystkich divów na 600 pikseli (zwróć uwagę, że marginesy, obramowania i padding nie są zawarte w szerokości). Trzecia linijka wybiera wszystkie nagłówki na stronie i usuwa marginesy (przestrzeń pomiędzy obramowaniem i jakimikolwiek innymi elementami) z nich. Przecinki są użyte pomiędzy elementami aby zastosować ten sam CSS dla ich wszystkich. Następnie mamy niektóre specyficzne linijki zawierające style dla trzech wyróżnionych divów. Wskazujemy navigation (nawigację) na lewo zawartości. Możemy tego dokonać wstawiając float (dosłowne tłumaczenie brzmi: unosić się, pływać), metoda ta pozwala na umieszczenie słowa pomiędzy stronami – brzegami strony www. Jeśli użyłeś atrybut align dla obrazków w kodzie HTML będziesz wiedział jak zadziała float, który przesunie element graficzny możliwie najdalej w lewo, a zaraz po tym pozwoli kolejnemu elementowi podążać za nim. Jeśli chcesz wstawić coś poniżej float musisz najpierw wyczyścić go. Czyszczenie polega na tym, że przesuwa element niżej dopóty, dopóki nie znajdzie się poniżej float, dokładnie gdzie chcemy mieć stopkę. Zatem zarówno nawigacja jak i zawartość strony jest unosząca się w lewo i posiada szerokość 600 pikseli, natomiast szeroki header i stopka nie posiadają stylu float. [Aktualizacja: dodałem kilka prostych layout'ów-szablonów stron dla Was do przeglądnięcia. Mam nadzieję, że pomogą Wam one się nieco nauczyć.] Teraz Twoja kolej, będziesz się uczyć pisać CSS używając wiedzy i layout'ów, które masz powyżej i będziesz mógł spojrzeć jak to wszystko wygląda. Zatem bierz się do pracy. Zawsze możesz wpaść także na kanał #CSS na serwerze EFNet i porozmawiać z ludźmi na ten temat, chętnie Ci także pomogą (od tłum. rozmowa prowadzona jest jednak tylko w języku angielskim). Dziękuję za przeczytanie tego kursu i powodzenia w nauce! Masz jakieś sugestie jak ulepszyć ten kurs? Napisz do mnie.

Wróć do strony nr 1 | nr 2 | nr 3 | Obecnie jesteś na stronie nr 4 |

Tłumaczenie kursu wykonane zostało przez vj_, oryginał pochodzi ze strony: Friendlybit.com i zostało oficjalnie potwierdzone przez autora kursu. Prawa autorskie do tłumaczenia zastrzeżone, możesz jednak swobodnie rozpowszechniać ten kurs podając link do strony z autora tłumaczenia, oraz linka do strony autora oryginału.



Copyright vj zone 2006