: Home / HTML / CSS / kurs HTML / Formatowanie wyglądu strony

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-html/21-formatowanie-wygladu-strony.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Formatowanie wyglądu strony
Ocena użytkowników: / 0
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 02:41

Póki co tworzyliśmy samą strukturę strony, celowo odsuwając wygląd na dalszy plan. W kilku kolejnych lekcjach będziemy próbować to nadrobić. Jako, że to jest kurs HTMl, a nie CSS, nie będziemy się zbytnio rozwodzić - poznasz jedynie podstawy. W załóżeniu jednak powinny one ci pomóc w dogłębnym poznaniu stylów CSS.

Dodajmy trochę blasku do naszej strony. Na początek dodamy gradientowe tło. Niestety pópki co CSS (wersja 2.1) nie przewiduje automatycznego tworzenia gradientów. Jednak pozwala umieszczać grafikę w tle.
Umieścimy i będziemy odpowiednio duplikować taką grafikę:

Najpierw załączmy plik css do naszej strony index.htm.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>


<head>

    <title>Moja pierwsza strona!</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <link rel="stylesheet" href="/arkusz.css">

</head>


<body>

    <div id="wrapper">

        <div id="top">

            <h1>To jest moja pierwsza strona!</h1>

        </div>

        <div id="menu">

            <ul>

                <li><a href="/index.htm" title="Przejdź do strony głównej">home</a></li>

                <li><a href="/kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>

            </ul>

        </div>

        <div id="content">

            <p>Tu umieść jakiś krótki wstęp.</p>

            <p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="/kontakt.htm">kontaktu</a>.</p>

        </div>

    </div>

</body>

</html>


Skoro mamy już załaczony plik, warto byłoby umieścić w nim coś. Plik `arkusz.css' jest zwykłym plikiem tekstowym. Tyle, że zamiast rozszerzenia `.txt' ma rozszerzenie `.css'. Do jego edycji możesz używać dowolnego edytra tekstowego (nawet Notatnika). Ja polecam geany.

Najpierw pozbądźmy się jakichkolwiek odległości (padding) i marginesów ze strony:
/* zawartosc pliku arkusz.css */

* { margin: 0; padding: 0; }


Taki wpis znaczy "dla każdego elementu na stronie ustaw co następuje". A następuje: usuń marginesy, usuń padding. Wynikiem tego będzie "skelejenie" wszsytkiego. Znikną ze strony białe luki. To dobrze, dzięki temu, będziemy mogli opisywać teraz to sami, a ustawienia domyślne nie będą nam nic psuć.

Zajmijmy się teraz kolejnymi regułami CSS (reguła CSS czyli `separator { właściwość1: wartość_a; właściwość2: wartość_b; ... właściwośćN: wartość_z; }' ). Zadeklarujmy wygląd ciała strony:
/* zawartosc pliku arkusz.css */

* { margin: 0; padding: 0; }

body { background: #fff url(img/background.png) 0 0 repeat-x; }


Reguła dla body mówi: "ustaw tło o kolorze białym" (#fff to inny zapis koloru białego, w pełni zrozumiały dla przeglądarek). "Na ten kolor narzuć grafikę ze źródła `img/background.png'. Grafika powinna być ustawiona w punkcie 0 0 (tzn. w lewym górnym rogu ekranu) i być powielana w poziomie".
Zapisz powyższy kod w pliku `arkusz.css', umieść ten plik w katalogu `kurs HTML youthcoders'. A plik [załączony na górze tej lekcji] graficzny umieść w katalogu `kurs HTML youthcoders/img'. Następnie otw órz plik `index.htm' w dowolnej przeglądarce i zobacz efekt swojej pracy :).

Zadanie domowe:
Zrób to samo w pliku `kontakt.htm'.
 

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież