Tworzenie stron internetowych CSS – Kaskadowe Arkusze Stylów „Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro” Św. Izydor z Sewilli Tomasz Piłka
Kaskadowe Arkusze Stylów (ang. Cascading Style Sheets) mechanizm pozwalający przypisywać style elementom definiowanym przy pomocy języków opisu dokumentu (przede wszystkim (X)HTML lub XML), opisuje sposób prezentacji dokumentu przez przeglądarkę, zwiększenie przejrzystości kodu HTML poprzez oddzielenie struktury i treści dokumentu od opisów formatowania poszczególnych elementów, style pozwalają kontrolować takie atrybuty jak: rodzaj, rozmiar i kolor czcionki, wyrównywanie, wielkość marginesów, głębokość wcięcia akapitu, kolor i grafikę tła, odstępy między elementami, wzajemne położenie elementu i otaczającego go tekstu.
Krótka historia pierwotnie HTML jako języki wyłącznie do opisu struktury dokumentu, potrzeba ożywienia wyglądu dokumentów HTML, dodanie nowych znaczników pozwalających kontrolować kolory, typografię, dodawać nowe media (np. obrazki), powstanie znaczników działających tylko w konkretniej grupie przeglądarek, konieczność wysyłania do klienta różnych wersji tej samej witryny w zależności od użytej przeglądarki, 1994 - powstanie CHSS (Cascading HTML Style Sheets) - Håkon Wium Lie, możliwość stosowania stylów do innych języków podobnych do HTML, stąd nowa nazwa – CSS, 1996 – wydanie oficjalnej dokumentacji: „CSS, Kaskadowe arkusze stylów, poziom 1” przez organizację World Wide Web Consortium, która przejęła prace nad CSS, aktualnie dostępne są następujące wersje: - CSS1, CSS2, CSS2.1, CSS3.
Wstawianie CSS do HTML sposoby umieszczania styli CSS w dokumencie HTML: styl lokalny, styl zagnieżdżony, wydzielanie bloków, CSS z pliku zewnętrznego, importowanie arkusza z innej strony. oznaczenia przyjęte w prezentacji: <p style="text-align: center;"> tekst </p> tekst zwykły, znaczniki HTML, elementy CSS.
Styl lokalny bezpośrednie wstawienie stylu w obrębie danego znacznika, formatowany jest jedynie znacznik, w którym styl został umieszczony, pozostałe znaczniki (nawet tego samego typu) pozostają bez zmian, Przykład: <p style="text-align: center;"> tekst </p>
Styl osadzony definicję stylu umieszcza się w nagłówku dokumentu HTML (<head>), w otwierającym tagu <style> należy dodać jego typ, czyli type="text/css" - niektóre przeglądarki mogą niepoprawnie wyświetlić stronę jeżeli nie dodamy tego elementu, samą definicję stylu (pomiędzy <style> a </style>) umieszczamy jako komentarz (<!-- -->), aby ukryć definicję stylu przed przeglądarkami, które nie obsługują CSS.
Styl osadzony – przykład <head> <style type="text/css"> <!-- body {scrollbar-face-color: black;} p {text-align: center; font-family: "Tahoma";} h1 {color: red;} --> </style> </head>
Wydzielanie bloków wydzielanie formatowanych bloków za pomocą znaczników: <div> </div> i <span> </span>, następny krok można wykonać na dwa sposoby: definicja stylu umieszczona bezpośrednio w wydzielonym bloku (styl lokalny), definicja stylu umieszczona w nagłówku dokumentu (styl zagnieżdżony), w przypadku pierwszym zasada taka jak przy stylu lokalnym, z tą różnicą, że w typowym stylu lokalnym formatowany był konkretny znacznik, a tutaj formatowany jest cały blok (może w nim być więcej znaczników), w przypadku drugim, definiując styl, należy wskazać który blok definiujemy, a następnie zdefiniować dla niego styl (przykład na następnym slajdzie), różnica pomiędzy <div> i <span>: <div> może zawierać w sobie więcej elementów niż <span>, mogą w nim być umieszczone nawet następne bloki.
Wydzielanie bloków – przykład definicja stylu „blok1” w nagłówku dokumentu: #blok1 {font-family: verdana; font-size: 14px;} #blok1 - niepowtarzalna nazwa (id) konkretnego bloku w dokumencie, wydzielenie bloku: <div id="blok1"> tekst, grafika itp. </div> tym sposobem przypisujemy temu blokowi parametr id, dla którego styl został zdefiniowany w nagłówku dokumentu. Wszystkie elementy, które znajdą się w tym bloku (tekst, grafika itp.), zostaną sformatowane zgodnie ze stylem określonym w #blok1.
CSS z pliku zewnętrznego dołączenie do strony zewnętrznego arkusza stylów (plik z rozszerzeniem .css), w którym definiujemy poszczególne style, przykład takiego pliku na następnym slajdzie, powiązanie każdej ze stron naszej witryny z powyższym arkuszem stylów poprzez dopisanie w ich nagłówkach znacznika: <link rel=”stylesheet” href="nazwa_pliku.css" type="text/css">
CSS z pliku zewnętrznego – przykład Przykład zewnętrznego arkusza stylów (np. plik styl.css): <html> <style type="text/css"> <!-- hr {color: darkgoldenrod; width: 80%;} h1 {font-family: "Tahoma"; font-size: 20pt;} p {text-align: justify; font-size: 10pt;} .maly_tekst {font-size: 5pt;} li {text-align: justify; font-size: 10pt;} a {color: goldenrod;} .img_oplyw {float: left} --> </style> </html>
Kaskadowość stylów hierarchia źródeł stylów, od lokalizacji stylu zależy zasięg jego oddziaływania, rodzaje arkuszy stylów zaczynając od najbardziej ogólnych: → styl importowany z zewnątrz (z innej witryny), → styl z pliku zewnętrznego, → styl osadzony, → styl lokalny, kaskadowość stylów objawia się w przypadku korzystania z przynajmniej dwóch z wymienionych wcześniej rodzajów arkuszy, gdy jakiś element znajduje się w zasięgu więcej niż jednego stylu, obowiązuje zasada, że styl znajdujący się "bliżej" formatowanego elementu znosi działanie stylu "odległego".
Budowanie stylu ogólna postać arkusza stylu: selektor {cecha: wartość; cecha: wartość;} dowolność zapisu: selektor { cecha: wartość; cecha: wartość; cecha: wartość; } selektor – element, dla którego chcemy zdefiniować styl, cecha – to, co chcemy określić dla danego elementu (np. kolor), wartość – np. 12px, blue, small, bold.
Budowanie stylu – przykłady chcemy ustalić kolor czcionki dla zwykłego akapitu (<p>), p {color: green;} lub P {COLOR: #00FF00;} chcemy ustalić szerokość i kolor linii poziomej (<hr>), hr {width: 100px; color: silver;} chcemy wyjustować listy wypunktowane (<li>), li {text-align: justify;}
Selektor – class Przykład - class jako selektor: <HTML> <HEAD> <TITLE>Tytuł strony</TITLE> <STYLE TYPE="text/css"> H1.naglowek1 {color: #00FF00;} </STYLE> </HEAD> <BODY> <H1 CLASS=naglowek1>Rozdział 1</H1> </BODY> </HTML>
Selektor – class c.d. H1.naglowek1 {color: #00FF00;} można użyć tylko dla znaczników <H1> prawidłowo: <H1 CLASS=naglowek1>Rozdział 1</H1> nieprawidłowo: <P CLASS=naglowek1>Tekst</P> .naglowek1 {color: #00FF00;} można użyć dla dowolnych znaczników prawidłowo: <P CLASS=naglowek1>Tekst</P> H1 {color: #00FF00;} domyślnie stosowany dla każdego znaczników <H1> prawidłowo: <H1>Rozdział 1</H1> prawidłowo: <H1 CLASS=naglowek1>Tekst</H1> tutaj zostanie zasłonięty przez styl naglowek1 (bardziej szczegółowy)
Przykład … body {background: #0000FF; color:#FFFF00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} .lewa {text-align: left} .prawa {text-align: right} <h2>Czerwony nagłówek na białym tle</h2> <p class=lewa> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. </p> <p class=prawa> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. <h2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p class=left>
Selektor – id definicje stylu: #tytul_3 {font-size: 16;} H1#tytul_3 {font-size: 16;} formatowany element (w <body>): <P ID=tytul3>Jakiś tytuł</P> analogia do selektora class: przy definicji pierwszej takie formatowanie jest poprawne, przy definicji drugiej jest niepoprawne, ponieważ ten styl można zastosować tylko do znacznika <H1>.
Rozciąganie stylu Rozciąganie stylu polega na objęciu stylem pewnej sekcji dokumentu HTML. Służy do tego para znaczników <span> </span> Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu <span style=”definicja_stylu”> </span> .kolorowa {font-size: 24pt; color: #FFFFFF} <span class="kolorowa"> Przykład: <h2>Ala <span style="font-variant: small-caps; color:blue; text-decoration: underline">ma</span> kota</h2>
Cechy – tekst font-family – krój czcionki nazwa czcionki np. verdana, Arial jeżeli jest wielowyrazowa, to musi zostać ujęta w cudzysłów np. ‘Arial CE‘ font-size – wielkość czcionki w jednostkach np. 11px w procentach nazwa: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller font-weight – grubość czcionki nazwa: normal, bold, bolder, lighter liczba: 100-900 font-style – określa czy czcionka jest pisana kursywą czy nie nazwa: normal, italic, oblique font-variant – kapitaliki nazwa: normal, small-caps
test-decoration – dekoracja tekstu color – kolor tekstu nazwa angielska np. white wartość szesnastkowa np. #FFFFFF test-decoration – dekoracja tekstu nazwa: none, underline, overline, line-through, blink text-transform – transformacja tekstu nazwa: none, capitalize, uppercase, lowercase text-align – wyrównanie tekstu nazwa: left, center, right, justify text-indent – wcięcie tekstu dowolna wartość procentowa wartość wyrażona w jednostkach np. 10pt line-height, letter-spacing, word-spacing – odstępy między: wierszami, literami, wyrazami nazwa: normal vertical-align – pionowe wyrównanie tekstu nazwa: baseline, sub, super, top, text-top, middle, bottom, text-bottom
Cechy – tło background-color – kolor tła transparent (przezroczystość), nazwa angielska, wartość szesnastkowa background-image – rysunek w tle none lub url (nazwa_pliku) background-attachment – przewijanie tła wraz z tekstem scroll, fixed background-repeat – powtarzanie się tła repeat, no-repeat, repeat-x, repeat-y background-position – pozycja tła left, right, center, bottom, top
Pozostałe cechy Oprócz wyżej wymienionych elementów można formatować jeszcze wiele innych (wykazy, marginesy, tabele, opływanie rysunku tekstem, warstwy, pozycjonowanie itp.). Działanie jest analogiczne, a wszystkich możliwości jest bardzo dużo. Pełny opis możliwości CSS znajduje się w oficjalnej specyfikacji na stronie World Wibe Web Consortium, pod adresem: http://www.w3.org/Style/CSS/
Przykład – zmiana wyglądu tabeli w HTML przykładowa prosta strona stworzona za pomocą HTML; index.html: <HTML> <HEAD><TITLE>CSS</TITLE></HEAD> <BODY> <CENTER><H2>obramowanie i paski przewijania</H2><CENTER> <TABLE BORDER=1 BGCOLOR=yellow ALIGN=center> <TR ALIGN=center> <TD WIDTH=200><FONT FACE=Arial COLOR=green SIZE=3> ELEMENT</FONT></TD> <TD WIDTH=150><FONT FACE=Arial COLOR=green SIZE=3> OPIS</FONT></TD> <TD WIDTH=250><FONT FACE=Arial COLOR=green SIZE=3> MOŻLIWE WARTOSCI</FONT></TD> </TR>
<TR ALIGN=center> <TD WIDTH=200><FONT FACE=Arial COLOR=green SIZE=3> border-width</FONT></TD> <TD WIDTH=150><FONT FACE=Arial COLOR=green SIZE=3> grubosc obramowania</FONT></TD> <TD WIDTH=250><FONT FACE=Arial COLOR=green SIZE=3> w punktach (pt), procentach lub pikselach</FONT></TD> </TR> [...] scrollbar-darkshadow-color</FONT></TD> wszystkie dostępne kolory HTML</FONT></TD> </TABLE> </BODY> </HTML>
w przeglądarce powyższa strona wygląda następująco (Firefox 2.0.0.7): modyfikacja wyglądu tabeli – np. zmiana czcionki w komórkach – wymaga zmiany w każdej komórce z osobna; biorąc pod uwagę, że jest 26 komórek zawierających tekst – należy 26 razy wpisać/skopiować to samo, np. w miejsce: <FONT FACE=Arial COLOR=green SIZE=3> wkleić: <FONT FACE=Arial COLOR=darkgreen SIZE=3> problem się potęguje, gdy dopiero szukamy pasującego układu kolorów i w tym celu sprawdzamy różne możliwości
Przykład c. d. – teraz w HTML + CSS tym razem stosujemy CSS; index.html: <HTML> <HEAD><TITLE>CSS</TITLE> <LINK REL=stylesheet TYPE="text/css" HREF="style.css"> </HEAD> <BODY> <H2>obramowanie i paski przewijania</H2> <TABLE BORDER=1 BGCOLOR=yellow ALIGN=center> <TR ALIGN=center> <TD WIDTH=200>ELEMENT</TD> <TD WIDTH=150>OPIS</TD> <TD WIDTH=250>MOŻLIWE WART.</TD> </TR> [...] </TABLE> </BODY> </HTML>
<STYLE TYPE="text/css"> <!-- H2 { FONT-FAMILY: Arial; style.css: <HTML> <STYLE TYPE="text/css"> <!-- H2 { FONT-FAMILY: Arial; FONT-SIZE: 20; COLOR: darkgreen; TEXT-ALIGN: center; LETTER-SPACING: 0; } td { BORDER WIDTH: 1pt; BORDER-STYLE: dashed; BORDER-COLOR: darkgreen; table { BORDER-WIDTH: thick; BORDER-STYLE: groove; FONT-FAMILY: Arial; FONT-SIZE: 14; FONT-WEIGHT: 200; COLOR: #333300; TEXT-ALIGN: center; LETTER-SPACING: 1; } --> </STYLE> </HTML>
nowa strona wygląda następująco: zmiana czcionki w komórkach wymaga zmiany jedynie w pliku style.css, w opisie formatowania tabeli, np. zamiast: FONT-SIZE: 14; piszemy: FONT-SIZE: 12; i wszystkie komórki tabeli zostaną zaktualizowane dodając do tego więcej możliwości formatowania w CSS niż w HTML, użycie CSS jest tutaj bardzo korzystne
Podsumowanie zalety stosowania CSS w HTML: przydatne linki: o wiele krótsze wprowadzanie zmian w formatowaniu dokumentu HTML, a co za tym również idzie – mniej możliwości popełnienia błędu, więcej możliwości formatowania, oddzielenie struktury dokumentu (HTML) od opisów formatowania (CSS). przydatne linki: specyfikacja na oficjalnej stronie W3C: http://www.w3.org/Style/CSS/ kursy, artykuły: http://www.kurshtml.boo.pl/ http://www.webinside.pl/ http://www.webhelp.pl/
Dziękuję za uwagę W prezentacji wykorzystano materiały Politechniki Krakowskiej Wydział Inżynierii Elektrycznej i Komputerowej: Tomasz Jasik, Grzegorz Sroka