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 atrybucie elementu <html/> 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 i utwórz nowy.

Na początku, od razu go zapisz pod nazwą style.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 atrybucie style="", ale w tym przypadku posłużymy się dołączeniem stylów. W dokumencie XHTML wygląda to tak:

 <?xml version="1.0" encoding="utf-8"?>
 <?xml-stylesheet href="style.css" type="text/css"?>
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2002/08/xhtml/xhtml1-strict.dtd" xml:lang="pl">
 <head>
 <title>Pierwsza strona internetowa</title>
 </head>
 <body>
 <h1>Witaj Internecie!</h1>
 Oto moja pierwsza strona WWW
 </body>
 </html>

Proszę zwrócić uwagę na wiersz <?xml-stylesheet href="style.css" type="text/css"?>. Dołącza on arkusz stylów.

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 element <html> na stronie 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.

#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