Tworzenie stron internetowych CSS Kaskadowe Arkusze Stylw Ucz
- Slides: 31
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) o o 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: n n o rodzaj, rozmiar i kolor czcionki, wyrównywanie, wielkość marginesów, głębokość wcięcia akapitu, kolor i grafikę tła, n n odstępy między elementami, wzajemne położenie elementu i otaczającego go tekstu.
Krótka historia o o o o 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: - CSS 1, CSS 2. 1, CSS 3.
Wstawianie CSS do HTML o sposoby umieszczania styli CSS w dokumencie HTML: n n n o 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> n tekst zwykły, n znaczniki HTML, n elementy CSS.
Styl lokalny o o 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 o o o 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 Przykład: <head> <style type="text/css"> <!-body {scrollbar-face-color: black; } p {text-align: center; font-family: "Tahoma"; } h 1 {color: red; } --> </style> </head>
Wydzielanie bloków o o wydzielanie formatowanych bloków za pomocą znaczników: <div> </div> i <span> </span>, następny krok można wykonać na dwa sposoby: n n o o o 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 Przykład: o definicja stylu „blok 1” w nagłówku dokumentu: #blok 1 {font-family: verdana; font-size: 14 px; } #blok 1 - niepowtarzalna nazwa (id) konkretnego bloku w dokumencie, o o wydzielenie bloku: <div id="blok 1"> 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 #blok 1.
CSS z pliku zewnętrznego o o 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%; } h 1 {font-family: "Tahoma"; font-size: 20 pt; } p {text-align: justify; font-size: 10 pt; }. maly_tekst {font-size: 5 pt; } li {text-align: justify; font-size: 10 pt; } a {color: goldenrod; }. img_oplyw {float: left} --> </style> </html>
Kaskadowość stylów o o 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 o o ogólna postać arkusza stylu: selektor {cecha: wartość; } dowolność zapisu: selektor { cecha: wartość; } selektor – element, dla którego chcemy zdefiniować styl, cecha – to, co chcemy określić dla danego elementu (np. kolor), wartość – np. 12 px, blue, small, bold.
Budowanie stylu – przykłady Przykład: chcemy ustalić kolor czcionki dla zwykłego akapitu (<p>), p {color: green; } lub P {COLOR: #00 FF 00; } Przykład: chcemy ustalić szerokość i kolor linii poziomej (<hr>), hr {width: 100 px; color: silver; } Przykład: chcemy wyjustować listy wypunktowane (<li>), li {text-align: justify; }
Selektor – class o Przykład - class jako selektor: <HTML> <HEAD> <TITLE>Tytuł strony</TITLE> <STYLE TYPE="text/css"> H 1. naglowek 1 {color: #00 FF 00; } </STYLE> </HEAD> <BODY> <H 1 CLASS=naglowek 1>Rozdział 1</H 1> </BODY> </HTML>
Selektor – class c. d. o o o H 1. naglowek 1 {color: #00 FF 00; } można użyć tylko dla znaczników <H 1> prawidłowo: <H 1 CLASS=naglowek 1>Rozdział 1</H 1> nieprawidłowo: <P CLASS=naglowek 1>Tekst</P>. naglowek 1 {color: #00 FF 00; } można użyć dla dowolnych znaczników prawidłowo: <H 1 CLASS=naglowek 1>Rozdział 1</H 1> prawidłowo: <P CLASS=naglowek 1>Tekst</P> H 1 {color: #00 FF 00; } domyślnie stosowany dla każdego znaczników <H 1> prawidłowo: <H 1>Rozdział 1</H 1> prawidłowo: <H 1 CLASS=naglowek 1>Tekst</H 1> n tutaj zostanie zasłonięty przez styl naglowek 1 (bardziej szczegółowy)
Przykład … body {background: #0000 FF; color: #FFFF 00; margin-left: 2 cm; margin-right: 2 cm} h 2 {font-size: 20 pt; color: #FF 0000; background: #FFFFFF} p {font-size: 14 pt; text-indent: 4 cm}. lewa {text-align: left}. prawa {text-align: right} … <h 2>Czerwony nagłówek na białym tle</h 2> <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. </p> <h 2>Ten nagłówek ma takie samo formatowanie jak poprzedni</h 2> <p class=left> 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. </p> …
Selektor – id o o o definicje stylu: #tytul_3 {font-size: 16; } H 1#tytul_3 {font-size: 16; } formatowany element (w <body>): <P ID=tytul 3>Jakiś tytuł</P> analogia do selektora class: n n przy definicji pierwszej takie formatowanie jest poprawne, przy definicji drugiej jest niepoprawne, ponieważ ten styl można zastosować tylko do znacznika <H 1>.
Rozciąganie stylu o o o 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: 24 pt; color: #FFFFFF} <span class="kolorowa"> Przykład: <h 2>Ala <span style="font-variant: small-caps; color: blue; text-decoration: underline">ma</span> kota</h 2>
Cechy – tekst o font-family – krój czcionki n nazwa czcionki np. verdana, Arial n o ‘Arial CE‘ font-size – wielkość czcionki n w jednostkach np. 11 px n n o o o jeżeli jest wielowyrazowa, to musi zostać ujęta w cudzysłów np. w procentach nazwa: xx-small, medium, large, xx-large, larger, smaller font-weight – grubość czcionki n nazwa: normal, bolder, lighter n liczba: 100 -900 font-style – określa czy czcionka jest pisana kursywą czy nie n nazwa: normal, italic, oblique font-variant – kapitaliki n nazwa: normal, small-caps
o color – kolor tekstu n n o o test-decoration – dekoracja tekstu n nazwa: none, underline, overline, line-through, blink text-transform – transformacja tekstu n nazwa: none, capitalize, uppercase, lowercase text-align – wyrównanie tekstu n nazwa: left, center, right, justify text-indent – wcięcie tekstu n n o dowolna wartość procentowa wartość wyrażona w jednostkach np. 10 pt line-height, letter-spacing, word-spacing – odstępy między: wierszami, literami, wyrazami n nazwa: normal n n o nazwa angielska np. white wartość szesnastkowa np. #FFFFFF dowolna wartość procentowa wartość wyrażona w jednostkach np. 10 pt vertical-align – pionowe wyrównanie tekstu n nazwa: baseline, sub, super, top, text-top, middle, bottom, text-bottom
Cechy – tło o background-color – kolor tła n transparent (przezroczystość), nazwa angielska, wartość szesnastkowa o o background-image – rysunek w tle n none lub url (nazwa_pliku) background-attachment – przewijanie tła wraz z tekstem n scroll, fixed background-repeat – powtarzanie się tła n repeat, no-repeat, repeat-x, repeat-y background-position – pozycja tła n 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. w 3. org/Style/CSS/
Przykład – zmiana wyglądu tabeli w HTML o przykładowa prosta strona stworzona za pomocą HTML; index. html: <HTML> <HEAD><TITLE>CSS</TITLE></HEAD> <BODY> <CENTER><H 2>obramowanie i paski przewijania</H 2><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> [. . . ] <TR ALIGN=center> <TD WIDTH=200><FONT FACE=Arial COLOR=green SIZE=3> scrollbar-darkshadow-color</FONT></TD> <TD WIDTH=250><FONT FACE=Arial COLOR=green SIZE=3> wszystkie dostępne kolory HTML</FONT></TD> </TR> </TABLE> </BODY> </HTML>
o o o 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 o tym razem stosujemy CSS; index. html: <HTML> <HEAD><TITLE>CSS</TITLE> <LINK REL=stylesheet TYPE="text/css" HREF="style. css"> </HEAD> <BODY> <H 2>obramowanie i paski przewijania</H 2> <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>
o style. css: <HTML> <STYLE TYPE="text/css"> <!H 2 { FONT-FAMILY: Arial; FONT-SIZE: 20; COLOR: darkgreen; TEXT-ALIGN: center; LETTER-SPACING: 0; } td { BORDER WIDTH: 1 pt; 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>
o o o 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 o zalety stosowania CSS w HTML: n n n o 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: n specyfikacja na oficjalnej stronie W 3 C: o n http: //www. w 3. org/Style/CSS/ kursy, artykuły: o o o 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