LABORATORIUM 2 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. 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} 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 możemy napisać: H1, H2, H3 {font-family: Helvetica; color: blue} 3. Selektory elementów Selektor prosty Selektor został opisany we wprowadzeniu 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 niwersalne, oznaczane gwiazdką. * {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, 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 >. 4. Specjalne selektory HTML Klasy selektorów Język CSS przewiduje 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. 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. 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= klasa >Akapit</p> Selektor identyfikatora 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 dokumencie HTML. Identyfikator jest budowany z liter od a do z, cyfr, łączników i kropek, przy czym na początku musi się znajdować litera. #etykietaid {deklaracja stylu} Przykład: h1#chapter {letter-spacing: 0.5em} W tekście podajemy kod: <h1 id="chapter">chapter</h1> Selektory pseudoklas Pseudoklasy odsyłaczowe CSS2 wyróżnia specjalne selektory dla odsyłaczy, zależnie od ich bieżącego statusu: a:link, a:visited, a:active, np.: a:link {color: yellow; background: blue} a:visited {color: green}
Pseudoklasa :hover Selektor nadaje styl elementowi, gdy urządzenie wskazujące, np. myszka, znajduje się nad elementem, ale nie aktywizuje go. 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. Powyższe cztery pseudoklasy powinny być umieszczane w nagłówku w podanej kolejności: link, visited, hover, active. Pseudoklasa :focus Selektor nadaje styl elementowi, który jest aktualnie używany (podobnie jak :active dla odsyłaczy). Przykład: input:focus {color: red} Pseudoklasa :first-child Selektor określa styl elementu będącego pierwszym potomkiem innego elementu, np.: p em:first-child {font-weight:bold} // pierwszy element akapitu objęty znacznikami <em> będzie wyświetlony czcionką pogrubioną. Selektory pseudoelementów Pseudoelement :first-line Selektor pozwala nadać odrębne formatowanie pierwszemu wierszowi bloku, np. akapitu: p:first-line {text-transform: uppercase} // to jest akapit, w którym pierwszy wiersz będzie zamieniony na wersaliki. Pseudoelement :first-letter Selektor :first-letter teoretycznie powinien powodować nadanie odrębnego formatowania pierwszej literze danego bloku, np. akapitu: p:first-letter {font-size: 200%; float: left } // Pierwsza litera w tym akapicie jest różna od pozostałych. Pseudoelement :before Pseudoelement :before definiuje pewną zawartość przed elementem, np: h1:before {content: url(beep.wav)} // Przed każdym pojawieniem się elementu h1 odtworzony zostanie dźwięk z pliku beep.wav Pseudoelement :after Pseudoelement :after definuje pewną zawartość za elementem, np: h1:after {content: url(beep.wav)} // Po każdym pojawieniu się elementu h1 odtworzony zostanie dźwięk z pliku beep.wav
5. Wstawiane stylów Style mogą być umieszczane w dokumencie na kilka sposobów: 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> Rozciąganie stylu Rozciąganie stylu polega na objęciu stylem pewnego bloku w dokumencie HTML. Posługujemy się tutaj poleceniem <SPAN></SPAN>, np.: <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. 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 (DHTML) 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. 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> 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. 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>
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. 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/styl.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. 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). Import zewnętrznego arkusza stylów Każdą stronę można opisać za pomocą importowanego arkusza stylów. Import odbywa się za pomocą następującego polecenia, umieszczanego w ramach HEAD: <style> <!-- @import url("adres arkusza");--> </style> 6. 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. Dokument HTML charakteryzuje się hierarchicznym układem elementów zakodowanych w dokumencie, który można przedstawić w postaci drzewa (DOM Document Object Model). 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). Zdarzają się odstępstwa interpretacyjne od tej zasady w niektórych przeglądarkach - przykładowo, zdefiniowanie czcionki w BODY (a więc na szczycie hierarchii) nie wpływa na postać czcionki w komórkach tabeli. 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.
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. 7. 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; text-align: center} h3 {font-family: Verdana,Arial,sans-serif; font-size:12pt; font-weight:bold; color:#a00000; text-align: 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; verticalalign:top; text-align:center} td.fullpic {font-family: Verdana,Arial,sans-serif; font-size: 10pt; verticalalign:middle; text-align: center} td.tdvmiddle {vertical-align:middle} div.std {font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10pt; text-align:center} span.chapterpictitle {color:#332222; font-size: 8pt; text-align:center} span.chapterpicdesc {color:#777777; font-size: 8pt; text-align:center} span.chapterpicdate {color:#808000; font-size:7pt} span.chapterlinktitle {color:#441111; font-size: 8pt; text-align:center} span.footer {color:#7a7a7a; font-size:7pt} span.picfulltitle {color:#b0b0b0; font-size:11pt} span.picfulldesc {color: gray; font-size:12pt} span.picfulldate {color: silver; font-size:7pt}