Úvod do CSS

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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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