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