Pierwszy arkusz stylów CSS

poprawna pisownia to stylów

Inspiracja? http://www.wpdfd.com/issues/70/css_from_the_ground_up/

Jak to działa

Nauczyłeś się już jak nadać fragmentowi tekstu rodzaj. Jeśli zawrzesz dowolne znaki pomiędzy <h1> a </h1>, stworzysz nagłówek. Jednak jak widzisz, nie wygląda on zbyt ciekawie. Trzeba nadać mu wygląd za pomocą innego kodu, tzw. CSS. CSS jest „skórką” do Twojej strony, możesz styl wpisać w sekcji <head> jednak nie polecam tego rozwiązania. Ponieważ przy dłuższym i bardziej skomplikowanym arkuszu stylów przeglądanie źródła strony staje się po pewnym czasie uciążliwe. Dlatego nasz arkusz stylów umieścimy w osobnym pliku.

Tworzymy CSS

Zostaw zatem na chwilę swój dokument index.xhtml (index.xht, jeżeli używasz Windows 3.1) i utwórz nowy.

Na początku, od razu go zapisz pod nazwą arkusz.css (lub inną dowolną z rozszerzeniem .css).

Zmieńmy więc wygląd dobrze nam znanego nagłówka <h1></h1>. Napisz w pierwszej linii:

 h1 {
 color: red;
 font-size: 2em;
 }

Zapisz plik i wróć do naszego dokumentu index.xhtml, aby „nałożyć” nasz arkusz na stronę.

Nakładanie „skórki” na stronę

Więcej informacji o dołączaniu arkuszy stylów

W poprzedniej sekcji mówiliśmy, że wygląd strony można definiować w elemencie <head/>, ale tym przypadku posłużymy się dołączeneim stylów. W dokumencie XHTML wygląda to tak.

 <?xml version="1.0" encoding="utf-8" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
 <head>
 <title>Pierwsza strona internetowa</title>
 <link rel="stylesheet" href="arkusz.css" type="text/css"/>
 </head>
 <body>
 <h1>Witaj Internecie!</h1>
 <p>Oto moja pierwsza strona WWW</p>
 </body>
 </html>

Zapisz i zobacz rezultat w przeglądarce. Powinieneś uzyskać:

Podstawowe style

Na początek najlepiej zdefiniować style dla całej strony, czyli dla elementu <html> (dzięki dziedziczeniu zostaną zaaplikowane domyślne dla całej strony). W pliku CSS napisz:

 html {
   background: #ddd; /* kolor tła */
   color: black; /* kolor tekstu */
   padding: 20px; /* marginesy wewnętrzne */
   font-family: Verdana, Helvetica, sans-serif; /* krój pisma */
 }

Powyższy kod oznacza, że każdy element <html> ma mieć tło w kolorze #ddd (jasno szary), czarny kolor tekstu, 20 pikseli marginesu wewnętrznego z każdej strony oraz użyć kroju pisma Verdana lub Helvetica.

Przy definiowaniu kroju pisma, zawsze na końcu należy zdefiniować jego rodzaj: sans-serif/serif/monospace

#dodać więcej przykładów

Wzbogacenie strony

jakies tla dla naglowkow, kolorki dla tego i owego, bez floatow i pozycjonowania.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

Pierwszy dokument XHTML | Menu - Struktura