1 / 18

Webes stílusfájlok

Webes stílusfájlok. Készítette: Rummel Szabolcs Elérhetőség: rsz@mailbox.hu. Mi a CSS?. Cascading Style Sheet Célja: a HTML dokumentumok megjelenésének támogatása stíluslapokkal. Webes szabvány. Miért jó?.

taro
Download Presentation

Webes stílusfájlok

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. Webes stílusfájlok Készítette: Rummel Szabolcs Elérhetőség: rsz@mailbox.hu

  2. Mi a CSS? • Cascading Style Sheet • Célja: a HTML dokumentumok megjelenésének támogatása stíluslapokkal. • Webes szabvány.

  3. Miért jó? • A HTML kezdeti feladata az információ közlése, ezért kevés dokumentumformázási lehetőséget tartalmaz. • Ezt az űrt pótolja a CSS. Ami egy egységes, egyszerű dokumentumformázási nyelv.

  4. CSS összerendelése HTML-el • Mint minden összerendelést a HTML-ben, ezt is a program fejében (Deklarációs részében) kell elvégezni. • <head><style type=text/css></head> • A HTML állományban állítom be a formai elemeket! • <head><link rel=stylesheet type=text/css href=style.css></head> • Önálló CSS állományt készítek!

  5. CSS szintaxisa • Alapvetően 3 részből áll: • Kiválasztó • Tulajdonság • Érték • Általános forma: Kiválasztó {tulajdonság: érték;}

  6. Kiválasztó • Alapesetben egy HTML elem, amit formázni szeretnénk. • Pl: body, p, td, h stb

  7. Tulajdonság • A formázási utasítás neve, amilyen tulajdonságát formázni kívánjuk • Pl: font-family, color, size, margin stb.

  8. Érték • A tulajdonságnak az értéke, pl a színnek piros, a betűméretnek 14, betűtípusnak Arial. • A számértékek megadhatók: • Pixelben • Százalékban • Pontban (szövegszerkesztők mértékegysége) • Em-ben (betűméret)

  9. Szabályok • Egy elemnek egyszerre több tulajdonsága is beállítható Td {font-family:Arial; color: red; text-align:center;} • Egyszerre több elem is formázható P,td,h {color:yellow;}

  10. Stílusosztályok • Ha a HTML dokumentumban ugyanaz a stílus több elemre is vonatkozik, vagy egy elem több stílusban is előfordul, akkor a megoldás a stílusosztályok létrehozása! .cella {border: 1px; solid; color:green;} • Használata HTML-ben: <td class=cella>

  11. Behúzások (margin) • Lehet egységesen • Body { margin: 10px; } • Vagy egyenként • Body { margin-left: 10px; margin-right: 15px; margin-top: 5px; margin-bottom: 4px;}

  12. Első sor behúzása • Text-indent paranccsal történik. • Pl: p { text-indent: 10px; margin-bottom: 0px;} • Eredménye a regényekre emlékeztető külalak.

  13. Karakterek formázása • Család, méret, szín, stílus, különlegesség • Body { font-family: verdena; size: 6; color: red; font-style: italic; font-weight: bold; font-transform: uppercase (lowercase);} Nagy ill. Kisbetűs.

  14. Betűtípusok • A betűtípusok megadásánál célszerű több betűtípust is megadni. Ezzel elkerülhetjük, hogy a böngészőnk esetleg nem ismeri a betűtípust. • Gyűjtő típusok: serif (talpas TNR)sans-serif: talpatlan( Arial)monospace: írógépszerű (Courier)

  15. Szegély, háttér • Szegély (border)beállítható egységesen vagy külön-külön (lsd. Margin). • Háttér (background)div.color {background: #ff1926} vagydiv.color {background: rgb (204,204,255);}

  16. Színek • Színválasztáskor célszerű a színtévesztő, vagy színt egyáltalán nem látó emberekre is gondolni. • Színtévesztő: vörös-zöld sárga-kékszínek megkülönböztetése problémás.

  17. Hivatkozások • Weboldalunkon a linkeket is formázhatjuk! • A formázás a következő négy esetre állítható be: • Link: alap értelmezet eset • Visited: látogatott link • Active: aktivált link • Hover: egér a link fölött van.

  18. Hivatkozás formázása • :link { color: rgb(0, 0, 153) } • :visited { color: rgb(153, 0, 153) } • active { color: rgb(255, 0, 102) } • :hover { color: rgb(0, 96, 255) } • a.egyszeru { text-decoration: none } • Eltünteti az alapértelmezett beállítást.

More Related