Specjalizacja "Dziennikarstwo On-line„ Arkusze stylów – CSS Część 5 Prowadzący: Dariusz Jaruga djaruga@klub.chip.pl
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 – 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
Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML Bezpośrednio w znaczniku jako jego atrybut Przykłady: <p style='color: red'> <p style='color: blue; background: yellow'> W nagłówku strony HTML – znacznik <style> Przykład: W nagłówku strony definicja stylu <head> </head> <style> p.zielony { color: green } p.negatyw { color: white; background: black } h1 {color: red} </style> w ciele strony <body> </body> <p class=zielony> To jest w kolorze zielonym <p class=negatyw> To jest w negatywie białe literki czarne tło.
Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML <head> <style type="text/css"> p.zielony { color: green } p.negatyw { color: white; background: black } </style> </head> <body> <p class=zielony> To jest w kolorze zielonym <p class=negatyw> To jest w negatywie białe literki czarne tło. </body> </html>
Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML – sposób 1 p.zielony { color: green } p.negatyw { color: white; background: black } my_ver_a.css <html> <head> <link rel="stylesheet" href="my_ver_a.css" type="text/css" /> </head> <body> <p class=zielony> To jest w kolorze zielonym <p class=negatyw> To jest w negatywie białe literki czarne tło. </body> </html>
Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML – sposób 2 p.zielony { color: green } p.negatyw { color: white; background: black } my_ver_a.css <html> <head> <style type="text/css"> @import url(„my_ver_a.css"); </style> </head> <body> <p class=zielony> To jest w kolorze zielonym <p class=negatyw> To jest w negatywie białe literki czarne tło. </body> </html>
Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML definicja stylu w atrybucie. Poziom najwyższy. <p style='color: red'> definicja arkusza styli w dokumencie HTML/XHTML. Poziom wyższy. <style> p.zielony { color: green } p.negatyw { color: white; background: black } </style> definicja arkusza styli w pliku. Poziom najniższy. <link rel="stylesheet" href="my_ver_a.css" type="text/css" title="styl glowny"/>
Arkusze stylów CSS – reguły stylów selektor { 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 }
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 h1 ... h6 p p.czarny h1.black p.niebieski p.inny
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
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}
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ą.
Arkusze stylów CSS – znaczniki <span> i <div> w służbie CSS <Znacznik HTML <span> - pozwala na wyróżnienie pewnego elementu liniowego do którego można zaliczyć tekst. <p>Lorem ipsum dolor sit <span style=„color:red”>amet</span>, consectetur adipiscing elit.</p> <Znacznik HTML <div> - 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: <div id="warstwa"><p>To jest tekst w DIV</p></div>
Arkusze stylów CSS – ramki top -color -style -width border- left right bottom 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 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;
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}
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
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
Arkusze stylów CSS – pozycjonowanie i wyświetlanie Elementy blokowe a liniowe Przykłady: <p>, <h1>, <div>, <table> - elementy blokowe <a>, <span>,<q>,<b>,<i>,<u> - elementy liniowe <img> - element liniowy ale z odstępami. #paragraf_1 { display: block; } display: block ,inline,none
Arkusze stylów CSS – pozycjonowanie i wyświetlanie Margin i padding Przykłady: #paragraf_1 { display: block; margin: 1cm; padding: 2cm; } margin padding
Arkusze stylów CSS – pozycjonowanie i wyświetlanie 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}