KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets)

LABORATORIUM 3
WSTĘP DO SIECI TELEINFORMATYCZNYCH
KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets)
1. Wprowadzenie
Selektory należą do kluczowych pojęć, wskazują obiekty, którym przypisujemy jakiś zestaw własności. Selektorem może być
dowolny element języka HTML. Przykładem jest choćby element P, który w języku HTML, jak wiadomo, oznacza akapit,
albo UL, czyli wykaz nieuporządkowany. Jest to tzw. selektor prosty. Ogólna konstrukcja stylu ma następującą postać:
selektor { cecha: wartość }
//
W języku angielskim: selector { property: value }
Selektor pełni zasadniczą rolę określając, jakiemu elementowi przypiszemy pewne własności. Gdybyśmy chcieli przypisać
akapitowi czcionkę Helvetica o rozmiarze 12pt, powinniśmy to zdefiniować następująco:
P { font-family: Helvetica; font-size: 12pt}
Podobnie, gdyby wykaz nieuporządkowany miał być przedstawiony za pomocą czcionki pogrubionej, koloru czerwonego,
definicja powinna wyglądać następująco:
UL { font-weight: bold; color: #FF0000 }
2. Grupowanie selektorów
Te same wartości stylu możemy nadać jednocześnie kilku selektorom, wyliczając ich listę przed deklaracją własności
i wartości. Na przykład, chcąc przypisać taką samą czcionkę i kolor tytułom stopnia pierwszego, drugiego i trzeciego, zamiast
definiować każdy tytuł z osobna, możemy napisać:
H1, H2, H3 {font-family:Helvetica; color:blue}
3. Selektory elementów
Kilka ważnych pojęć:
•
•
•
•
•
•
Drzewo dokumentu (document tree) - hierarchiczny układ elementów HTML zakodowanych w dokumencie; każdy
element ma dokładnie jednego rodzica, oprócz elementu najwyższego w hierarchii.
Dziecko (child) - element będący o jeden szczebel niżej w drzewie w stosunku do danego elementu.
Potomek (descendant) - element będący o jeden lub więcej szczebli niżej w drzewie w stosunku do danego elementu.
Rodzic (parent) - element o jeden szczebel wyżej w drzewie w stosunku do danego elementu.
Przodek (ancestor) - element będący o jeden lub więcej szczebli wyżej w drzewie w stosunku do danego elementu.
Brat (sibling) - element mający tego samego rodzica co inny element; jeśli znajduje się obok niego, to jest to brat
przylegający (adjacent sibling).
Przykładowe drzewo:
a. Selektor prosty Selektor został opisany we wprowadzeniu
b. Selektor uniwersalny Wartości ogólne (uniwersalne) można przypisywać dokumentowi na najwyższym poziomie, czyli
w BODY, ale można także stosować tzw. selektory uniwersalne, oznaczane gwiazdką. Interpretacja: Internet Explorer,
Netscape 6, Opera 5.
* {color:#FF0000; font-weight:bold} // cały tekst (w akapitach, wykazach, tabelach itd.) będzie wyświetlany
jako pogrubiony i w czerwonym kolorze.
*.klasa1 {font-family:Verdana} // wszystkie elementy opatrzone klasą o nazwie klasa1 będą wyświetlane za
pomocą czcionki Verdana.
c. Selektor potomka (descendant selector) Selektor potomka (w CSS1 jest to selektor kontekstowy) pozwala nadawać styl
tym elementom, które mają określonych przodków. Interpretacja: Internet Explorer, Netscape 6, Opera 5. Na przykład:
H1 I {color:red} // jeśli fragment tytułu stopnia pierwszego będzie przedstawiony za pomocą czcionki pochylonej, to
automatycznie zyska on także czerwony kolor.
UL UL LI {color:green} // elementy wykazu na drugim poziomie zagnieżdżenia będą przedstawione w zielonym
kolorze, podczas gdy elementy wykazu pierwszego poziomu będą miały domyślny kolor.
W definicji selektora potomka poszczególne elementy są rozdzielone spacjami. Spacja jest tzw. kombinatorem - w CSS2
rozróżniamy trzy rodzaje kombinatorów: spacja, znak + i znak >. Spacje wokół znaków + i > są opcjonalne.
4. Specjalne selektory HTML
a. Klasy selektorów
W powyższych przykładach posłużyliśmy się prostym selektorem w postaci elementu HTML. Język CSS przewiduje jednak
tworzenie tzw. klas, które pozwalają zróżnicować ten sam element zależnie od pojawiających się okoliczności. Bardzo dobrym
przykładem jest tutaj ponownie element P. W większym dokumencie, składającym się z wielu akapitów, nie wszystkie akapity
muszą mieć taki sam wygląd, np. czcionka Times, o rozmiarze 12 punktów, w kolorze czarnym. Może się przecież zdarzyć, że
niektóre akapity będziemy chcieli wyróżnić pogrubieniem, inne zaznaczyć odmiennym kolorem, a jeszcze inne - mniejszą
czcionką. Te "nietypowe" akapity możemy łatwo zdefiniować za pomocą klas i tylko w odpowiednim miejscu przywoływać
stosowne definicje, podczas gdy gros tekstu będzie wyświetlane za pomocą podstawowego formatowania przewidzianego dla
akapitu. Interpretacja: Internet Explorer, Netscape 6, Opera 5.
Na przykład, definicja stylów akapitów w części nagłówkowej dokumentu może mieć taką postać:
P {font-family: Helvetica; font-size: 10pt}
P.uwagi {font-family: Helvetica; font-size: 10pt; font-weight: bold}
P.istotne {font-family: Times; font-size: 10pt; color: red}
P.przypisy {font-family: Helvetica; font-size: 8pt}
Natomiast w samym tekście będziemy przywoływać klasy za pomocą polecenia
<p class=konkretna_klasa>Akapit</p>
b. Selektor ID
Selektor ID (identyfikatora) został pomyślany jako narzędzie do wskazywania elementu mającego jednoznaczny atrybut ID,
a więc występującego raz jeden w drzewie dokumentu. Identyfikator jest budowany z liter od a do z, cyfr, łączników i kropek,
przy czym na początku musi się znajdować litera. Interpretacja: Internet Explorer, Netscape 6, Opera 5.
#[etykieta ID] {deklaracja stylu}
Przykład:
H1#chapter {letter-spacing: 0.5em}
W tekście podajemy kod <h1 id="chapter">Chapter</h1>
5. Selektory pseudoklas
a. Pseudoklasy odsyłaczowe
CSS2 wyróżnia specjalne selektory dla odsyłaczy, zależnie od ich bieżącego statusu. Interpretacja: Internet Explorer, Netscape
6, Opera 5.
Selektor a:link pozwala nadać formatowanie odsyłaczowi na stronie, na przykład:
a:link {color:yellow; background: blue}
Selektor a:visited nadaje formatowanie odsyłaczowi już odwiedzonemu, na przykład:
a:visited {color:green}
b. Pseudoklasa :hover
Selektor nadaje styl elementowi, gdy urządzenie wskazujące, np. myszka, znajduje się nad elementem, ale nie aktywizuje go.
Jest to szczególnie często wykorzystywane do zmiany wyglądu odsyłacza, co ułatwia czytelnikowi śledzenie, nad jakim
odsyłaczem znajduje się w danym momencie kursor myszki. Interpretacja: Internet Explorer, Netscape 6, Opera 5.
Przykład:
A:hover {background:blue; color:red} // odsyłacz mający domyślnie np. niebieski kolor na białym tle, po
nasunięciu kursora zostanie wyświetlony jako biały na niebieskim tle.
c. Pseudoklasa :active
Selektor :active formatuje we wskazany sposób aktywny w danym momencie element, np. kliknięty odsyłacz. Interpretacja:
Internet Explorer, Netscape 6, Opera 5.
A:active {background:olive; color:black}
Powyższe cztery pseudoklasy powinny być umieszczane w nagłówku w podanej kolejności: link, visited, hover, active.
6. Selektory pseudoelementów
a. Pseudoelement first-line
Selektor pozwala nadać odrębne formatowanie pierwszemu wierszowi bloku, np. akapitu. W deklaracji stylu dla :first-line
można stosować następujące własności: font properties, color properties, background properties, 'word-spacing', 'letterspacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', 'clear'. Interpretacja: Internet Explorer
5.5, Netscape 6, Opera 5. Przykład:
P:first-line {text-transform: uppercase} // to jest akapit, w którym pierwszy wiersz będzie zamieniony na
wersaliki. Zawartość pierwszego wiersza zmienia się przy zmianie wielkości ramki.
b. Pseudoelement first-letter
Selektor :first-letter teoretycznie powinien powodować nadanie odrębnego formatowania pierwszej literze danego bloku, np.
akapitu. Został on pomyślany przede wszystkim jako wygodne narzędzie o charakterze typograficznym, pozwalające zbliżyć
wygląd strony WWW do tradycyjnych rozwiązań spotykanych w publikacjach papierowych, np. rozciągnięcie pierwszej litery
na kilka kolejnych wierszy tekstu. Technika ta (drop-cap) jest znana choćby z popularnych edytorów tekstów. Niestety, żadna
z przeglądarek nie interpretuje tego polecenia. W deklaracji stylu dla :first-letter można stosować następujące własności: font
properties, color properties, background properties, 'text-decoration', 'vertical-align', 'text-transform', 'line-height', margin
properties, padding properties, border properties, 'float', 'text-shadow', and 'clear'. Interpretacja: Internet Explorer 5.5, Netscape
6, Opera 5. Przykład:
P:first-letter { font-size: 200%; float: left } // Pierwsza litera w tym akapicie jest różna od
pozostałych.
KASKADOWOŚĆ I DZIEDZICZENIE
W Cascading Style Sheets istnieją dwa istotne pojęcia, o których należy pamiętać przy konstruowaniu stylów - dziedziczenie
stylów i ich kaskadowy charakter.
Dziedziczenie polega na tym, że elementy niższe w hierarchii drzewa dokumentu dziedziczą formatowanie elementów
leżących wyżej w hierarchii, chyba że wyraźnie nadamy im inne formatowanie. Przykładowo, jeśli ustalimy, że tekst w jakiejś
tabeli ma być przedstawiony za pomocą pogrubionej czcionki Helvetica, to wszystkie komórki tabeli będą w ten sposób
formatowane, gdyż komórka <TD> leży niżej w hierarchii (drzewie dokumentu) niż tabela <TABLE>. Jeśli natomiast nadamy
odrębne formatowanie wybranej komórce (utworzymy wyjątek), to oczywiście wygląd czcionki w tej komórce zmieni się,
gdyż bezpośrednie zdefiniowanie czcionki w wybranym miejscu ma pierwszeństwo przed ogólniejszym formatowaniem tabeli
(na wyższym szczeblu). Taka jest właśnie ogólna zasada - jeśli wyraźnie nie zdefiniujemy formatowania dla jakiegoś
elementu, dziedziczy on własności po swoich "przodkach", czyli elementach wyższych w hierarchii.
Niestety, zdarzają się odstępstwa interpretacyjne od tej zasady - przykładowo, zdefiniowanie czcionki w BODY (a więc na
szczycie hierarchii) nie wpływa na postać czcionki w komórkach tabeli, jeśli stronę oglądamy w Netscape Communicatorze.
Należy się liczyć z tego typu uchybieniami i sprawdzać wygląd strony przynajmniej w dwóch przeglądarkach. No i czekać na
pełną implementację CSS2.
Zasada dziedziczenia stylów jest bardzo wygodna, gdyż oszczędza autorowi strony czaso- i pracochłonnego wprowadzania
mnóstwa informacji dla każdego elementu z osobna. Możemy na przykład ustalić pewne ogólne cechy dla całej strony, a dodać
nieco konkretyzującej informacji dla niższych w hierarchii akapitów czy wykazów - połączą one wtedy w sobie "dziedziczoną"
informację z wyższego szczebla i konkretyzującą informację ich samych. Dziedziczenie jest zresztą bardzo intuicyjnym i łatwo
zrozumiałym pojęciem, jeśli ma się w sobie nieco kultury logicznej.
Kaskadowość, od której wzięły nazwę style, polega z kolei na ustaleniu hierarchii źródeł stylów. Style mogą być
wprowadzane w nagłówku strony (HEAD), bezpośrednio w ciele dokumentu, mogą też pochodzić z zewnętrznych źródeł, np.
arkuszy wzorcowych. Konieczne jest więc ustalenie hierarchii ważności w przypadku konfliktu stylów. Może się bowiem
zdarzyć, że zewnętrzny arkusz definiuje akapit za pomocą czcionki Times 12pt, w nagłówku strony akapit jest reprezentowany
przez czcionkę Helvetica 11pt, a w samym dokumencie pojawia się akapit zdefiniowany za pomocą czcionki Times 11pt.
Problem więc w tym, która definicja ma pierwszeństwo i jaka jest ich hierarchia.
Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku
dokumentu, to zaś może być modyfikowane przez style zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają
zatem style zdefiniowane "bliżej" konkretnego elementu. Przeglądarka sprawdza więc najpierw, czy istnieją jakieś arkusze
zewnętrzne i stosownie do ich definicji formatuje stronę. Następnie sprawdza, jakie są definicje stylów w nagłówku strony i
modyfikuje wygląd zgodnie z ich ustaleniami. Następnie sprawdza style w samym dokumencie i ponownie modyfikuje
fizyczną postać strony. To oczywiście model działania, ale pokazuje on, jak działa taka kaskada stylów. Między stylami z
różnych źródeł nie muszą zresztą wcale występować żadne konflikty - wszystkie style uzupełnią się, tworząc jeden wielki,
"wirtualny" styl.
Ta zasada pozwala też, co szczególnie ważne, wygodnie manipulować postacią całych kompleksów stron. Można na przykład
ustalić pewne ogólne cechy całej witryny firmy i zawrzeć je w zewnętrznym arkuszu stylów. Następnie można zbudować
odrębne arkusze dla wydziałów firmy i zawrzeć w nich bardziej konkretyzującą informację. Po ustaleniu hierarchii arkuszy
można łatwo definiować style dla dziesiątek i setek stron, a jedna drobna zmiana w arkuszu powoduje zmiany we wszystkich
objętych nimi dokumentach.
Jak z tego widać, kaskadowość i dziedziczenie uzupełniają się, tworząc zwarty system ogólnych zasad sterujących działaniem
stylów. Kaskadowość ustala hierarchię różnych źródeł stylów, a dziedziczenie wpływa na wygląd strony z punktu widzenia
hierarchii elementów w danym dokumencie (drzewie dokumentu).
WSTAWIANIE STYLÓW
Style mogą być umieszczane w dokumencie na kilka sposobów:
ƒ Kody formatujące są umieszczane w środku tekstu (styl lokalny, in-line style) i dotyczą wybranego znacznika
dokumentu.
ƒ Kody formatujące są umieszczane w środku tekstu, obejmują większy fragment dokumentu i nie są związane z
wybranymi znacznikami (rozciąganie stylu i wydzielone bloki).
ƒ Kody formatujące są umieszczane na początku strony, w nagłówku HEAD, i oddziałują na cały dokument
(zagnieżdżanie stylu).
ƒ Kody formatujące są umieszczane na wzorcowych stronach (lokalnie lub na serwerze), a w dokumentach wstawiamy
odpowiednie odwołania do tych stron, co powoduje automatyczne zmiany sposobu formatowania. Są to odwołania do
tzw. stylów zewnętrznych.
ƒ Kody formatujące są importowane z innej strony za pomocą polecenia @import.
1. Styl lokalny (in-line)
Styl lokalny pozwala nadawać atrybuty wybranym, pojedynczym elementom strony. Typowym zastosowaniem jest nadanie
określonych atrybutów akapitowi.
<p style="definicja stylu">Treść akapitu</p>
2. Rozciąganie stylu
Rozciąganie stylu polega na objęciu stylem pewnego bloku w dokumencie HTML. Posługujemy się tutaj poleceniem <SPAN>
</SPAN>.
Na przykład:
<span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red">To
jest akapit objęty poleceniem SPAN</span>
Poleceniem SPAN możemy obejmować łącznie także niejednorodne elementy, np. akapit i wykaz.
<span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red">
<p>To jest akapit objęty poleceniem SPAN</p>
<ul>
<li>pierwszy punkt wykazu
<li>drugi punkt wykazu
<li>trzeci punkt wykazu
</ul>
</span>
W polecenu SPAN możemy wykorzystać także klasy, jeśli są zdefiniowane w nagłówku dokumentu (arkusz zagnieżdżony)
czy jakimś zewnętrznym arkuszu. Gdybyśmy wstawili w nagłówku dokumentu, w definicji stylów, polecenie (bez polskich
znaków, gdyż Navigator wykazuje tutaj błąd)
.BardzoWazne {font-family: Helvetica; font-size: 14pt; font-weight: bold; color:
lime}
możemy je wykorzystać w definicji SPAN. Na przykład:
<span class=BardzoWazne>To jest fragment dokumentu, formatowany zgodnie z definicją
klasy BardzoWazne.</span>
Inny przykład, w którym kilka pierwszych wyrazów akapitu jest wyświetlanych za pomocą małych kapitalików. Korzystamy
tutaj z definicji:
.PierwszeWyrazy {font-variant: small-caps}
którą obejmujemy pierwsze trzy wyrazy
<span class=PierwszeWyrazy>.
3. Wydzielone bloki
Style możemy nadawać elementom dokumentu, posługując się bardzo elastycznym poleceniem bloku. Na sposób ten warto
zwrócić szczególną uwagę, gdyż jest wygodny, a doświadczenia z dynamicznym HTML, wprowadzanym intensywnie od
momentu pojawienia się Internet Explorera 4, wskazują, że jest to jedno z podstawowych narzędzi (dynamiczny HTML jest
jednym z kluczowych elementów kanałów informacyjnych).
Bloki wydzielamy za pomocą polecenia <DIV> </DIV>. Fragment dokumentu objęty blokiem możemy w swobodny sposób
formatować za pomocą stylów. Możemy sobie wyobrazić, że w części nagłówkowej dokumentu znajdą się klasy tytułów czy
akapitów, natomiast w bloku utworzonym doraźnie w dokumencie zdefiniujemy czcionki, barwy itp., a także powołamy się na
klasy z nagłówka. Przykład bloku ze stylami zdefiniowanymi bezpośrednio w bloku:
<DIV style=""font-family: verdana, arial; color: olive; position: relative; left:
300; width: 550">
Fragment dokumentu objęty blokiem (tytuł, akapit i wykaz) </DIV>
Przykład bloku ze stylami zdefiniowanymi w części nagłówkowej dokumentu. Zakładamy, że w nagłówku (albo w arkuszu
dołączanym lub importowanym) utworzyliśmy klasę o nazwie notatka.
.notatka
{font-family: verdana, arial; font-weight: bold; color: blue; margin-left: 10%;
margin-right: 10%}
A teraz skorzystamy z tego stylu, wydzielając jakiś fragment dokumentu blokiem i przypisując mu klasę notatka:
<div class=notatka> fragment dokumentu objęty blokiem </div>
Wydzielane bloki są podobne w działaniu do SPAN, ale obejmują szersze fragmenty dokumentu. Mogą zawierać w sobie
tytuły, akapity, wykazy, a nawet inne bloki. Dzięki temu nadają się do wydzielania większych, logicznych fragmentów
dokumentów i nadawania im specyficznego formatowania za pomocą stylów.
4. Zagnieżdżanie arkusza stylów
Bardzo często spotykanym sposobem definiowania stylów na stronie jest zagnieżdżanie definicji w nagłówkowej części
dokumentu. W tym celu wystarczy wpisać odpowiedni blok informacji między poleceniami <HEAD> i </HEAD>.
Przykładowo, niniejsza strona zawiera krótki zestaw stylów, zdefiniowany następująco w części nagłówkowej (w kolorze
niebieskim):
<head>
<STYLE TYPE="text/css">
<!--BODY {margin-left: 1cm; margin-right: 1cm}
P {font-size: 10pt; font-family: Arial, Helvetica; font-weight: normal}-->
</STYLE>
</head>
5. Dołączanie do zewnętrznego arkusza stylów
Każdą stronę można dołączyć do zewnętrznego arkusza stylów, w którym są zdefiniowane własności różnych elementów interpretują to polecenie Internet Explorer 4 i 5, Netscape 6 i Opera 5. Zewnętrzny arkusz stylu zapisywany jest w postaci
pliku z rozszerzeniem .css, a jego użycie jest sygnalizowane poprzez zapis w źródle HTML w następujący sposób:
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<LINK REL=stylesheet HREF="../style/toolstyl.css" TYPE="text/css">
</head>
Wiersz zawierający odniesienie do arkusza jest umieszczany w ramach części nagłówkowej (HEAD) i ma ściśle określoną
składnię. HREF wskazuje ścieżkę do katalogu, w którym jest umieszczony arkusz. Może on być, oczywiście, ulokowany w
tym samym folderze, co strony zawierające odniesienie do niego. Wszystkie definicje zewnętrznego arkusza stylów są
automatycznie przyjmowane przez elementy danej strony.
Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy
objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron,
które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów).
6. Import zewnętrznego arkusza stylów
Każdą stronę można opisać za pomocą importowanego arkusza stylów. Funkcję tę realizują Internet Explorer 4 i 5, Netscape 6
i Opera 5. Import jest definiowany za pomocą następującego polecenia, umieszczanego w ramach HEAD:
<style>
<!-- @import url("adres arkusza");-->
</style>
PRZYKŁAD ARKUSZA STYLU
Zapis z pliku *.css
body
{font-family: Verdana,Arial,sans-serif; font-size: 10pt; overflow: auto; }
a:link
{ color:#FF0000; }
a:visited { color:#A00000; }
a:active { color:#E00000; }
p { font-family: Verdana,Arial,sans-serif; text-align:center; }
h1 {font-family: Verdana,Arial,sans-serif; font-size:22pt; color:#800000; text-align:center;}
h2 {font-family: Verdana,Arial,sans-serif; font-size:13pt; font-weight:bold; color:#900000; textalign:center;}
h3 {font-family: Verdana,Arial,sans-serif; font-size:12pt; font-weight:bold; color:#A00000; textalign:center; }
table
{ margin-left: auto; margin-right: auto; text-align:center; }
table.picinfo
{ margin-left: auto; margin-right: auto; width:400pt; }
table.picinfo td { color:#f0f0f0; text-align:left; }
td {font-family: Verdana,Arial,sans-serif; font-size: 10pt; vertical-align:top; text-align:center; }
td.fullpic {font-family: Verdana,Arial,sans-serif; font-size: 10pt; vertical-align:middle; textalign:center; }
td.tdvmiddle { vertical-align:middle; }
div.std
{ font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10pt; text-align:center; }
span.chapterpictitle
span.chapterpicdesc
span.chapterpicdate
span.chapterlinktitle
span.footer
span.picfulltitle
span.picfulldesc
span.picfulldate
{
{
{
{
{
{
{
{
color:#332222; font-size: 8pt; text-align:center; }
color:#777777; font-size: 8pt; text-align:center; }
color:#808000; font-size:7pt; }
color:#441111; font-size: 8pt; text-align:center; }
color:#7A7A7A; font-size:7pt; }
color:#B0B0B0; font-size:11pt; }
color:gray; font-size:12pt; }
color:silver; font-size:7pt; }