Pierwszy arkusz stylów CSS

Jak to działa

Nauczyłeś się już jak nadać fragmentowi tekstu rodzaj. Jeśli zawrzesz dowolne znaki pomiędzy <h1></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, dlatego musi znajdować się w innym pliku niż ten z tekstem.

Tworzymy CSS

Zostaw zatem na chwilę swój dokument „index.xhtml” i utwórz nowy.

Na początku, od razu go zapisz pod nazwą „skin.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.html”, aby „nałożyć” nasz arkusz na stronę.

Nakładanie „skórki” na stronę

W poprzedniej sekcji mówiliśmy, że wygląd strony będziemy definiować pomiędzy znacznikami <head></head>. Dodaj więc gdzieś pomiędzy te znaczniki następującą linie:

 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Pierwsza strona internetowa</title>
 <meta name="Description" content="Strona domowa XX. Zdjęcia i programy" />
 <link rel="stylesheet" href="skin.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 (refresh F5). Powinieneś uzyskać:

Podstawowe style

Na początek najlepiej zdefiniować style dla całej strony, czyli dla elementów <html> lub <body> (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ę.


Zmodyfikowano: 08.09.2007, 16:52