1 Specjalizacja "Dziennikarstwo On-line„ Arkusze stylów – CSS Część 5 Prowadzący: Dariusz Jaruga

2 Arkusze stylów CSS - wprowadzenieCzym jest Arkusz styli CSS ? CSS jest opisem formatowania dokumentów HTML, arkusze CSS są odpowiedzialne za sposób wizualizacji znaczników HTML/XHTML. Co oznacza sktrót CSS ? CSS - Cascading Style Sheets (kaskadowe arkusze stylów) Wersje arkuszy styli: 1.0 – CSS1 2.0 – CSS2 2.1 - CSS2 3.0 – w ciągłym opracowaniu (został podzielony na moduły, każdy z modułów posiada inny stopień stabilności – CSS3

3 Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTMLBezpośrednio w znaczniku jako jego atrybut Przykłady:

W nagłówku strony HTML – znacznik w ciele strony

To jest w kolorze zielonym

To jest w negatywie białe literki czarne tło.

4 Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML

To jest w kolorze zielonym

To jest w negatywie białe literki czarne tło.

5 Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML – sposób 1p.zielony { color: green } p.negatyw { color: white; background: black } my_ver_a.css

To jest w kolorze zielonym

To jest w negatywie białe literki czarne tło.

6 Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML – sposób 2p.zielony { color: green } p.negatyw { color: white; background: black } my_ver_a.css

To jest w kolorze zielonym

To jest w negatywie białe literki czarne tło.

7 Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTMLdefinicja stylu w atrybucie. Poziom najwyższy.

definicja arkusza styli w dokumencie HTML/XHTML. Poziom wyższy. definicja arkusza styli w pliku. Poziom najniższy.

8 Arkusze stylów CSS – reguły stylówselektor { właściwość : wartość ; właściwość : wartość } dwukropek średnik selektor 1, [ ... selektor n ] { właściwość 1: wartość 1; właściwość m: wartość m} Przykłady: p { color: red } h1, h2, h3, h4, h5, h6 { font-family: „Times New Roman”} a { font-family: „Times New Roman” ; color: blue } .tytul { background: black }

9 Arkusze stylów CSS – dziedziczenie właściwościPrzykłady: body { background-color: rgb(234,54,23); text-align: left; } p { color: red } p.czarny {background: black} p.niebieski {background: blue} p.inny {background: #A5730C} h1, h2, h3, h4, h5, h6 { font-family: „Times New Roman”} h1.black: {color: black} /* Styl własny */ .tytul { background: black } body h1 ... h6 p p.czarny h1.black p.niebieski p.inny

10 Arkusze stylów CSS – selektoryselektor zwykły: p { color: red } selektor klasy: p.czarny {background: black} p.niebieski {background: blue} p.inny {background: #A5730C} selektor uniwersalny *.czarny {background: black} lub .czarny {background: black} selektor ID #czarny {background: black} selektor zagnieżdżony #lista ul p {color: blue} #lista * p {color: red} - gdzie * selektor uniwersalny

11 Arkusze stylów CSS – pseudoklasy:link  nieodwiedzone łącze a:link {border: red} :visited  odwiedzone łącza a:visited {border: blue} :active  aktywne łącza a:active {border: yellow} :hover  łacze nad którym aktualnie jest kursor myszki a:hover {border: green} :focus  łacze w danym momencie używane przez internautę a:focus {border: black}

12 Arkusze stylów CSS – pseudoklasy i pseudoelementy:first-child  dotyczy pierwszego elementu potomnego p:first-child {color: red} :lang  określa dany styl dla konkretnej wersji językowej :lang(en) { } :lang(pl) { } :lang(fr) { } :before i :after  definjuje automatyczną zawartość przed i po określonym elemencie blockquote:before { content: ‘tu jakiś tekst';} blockquote:after { content: ‘tu jakiś tekst';} :first-line p.tytul:first-line {color: blue } :first-letter p.tytul:first-letter { font-size: 50px } Nie wszystkie przeglądarki to obsługują.

13 Arkusze stylów CSS – znaczniki i