CSS

CSS - kaskadowe arkusze stylów

CSS - kaskadowe arkusze stylów Kaskadowe arkusze stylów dołączane do witryn WWW zawierają definicje formatów poszczególnych elementów HTML. Artykuł zawiera przegląd najważniejszych informacji dotyczących języka CSS.

Włodzimierz Gajda

1 2 3 4 5 6 7 »

Struktura a wygląd dokumentów HTML

Wygląd witryn WWW zależy od dwóch czynników: kodu strony (napisanego zazwyczaj w języku HTML) oraz formatu nadawanego przez przeglądarkę różnym elementom HTML. Zawartość i strukturę dokumentu opisujemy korzystając z elementów HTML: akapitów (P), nagłówków (H1, H2), tabel (TABLE, TD, TR), sekcji (DIV) itd. Natomiast format elementów definiujemy w języku CSS (ang. Casscading Style Sheets - kaskadowe arkusze stylów). Zatem tworząc witrynę WWW musimy opisać:

zawartość i strukturę strony (w języku HTML),
format elementów (w języku CSS).

W przypadku braku opisu stylów, przeglądarka zastosuje style domyślne, które zazwyczaj są dość ubogie.

Oddzielając definicję formatu elementów od samej zawartości strony otrzymamy dokument, którego format jest niezależny od kodu HTML. Główną korzyścią takiego rozwiązania jest to, że wygląd dokumentu możemy modyfikować nie zmieniając jego treści ani kodu HTML.

Dołączanie stylów do dokumentu

Definicję stylów możemy dołączyć do dokumentu na dwa sposoby:

jako style wewnętrzne,
jako style zewnętrzne.

W obydwu przypadkach informację o stylach umieszczamy w nagłówku strony WWW (a więc pomiędzy znacznikami <HEAD> oraz </HEAD>). Stosując style wewnętrzne korzystamy z elementu STYLE:

[+]

HTML

1. <STYLE type="text/css">
2. <!-- ...tutaj definicja stylów... -->
3. </STYLE>

Listing zwinięty - 3 linii

Definicja stylów znajduje się wewnątrz komentarza HTML (czyli pomiędzy ). Nie jest to konieczne, ale w przypadku przeglądarki, która nie potrafi interpretować stylów, zawartość elementu STYLE pojawi się w treści strony (przeglądarka po napotkaniu nieznanego elementu powinna go zignorować, pozostawiając jedynie jego zawartość). Zastosowanie komentarza HTML usuwa style z treści strony wyświetlanej przez przeglądarkę, która nie potrafi interpretować stylów. Wewnątrz komentarza umieszczamy opis stylów.

Element STYLE posiada dwa atrybuty: type oraz media. Atrybut type ustala język stosowany do opisu stylów. W przypadku stosowania języka CSS atrybutowi type należy nadać wartość text/css.

Atrybut media może przyjmować między innymi wartości screen oraz print. Wartością domyślną jest screen. Stosowanie atrybutu media jest jednym ze sposobów przygotowania dwóch różnych formatów strony: jednego przeznaczonego do wyświetlenia na ekranie oraz drugiego przeznaczonego do wydruku.

Style zewnętrzne zapisujemy w osobnym pliku. Jeśli stosujemy język CSS, to plikowi nadajemy rozszerzenie .css. Tak zdefiniowane style dołączmy do dokumentu HTML stosując element LINK:

HTML

<LINK rel="stylesheet" href="nazwapliku.css" type="text/css">

Ćwiczenie 1

Przygotuj witrynę "Witaj przybyszu!", przedstawioną na rys. 1, zawierającą style wewnętrzne. Cała witryna, zarówno style, jak i kod HTML, są zapisane w jednym pliku. W nagłówku strony jest umieszczony element STYLE, który definiuje format elementów BODY, H1 oraz DIV. Kod witryny został przedstawiony na listingu 1.

[-]

Listing 1: Witryna stosująca style wewnętrzne

HTML

 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
 2. <HTML>
 3.   <HEAD>
 4.     <TITLE>Style wewnętrzne</TITLE>
 5.     <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
 6.     <STYLE type="text/css">
 7.     <!--

 8.     BODY {
 9.         background : rgb(215,251,226);
10.         text-align : center;
11.         margin     : 50px;
12.     }
13.  
14.     DIV {
15.         background : rgb(0,128,255);
16.         width      : 400px;
17.         border     : 3px black solid;
18.     }
19.  
20.     H1 {
21.         margin     : 20px;
22.         border     : 1px solid black;
23.         background : rgb(255,255,155);
24.     }
25.     -->
26.     </STYLE>
27.   </HEAD>
28. <BODY>
29. <DIV><H1>WITAJ PRZYBYSZU!</H1></DIV>
30. </BODY>
31. </HTML>

Listing zwinięty - 31 linii

Ćwiczenie 2

Przygotuj witrynę z ćwiczenia pierwszego, umieszczając style w osobnym pliku.

Tym razem rozwiązanie składa się z dwóch plików: pliku HTML oraz pliku CSS. W nagłówku pliku HTML znajduje się element LINK dołączający do strony style zapisane w pliku CSS. Plik HTML jest przedstawiony na listingu 2, a plik CSS na listingu 3.

[+]

Listing 2: Witryna wykorzystująca style zewnętrzne zapisane w pliku nowestyle.css

HTML

 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
 2. <HTML>
 3.   <HEAD>
 4.     <TITLE>Style zewnętrzne</TITLE>
 5.     <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
 6.     <LINK rel="stylesheet" href="nowestyle.css" type="text/css">
 7.   </HEAD>
 8. <BODY>
 9. <DIV><H1>WITAJ PRZYBYSZU!</H1></DIV>
10. </BODY>
11. </HTML>

Listing zwinięty - 11 linii

[+]

Listing 3: Plik nowestyle.css zawierający definicje stylów

CSS

 1. BODY {
 2.     background : rgb(215,251,226);
 3.     text-align : center;
 4.     margin     : 50px;
 5. }
 6.  
 7. DIV {
 8.     color      : rgb(0,0,0);
 9.     background : rgb(0,128,255);
10.     width      : 400px;
11.     border     : 3px black solid;
12. }
13.  
14. H1 {
15.     margin     : 20px;
16.     border     : 1px solid black;
17.     background : rgb(255,255,155);
18. }

Listing zwinięty - 18 linii

Jak widać, różnica pomiędzy obydwoma rozwiązaniami jest niewielka. Sprowadza się do rozbicia pliku przygotowanego w ćwiczeniu pierwszym na dwa pliki, usunięciu elementu STYLE oraz dodaniu elementu LINK. Zatem, które z rozwiązań jest lepsze i w jaki sposób objawiają się jego zalety?

Głównym czynnikiem oceny jest liczba plików HTML tworzących witrynę. Jeśli przygotowujemy pojedynczy plik HTML, wówczas możemy rozważać stosowanie stylów wewnętrznych. W przeciwnym razie (tj. jeśli witryna składa się z dwóch lub większej liczby plików HTML), stosowanie stylów wewnętrznych nie ma sensu. Należy użyć stylów zewnętrznych.

Jeśli zastosujemy style wewnętrzne, wówczas prosta operacja Widok/Źródło wykonana w przeglądarce pozwoli na analizę zarówno kodu HTML, jak i stylów. Drugą sytuacją, w której stosowanie stylów wewnętrznych będzie miało zalety, jest podglądanie spakowanego archiwum. Jeśli po otworzeniu spakowanego archiwum zawierającego pliki HTML programem kompresującym (np. WinZip) podwójnie klikniemy jeden z plików HTML, wówczas przeglądarka wyświetli poprawnie (tj. uwzględniając wszystkie formaty) jedynie stronę zawierającą style wewnętrzne.

Rys. 1. Witryna stanowiąca treść ćwiczeń 1 oraz 2 Style wewnętrzne znajdują zastosowanie głównie przy tworzeniu witryn instruktażowych z ćwiczeniami. Podglądanie rozwiązania jest wówczas nieco prostsze niż w przypadku stosowania stylów zewnętrznych.

Za stylami zewnętrznymi przemawiają wszystkie pozostałe czynniki. Rozmiar witryny tworzonej przy użyciu stylów zewnętrznych jest mniejszy. Jeśli witryna składa się z wielu plików, wówczas tylko podczas pobierania pierwszego pliku pobierane będą również style. Przy wizycie na drugiej stronie witryny style będą pochodziły z pamięci podręcznej przeglądarki (ang. cache).

Modyfikowalność stylów zewnętrznych to chyba najbardziej wyraźna różnica. Zmiany dokonywane w jednym pliku wpływają na całą witrynę i wszystkie jej podstrony. Jeśli zastosujemy style wewnętrzne, zmiana stylów będzie wymagała modyfikacji każdego pliku, który zawiera style wewnętrzne!

30 maja 2008

1 2 3 4 5 6 7 »

Powiązane publikacje

Jak uzyskać zaokrąglone rogi?

Najlepsze frameworki CSS

HTML i CSS - Tekst pod kontrolą

Blueprint: A CSS framework

HTML i CSS - Zaawansowane możliwości CSS

HTML i CSS - Optymalizacja kodu CSS

Kolory sieciowych projektów

Okiełznać style - Wprowadzenie do CSS

Skomentuj
ten artykuł

Komentarzy: 2

Wednesday, 11.11.2009 00:03Grim

Oprócz przykładów brakuje mi informacji dotyczących położenia position="absolute / relative / itd." oraz opisu zależności występujących między poszczególnymi <div>

CYTAT

Artykuł zawiera przegląd najważniejszych informacji dotyczących języka CSS.

... ja bym powiedział, że przedstawia podstawowe możliwości formatowania elementów strony www (tekstu / tła / obramowania) ... moim skromnym zdaniem CSSy dają dużo więcej

Pozdrawiam

Tuesday, 10.11.2009 22:01Aloha

Brakuje mi wizualizacji przedstawionych przykładów.

Zobacz wszystkie komentarze »

Autor

Włodzimierz Gajda

Artykuły tego autora:

» Efektowna wyszukiwarka Google na twojej...
[INTERNET Maker]
» Ćwiczenia w programowaniu aplikacji...
[INTERNET Maker]
» MathML - matematyka na stronach WWW
[INTERNET Maker]
» Propel - porady jak rozwiązać podstawowe...
[INTERNET Maker]
» AJAX Kurs od podstaw - jQuery
[INTERNET Maker]

Pozostałe publikacje

Kreatywne sposoby na tło strony w CSS3

Atrybut background kryje wiele interesujących funkcji, które pozwolą wcielić w życie pomysły nawet najbardziej szalonych grafików. Gradienty, dopasowanie grafiki tła do szerokości strony , ograniczenie jego wielkości? Żaden problem!

Polecamy:

Na skróty:

Nasze serwisy:

CSS

CSS - kaskadowe arkusze stylów

Struktura a wygląd dokumentów HTML

Dołączanie stylów do dokumentu

Ćwiczenie 1

Ćwiczenie 2

Autor

Włodzimierz Gajda

Pozostałe publikacje

Kreatywne sposoby na tło strony w CSS3

Newsletter