1 / 29

CSS

CSS. Mi az a CSS?. • A CSS a C ascading S tyle S heets rövidítése (sorba kapcsolódó stíluslapok) • A stílussal adhatod meg, hogy miként jelenjenek meg a HTML elemek • A stílusokat általában stíluslapokon ( Style Sheets ) tároljuk

jaeger
Download Presentation

CSS

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

  2. Mi az a CSS? • A CSS a Cascading Style Sheets rövidítése (sorba kapcsolódó stíluslapok) • A stílussal adhatod meg, hogy miként jelenjenek meg a HTML elemek • A stílusokat általában stíluslapokon (Style Sheets) tároljuk • A stílusokat a HTML 4.0-ban vezették be azért, hogy megoldjanak egy problémát • A külső stíluslapok (External Style Sheets) használatával sok munkát spórolhatunk meg • A külső stíluslapokat a CSS fájlokban tároljuk • A különböző stílus definíciók sorba kapcsolódnak

  3. A stílusok használata egy általános problémára jelent megoldást • Ahogy a két legnagyobb böngésző - egyre több elemet és tulajdonságot adott hozzá az eredeti HTML specifikációhoz, egyre nehezebb volt olyan WEB-lapokat készíteni, ahol a tartalom és a forma elkülöníthető volt. • Hogy megoldja ezt a problémát, a World Wide Web Consortium (W3C) hozzáadta a STÍLUSOKAT a HTML 4.0 definíciójához.

  4. A stíluslapok használatával munkát és időt takaríthatunk meg A stíluslapok – csakúgy, mint a HTML 3.2-ben a font elem és a color tulajdonság - azt határozzák meg, hogy HOGYAN jelenjenek meg a HTML elemek. A stíluslapokat általában egy külső .css fájlban tároljuk. A külső stíluslapok használatával elérhetjük, hogy több weblap megjelenését egyszerre meg tudjuk változtatni úgy, hogy a .css fájlban megváltoztatunk néhány sort. A weblapokon ehhez semmilyen változtatást nem kell elvégeznünk!

  5. A különböző helyeken megadott stílusok felülírják egymást • Stílusokat többféle módon is megadhatunk. Beírhatjuk közvetlenül az elemekhez a style tulajdonságot használva, vagy készíthetünk a weblap elejére egy belső stíluslapot, de akár egy külső .css fájlban is eltárolhatjuk a stílusokat.

  6. Felülírási sorrend

  7. Melyik stílust fogja használni a böngésző, ha több helyen is megadtuk a stílusokat? • 1. A böngésző alapértelmezése • 2. Külső stíluslapokon megadott stílusok (külső .css fájlban) • 3. Belső stíluslapokon megadott stílusok (a <head> elemen belül) • 4. Közvetlenül megadott stílusok (magán a HTML elemen belül, a style tulajdonságban)

  8. Hogyan és hová írjuk a CSS kódot? • Szintaktika • elemnév {tulajdonság: érték} • A szelektor általában annak a HTML elemnek a neve, amelynek a megjelenését meg szeretnénk változtatni. • Utána kapcsos zárójeleken belül megadhatjuk a tulajdonságot amit meg szeretnénk változtatni, majd egy • kettőspont után az értéket:

  9. Példa • body {color: black} • Megjegyzés: Ha az érték több szóból áll, mindig tegyük idézőjelek vagy aposztrófok közé: • p {font-family: "sans serif"}

  10. Példa 2 Megjegyzés: Több tulajdonság-érték párost is megadhatunk, egymástól pontosvesszőkkel elválasztva: p {text-align:center;color:red} Ha olvashatóbbá szeretnénk tenni a CSS kódot, írjunk minden tulajdonságot új sorba: p{ text-align: center; color: black; font-family: arial}

  11. Csoportosítás Az elemek nevét csoportosíthatjuk is, tehát egymástól vesszőkkel elválasztva megadhatjuk több elem nevét is, • amire a beállításokat vonatkoztatni szeretnénk: h1,h2,h3,h4,h5,h6 { color:red}

  12. Osztályok megadása

  13. Osztályok megadásával ugyanannak az elemnek többféle megjelenítését is megadhatjuk: • p.right {text-align: right} • p.center {text-align: center}

  14. A HTML dokumentumban a fenti osztályokra a következőképp hivatkozhatunk • <p class="right"> • This paragraph will be right-aligned. • </p> • <p class="center"> • This paragraph will be center-aligned. • </p>

  15. Egy HTML elemnél csak egy osztályt választhatunk ki. Az alábbi példa HELYTELEN: • <p class="right" class="center"> • This is a paragraph. • </p>

  16. Ha egy osztály létrehozásánál elhagyjuk az elem nevét, és csak ponttal kezdjük a meghatározást, akkor az adott osztály minden elemnél használható lesz: .center {text-align: center}

  17. Az alábbi példában a h1 és a p elemnél is felhasználjuk a .center osztályt: • <h1 class="center"> • This heading will be center-aligned • </h1> • <p class="center"> • This paragraph will also be center-aligned. • </p>

  18. Az osztályok nevét NE kezdjük számokkal, mert a Mozilla/Firefox böngészők nem fogják érteni!

  19. Azonosító használata

  20. A HTML elemeket az azonosítójuk (id) alapján is meg tudjuk formázni. Míg az osztályoknál egy pontot kellett a • név elé tenni, az azonosítóknál kettőskeresztet használunk.

  21. Az alábbi definícióval minden „green” azonosítójú elem színét zöldre állítjuk be: • #green {color: green}

  22. Az alábbi meghatározás csak azokra a p elemekre vonatkozik, amelyeknek „para1” az azonosítójuk: • p#para1 • { • text-align: center; • color: red • }

  23. Megjegyzések a CSS kódban • A megjegyzések használatával könnyebben értelmezhetővé tehetjük a CSS kódot, de akkor is hasznát vesszük, • ha egy kódrészletet hatástalanítani szeretnénk. A megjegyzéseket a böngészők figyelmen kívül hagyják. A • megjegyzés mindig a "/*" jellel kezdődik, és a "*/" jellel ér véget:

  24. Hová írjuk...

  25. Külső stíluslap • Ha külső stíluslapot használunk, akkor azt több weblap is használhatja, így egyszerre tudjuk megváltoztatni a • megjelenésüket. A külső stíluslapot a <link> elem használatával rendeljük hozzá a HTML dokumentumhoz, a • <head> részen belül:

  26. <head> • <link rel="stylesheet" type="text/css" href="stiluslap.css" /> • </head>

  27. Belső stíluslap • Ha egy weblapnak egyedi stílust szeretnél megadni, akkor a <style> elem segítségével belső stíluslapot • készíthetsz a <head> elemen belül:

  28. <head> • <style type="text/css"> • hr { • color: sienna • } • p { • margin-left: 20px • } • body

  29. Közvetlen stílusmeghatározás Közvetlenül is megadhatod egy elem stílusát, de ezzel ismét kevered a tartalmat és a formát, így elveszíted a stíluslapok használatával járó előnyöket. A style tulajdonságot bármelyik HTML elemhez közvetlenül is beírhatod. A style tulajdonság tartalma bármilyen CSS kód lehet: • <p style="color: sienna; margin-left: 20px"> • Ez egy bekezdés • </p>

More Related