Kaskadowe arkusze stylów

Kaskadowe arkusze stylów dołączane do dokumentów HTML pozwalają w aktywny sposób wpływać na wygląd standardowych elementów umieszczanych na stronach. Dzięki nim projektant witryny może określić jaką czcionką, kolorem, stylem mają zostać akapity, odnośniki, nagłówki. Własności definiowane przy ich pomocy mają duże odzwierciedlenie w modelu DOM. Dzięki temu możliwa jest ich dynamiczna modyfikacja przy pomocy skryptów JavaScript. Otwiera to olbrzymie możliwości przed projektantami witryn internetowych. Dzięki tym mechanizmom mogą oni sprawiać, że ich strony po prostu "ożywają" , sprawiają wrażenie interakcji z użytkownikiem.

Podstawowe informacje o arkuszach CSS

W arkuszu stylów zawarte są reguły, które informują przeglądarkę w jaki sposób wyświetlać ma poszczególne elementy dokumentu. Umieszcza się je w nagłówku dokumentu, przed sekcją <BODY>, pomiędzy znacznikami <STYLE> i </STYLE>. Dodatkowo należy ustawić atrybut type na wartość "text-css" .

Każda reguła składa się z dwóch części : selektora i bloku deklaracji ograniczonego nawiasem klamrowym. Na selektor składa się rozdzielona przecinkami lista nazw elementów, których dana reguła dotyczy. Blok deklaracji zawiera szereg par właściwość-wartość oddzielonych od siebie znakiem dwukropka, po każdej deklaracji należy umieścić znak średnika. Tabelaryczne zestawienie słów kluczowych, które mogą zostać umieszczone w bloku deklaracji można odnaleźć w części Budowa pliku CSS. Oto przykładowa reguła CSS:

P{
font-size:20pt;
font-style:italic;
color:red;
text-align:right;
}

Jak widać dotyczy ona formatowania akapitu - świadczy o tym fakt, że w nazwie selektora umieszczona została nazwa używana w znaczniku akapitu, a więc <P>. Reguła ta mówi, że wszystkie akapity dokumentu zostaną wyświetlone czcionką o wielkości 20 punktów (font-size:20pt), tekstem pochylonym (font-style:italic), w kolorze czerwonym (color:red). Tekst akapitu zostanie dorównany do prawego marginesu (text-align:right).

Podobne reguły można budować dla innych standardowych elementów języka HTML. Przykładowo możemy określić sposób wyświetlania nagłówków i odnośników.

H1,H2{
font-size:24pt;
font-style:normal;
color:blue;
text-weight:bold;
border-style:solid;
}
A{
font-family: "Times New Roman",serif
display:block;
text-decoration:none;
}

Pierwsza z reguł dotyczy nagłówków pierwszego i drugiego rodzaju, mają one być wyświetlone czcionką o wielkości 24 punkty, normalną, w kolorze niebieskim, tekstem pogrubionym, i obramowane linią ciągłą. Reguła z selektorem "A" definiuje wyświetlanie odnośników <A HREF="">. Według niej do ich wyświetlenia ma zostać użyta czcionka "Times New Roman", a jeśli będzie ona niedostępna to dowolna inna czcionka szeryfowa. Ma on zostać wyświetlony blokowo, co znaczy że zarówno przed nim, jak i po nim przeglądarka wstawi znak nowej linii. Ostatnia reguła mówi, że poniżej odnośnika ma nie pojawić się linia podkreślająca go. Przykładowy dokument zamieszczono poniżej:

<HTML>
<HEAD>
<STYLE type="text/css">
P{
font-size:20pt;
font-style:italic;
color:red;
text-align:right;
}
H1,H2{
font-size:24pt;
font-style:normal;
color:blue;
text-weight:bold;
border-style:solid;
}
A{
font-family: "Times New Roman",serif;
display:block;
text-decoration:none;
}
</STYLE>
<SCRIPT>
<!-- -->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
<H1>OTO PRZYKŁADOWY NAGŁÓWEK PIERWSZEGO STOPNIA</H1>
<H2>OTO PRZYKŁADOWY NAGŁÓWEK DRUGIEGO STOPNIA</H2>
<P>
To jest tekst akapitu, wyswietlonego, czcionka pochylona o wartosci 20pt w kolorze czerwonym, z wyrownaniem do prawej strony. <A HREF="http://www.okno.pw.edu.pl">Odnośnik</A>
W treść akapitu wpleciony został odnośnik wyświetlony blokowo
</P>
</BODY>
</HTML>

W przykładzie wykorzystane zostały wszystkie omówione wcześniej reguły wyświetlania i pokazane przykłady ich praktycznego zastosowania.

Czasami zachodzi konieczność odpowiedniego grupowania elementów jednego rodzaju. Np. w sytuacji, gdy chcemy by część akapitów była wyświetlona jednym rodzajem czcionek, a część drugim. Podzbiory elementów można wydzielić przez przypisanie im parametru "class=nazwa_klasy" . Atrybut ten umieszcza się wewnątrz znacznika otwierającego dany element. Przykładowo akapit przypisany do klasy o nazwie "duzy" będzie w treści dokumentu wyglądał następująco:

<P class="duzy"></P>

Aby podział miał jakiś sens, należy zdefiniować oddzielne reguły wyświetlania dla każdej z klas. Dokonuje się tego oczywiście we wnętrzu arkusza stylów. Aby poinformować przeglądarkę, że dana reguła nie odnosi się do konkretnego obiektu, tylko do ich grupy, należy zastosować ogólnie przyjęty sposób budowy selektora. Musi on rozpoczynać się kropką, za którą będzie umieszczona nazwa klasy. Np. reguła odnosząca się do naszej klasy "duzy", będzie wyglądać następująco:

duzy{
font-size:20pt;
font-style:italic;
color:red;
text-align:right;
};

Zamieszczony poniżej przykład pokazuje w jaki sposób dokonać podziału na obiektów na dwie klasy o nazwach: "duzy" i "maly". Akapity z pierwszej grupy będą wyświetlane czcionką pochyloną o wielkości 20 punktów, kolorem czerwonym i zostaną wyrównane do prawej strony. Obiekty drugiej klasy zostaną zaprezentowane małą czcionką 12 punktów, stylem normalnym, kolorem niebieskim. Będą dorównywane do lewego marginesu.

<HTML>
<HEAD>
<STYLE type="text/css">
.duzy{
font-size:20pt;
font-style:italic;
color:red;
text-align:right;
};
.maly{
font-size:12pt;
font-style:normal;
color:blue;
text-align:left;
};
</STYLE>
<SCRIPT>
<!--
-->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka nie obsługuje skryptów JavaScript.
</NOSCRIPT>
</HEAD>
<BODY>
<P class="duzy"> Aby podział miał jakiś sens, należy zdefiniować oddzielne reguły wyświetlania dla każdej z klas. Dokonuje się tego oczywiście we wnętrzu arkusza stylów. Aby poinformować przeglądarkę, że dana reguła nie odnosi się do konkretnego obiektu, tylko do ich grupy, należy zastosować ogólnie przyjęty sposób budowy selektora. Musi on rozpoczynać się kropką, za którą będzie umieszczona nazwa klasy.
</P>
<P class="maly">
Aby podział miał jakiś sens, należy zdefiniować oddzielne reguły wyświetlania dla każdej z klas. Dokonuje się tego oczywiście we wnętrzu arkusza stylów. Aby poinformować przeglądarkę, że dana reguła nie odnosi się do konkretnego obiektu, tylko do ich grupy, należy zastosować ogólnie przyjęty sposób budowy selektora. Musi on rozpoczynać się kropką, za którą będzie umieszczona nazwa klasy. </P>
</BODY>
</HTML>

Budowa pliku CSS

Arkusz stylów może zostać umieszczony w osobnym pliku. Należy wówczas w pliku, w którym zamierzamy stosować reguły arkusza stylów, umieścić przywołanie pliku arkusza:

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

Plik kaskadowego arkusza stylów jest zbiorem tekstowym o rozszerzeniu *.css. W jego wnętrzu określa się reguły, którymi posługuje się przeglądarka przy formatowaniu danych. Ich wewnętrzną budowę wyjaśnia tabela:

Selektor{
Deklaracja_1;
Deklaracja_2;
...
Deklaracja_n;
}

Każda reguła składa się z selektora i bloku deklaracji. Selektorem jest ta część reguły, która znajduje się bezpośrednio przed otwierającym ją nawiasem. Blok deklaracji jest zbiorem deklaracji ujętym w nawiasy klamrowe.

Każda deklaracja składa się z dwóch członów rozdzielonych od siebie znakiem dwukropka. Pierwszy z nich określa daną właściwość (property), a drugi wartość (value), która zostanie jej przypisana. Po każdej parze "właściwość:wartość", na końcu każdego wersu umieszcza się znak średnika.

Selektor{
właściwość_1:wartość_1;
właściwość_2:wartość_2;
właściwość_3:wartość_3;
......................
właściwość_n:wartość_n;
}

Jeśli podczas analizy dokumentu przeglądarka napotka element o nazwie wyszczególnionej w selektorze wtedy wszystkie dane tekstowe, które się w nim zawierają zostaną sformatowane w oparciu o deklaracje z którymi skojarzona jest nazwa selektora.

W obrębie selektora może znaleźć się lista elementów do których odnosi się dana reguła. Ich nazwy muszą zostać oddzielone od siebie przecinkami.

nazwa_1,nazwa_2,nazwa_3,...,nazwa_n{
.............
deklaracja_n;
.............
}

W przypadku gdy w jakiejś deklaracji stwierdzony zostanie błąd, to przeglądarka ignoruje całą deklarację.

Jeżeli dla któregoś z elementów nie zostanie zdefiniowana reguła wyświetlania, lub przeglądarka wykryje w niej błąd, wtedy element zostanie wyświetlony zgodnie z regułami określonymi dla jego przodka, lub zastosowany zostanie zestaw reguł domyślnych.

 

Bardzo ważnym czynnikiem posiadającym kluczowy wpływ na wygląd tekstów wyświetlanych przez przeglądarki internetowe jest rodzaj czcionek użytych do tego celu. Dzięki nim możliwe jest kierowanie uwagi odbiorcy na kluczowe fragmenty dokumentu, a także zaznaczanie różnic pomiędzy elementami. O rodzaju czcionki, która zostanie ostatecznie użyta decyduje przeglądarka.

Projektant strony internetowej, posługując się regułami CSS można poinstuować ją o swych żądaniach. Do tego celu może wykorzystać właściwość font-family.

Jej poprawną wartością jest łańcuch tekstowy określający nazwę czcionki.
Może jednak dojść do sytuacji, że przeglądarka nie będzie mogła spełnić tych żądań - dana czcionka nie będzie zainstalowana. W takim przypadku skorzysta z czcionek zdefiniowanych jako domyślne.

Czcionki zostały zgrupowane według określonych kryteriów w tzw. rodziny czcionek. Istnieje pięć słów kluczowych określających ich nazwy: serif, sans-serif, cursive, fantasy, monospace. Nazwy te są również prawidłowymi wartościami właściwości font-family.

Jeżeli podczas analizy zbioru css przeglądarka napotka daną nazwę wtedy do wyświetlenia elementu wykorzysta dowolną dostępną czcionkę pochodzącą z danej rodziny.

Dopuszczalne wartości Przykład czcionek Zastosowanie
serif Times New Roman

font-family:"Times New Roman", serif

Przeglądarka spróbuje wykorzystać czcionkę "Times New Roman", gdy będzie niedostępna wtedy wykorzysta dowolną czcionkę z rodziny "serif"

sans-serif Ms Arial, Ms Verdana, Helvetica,Ms Tahoma

font-family: Helvetica,sans-serif

Przeglądarka spróbuje wykorzystać czcionkę "Ms Arial", gdy będzie ona niedostępna wtedy skorzysta z czcionki "Ms Verdana". Gdy ta próba również się nie powiedzie wtedy użyta zostanie czcionka "Ms Tahoma".

cursive Adobe Poetica

font-family:cursive

Użyta zostanie dowolna czcionka z rodziny "cursive"

fantasy ---------------

font-family:fantasy

Użyta zostanie dowolna czcionka z rodziny "fantasy"

monospace Courier, Ms New Courier

font-family: Courier , monospace

Przeglądarka spróbuje wykorzystać czcionkę "Courier", gdy będzie ona niedostępna wtedy wykorzysta dowolną czcionkę z rodziny "monospace"

Właściwość display służy do określenia sposobu wyświetlania poszczególnych elementów. Pozwala na zdefiniowanie czy następujące po sobie elementy wystąpią kolejno jeden za drugim (inline), jeden pod drugim (block) czy zostaną ukryte przed wyświetleniem (none).

Dopuszczalne wartości Opis Zastosowanie
inline Elementy są wyświetlane kolejno - jeden za drugim. Pomiędzy elementami nie wstawiany jest znak nowej linii.

display: inline

block Przed i po każdym elemencie zostanie wstawiony znak nowej linii. display: block
none Element nie jest wyświetlany na ekranie - jego tekst jest ukrywany dla użytkownika display: none

Do regulacji sposobu wyświetlania tekstu względem marginesów służy właściwość text-align. Pozwala ona na określenie czy tekst ma zostać dosunięty do lewej krawędzi (left), wyśrodkowany (center), czy wyrównany do prawego marginesu (right).

Dopuszczalne wartości Opis Zastosowanie
left Tekst zostanie wyrównany do lewego marginesu

text-align: left

center Tekst zostanie wyśrodkowany pomiędzy marginesami text-align: center
right Tekst zostanie wyrównany do prawego marginesu text-align: right

W przypadku gdy zaistnieje konieczność określenia szerokości obszaru zajmowanego przez marginesy można skorzystać z następujących właściwości: margin (równy margines ze wszystkich stron tekstu), margin-top (margines górny), margin-bottom (margines dolny), margin-left (margines lewy) i margin-right (margines prawy). Ich wartości mogą zostać określone w postaci liczbowej lub procentowej. W przypadku wartości procentowej szerokość pola zajmowanego przez marginesy obliczana jest względem wartości zdefiniowanych dla elementów nadrzędnych. Określenie wartości marginesu górnego i dolnego pozwala na regulację odległości w jakiej znajdą się sąsiednie elementy wyświetlane w postaci blokowej. . Wszystkie właściwości dotyczące marginesów zebrane są w poniższej tabeli:

Dopuszczalne wartości Opis Zastosowanie
margin Określa szerokość marginesu ze wszystkich czterech stron tekstu

margin:3em

margin: 3em 3em 3em 3em

Szerokość wszystkich marginesów okalających tekst ustawiana jest na potrojoną wartość wysokości pojedynczego znaku w tekście elementu (przyrostek em)

margin-top Określa szerokość marginesu górnego

margin-top:12 pt

Szerokość marginesu górnego ustawiana jest na wartość 12punktów

margin-bottom Określa szerokość marginesu dolnego

margin-bottom:1 cm

Szerokość marginesu dolnego ustawiana jest na wartość 1 centymetra

margin-left Określa szerokość lewego marginesu

margin-bottom:10 px

Szerokość lewego marginesu ustawiana jest na wartość 10 punktów ekranowych

margin-right Określa szerokość prawego marginesu

margin-bottom:1 in

Szerokość prawego marginesu ustawiana jest na wartość 1 cala

Istnieje możliwość określenia łącznego rozmiaru zajmowanego przez element i jego marginesy. Dokonuje się tego za pomocą dwóch właściwości: height (wysokość ) i width (szerokość). Ich wartości można podawać zarówno w formie metrycznej (wartość liczbowa z dołączonym do niej przyrostkiem określającym jednostkę) jak i procentowej (procent wysokości (szerokości) rodzica). Właściwości te pokazuje poniższe zestawienie:

Dopuszczalne wartości Opis Zastosowanie
height Określa wysokość elementu (wraz z jego marginesami - górnym i dolnym)

height:3 cm

Wysokość elementu wraz z jego marginesami ustawiana jest na 3 cm

width Określa szerokość elementu (wraz z jego marginesami - lewym i prawym)

width: 50%

Szerokość elementu wraz z jego marginesami wynosi 50% szerokości jego rodzica

Do określania koloru czcionki jaką wyświetlony zostanie tekst elementu służy właściwość color. Jako jej wartość można podać symboliczną nazwę koloru (np. red, green, blue) lub jego wartość liczbową zapisaną w postaci szesnastkowej ( należy poprzedzić ją znakiem "#").

Dopuszczalne wartości Opis Zastosowanie
color Określa kolor jakim zostanie wyświetlony dany element

color:red

color:#FF0000

Spowoduje wyświetlenie tekstu elementu w kolorze czerwonym

Istnieje możliwość otoczenia ramkami danego elementu. Do tego celu służy właściwość border-style. Jako jej wartość można podać słowo kluczowe charakteryzujące rodzaj obramowania. Pewne utrudnienie stanowi fakt, że przeglądarki mogą w różny sposób interpretować ustawienia dotyczące obramowania elementów. Zestaw słów kluczowych umieszczony został poniżej:

Dopuszczalne wartości Opis Zastosowanie
none Całkowity brak obramowania

border-style:none

dotted Obramowanie linią kropkowan border-style:dotted
dashed Obramowanie linią kreskowaną border-style:dashed
solid Obramowanie linią ciągłą border-style:solid
double Obramowanie w postaci podwójnej linii ciągłej border-style:double
groove Obramowanie sprawiające wrażenie tekstu rzeźbionego border-style:groove
ridge Opcja przeciwna do groove border-style:ridge
border-style:inset
inset Obramowanie sprawiające wrażenie tekstu umieszczonego na wciśniętym przycisku border-style:inset
outset Obramowanie sprawiające wrażenie tekstu umieszczonego na wyciśniętym przycisku border-style:outset