1 / 22

Arkusze stylów CSS - wprowadzenie

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 ?

presta
Download Presentation

Arkusze stylów CSS - wprowadzenie

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Specjalizacja "Dziennikarstwo On-line„Arkusze stylów – CSSCzęść 5Prowadzący: Dariusz Jarugadjaruga@klub.chip.pl

  2. 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

  3. 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.

  4. Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML <html> <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>

  5. p.zielony { color: green } p.negatyw { color: white; background: black } my_ver_a.css <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> Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML – sposób 1 <html> </html>

  6. p.zielony { color: green } p.negatyw { color: white; background: black } my_ver_a.css <body> <p class=zielony> To jest w kolorze zielonym <p class=negatyw> To jest w negatywie białe literki czarne tło. </body> Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML – sposób 2 <html> <head> <style type="text/css"> @import url(„my_ver_a.css"); </style></head> </html>

  7. 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"/>

  8. 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 }

  9. 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

  10. 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 – pseudoklasy :link  nieodwiedzone łączea: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 potomnegop: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 elemencieblockquote:before { content: ‘tu jakiś tekst';} blockquote:after { content: ‘tu jakiś tekst';} :first-linep.tytul:first-line {color: blue }:first-letterp.tytul:first-letter { font-size: 50px } Nie wszystkie przeglądarki to obsługują.

  13. 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 <spanstyle=„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>

  14. Arkusze stylów CSS – ramki top -color-style -width left right border- 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

  15. 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 – 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 {italicnormalbold 24px Verdana}

  17. 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,justifytext-decoration:none, overline, line-through, underline, blink text-transform: uppercase, lowercase, capitalize text-indent: jednostka miary np. 2cm - wcięcie pierwszej liniiline-height: jednostka miary np. 200% - wysokość linii

  18. Arkusze stylów CSS – właściwości tekstu Przykłady: #paragraf_1 { letter-spacing: 10px word-spacing: 20pxwhite-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 – 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

  20. 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 – 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}

More Related