Kurs WWW – wykład 3 Paweł Rajba

Prezentacja na temat: "Kurs WWW – wykład 3 Paweł Rajba"— Zapis prezentacji:

1 Kurs WWW – wykład 3 Paweł Rajba pawel@ii.uni.wroc.pl http://www.ii.uni.wroc.pl/~pawel/

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 }