© BZ, 2006Stíluslapok használata1 Váltsunk stílust! Stíluslapok a webszerkesztésben.

Slides:



Advertisements
Hasonló előadás
HTML nyelv Hiper-Text Markup Language 1. óra.
Advertisements

HTML nyelv.
Weblap szerkesztés HTML oldal felépítése Nyitó tag Záró tag Nyitó tag Záró tag oldalfej tözs.
Stíluslapok (CSS) a webfejleszétben
FRAME-k (keretek). FRAME-k A frame-ek (keretek) segítségével a képernyőt felosztva egyszerre jeleníthetünk meg több webes dokumentumot a képernyőn. Fejlec.html.
ELTE IK, Web-fejlesztés I. kurzus 1. 2  Az a HTML állomány, amelyet átalakítunk, a következő címről letölthető: 
CSS médiatípusok - példák
Amit a HTML-ről érdemes tudni
Honlap készítés Érdekességek.
Stílus, mesteroldal, témák
A webprogramozás alapjai B282
HTML nyelv.
STÍLUSOK Tulajdonságok és értékek. Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red}
Leírónyelvek: HTML és XHTML
Készítette: Rummel Szabolcs
Hernyák Zoltán XML és HTML.
Készítette: Nagy-Szakál Zoltán 2007.
Készítette: Danka Zsuzsa (CX7ASG)
A HTML alapjai Havlik Barnabás Készítette:
HTML dokumentum felépítése
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Előadás JavaScript Tananyag: W eb - programozás.
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Tananyag: 2. konzultáció CSSJavaScript.
HTML oldal felépítése Készítette: Pataki Arnold
Bevezetés a Stíluslapok használatába - gyakorlati feladatsor
Webszerkesztés A HTML alapjai.
Webszerkesztés Stíluslapok (CSS).
JavaScript a gyakorlatban. 7. Gyakorlat DHTML  Fa-struktúrájú menük létrehozása  Legördülő menük létrehozása.
JavaScript a gyakorlatban
CSS.
Buris Katalin V. földrajz - informatika
Számítógépes Grafika 2. gyakorlat Programtervező informatikus (esti) 2011/2012 őszi félév.
Weblapok elrendezésének, dizájnjának kialakítása Borsi Katalin webfejlesztő, oktató NetAcademia Oktatóközpont.
XHTML – a tanultak összefoglalása
XHTML 1. óra. Miért térjünk át HTML-ről XHTML- re? HTML-szabványban tartalom és forma összemosódott HTML 4.0 szabványban stíluslapok használatát javasolták.
Korpásné Szűcs Melinda web-referens DEENK Korpásné Szűcs Melinda web-referens DEENK.
A <DIV> tag és formázás CSS-sel
CSS A CSS bemutatása.
HTML nyelv.
Közzététel a Weben. Film közzététele.
Hyper Text Markup Language
Hyper Text Markup Language
Honlap készítés 2. óra.
Honlap készítés 4. óra.
4. óra. Emlékeztető Igazítások Háttérszín, szövegszín Háttérkép Meta adatok.
Web-grafika II (SVG) 1. gyakorlat
Web-grafika II (SVG) 8. gyakorlat Kereszty Gábor.
Szövegszerkesztés Alapfogalmak.
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 10. Előadás Css Tananyag:Web-programozás.
HTML 2. Űrlapok
Készítette: Turócziné Kiscsatári Nóra
Az NVU webszerkesztő program
XHTML és CSS Webszerkesztés stílusosan
Html nyelv (HyperText Markup Language)
Violet nails Készítette: Csőke Vivien. Bevezetés Téma: Violet nails - műkörömkészítő weblapjának elkészítése A weboldal elérhető az alábbi címen: violetnails.atw.hu.
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Weblapkészítés alapjai
SZÖVEGSZERKESZTÉS III. ~ KARAKTERFORMÁZÁS ~
Weblapkészítés.
Java web programozás 2..
A <DIV> tag és formázás CSS-sel
Informatikai rendszerek
Informatikai rendszerek
Alkalmazott Informatikai Tanszék
Webprogramozó tanfolyam
Fejlett Programozási Technikák 2.
CSS Cascading Style Sheet HTML.
Cascading Style Sheet.
Html parancsok.
Táblázatok A táblázat megadása a tag használatával lehetséges. A és tageken belül: a és tagek között adhatjuk meg a.
A digitális kép bevezetés.
Előadás másolata:

© BZ, 2006Stíluslapok használata1 Váltsunk stílust! Stíluslapok a webszerkesztésben

© BZ, 2006Stíluslapok használata2 A munkamegosztás a weblapon Tartalom → HTML kód a keresők is ezt „olvassák”! Megjelenés → stíluslapok (CSS) a design helye Viselkedés → Javascript használhatóság növelése

© BZ, 2006Stíluslapok használata3 Érvek 1. (Egy HTML-kód – sok CSS-lap) (Forrás:

© BZ, 2006Stíluslapok használata4 Érvek 2. (Adott HTML-kód – változó CSS) (Forrás:

© BZ, 2006Stíluslapok használata5 Érvek 3. Több lap stílusa egy helyen  gyorsan és könnyen frissíthető, módosítható Különböző felhasználókhoz különböző stílusokat lehet rendelni: például könnyen olvasható, nyomtatható stílusok A dokumentum mérete és komplexitása csökken áttekinthetőbb HTML kód kisebb HTML kód Stíluslapok a gyorsítótárban  gyorsabb oldalak

© BZ, 2006Stíluslapok használata6 Amiről szó lesz… Némi elmélet „Dobozok” készítése, elhelyezése Oldalak felépítése Menük Nyomtatás … és még meglátjuk

© BZ, 2006Stíluslapok használata7 CSS alapok 1. Cascading Style Sheet ~ egymásba ágyazott stíluslapok Szintaxis: kiválasztó {tulajdonság: érték} H1 {color: blue} Hivatkozás egy külső url(masik.css)

© BZ, 2006Stíluslapok használata8 CSS alapok 2. – Csoportosítás Kiválasztók csoportosítása: H1, H2, H3 {font-family: verdana} Deklarációk csoportosítása: H1 { font-family: helvetica; font-size: 12pt; font-style: normal; }

© BZ, 2006Stíluslapok használata9 CSS alapok 3. – Öröklődés Az elemek (általában) öröklik szülőelemük tulajdonságait. dokumentumfa képe

© BZ, 2006Stíluslapok használata10 CSS alapok 4. – A kiválasztók Elem kiválasztása h1, h2, h3 { color: #a00000; } Osztály (class) alapú kiválasztás H1.zold {color: #00ff00} Zöld, mint a rét Azonosító (ID) alapú kiválasztás #azonosito {background-color: red;} A blokk tartalma... Helyzetérzékeny kiválasztás table b { color: #0000a0; } A táblában itt egy sötétkék rész...

© BZ, 2006Stíluslapok használata11 CSS alapok 5. – „Mértékegységek” Méretek px – pixelben (képpont) megadott érték P { font-size: 12px } em – az 1em az adott környezet betűméretét jelöli H1{ margin: 0,5em } ex – a kijelölt betűkészlet kisbetűinek magassága H1{ margin: 1ex } Színek a szín nevével : H2 { color: olive } a szín RGB kódjával : EM { color: #ff0000 } URL-ek BODY { background: url(images/hatter.jpg) } !CSS-hez képest!

© BZ, 2006Stíluslapok használata12 CSS alapok 6. – Látszólagos elemek Linkekben link - a:link {text-decoration: none;} visited - a:visited {font-style: italic;} active - a:active {color:lime} Dinamikus elemek hover - a:hover {text-decoration: underline;} focus -input:focus {background: #dddddd;} Tipográfiai elemek first-letter p:first-letter { font-size: 300%; } first-line p:first-line { color: #000080; }

© BZ, 2006Stíluslapok használata13 Dobozmodell 1. Minden doboznak van tartalma ( content ), ez maga az elem, amelyik a dobozt létrehozza. Az elemek köré szegélyek ( border ) rajzolhatóak, amelyeknek lehet színe, vastagsága, stb. A tartalom és a szegély között távolság a kitöltés ( padding ). Beállítani csak a méreteit tudjuk. A szegélyen kívül pedig margó ( margin ) helyezkedhet el, amelynek segítségével szabályozni lehet a szomszédos elemektől való távolságot. A margók minden esetben átlátszóak.

© BZ, 2006Stíluslapok használata14 Dobozmodell 2. Forrás:

© BZ, 2006Stíluslapok használata15 Dobozmodell 3. A HTML elemek két nagy csoportra oszthatók: blokk és sor elemekre. Blokk -elemek: pl. Hn, P, UL, stb. DIV Leegyszerűsítve: a blokk elemek előtt és után sortörés van Sor -elemek: pl. B, STRONG, CITE, stb. SPAN A két típusnál eltérően működik a dobozmodell!

© BZ, 2006Stíluslapok használata16 Egyszerű doboz készítése 1. A HTML -kód: Dobozcím Az első bekezdés szövege… A 2. bekezdés szövege….

© BZ, 2006Stíluslapok használata17 Egyszerű doboz készítése 2. A CSS-állomány:.doboz { width: 200px; border: 1px solid #cccccc;}.doboz.tartalom { background-color: #f0ffff; font-size: 0.7em; padding: 5px 0 0 0;}.doboz.tartalom p { padding: 0 10px 10px 10px; margin: 0; font-family: arial, sans-serif;}.doboz h2 { margin: 0; height: 30px; font-family: arial, sans-serif; font-size: 0.9em; background-color: #7fffd4; border-bottom: 1px dotted black; text-align: center; line-height: 2em; color: #660066;}