CSS - Selektory. Selektory Selektorem można nazwoć dowolny element języka HTML, dla którego chcemy zdefiniować parametry formatowania. Wyróżniamy następujące.

Prezentacja na temat: "CSS - Selektory. Selektory Selektorem można nazwoć dowolny element języka HTML, dla którego chcemy zdefiniować parametry formatowania. Wyróżniamy następujące."— Zapis prezentacji:

1 CSS - Selektory

2 Selektory Selektorem można nazwoć dowolny element języka HTML, dla którego chcemy zdefiniować parametry formatowania. Wyróżniamy następujące selektory: Selektor elementów Selektor atrybutów Selektory specjalne Selektor pseudoklas Selektory pseudoelementu

3 Selektor elementu Selektor typu – służy do definiowania formatowania znaczników występujących na stronie: p {color: blue; font-size: 4pt;} H3 {color: green; font size: 24 pt;}

4 Selektor elementu Selektor uniwersalny to selektor pasujący do wszystkich znaczników, jest oznaczony * Zamiast grup elementów np: p,h1,h2,table {font-family: courier new; color: green;} * {font-family: courier new; color: green;}

5 Selektor elementu Selektor potomka – można formatować elementy, które zawarte są wewnątrz innych znaczników, czyli leżą niżej w hierarchii drzewa dokumentu Selektor potomka selektor potomek {właściwość:wartość;} div span {color:red;}

6 Selektor elementu Selektor dziecka – słuzy do definiowania formatowania elementów, które znajdują się o jeden rząd niżej w hierarchii drzewa dokumentu Selektor dziecka Selektor > dziecko {właściwość:wartość;} div > span {color:red;}

7 Selektor elementu Selektor braci – umożliwia on nadanie drugiemu z sąsiadujących elementów zdefiniowanych atrybutów formatowania Selektor braci Selektor + brat {właściwość:wartość;} div + span {color:red;}

8 Selektor atrybutu W języku CSS można formatować znaczniki na podstawie posiadanych przez nie atrybutów. Selektor [atrybut="wartość"] {właściwość: wartość}

9 Selektor atrybutu Prosty selektor atrybutu Selektor [atrybut] {właściwość: wartość} p [align] {color: yellow}

10 Selektor atrybutu Selektor atrybutu o określonej wartości Selektor [atrybut="wartość"] {właściwość: wartość} p [align="center"] {color: yellow}

11 Selektor atrybutu Selektor atrybutu zawierający określony wyraz Selektor [atrybut~="wyraz"] {właściwość: wartość} p [title~="center"] {color: yellow}

12 Selektor specjalny Selektor klas selektor.klasa {właściwość: wartość} p.tekst1 {color: yellow} odwołanie do klas w dok. HTML ma postać:...

13 Selektor specjalny Selektor identyfikatora selektor#identyfikator {właściwość: wartość} lub #identyfikator {właściwość: wartość} h3#id1 {color: blue} odwołanie w dokumencie HTML ma postać...

14 Pseudoklasy Odsyłacze

15 Pseudoelementy Pseudoklasy wykorzystywane są do formatowania elementów specjalnych takich jak: pierwsza litera  selektor: first-letter {właściwość: wartość;}  p: first-letter {color: red;} pierwsza linia  selektor: first-line {właściwość: wartość;}  p: first-line {color: red;} na początku