Narzędzia internetowe Paweł Rajba

Prezentacja na temat: "Narzędzia internetowe Paweł Rajba"— Zapis prezentacji:

1 Narzędzia internetowe Paweł Rajba pawel@ii.uni.wroc.pl http://pawel.ii.uni.wroc.pl/

2 CSS – Cascading Style Sheets Dlaczego powstał CSS? Jak tego używać? Walidator http://jigsaw.w3.org/css-validator/

3 Wstawienie arkusza CSS Bezpośrednio w dokumencie Moja strona domowa H1 { color: red } P { color: blue } Moja fantastyczna strona domowa Tutaj zobaczycie to, czego nigdzie indziej...

4 Wstawienie arkusza CSS Poprzez odwołanie do innego dokumentu Moja strona domowa <LINK rel="StyleSheet" type="text/css" href="mojstyl.css" > Moja fantastyczna strona domowa Tutaj zobaczycie to, czego nigdzie indziej...

5 Reguły CSS Reguła składa się z dwóch części selektora (np. H1 ) deklaracji (np. color:blue ) Deklaracja również składa się z dwóch części właściwości (np. color ) wartości (np. blue )

6 Drzewo dokumentu Rozpatrzmy poniższy dokument Moja strona domowa Moja fantastyczna strona domowa Tutaj zobaczycie to, czego nigdzie indziej... Tygrysy Zebry Małpiszony

7 Drzewo dokumentu I odpowiadające mu drzewko HTML BODYHEAD TITLEH1PUL LI

8 Terminologia Rodzic (parent) - element B zawiera bezpośrednio pewną ilość elementów. Jest on rodzicem tych elementów. Dziecko (child) – element A jest dzieckiem elementu B, kiedy B jest rodzicem A Potomek (descendant) – element A jest potomkiem elementu B, kiedy A jest dzieckiem B lub A jest dzieckiem C, który jest potomkiem B

9 Terminologia Przodek (ancestor) – element A jest przodkiem elementu B, kiedy B jest potomkiem A Brat/siotra (sibling) – element A jest bratem elementu B, kiedy A i B mają wspólnego rodzica. A jest poprzedzającym bratem B, kiedy występuje wcześniej w drzewie dokumentu; A jest następującym bratem B, kiedy występuje później w drzewie dokumentu

10 Terminologia Element wcześniejszy (preceding element) – element A jest wcześniejszy niż element B, kiedy A jest przodkiem B lub A jest poprzedzającym bratem B Element późniejszy (following element) – element A jest późniejszy niż element B, kiedy B jest elementem wcześniejszym niż element A

11 Kilka uwag grupowanie H1 { font-weight: bold } H1 { font-size: 12pt } H1 { font-weight: bold; font-size: 12pt; } H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif } H1, H2, H3 { font-family: sans-serif }

12 Kilka uwag Jednostki długości: relatywne: em – szerokość znaku M ex – wysokość linii px – 1 pixel absolutne in – cale (2.54 cm) cm, mm pt – punkty (1/72 cala) pc – picas (12 pt) procentowe: np. 120%

13 Kilka uwag kolorki H1 { color: maroon } P { color: #f00 } /* #rgb */ P { color: #ff0000 } /* #rrggbb */ P { color: rgb(255,0,0) } /* 0 - 255 */ P { color: rgb(100%, 0%, 0%) } napisy "this is a 'string'" "this is a \"string\"" 'this is a "string"' 'this is a \'string\''

14 Kilka uwag Komentarze /*... */ Dwa różne obiekty: "napis", stała color: "red" – źle Można przełamywać wiersze A[TITLE="a not s\ o very long title"] {/*...*/} A[TITLE="a not so very long title"] {/*...*/}

15 Selektory Universal selector piszemy *, jeżeli po * jest coś jeszcze, to * można pominąć dopasowuje się do każdego elementu drzewa dokumentu *.gruby.gruby (równoważne) *#myid #myid (równoważne) Type selectors dopasuje się do każdego wystąpienia konkretnego elementu H1 { font-family: sans-serif }

16 Selektory Descendant selectors dopasuje się do elementu, który jest dzieckiem innego elementu przykład: chcemy żeby nagłówek H1 był innego koloru oraz żeby wyróżniony tekst zmieniał kolor. Weźmy dwie reguły: H1 { color: red } EM { color: red } No i jest kłopot z poniższym: To jest bardzo ważny tekst

17 Selektory Rozwiązanie H1 { color: red } EM { color: red } H1 EM { color: blue } Inny przykład: DIV * P – dopasuje się do P które jest potomkiem czegoś, co jest potomkiem DIV

18 Selektory Child selectors dopasuje się do elementu, który jest dzieckiem innego elementu BODY > P { color: red } DIV OL>LI P { color: green } Adjacent sibling selectors H1 + H2 { margin-top: 5mm } H1.opener + H2 { margin-top: 5mm } (dotyczy H2)

19 Selektory Attribute selectors [att] – dopasuje się wtedy, gdy atrybut att jest ustawiony, niezależnie od jego wartości H1[title] { color : blue } [att=val] – dopasuje się wtedy, gdy atrybut att jest ustawiony na wartość val SPAN[class="main"] { color : red } SPAN[align="left"][class="g"] {color: blue}

20 Selektory [att~=val] – dopasuje się wtedy, gdy wartością atrybutu att jest lista, w której jeden z elementów jest równy dokładnie val P[align~="left"] { color : green } // dopasuje się dla np. rel="left right" [att|=val] – dopasuje się wtedy, gdy wartością atrybutu att jest lista, w której elementem jest val lub słowo rozpoczynające się słowem val- *[lang|="en"] { color : blue } // dopasuje się wtedy, gdy atrybut lang // będzie ustawiony na np. "en", "en-US"

21 Selektory Class selectors W języku HTML możemy użyć kropki "." jako alternatywę dla składni "class~=". DIV.value to to samo co DIV[class~=value] Przykład:.zielony { color : green } Zielony nagłówek P.czerwony.gruby { color: red; font-weight: bold } Ojojoj

22 Selektory ID selectors Każdy element HTML może mieć atrybut o nazwie id. Atrybut ten wyróżnia spośród innych to, że jego wartości są w obrębie dokumentu unikalne. Przykład: reguła H1#chapter1 { text-align: center } dopasuje się do...

23 Pseudo-klasy :first-child dopasowuje się do elementu będącego pierwszym dzieckiem swojego rodzica. DIV > P:first-child { color: navy } Ala ma kota Ala ma dwa koty Ala ma kota a tu nie działa

24 Pseudo-klasy :link – link nieodwiedzony :visited – link odwiedzony :hover – myszka nad linkiem :active – link aktywny :focus – focus ustawiony na linka :lang(C) dopasowuje się, kiedy element jest w języku C :lang(fr) > Q { quotes: '« ' ' »' }

25 Pseudo-klasy Przykłady A.external:visited { color: blue } <A class="external" href="http://www.wp.pl/">WP A:link { color: red } A:visited { color: blue } A:visited:hover { color: black } A:hover { color: yellow } A:active { color: lime } A:focus { background: yellow }

26 Pseudo-elementy :first-line P:first-line { text-transform: uppercase } To jest bardzo długi tekst, który nie zmieści się w jednym wierszu i trzeba go wyświetlić w kilku wierszach. Zostaną wówczas dodane fikcyjne tagi.

27 Pseudo-elementy :first-letter P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float:left } SPAN { text-transform: uppercase } The first few words of an article in The Economist.

28 Pseudo-elementy T he first few words of an article in the Economist. Przykład z http://www.w3.org/

29 Własności kolorów i tła color – kolor tekstu P { color: red } H1 { color: rgb(255,0,0) } background-color – kolor tła H1 { background-color: #F00 } background-image – obrazek tła BODY { background-image: url("marble.gif") } P { background-image: none }

30 Własności kolorów i tła background-repeat – jak powtarzać obrazek repeat – powtarzanie w pionie i w poziomie repeat-x – powtarzanie w poziomie repeat-y – powtarzanie w pionie no-repeat – po prostu narysować BODY { background-color: white; background-image: url("pendant.gif"); background-repeat: repeat-y; }

31 Własności kolorów i tła background-attachment – zaczepienie obrazka scroll (domyślne) – z tekstem fixed – z oknem background-position – pozycja obrazka procenty długości top, center, bottom left, center, right

32 Własności kolorów i tła BODY { background: url("banner.jpeg") right top } /* 100% 0% */ BODY { background: url("banner.jpeg") top center } /* 50% 0% */ BODY { background: url("banner.jpeg") center } /* 50% 50% */ BODY { background: url("banner.jpeg") bottom } /* 50% 100% */ BODY { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; }

33 Własności kolorów i tła background – grupuje różne własności background-color background-image background-repeat background-attachment background-position background: fixed yellow url("pov.jpg") center repeat-x;

34 Własności czcionek font-family – rodzina czcionek nazwa-rodziny Times Arial rodzina-ogólna serif sans-serif cursive fantasy monospace P { font-family: Arial, Helvetica, sans-serif }

35 Własności czcionek font-style normal italic oblique H1 { font-style: italic } H1 EM { font-style: normal } font-variant normal small-caps P { font-variant: small-caps }

36 Własności czcionek font-weight 100, 200, 300, 400, 500, 600, 700, 800, 900 normal – to samo co 400 bold – to samo co 700 bolder lighter P { font-weight: normal } H1 { font-weight: 700 } BODY { font-weight: 400 } STRONG { font-weight: bolder }

37 Własności czcionek font-stretch ultra-condensed extra-condensed condensed semi-condensed normal (domyślne) semi-expanded expanded extra-expanded ultra-expanded wider, narrower

38 Własności czcionek font-size stałe: xx-small | x-small | small | medium large | x-large | xx-large relatywnie: larger | smaller wielkości: 12pt procentowo: 120% P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em }

39 Własności czcionek font – opisuje zestaw własności font-style, font-variant, font-weight, font-size, line-height, font-family stałe caption icon menu message-box small-caption status-bar

40 Własności czcionek Przykłady: P { font: 12pt Arial,sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century schoolbook", serif } P { font: bold italic large Palatino, serif } P { font: normal small-caps 120%/120% fantasy } P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed } BUTTON P { font: menu }

41 Własności tekstu text-indent- wcięcie akapitu jednostki: długości lub procenty P { text-indent: 3em } text-align- wyrównywanie wartości: left | right | center | justify DIV.center { text-align: center } text-decoration wartości: none | underline | overline | line-through | blink P { text-decoration: none } A[href] { text-decoration: underline }

42 Własności tekstu text-shadow H1 { text-shadow: 0.2em 0.2em } H2 { text-shadow: 3px 3px 5px red } H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px } letter-spacing wartości: normal lub długości word-spacing wartości: normal lub długości

43 Własności tekstu text-transform capitalize | uppercase | lowercase | none H1 { text-transform: uppercase } white-space normal | pre | nowrap P.pre { white-space: pre } P { white-space: normal } TD[nowrap] { white-space: nowrap }

44 CSS – Box model Dla każdego elementu drzewa dokumentu jest tworzony prostokątny blok, w którym ten element się znajduje. Model ten omawia dodatkowe parametry takich prostokątów. Każdy blok zawiera 4 obszar content padding border margin

45 CSS - Box model ze strony W3 Konsorcjum

46 CSS – Box model Marginesy właściwości margin-top margin-right margin-bottom margin-left margin wartości długości (np. 3 cm) procenty (np. 120%) auto

47 CSS – Box model Marginesy c.d. domyślne wartości: 0 margin – skrót dla margin-top, margin-right, margin-bottom, margin-left w zależności od ilości ustawionych wartości mamy 1 wartość – ustawia wszystkie strony 2 wartości – #1: top i bottom, #2: left i right 3 wartości – #1: top, #2: left i right, #3: bottom 4 wartości – #1: top, #2: right, #3: bottom, #4: left

48 CSS – Box model Marginesy - przykłady BODY { margin: 2em } BODY { margin: 1em 2em } BODY { margin: 1em 2em 3em } BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; }

49 CSS – Box model Marginesy – uwagi marginesy mogą czasamy zostać skolapsowane (collapse); oznacza to, że 2 lub więcej marginesów zostanie zamienione na jeden, zwykle ten o największej wartości marginesy poziome nie kolapsują się marginesy bloków, których pozycje są absolutne lub relatywne nie kolapsują się

50 CSS – Box model Padding właściwości padding-top padding-right padding-bottom padding-left padding wartości (domyślnie 0) długości (np. 1cm) procenty (na podstawie wielkości zawartości, np. 120%)

51 CSS – Box model Border – wielkość właściwości border-top-width border-right-width border-bottom-width border-left-width border-width wartości długościami (np. 1cm) thin, medium, thick (thin<=medium<= thick)

52 CSS – Box model Border – kolor właściwości border-top-color border-right-color border-bottom-color border-left-color border-color wartości kolor transparent (wtedy border jest przeźroczyty, ale ma grubość)

53 CSS – Box model Border – styl właściwości – styl border-top-style border-right-style border-bottom-style border-left-style border-style

54 CSS – Box model Border – styl wartości none – brak hidden – prawie to samo co none; różnica w kontekście konfliktu rozdzielczości w tabelkach dotted – kropki dashed – krótkie kreski solid – ciągła linia double – podwójna linia (w połączeniu z border- width:thin daje to pojedynczą linię) groove – jakby wyrzeźbione ridge – podobne do ridge inset – jakby osadzone outset – podobne do inset

55 CSS – Box model Border – skróty właściwości border-top border-bottom border-right border-left border wartości width style color

56 CSS – Box model Border – przykłady P { border: solid red } P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red } BLOCKQUOTE { border-color: red; border-left: double; color: black } /* bordel-color-left: black */

57 CSS – rodzaje wartości specified computed actual

58 CSS – rodzaje wartości Specified values ustalanie wartości odbywa się wg następujących kryteriów: uzyskujemy wartość z kaskady (np. w arkuszu wprost mamy wartość dla danej właściwości) jeśli wartość jest dziedziczona, to używamy tej wartości użyj wartości domyślnej

59 CSS – rodzaje wartości Computed values wartości specified mogą być absolutne (red, 2mm) lub relatywne (auto, 2em, 120%). Dla wartości absolutnych obliczeń wykonywać nie trzeba, natomiast dla relatywnych jak najbardziej.

60 CSS – rodzaje wartości Actual values Wartość ostatecznie przypisana. Może się różnić od computed, gdy np. zostanie obliczona wielkość czcionki na 15px, a w systemie takiej nie ma i wtedy zostanie wybrana wielkość 14px. actual value to computed lub specified value po zaokrągleniach, przybliżeniach

61 Reguła import Powoduje wczytanie reguł z zewnętrznego pliku @import "mystyle.css" @import url("mystyle.css")

62 Inheritance (dziedziczenie) Elementy dziedziczą wartości po swoim rodzicu z drzewa dokumentu, jeśli to dziedziczenie jest dopuszczone. To jest ważny nagłówek Jeśli kolor w EM nie jest ustawiony, a H1 ma kolor czerwony, to EM też będzie miało kolor czerwony.

63 Kaskada Arkusze styli mogą mieć trzy różne źródła pochodzenia author user user agent

64 Kaskada – wyszukiwanie wartości 1. Znaleźć wszystkie deklaracje, które dopasowują się do elementu i właściwości (wyszukanie odpowiednich selektorów) 2. Pierwsze sortowanie jest wg wag i źródła pochodzenia: domyślnie, reguły autora mają wyższy priorytet od reguł usera jeśli reguła jest !important to porządek ten się ulega odwróceniu reguły !important są ważniejsze od reguł normalnych reguły user agenta mają najniższy priorytet

65 Kaskada – wyszukiwanie wartości 3. Drugie sortowanie jest wg szczegółowości: bardziej szczegółowe selektory mają wyższy priorytet od tych ogólnych. 4. Ostatecznie, jeśli dwie reguły mają ten sam priorytet, to wygrywa ta, która pojawiła się później.

66 Kaskada – wyszukiwanie wartości /* From the user's style sheet */ P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt } /* From the author's style sheet */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt } text-indent: 1em font-style: italic font-size: 12pt font-family: sans-serif

67 Typy mediów Określenie rodzaju medium w arkuszu stylów: @import url("loudvoice.css") aural; @media print { /* definicja arkusza styli */ } jako atrybut znacznika LINK <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">

68 Typy mediów Rozpoznawane typy mediów: all – wszystkie rodzaje urządzeń aural – urządzenia generujące mowę; do tego typu jest przeznaczony osobny zestaw styli braille – przeznaczone dla urządzeń dotykowych braillea embossed – przeznaczone dla stronicowanych drukarek braillea handheld – przeznaczone dla urządzeń podręcznych (mały ekran, czarno-białe, słaba przepustowość) print – przeznaczone dla drukarek oraz do wyświetlania na ekranie w trybie print preview

69 Typy mediów Rozpoznawane typy mediów c.d.: projection – przeznaczone do prezentacji na projektorach, druków transparentów, itp. screen – do wyświetlania na kolorowych ekranach komputerów tty – do wyświetlania na urządzeniach o ustalonej siatce znaków, np. terminali tekstowych tv – do wyświetlania na urządzeniach typu television (niska rozdzielczość, kolor, dźwięk,...)

70 CSS – pozycjonowanie Właściwość: position wartości: static (domyślnie) – normalne pudełko, właściwości left i top nie mają znaczenia relative – pozycja pudełka jest obliczana zgodnie z normal flow absolute – pozycja pudełka jest wyznaczona jest względem dokumentu i na podstawie wartości 'left', 'right', 'top', i 'bottom' fixed – to samo co absolute, tyle że pozycja jest względem okna przeglądarki

71 CSS – pozycjonowanie Właściwość: z-index – kolejność wg której warstwy się będą pojawiać wartości: auto liczba (im większa liczba, tym warstwa będzie wyżej)

72 CSS – pozycjonowanie Właściwość: display wartości (kilka podstawowych) inline – dla elementu tworzony jest osobny inline box (inline) block – dla elementu tworzony jest osobny block box none – dla elementu nie tworzony żaden box Właściwość: float left – pudełko jest do lewej i opływane z prawej right – pudełko jest do prawej i opływane z lewej none – pudełko w ogóle nie jest opływane

73 CSS – pozycjonowanie Właściwość overflow – określa widoczność w momencie, gdy zawartość ma większy rozmiar niż rozmiar warstwy wartości visible – zawartość warstwy będzie widoczna hidden – zawartość warstwy będzie niewidoczna scroll – pojawią się paski przewijania

74 CSS – pozycjonowanie Przykład online :-)