Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Podstawowe pojęcia

Email Drukuj PDF

Tematy: Budowa stylu | Osadzanie stylów na stronie | Jednostki miar stosowane w CSS | Nazewnictwo kolorów używane w CSS

Do tego, aby rozpocząć przygodę z kaskadowymi arkuszami stylów oraz świadomie z nich korzystać, niezbędne są podstawy. Musisz dowiedzieć się, w jaki sposób zbudowany jest styl, co to jest kaskadowość, dziedziczenie, selektor, z jakimi jednostkami miar będziesz miał styczność przy konstruowaniu swoich arkuszy. Bezwzględnie należy poznać, w jaki sposób umieszczać style w dokumencie XHTML/HTML.

Budowa stylu

Konstrukcja stylu nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie.

selektor {cecha:wartość; cecha:wartość; etc.;}

Selektor jest odpowiednikiem znacznika występującego w języku XHTML/HTML, np. może to być <p> lub <div>. Drugi człon stylu jest zamknięty w nawias klamrowy { } i zawiera polecenia formatujące. Polecenie formatujące — cecha — jest określane przez specyfikację, natomiast wartość jest zmienną określaną przez nas w zależności od aktualnych potrzeb. Przykładowy prosty styl definiujący kolor bloku tekstu jako czerwony o wysokości czcionki równej 14 punktów wygląda następująco:

P

{

color:red;

font-size:14pt;

}

Należy zwrócić uwagę na to, że cecha jest oddzielona od wartości za pomocą dwukropka, a po wartości zawsze występuje średnik. Stosowanie średnika po ostatniej parze cechy i wartości nie jest wymagane, ale zaoszczędzi wielu niespodzianek.

Zapis stylu może również przybierać inną postać, jednak jego działanie pozostaje niezmienne.

P {color:red; font-size:14pt;}

Jeżeli zapomnimy rozdzielić poszczególne pary cech i wartości za pomocą średników, to styl nie będzie działał poprawnie.

BODY

{

background-color:white;

color:green

font-size:20pt;

}

Zwróć uwagę na powyższy przykład, w którym chcemy określić biały kolor tła dokumentu oraz kolor czcionki jako zielony. Dodatkowo tekst powinien zostać wyświetlony za pomocą czcionki o wielkości 20pt. Niestety, „zapomniałem” wstawić średnik przy definicji koloru tekstu na końcu linii. W większym arkuszu błąd jest praktycznie niewidoczny, jednak strona zostanie błędnie wyświetlona.

Z trzech definicji stylów zadziała tylko pierwsza linijka odpowiedzialna za przypisanie białego koloru tła. Pozostałe dwa elementy zostaną błędnie rozpoznane przez przeglądarkę i nie zadziałają.

Osadzanie stylów na stronie

Kaskadowe arkusze stylów mogą być osadzone w dokumencie XHTML/HTML na kilka odmiennych sposobów. Specyfikacja przewiduje następujące rozwiązania:

  • Style wewnętrzne:

    • lokalne,

    • zagnieżdżone.

  • Style zewnętrzne:

    • dołączone,

    • importowane.

Style wewnętrzne

Pierwszym rozwiązaniem jest umieszczenie deklaracji stylu bezpośrednio w formatowanym znaczniku. Rozwiązanie takie nosi nazwę stylu lokalnego.

<html>

    <head>

    </head>

    <body>

     <p style="color:green; font-size:15pt;">Treść dokumentu</p>

     <p>Treść dokumentu</p>

     <p style="color:green; font-size:15pt;">Treść dokumentu</p>

     <p>Treść dokumentu</p>

    </body>

</html>

Przykład stylu umieszczonego w znaczniku widoczny na powyższym listingu uzmysławia nam, że taka konstrukcja opiera się na stosowaniu atrybutu style dla znacznika <p>. Wadą tego rozwiązania jest konieczność powielania tego samego stylu wiele razy, ponieważ działa on tylko dla znacznika, w którym został umieszczony.

Weźmy na przykład dokument, w którym umieszczono czterdzieści bloków tekstu i każdy z nich ma wyglądać identycznie. Aby to osiągnąć, do każdego z nich należy wpisać odpowiednie style. Wiąże się to z wykonaniem dodatkowej pracy, stratą czasu oraz zwiększeniem objętości kodu XHTML/HTML. Do tego dochodzi kolejna ważna rzecz, jaką jest utrudniona możliwość poprawienia takiego kodu, gdy nie spodoba się on odbiorcy. Sytuację taką przewidzieli twórcy kaskadowych arkuszy stylów, dzięki czemu mamy kolejną możliwość umieszczania CSS w kodzie XHTML/HTML. Metoda ta polega na zdefiniowaniu odpowiednich wpisów bezpośrednio w nagłówku strony. Rozwiązanie takie nazywane jest stylem zagnieżdżonym

<html>

    <head>

  <style type=”text/css”>

       P

            {

             color:green;

             font-family:Arial;

            }

  </style>

    </head>

    <body>

        <p>Tekst akapitu</p>

        <p>Tekst akapitu</p>

        <p>Tekst akapitu</p>

        <p>Tekst akapitu</p>

    </body>

</html>

Styl umieszczony w nagłówku dokumentu XHTML/HTML jest rozwiązaniem bardzo wygodnym, gdyż działa na wszystkie elementy, które znajdują się w dokumencie. Przy takiej konstrukcji strony zmiany upodobań klienta prowadzące do modyfikacji wyglądu strony nie są już dużym problemem. Wystarczy wprowadzić drobne modyfikacje w samym nagłówku dokumentu, aby cały dokument zmienił się tak, by odpowiadał nowej wizji zleceniodawcy.

Style zewnętrzne

Style wewnętrzne — zarówno lokalne, jak i zagnieżdżone — poza zaletami mają również dość poważne wady. Weźmy jako przykład rozbudowany serwis — np. witrynę Wydawnictwa Helion — na który składają się setki lub tysiące podstron. Każda z podstron jest formatowana w podobny sposób i wykorzystuje ten sam zestaw stylów. W takim wypadku style lokalne odpadają, a zagnieżdżanie definicji w nagłówki <head> również nie jest najlepszym pomysłem. Na szczęście istnieje jeszcze trzecia możliwość — styl zewnętrzny, która opiera się na znaczniku <link /> umieszczanym bezpośrednio w nagłówku strony, dzięki czemu taki arkusz również działa na cały dokument. Znacznik ten pozwala na podłączenie zewnętrznego arkusza stylów. Odpowiedni wpis ma następującą postać:

<link href="/arkusz.css" rel="stylesheet" type="text/css" />

Atrybut href odpowiada za określenie nazwy oraz lokalizacji wybranego arkusza. Kolejny element, rel, definiuje relacje, które w przypadku CSS zawsze mają wartość stylesheet. Ostatni element — type — zawsze posiada wartość text/css. Dzięki temu przeglądarka może rozpoznać, z jakim arkuszem ma do czynienia. Działanie tego elementu docenimy w przyszłości, gdy powstaną inne arkusze i zajdzie potrzeba korzystania z nich.

Zastosowanie znacznika <link /> w praktyce wyraźnie widać na listingu widocznym poniżej.

  <html>

    <head>

     <link href="/arkusz.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

        <P>Tekst akapitu</P>

        <P>Tekst akapitu</P>

        <P>Tekst akapitu</P>

        <P>Tekst akapitu</P>

    </body>

</html>

Zewnętrzny arkusz jest zwyczajnym plikiem tekstowym, a jego zawartość może wyglądać np. tak jak na poniższym przykładzie.

/* To jest przykład zewnętrznego arkusza stylów*/

P

{

color:green;

font-family:Arial;

  }

Zewnętrzny arkusz powinien być zapisany w pliku o dowolnej nazwie, która nie zawiera polskich znaków. Bezwzględnie taki dokument musi posiadać rozszerzenie zgodne ze wzorem nazwa-pliku.css. Oczywiście nie bez znaczenia pozostaje fakt stosowania dużych lub małych liter w nazwie.

W przypadku języka XHTML polecenie odpowiedzialne za podłączenie zewnętrznego arkusza stylów ma postać:

<?xml-stylesheet type="text/css" href="/arkusz.css" ?>

Dla zachowania zgodności dokumentów XHTML ze starszymi przeglądarkami zaleca się umieszczanie podwójnej deklaracji wywołującej arkusz stylów.

<link rel="stylesheet" type="text/css" href="/arkusz.css" />

<?xml-stylesheet type="text/css" href="/arkusz.css" ?>

Bardzo ciekawą cechą kaskadowych arkuszy stylów jest możliwość zdefiniowana kilku arkuszy dla danego dokumentu, co daje oglądającemu możliwość zmiany wyglądu strony w zależności od upodobań. Rozwiązanie to opiera się na możliwości wstawienia kilku znaczników <link /> i określeniu ich ważności. Funkcja ta działa m.in. w przeglądarkach Opera 10, Internet Explorer 8 czy Firefox 3.5. Przykładowy kod strony z kilkoma zewnętrznymi arkuszami zamieszczam poniżej.

  <html>

    <head>

        <link href="/arkusz-a.css" rel="stylesheet" type="text/CSS" title="Czerwony" />

        <link href="/arkusz-b.css" rel="alternate stylesheet" type="text/CSS" title="Zielony" />

    </head>

    <body>

        <P>Tekst akapitu</P>

        <P>Tekst akapitu</P>

        <P>Tekst akapitu</P>

        <P>Tekst akapitu</P>

    </body>

</html>

Bezwzględnie należy zwrócić uwagę na to, że oba znaczniki <link /> zostały rozbudowane o dodatkowy atrybut title, który odpowiada za przypisanie właściwej nazwy każdemu arkuszowi. Na podstawie tej nazwy w przeglądarce jest możliwa zmiana arkuszy. W przykładzie wykorzystałem następujące nazwy: Czerwony oraz Zielony. Kolejną bardzo istotną zmianą jest atrybut rel, który dla domyślnego arkusza pozostaje bez zmian, natomiast w każdym dodatkowym wpisie przybiera postać rel=”alternate stylesheet”.

Rysunek 1.1. Zmiana arkusza stylów w przeglądarce Firefox

Możliwość przygotowania alternatywnych arkuszy stylów dla jednej strony pozwala na zadowolenie gustów nawet najbardziej wymagających internautów, którzy trafią na stronę naszego autorstwa. Niestety, do pełni szczęścia potrzeba implementacji obsługi tej funkcji w innych najczęściej stosowanych przeglądarkach. Mam tutaj na myśli MS Internet Explorer, który okupuje pozycję lidera na rynku tego typu aplikacji.

Na koniec zostawiłem sobie kolejną możliwość dołączania stylów do dokumentu. Dokładniej mówiąc, chodzi mi o funkcję importowania arkusza.

  <html>

    <head>

  <style type="text/css">

       @import url(”arkusz.css”);

        P

               {

               color:green;

               }

  </style>

    </head>

    <body>

        <P>Tekst akapitu</P>

        <P>Tekst akapitu</P>

        <P>Tekst akapitu</P>

        <P>Tekst akapitu</P>

    </body>

</html>

Importowanie arkusza stylów — jak widać na powyższym przykładzie — jest wykonywane za pomocą polecenia @import, które musi znajdować się na samym początku, przed deklaracją innych stylów.

<style>

@import url("http://www.firmaX.com.pl/style/arkusz.css");

</style>

Adres określający lokalizację może przybierać postać bezwzględną (przykład powyżej) lub względną (listing poniżej).

<style>

@import url("../style/arkusz.css");

</style>

Możliwość importowania arkusza możemy łączyć z innymi stylami, które są umieszczone w dokumencie (tak jak na jednym z powyższych listingów). Importowanie arkusza z innej lokalizacji działa poprawnie we wszystkich współcześnie używanych wersjach wiodących przeglądarek.

Jednostki miar stosowane w CSS

Kaskadowe arkusze stylów pozwalają nam na określenie wielkości wielu elementów, dopuszczając przy tym różne jednostki miar względnych i bezwzględnych. Dodatkowo w drugiej specyfikacji możemy się spotkać z jednostkami czasu, częstotliwości oraz kątowymi.

Jednostki względne

px — piksele

P {margin-left:20px;}

Jednostka ta opiera się na pojedynczych punktach widocznych na ekranie monitora — pikselach. Jeżeli dokładniej przyjrzymy się ekranowi monitora, da się zauważyć drobne punkty. W zależności od ustawionej rozdzielczości ilość tych punktów może być różna, np. 800´600. Pierwsza wartość podaje ilość punktów w poziomie, natomiast druga określa, ile pikseli mieści się w pionie. Oczywiście rozdzielczości mogą być bardzo różne, np. 1024´768 czy 1600´1200, a do tego mogą się różnić w zależności od posiadanego systemu operacyjnego czy też typu monitora. Dlatego też stosowanie takiej jednostki nie zawsze daje dobre rezultaty w innych warunkach niż te wykorzystane podczas tworzenia witryny.

em — proporcje wysokości czcionki do danego elementu

P {margin-left:2em;}

Zasada działania tej jednostki jest stosunkowo prosta i polega na określaniu zależności pomiędzy poszczególnymi wielkościami. Jeżeli zdefiniujemy domyślną czcionkę o wielkości 12pt, to będzie ona równa 1em. Przyjrzyj się poniższemu przykładowi:

P

{

font-size:12pt;

margin-left:2em;

}

Powyżej zdefiniowałem wielkość czcionki 12pt dla bloku tekstu. Następnie za pomocą kolejnego polecenia ustawiłem lewy margines jako 2em. W tym przypadku lewy margines będzie równał się 24pt.

ex — proporcje do wysokości litery x

P {margin-left:2ex;}

Stosowanie jednostki ex wiąże się z rodzajem użytej czcionki. Weźmy np. stronę, na której używamy kilku rodzajów czcionek. Jak już wiemy, każda czcionka inaczej wygląda, a co za tym idzie, ma inną wielkość podstawową, dlatego czcionka Arial o wielkości 2ex nie będzie równa czcionce Times o wielkości 2ex.

% — procenty

P {font-size:10%;}

Procenty służą do określania wielkości względem wartości domyślnej. Przykładowa definicja spowoduje ustawienie wielkości czcionki na poziomie 1/10 domyślnego rozmiaru, jaki został skonfigurowany w przeglądarce.

Jednostki bezwzględne

in — cale

P {margin-left:2in;}

Cale wywodzą się z amerykańskiego systemu miarowego i głównie tam są wykorzystywane. W naszym przypadku ta jednostka raczej nie będzie potrzebna.

pt — punkty

P {font-size:12pt;}

Punkty wywodzą się z typografii, gdzie są standardową jednostką miary. W praktyce 72 punkty odpowiadają jednemu calowi, a ten z kolei równa się 2,54 cm.

cm — centymetry

P {font-size:1cm;}

Centymetr jest miarą stosowaną w większości krajów na świecie. Jeden centymetr odpowiada 0,39 cala.

mm — milimetry

P {font-size:12mm;}

Minimetry są jednostką mniejszą niż centymetr. Występują w systemie metrycznym, na jeden centymetr składa się 10 mm.

pc — pica

P {font-size:12pc;}

Podobnie jak punkt jest jednostką typograficzną; jeden pica równa się 12 punktom. 

Jednostki czasu i jednostki kątowe

Jednostki służące do określania czasu oraz kątów zostały wprowadzone w drugiej specyfikacji — CSS2. Mają zastosowanie przy projektowaniu stron wzbogaconych o możliwość czytania dokumentu przez komputer oraz obsługi mediów.

Jednostki czasu to:

ms — milisekunda

H5 {pause-after:100ms;}

s — sekunda

H5 {pause-after:10s;}

Obie jednostki są używane do określania odstępu pomiędzy czytanymi fragmentami.

Jednostki kątowe to:

deg — stopnie

H5 {elevation:10deg;}

grad — gradiany

H5 {elevation:10grad;}

rad — radiany

H5 {elevation:10rad;}

Jednostki te są używane do określenia pozycji źródła dźwięku.

Nazewnictwo kolorów używane w CSS

Kolejną ważną cechą oferowaną przez kaskadowe arkusze stylów jest możliwość określania kolorów. Do określania kolorów, podobnie jak w języku HTML, możemy użyć nazw kolorów, np. red, green czy blue.

DIV {color:red;}

Niestety, nazwy zostały przypisane jedynie kilkunastu podstawowym kolorom (patrz tabela 1) i jeżeli chcemy użyć innego, musimy skorzystać z odmiennej formy. Zapis w postaci RGB może przybierać następującą postać:

DIV {color:rgb(255,0,0);}

Zapis kolorów opierający się na modelu RGB przypisuje liczby całkowite z przedziału od 0 do 255 dla każdej z wartości składowej palety RGB (red, green, blue), stąd liczb może być aż dziewięć.

Oczywiście możemy jeszcze zapisać kolor w postaci RGB, definiując procent nasycenia danej barwy.

DIV {color:rgb(100%,0%,0%);}

Kolejnym sposobem zapisu kolorów jest metoda szesnastkowa, będąca dokładnie tym samym, co zapis szesnastkowy doskonale znany wszystkim, którzy mieli do czynienia z komputerami.

DIV {color:#FF0000;}

Podane przeze mnie powyżej przykłady zawsze określały kolor czerwony.

Tabela 1. Wybrane kolory z przypisanymi nazwami wchodzące w skład bezpiecznej palety 216 kolorów

Nazwa koloru

Zapis szesnastkowy

Black

#000000

Silver

#C0C0C0

Gray

#808080

White

#FFFFFF

Maroon

#800000

Red

#FF0000

Purple

#800080

Fuchsia

#FF00FF

Green

#008000

Lime

#00FF00

Olive

#808000

Yellow

#FFFF00

Navy

#000080

Blue

#0000FF

Teal

#008080

Aqua

#00FFFF

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15281202