Úvod do CSS.

Prezentace na téma: "Úvod do CSS."— Transkript prezentace:

1 Úvod do CSS

2 Syntaxe zápisu pravidla stylu
Zápis vlastnosti elementu v HTML (atributy odděleny mezerou, hodnota uvozena =): jménoVlastnosti_01=„hodnota“ jménoVlastnosti_02=„hodnota“ např. <img src=„novastranka.html“ title=„toto je muj obrazek“> Zápis PRAVIDLA stylu v CSS (pravidla ukončena ;, hodnota uvozena :): jménoVlastnosti_01: hodnota; jménoVlastnosti_02: hodnota; např. p { font-family: Verdana; color: green;} Pouze v případě, že se hodnota skládá z více slov (oddělených mezerou), nutno uvádět v „“ , např. font-family: „Times New Roman“; Vlastnosti jsou logicky uspořádány do skupin pro lepší zapamatování, např: Font: font-family: Verdana; font-size: 12pt; font-style: italic; ALE!: color: green; V některých případech je pak možný zkrácený zápis: border: 3px double red; Okraje: border-width: 3px; border-style: double; border-color: red;

3 ADRESOVÁNÍ p-cí SELEKTORů:
STRUKTURA STRÁNKY HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI SPAN SPAN SPAN

4 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Názvy elementů: p {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI SPAN SPAN SPAN

5 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Více elementů se stejným stylem: p, h2, li {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI SPAN SPAN SPAN

6 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: pomocí atributů CLASS ( ) a ID (#): .prvni {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

7 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: pomocí atributů CLASS ( ) a ID (#): .prvni {pravidla stylu;} p.prvni {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

8 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: pomocí atributů CLASS ( ) a ID (#): .prvni {pravidla stylu;} p.prvni {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

9 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: pomocí atributů CLASS ( ) a ID (#): #prvni {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

10 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: pomocí atributů CLASS ( ) a ID (#): #prvni {pravidla stylu;} pomocí hierarchie: span {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

11 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: pomocí atributů CLASS ( ) a ID (#): #prvni {pravidla stylu;} pomocí hierarchie: div span {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

12 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: pomocí atributů CLASS ( ) a ID (#): #prvni {pravidla stylu;} pomocí hierarchie: div p span {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

13 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: pomocí atributů CLASS ( ) a ID (#): #prvni {pravidla stylu;} pomocí hierarchie: div p.prvni span {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

14 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: pomocí atributů CLASS ( ) a ID (#): #prvni {pravidla stylu;} pomocí hierarchie: p span {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

15 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: jakýkoli (i nepřímý) potomek: div span {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

16 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: přímý potomek: div>span {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

17 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: přímý následující sourozenec: p + span {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

18 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: přímý následující sourozenec: p + span {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

19 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: přímý následující sourozenec: p + p{pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

20 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: obecný sourozenec (nemusí následovat): span ~ p{pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

21 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: obecný sourozenec (nemusí následovat): span ~ p{pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

22 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: p-cí atributů: p[class]{pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

23 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: p-cí atributů: p[class=“prvni”]{pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

24 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: p-cí atributů: [class=“prvni”]{pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN

25 ADRESOVÁNÍ p-cí SELEKTORů:
SELEKTORY: Bližší specifikace konkr. elementu: p-cí více atributů: element [atribut_01] [atribut_02] {pravidla stylu;} HTML HEAD BODY H1 P [prvni] DIV P H2 HR P P[posledni] IMG SPAN UL A P[prvni] SPAN P[druhý] P[třeti] LI LI LI[prvni] SPAN SPAN SPAN