Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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

Hasonló előadás


Az előadások a következő témára: "CSS. 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."— Előadás másolata:

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 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 This paragraph will be right-aligned. This paragraph will be center-aligned.

15 Egy HTML elemnél csak egy osztályt választhatunk ki. Az alábbi példa HELYTELEN: This is a paragraph.

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: This heading will be center-aligned This paragraph will also be center-aligned.

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 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 elem használatával rendeljük hozzá a HTML dokumentumhoz, a részen belül: Külső stíluslap

26

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

28 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: Ez egy bekezdés


Letölteni ppt "CSS. 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."
Google Hirdetések