Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Tworzenie stron internetowych Tomasz Piłka Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro Św. Izydor z Sewilli Św. Izydor z.

Podobne prezentacje


Prezentacja na temat: "Tworzenie stron internetowych Tomasz Piłka Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro Św. Izydor z Sewilli Św. Izydor z."— Zapis prezentacji:

1 Tworzenie stron internetowych Tomasz Piłka Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro Św. Izydor z Sewilli Św. Izydor z Sewilli CSS – Kaskadowe Arkusze Stylów

2 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.

3 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, 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.

4 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: tekst tekst zwykły, znaczniki HTML, elementy CSS.

5 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: tekst

6 Styl osadzony definicję stylu umieszcza się w nagłówku dokumentu HTML ( ), w otwierającym tagu 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 a ) umieszczamy jako komentarz ( ), aby ukryć definicję stylu przed przeglądarkami, które nie obsługują CSS.

7 Styl osadzony – przykład Przykład:

8 Wydzielanie bloków wydzielanie formatowanych bloków za pomocą znaczników: i, 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 i : może zawierać w sobie więcej elementów niż, mogą w nim być umieszczone nawet następne bloki.

9 Wydzielanie bloków – przykład 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: tekst, grafika itp. 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.

10 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:

11 CSS z pliku zewnętrznego – przykład Przykład zewnętrznego arkusza stylów (np. plik styl.css):

12 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".

13 Budowanie stylu ogólna postać arkusza stylu: selektor {cecha: wartość; cecha: wartość;} dowolność zapisu: selektor { 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.

14 Budowanie stylu – przykłady Przykład: chcemy ustalić kolor czcionki dla zwykłego akapitu ( ), p {color: green;} lub P {COLOR: #00FF00;} Przykład: chcemy ustalić szerokość i kolor linii poziomej ( ), hr {width: 100px; color: silver;} Przykład: chcemy wyjustować listy wypunktowane ( ), li {text-align: justify;}

15 Selektor – class Przykład - class jako selektor: Tytuł strony H1.naglowek1 {color: #00FF00;} Rozdział 1

16 class Selektor – class c.d. H1.naglowek1 {color: #00FF00;} można użyć tylko dla znaczników prawidłowo: Rozdział 1 nieprawidłowo: Tekst.naglowek1 {color: #00FF00;} można użyć dla dowolnych znaczników prawidłowo: Rozdział 1 prawidłowo: Tekst H1 {color: #00FF00;} domyślnie stosowany dla każdego znaczników prawidłowo: Rozdział 1 prawidłowo: Tekst tutaj zostanie zasłonięty przez styl naglowek1 (bardziej szczegółowy)

17 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} … Czerwony nagłówek na białym tle Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. 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. Ten nagłówek ma takie samo formatowanie jak poprzedni Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. 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. …

18 id Selektor – id definicje stylu: #tytul_3 {font-size: 16;} H1#tytul_3 {font-size: 16;} formatowany element (w ): Jakiś tytuł 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.

19 Rozciąganie stylu Rozciąganie stylu polega na objęciu stylem pewnej sekcji dokumentu HTML. Służy do tego para znaczników 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.kolorowa {font-size: 24pt; color: #FFFFFF} Przykład: Ala ma kota

20 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: font-style – określa czy czcionka jest pisana kursywą czy nie nazwa: normal, italic, oblique font-variant – kapitaliki nazwa: normal, small-caps

21 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 dowolna wartość procentowa wartość wyrażona w jednostkach np. 10pt vertical-align – pionowe wyrównanie tekstu nazwa: baseline, sub, super, top, text-top, middle, bottom, text-bottom

22 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

23 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:

24 Przykład – zmiana wyglądu tabeli w HTML przykładowa prosta strona stworzona za pomocą HTML; index.html : CSS obramowanie i paski przewijania ELEMENT OPIS MOŻLIWE WARTOSCI

25 border-width grubosc obramowania w punktach (pt), procentach lub pikselach [...] scrollbar-darkshadow-color wszystkie dostępne kolory HTML

26 w przeglądarce powyższa strona wygląda następująco (Firefox ): 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: wkleić: problem się potęguje, gdy dopiero szukamy pasującego układu kolorów i w tym celu sprawdzamy różne możliwości

27 Przykład c. d. – teraz w HTML + CSS tym razem stosujemy CSS; index.html : CSS obramowanie i paski przewijania ELEMENT OPIS MOŻLIWE WART. [...]

28 style.css :

29 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

30 Podsumowanie zalety stosowania CSS w HTML: 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: kursy, artykuły:

31 Dziękuję za uwagę W prezentacji wykorzystano materiały Politechniki Krakowskiej Wydział Inżynierii Elektrycznej i Komputerowej: Tomasz Jasik, Grzegorz Sroka


Pobierz ppt "Tworzenie stron internetowych Tomasz Piłka Ucz się, jak gdybyś miał żyć wiecznie, żyj – jak gdybyś miał umrzeć jutro Św. Izydor z Sewilli Św. Izydor z."

Podobne prezentacje


Reklamy Google