Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

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

Podobne prezentacje


Prezentacja na temat: "Arkusze stylów - CSS Specjalizacja "Dziennikarstwo On-line Arkusze stylów – CSS Część 5 Prowadzący: Dariusz Jaruga"— Zapis prezentacji:

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

2 Arkusze stylów - CSS Arkusze stylów CSS - wprowadzenie Czym 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 – CSS 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 Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML Bezpośrednio w znaczniku jako jego atrybut Przykłady: W nagłówku strony HTML – znacznik Przykład: W nagłówku strony definicja stylu p.zielony { color: green } p.negatyw { color: white; background: black } h1 {color: red} w ciele strony To jest w kolorze zielonym To jest w negatywie białe literki czarne tło.

4 Arkusze stylów - CSS Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML p.zielony { color: green } p.negatyw { color: white; background: black } To jest w kolorze zielonym To jest w negatywie białe literki czarne tło.

5 Arkusze stylów - CSS Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML – sposób 1 To jest w kolorze zielonym To jest w negatywie białe literki czarne tło. p.zielony { color: green } p.negatyw { color: white; background: black } my_ver_a.css

6 Arkusze stylów - CSS Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML – sposób url(my_ver_a.css"); To jest w kolorze zielonym To jest w negatywie białe literki czarne tło. p.zielony { color: green } p.negatyw { color: white; background: black } my_ver_a.css

7 Arkusze stylów - CSS Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML definicja arkusza styli w pliku. Poziom najniższy. definicja arkusza styli w dokumencie HTML/XHTML. Poziom wyższy. p.zielony { color: green } p.negatyw { color: white; background: black } definicja stylu w atrybucie. Poziom najwyższy.

8 Arkusze stylów - CSS Arkusze stylów CSS – reguły stylów 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 } selektor{}właściwość:wartośćwłaściwość:wartość; dwukropek średnik

9 Arkusze stylów - CSS Arkusze stylów CSS – dziedziczenie właściwości Przykł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 p p.czarny p.niebieski p.inny h1... h6 h1.black

10 Arkusze stylów - CSS Arkusze stylów CSS – selektory selektor 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 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 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 Arkusze stylów CSS – znaczniki i w służbie CSS - pozwala na wyróżnienie pewnego elementu liniowego do którego można zaliczyć tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - pozwala na wyróżnienie i określenie położenia na stronie elementu blokowego stanowiącego pewnego rodzaju kontener dla fragmentu strony WWW. CSS: #warstwa {color:red; width:200px; height:100px; background: yellow; text-align:center; position:absolute; left:200px; top:200px} HTML: To jest tekst w DIV

14 Arkusze stylów - CSS top bottom leftright border- -color -style -width style - none,hidden,dotted,dashed,solid,groove,linia,ridge,inset,outset,double,inherit width - px|mm|cm|in|pt|pc|em|ex lub w procentach np. 10% color - rgb(255,128,0) lub #RRGGBB lub słownie np. red Arkusze stylów CSS – ramki

15 Arkusze stylów - CSS Arkusze stylów CSS – ramki przykłady Zapis skrócony: #paragraf_1 { border-top: 1px solid green; border-right: 2px double green; border-bottom: 2px double black; border-left: 1px solid rgb(0,0,0); } Zapis zwykły: #paragraf_2 { border-width: 3px; border-style: solid; Border-color: red; }

16 Arkusze stylów - CSS Arkusze stylów CSS – kroje pisma Przykłady: #paragraf_1 { font-family: Georgia, Serif, "Times New Roman"; font-size: 16px; font-style: normal; font-weight: normal; } font-family: serif,monospace,cursive,Verdana,:Times New Roman font-size: xx-small, x-small, small, medium, large, x-large, xx-large,10px, 1em font-style:normal, oblique,italic font-variant:normal:small-caps font-weight:normal,bold,bolder,lighter Zapis skrócony: #paragraf_2 { font-style, font-variant, font-weight, font-size, font-family } #paragraf_2 {italic normal bold 24px Verdana}

17 Arkusze stylów - CSS Arkusze stylów CSS – właściwości tekstu Przykłady: #paragraf_1 { color: red; text-align: left; text-decoration: none; text-transform: uppercase; text-indent: 36px; line-height: 150%; } color: red, rgb(RRR,GGG,BBB), #RRGGBB text-align: left, right,center,justify text-decoration:none, overline, line-through, underline, blink text-transform: uppercase, lowercase, capitalize text-indent: jednostka miary np. 2cm - wcięcie pierwszej linii line-height: jednostka miary np. 200% - wysokość linii

18 Arkusze stylów - CSS Arkusze stylów CSS – właściwości tekstu Przykłady: #paragraf_1 { letter-spacing: 10px word-spacing: 20px white-space: normal } letter-spacing: jednostka miary np. 5px – odległość między znakami word-spacing: jednostka miary np. 20px – odległość między wyrazami white-space: normal, nowrap, pre, pre-line, pre-wrap

19 Arkusze stylów - CSS Arkusze stylów CSS – pozycjonowanie i wyświetlanie Elementy blokowe a liniowe Przykłady:,,, - elementy blokowe,,,,, - elementy liniowe - element liniowy ale z odstępami. #paragraf_1 { display: block; } display: block,inline,none

20 Arkusze stylów - CSS Arkusze stylów CSS – pozycjonowanie i wyświetlanie Margin i padding Przykłady: #paragraf_1 { display: block; margin: 1cm; padding: 2cm; } margin padding

21 Arkusze stylów - CSS Arkusze stylów CSS – pozycjonowanie i wyświetlanie Pozycjonowanie: bezwzględne (absolute), względne (relative), stałe (fixed), statyczne (static). Przykłady: #paragraf_2{ position: absolute; left:500px; top:300px; width: 200px; padding: 10px; background: yellow; z-index:1 }

22 Arkusze stylów - CSS


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

Podobne prezentacje


Reklamy Google