Tworzenie stron internetowych

1 Tworzenie stron internetowychCSS – Kaskadowe Arkusze St...
Author: Anastazja Marjański
0 downloads 1 Views

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

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 ) umieszczamy jako komentarz (), aby ukryć definicję stylu przed przeglądarkami, które nie obsługują CSS.

7 Styl osadzony – 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ładdefinicja 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ętrznegodołą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: type="text/css">

11 CSS z pliku zewnętrznego – przykładPrzykł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ść; 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ładychcemy ustalić kolor czcionki dla zwykłego akapitu (

), p {color: green;} lub P {COLOR: #00FF00;} chcemy ustalić szerokość i kolor linii poziomej (

), hr {width: 100px; color: silver;} chcemy wyjustować listy wypunktowane (
  • ), li {text-align: justify;}

    15 Selektor – class Przykład - class jako selektor: Tytuł strony

    Rozdział 1

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

    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

    18 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 czcionkinazwa 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 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

    22 Cechy – tło background-color – kolor tłatransparent (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 HTMLprzykładowa prosta strona stworzona za pomocą HTML; index.html: CSS

    obramowanie i paski przewijania

    25

    [...]scrollbar-darkshadow-colorwszystkie dostępne kolory HTML
    ELEMENT OPIS MOŻLIWE WARTOSCI
    border-width grubosc obramowania w punktach (pt), procentach lub pikselach

    26 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: 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 + CSStym razem stosujemy CSS; index.html: CSS

    obramowanie i paski przewijania

    [...]
    ELEMENT OPIS MOŻLIWE WART.

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