Kurs CSS - Aplikowanie stylów  

Autor: Bożena Jurczyk

Opublikowano: 2011-05-17

Klasy CSS umożliwiają znaczną poprawę wyglądu naszych stron internetowych. Z poprzedniego artykułu dowiedzieliśmy się, czym są style oraz jak są zbudowane. Czas na wykorzystanie ich w aplikacjach.

Po zapoznaniu się z tym artykułem, będziesz wiedział:

• czym są style in-line,
• jakie są sposoby dołączania stylów do strony HTML,
• jak bardzo użyteczne na stronie są znaczniki <div> oraz <span>.

Implementacja

Zdecydowanie najprostszym sposobem na dołączenie stylu do strony jest stworzenie stylu in-line (inne nazwy to styl wpisany, lokalny). Umożliwia on nadanie wartości atrybutom wybranym, pojedynczym elementom bezpośrednio w znacznikach kodu HTML.

Przykłady:

<h1 style="color: Green;"> Nagłówek ten posiada styl dołączony in-line. </h2>

<p style="color: Red; font-size: 3em;"> Zawartość tego akapitu została wyróżniona również za pomocą stylów wpisanych.</p>

Informacja

Warto zwrócić uwagę, iż prostota i oszczędność czasu jest tu dość pozorna. Wraz z rozwojem aplikacji internetowej dokonanie jakichkolwiek zmian będzie niestety znacznie utrudnione poprzez konieczność wyszukiwania tych samych stylów oraz wprowadzania zmian w wielu miejscach. Zatem po co ta metoda? Nadaje się ona doskonale wtedy, gdy istnieje potrzeba zmiany pewnego elementu tylko na jednej stronie.

 

Na wygląd każdej strony składać się będzie zazwyczaj wiele stylów. Ich zbiory tworzą arkusze stylów, które w zależności od tego, gdzie się znajdują, mogą być wewnętrzne (kod strony) lub zewnętrzne (oddzielny plik).  

W związku z tym, pomijając style wpisane, istnieje kilka sposobów na dołączanie stylów do stron HTML.

Wewnętrzne arkusze stylów

Wewnętrzny arkusz stylów są to style będące częścią kodu strony. Należy go zawsze umieszczać pomiędzy znacznikami <style> </style> w nagłówku strony. Warto zwrócić uwagę, iż znacznik ten jest częścią kodu HTML. Informuje on jednak przeglądarkę o tym, że zawarty w nim kod to CSS, a nie HTML.

Przykład:

<style type="text/css">
        p
        {
            color: Red; 
            font-size: 3em;  
            text-decoration:overline;  
        }
        .myClass
        {
            color:Gray;
            font-size:1em;
        }
 </style>

Niestety, pomimo prostoty w tworzeniu i dodawaniu do stron, wewnętrzne arkusze stylów nie są wygodnym rozwiązaniem dla aplikacji składających się z większej ilości stron. Nadają się jedynie do stylizowania stron zawierających unikatowe style, jednakże mogą przysporzyć wiele problemów w przypadku potrzeby dokonania zmian w całej aplikacji, np. wyglądu nagłówka. Należy w tym celu zmodyfikować style znajdujące się na każdej stronie witryny.

Zewnętrzne arkusze stylów

Zewnętrzne arkusze stylów są plikami tekstowymi o rozszerzeniu .css, w którym umieszczone są wszystkie klasy CSS. Może zawierać on tylko reguły odnoszące się do stylów, bez jakiegokolwiek kodu HTML. Nazwa pliku może być dowolna.

Informacja

Aby zamienić wewnętrzne arkusze stylów na pliki tekstowe z rozszerzeniem .css, wystarczy wyciąć ze stron kody znajdujące się pomiędzy znacznikami <style></style> i umieścić je właśnie w tym pliku, po czym koniecznie trzeba go dołączyć do strony.

 

Zewnętrzne arkusze stylów dołączyć można do strony dwoma sposobami:

• za pomocą znacznika HTML <link>,
• za pomocą dyrektywy @import.

Rezultat będzie taki sam, gdyż wszystkie przeglądarki traktują te metody w jednakowy sposób. Jedynym problemem może być przeglądarka Netscape 4, która po prostu nie rozpoznaje dyrektywy @import.

Aby dołączyć arkusz stylów za pomocą znacznika <link>, niezbędne jest umieszczenie następującej linijki kodu w nagłówku strony:

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

Gdzie: 

rel – oznacza typ łącza (w tym przypadku do arkusza stylów),

type –  informuje przeglądarkę, że jest to plik tekstowy zawierający kod CSS,

href – jest lokalizacją pliku, będącego zewnętrznym arkuszem stylów, a jego wartością jest adres URL.

Dyrektywa @import również pozwala na dołączenie pliku ze stylami. Wymaga to umieszczenia na stronie kodu CSS wewnątrz znacznika <style>:

<style type="text/css">
        @import url("Styles/Site.css");
    </style>

W adresie url, wskazującym lokalizację zewnętrznego arkusza stylów, możliwe jest pominięcie znaków cudzysłowu, zatem zapis @import url(Styles/Site.css) również będzie poprawny.

Obie metody pozwalają na dołączanie wielu plików z kodem CSS.

Informacja

Wewnętrzny czy zewnętrzny arkusz stylów? Najczęściej wybieraną metodą są zewnętrzne arkusze stylów ze względu na możliwość całkowitego odseparowania kodu HTML od klas CSS. Przechowywanie wszystkich stylów w oddzielnym pliku znacznie ułatwia ich późniejsze modyfikacje, zaś zmiana wyglądu aplikacji możliwa jest niemal w  jednej linijce kodu. Dodatkowo eliminuje się powtarzanie tych samych fragmentów kodu na stronach, zmniejszając ich rozmiar.

 

Jak już wcześniej wspomniano, podczas tworzenia stron internetowych bardzo przydatnymi znacznikami są <div> oraz <span>. Pozwalają one na grupowanie lub wyodrębnienie pewnych elementów strony.

Znacznik <span> umożliwia wyróżnienie elementów liniowych (pewnego fragmentu tekstu) znajdujących się na stronie poprzez objęcie ich określonym stylem, co nazywane jest rozciąganiem stylu.

Przykład:

<p>To jest pewien akapit, w którym <span style="font-family: Courier; font-weight: bold; color: Blue; ">fragment objęty poleceniem span znacznie wyróżnia się </span> od reszty akapitu.</p>

W znaczniku <span> można użyć zarówno stylów wbudowanych, jak i pochodzących z dołączonych do strony zewnętrznych bądź wewnętrznych arkuszy stylów.

 

Bardzo często stosowanym elementem na stronach są znaczniki <div>. Pozwalają one na pogrupowanie elementów znajdujących się na stronie w pewne bloki. Następnie umożliwiają dość elastyczne zarządzanie ich położeniem, dzięki czemu można m.in. ograniczyć użycie tabel podczas tworzenia układu strony. Oczywiście oprócz pozycjonowania możliwe jest nadanie dowolnych stylów. W praktyce bloki mogą przypominać użycie znaczników <span>, jednak ich zastosowanie jest znacznie szersze, gdyż pozwalają na grupowanie akapitów, list, nagłówków, a także innych bloków, a nie tylko elementów liniowych. Często stosowanym zabiegiem jest pogrupowanie elementów powiązanych ze sobą w pewien sposób. Możemy zatem na stronie wyróżnić elementy należące do sekcji pewnego ozdobnika, pasków bocznych, treści głównej czy stopki.  W ten sposób możliwe jest tworzenie układów stron oraz stylizowanie poszczególnych sekcji.

 

Przykład:

<div class="footer">
    <hr />
© 2011 To jest tekst stopki. Można tu umieścić pewien <a href="">link</a> lub inne dowolne elementy.
    <hr />
</div>
gdzie klasa „footer” zawiera dwa style:
.footer
        {
            color:Gray;
            font-size:1em;
        }

 

Opakowywanie elementów znacznikami <div> jest z pewnością bardzo przydatne na stronach, jednak należy pamiętać, aby tego nie nadużywać.

Podsumowanie

W tym artykule zapoznaliśmy się ze stylami in-line. Dowiedzieliśmy się również o pozostałych sposobach dołączania stylów do stron, czyli o aplikowaniu wewnętrznych i zewnętrznych arkuszy stylów. Oczywiście nic nie stoi na przeszkodzie, aby łączyć te sposoby w swoich aplikacjach. Należy wtedy jednak koniecznie pamiętać o zagadnieniach związanych z kaskadowością stylów, przedstawionych w poprzednim artykule.

W kolejnym artykule omówimy, w jaki sposób możemy formatować kolory, obramowania oraz własności tekstu i czcionki na naszych stronach.

---