Selektory. Selektor elementu Selektor {własciwość:wartość}

Prezentacja na temat: "Selektory. Selektor elementu Selektor {własciwość:wartość}"— Zapis prezentacji:

1 selektory

2 Selektor elementu Selektor {własciwość:wartość}

3 Selektor typu – podstawowy selektor Słuzy do definiowania formatowania znaczników P{color:blue} Ćw 2

4 Selektor uniwersalny pasujacy do wszystkich znaczników * { font family:arial } cw1

5 Selektor potomka Przy użyciu selektora potmka można formatować elementy które są zawarte wewnątrz innych znaczników np. header h1 {color:silver} Ćw 3

6 Selektor dziecka rodzic>dziecko {własciwość:wartość} header>h1 {color:red}  Oznacza bezpośredni związek miedzy elementami Ćw 4

7 Selektor braci Dla elementów znajdujacych się w tym samym rzedzie w herarchii można zdefiniować selektor braci brat1+brat2 {własciwość:wartość} Ćw 5

8 Selektor atrybutu Selektor [atrybut=”wartość”] {własciwość:wartość} lub [atrybut=”wartość”] {własciwość:wartość}

9 Selektor specjalny Selektor klasy selektor. klasa {własciwość:wartość}. klasa {własciwość:wartość} Cw 7

10 Selektor identyfikatora selektor #identyfikator {własciwość:wartość} #identyfikator{własciwość:wartość} Cw 9

11 Selektor pseudoklas

12 Selektory pseudoklas Selektory pseudoklas umożliwiają wyróżnienie odsyłaczy Wygląd odsyłaczy zależny od jego aktualnego stanu

13 Odsyłacz podstawowy (pseudoklasa:link) używany do nadania wygladu odsyłaczowi który nie zostal odwiedzony

14 Odsyłacz podstawowy a:link {właściwość:klasa} Lub a.klasa:link {właściwość:klasa}

15 Odsyłacz odwiedzony (pseudoklasa:visited) Wykorzystywany do nadania wyglądu odsyłaczowi, który był wcześniej kliknięty (informacja ta znajduje się w pamięci przeglądarki)

16 Odsyłacz odwiedzony a:visited {właściwość:klasa} Lub a.klasa:visited {właściwość:klasa}

17 Wskazanie odsyłacza myszą Pseudoklasa :hover umożliwia zdefiniowanie wyglądu odsyłacza gdy urządzenie wskazujace np. myszka znajduje się nad elementem, ale nie aktywizuje go.

18 Wskazanie odsyłacza myszą a:hover {właściwość:klasa} Lub a.klasa:hover {właściwość:klasa}

19 Odsyłacz aktywny (pseudoklasa: active) Nadaje atrybuty formatowania odsyłaczowi który w dane chwili jest aktywny

20 a:active {właściwość:klasa} Lub a.klasa:active {właściwość:klasa}

21 Kolejność deklarowania w arkuszu stylów pseudoklas przypisanych do odsyłaczy ma znaczenie dla prawidłowego działania

22 Prawidłowa kolejność a:link {właściwość:klasa} a:visited {właściwość:klasa} a:hover {właściwość:klasa} a:active {właściwość:klasa}

23 Selektor pseudoelementów Pierwsza linia selektor:first-line {właściwość:klasa} selektor:first-letter{właściwość:klasa}

24 Stwórz stronę internetową (witrynę) o stałej szerokości 960 px z jedną kolumną z menu, nagłówkiem header i stopka footer dot. Poznanych selektorów. Postaraj się wykorzystać jaknajwiecej poznanych na lekcji wiadomości typu: Grupowanie selektorów Nowe właściwości Listy zagnieżdżone, tabele, nowe znaczniki Arkusze stylów wewnętrzny zewnetrzny lokalny Tworzenie kotwic Klasy, identyfikatory Różne rodzaje adresowania – np. odsyłacze do innych stron Max 10 pkt.