CSS elmélet + gyakorlat

Egy alapvető példán keresztül nézzük meg, miért lesz egyszerűbb az életünk a CSS használatával. Vegyünk egy általános oldalt, ahol több címsor és bekezdés található. Szeretnénk, ha a címsoraink betűi nagyok és sötétvörösek lennének, míg a bekezdéseink betűi kisebbek és sötétzöldek.

Ezt HTML formázással a következőképpen tudjuk megvalósítani:

  1. <html>  
  2. <head>  
  3.   <title>CSS példa</title>  
  4. </head>  
  5. <body>  
  6. <h1><font size="4" color="#a00000">Bevezetés</font></h1>  
  7. <p><font size="2" color="#00a000">A vers...</font></p>  
  8. <h1><font size="4" color="#a00000">Tárgyalás</font></h1>  
  9. <p><font size="2" color="#00a000">A költő...</font></p>  
  10. <h1><font size="4" color="#a00000">Összefoglalás</font></h1>  
  11. <p><font size="2" color="#00a000">Végezetül...</font></p>  
  12. </body>  
  13. </html>  


Mint láthatjuk, minden egyes címsor (h1) és bekezdés (p) esetén meg kellett határoznunk a megjelenést (font), ráadásul ezáltal sokkal kevésbé lett áttekinthető a HTML forrásunk.
További probléma, hogy a betűk méretének meghatározására nincs más lehetőségünk (a szabvány szerint), csak az előre definiált (1-től 7-ig meghatározott) méretek közül kiválasztani a nekünk megfelelőt.
Amennyiben egy bonyolultabb oldalról van szó, még áttekinthetetlenebbé válhat a forrás, bonyolultabbá téve az utólagos szerkesztést.
Nem lehetne ezt a formázást egyszerűbben elérni?

Nézzük, hogyan alakul ugyanez stíluslapok használatával:

  1. <html>  
  2. <head>  
  3.   <title>CSS példa</title>  
  4.   <style type="text/css"><!--  
  5.   h1 { font-size: 20px; color: #a00000; }  
  6.   p { font-size: 12px; color: #00a000; }  
  7.   --></style>  
  8. </head>  
  9. <body>  
  10. <h1>Bevezetés</h1>  
  11. <p>A vers...</p>  
  12. <h1>Tárgyalás</h1>  
  13. <p>A költő...</p>  
  14. <h1>Összefoglalás</h1>  
  15. <p>Végezetül</p>  
  16. </body>  
  17. </html>  

A trükk a fejlécben látható style elemeken belül van. Meghatározzuk, hogy a HTML állományban levő összes címsor (h1) elem és bekezdés (p) elem a fentiekben meghatározott kívánságainknak megfelelően jelenjen meg. Csak egyszer kellett ezt megtenni, továbbá a kódunk is sokkal átláthatóbb lett. A pontos méretet is meghatározhattuk, ezúttal pixelben megadva azt, de további mértékegységek is rendelkezésünkre állnak. Amennyiben valamiért utólag módosítanunk kell a megjelenést, egyből csak egy helyen kell ezt megtennünk, s mindenhol meg is változik. Az egyszerűbb szerkeszthetőségen és karbantarthatóságon kívül az így elkészített dokumentum sokkal kisebb méretű is lesz, gyorsabban letöltődik, kisebb adatforgalmat generál. Ha egy külső állományban helyezzük el a stílusdefiníciókat, akkor több dokumentum megjelenését is befolyásolni tudjuk egyszerre, továbbá ha a böngésző gyorsítótárazza a meghatározásokat, az adatforgalom tovább csökken. További előny, hogy az újabb böngészők egyre inkább támogatják a szabványokat, s ha mi is tartjuk hozzá magunkat, akkor egyre kisebb munkával egyre több látogató fogja pontosan ugyanúgy látni a honlapunkat (az eddigi "minden böngészőn megnézem, hogy jó-e" stílusú munkával szemben). Persze mint a korábbiakban is ki lett hangsúlyozva, csodát egyelőre a CSS-től se várjunk, de mindenképpen számíthatunk rá, hogy ez fogja meghatározni a jövő honlapjainak megjelenését.

CSS hozzákapcsolása a HTML-hez
A fentiekben egy példát láttunk, hogyan kapcsolhatjuk a CSS-t a HTML állományunkhoz, hogyan határozhatjuk meg ennek a megjelenését. Lássuk a lehetőségek listáját (melyeket szabadon, akár keverve is használni tudunk):

Beágyazott stíluslap

Ezt láthattuk a fenti példában. A stílusleírást a HTML oldal fejlécében kell elhelyezni, style elembe ágyazva. A fenti példában HTML megjegyzésbe is tettük (<!-- ... -->), ezzel azt érjük el, hogy az olyan böngészők, amik nem ismerik a stíluslapokat, ne jelenítsék meg a stílus definíciónkat. Az így meghatározott stílus az egész dokumentumra érvényes lesz.

Külső stíluslap

A stíluslapunkat elhelyezhetjük egy külső állományban is, így lehetővé téve, hogy az több HTML állományra is érvényes legyen, s központilag szerkeszthetővé váljon (ne kelljen minden egyes HTML állományt megváltoztatnunk, ha a honlapunk ezentúl másképp jelenne meg). A külső stíluslapokra az oldal fejlécében tudunk hivatkozni, egy link elem segítségével:
  1. <head>  
  2.   <link rel="stylesheet" href="kulso.css" type="text/css">  
  3. </head>  
A stíluslapot tartalmazó állományban (a példában kulso.css a neve) csak a stíluslapjaink definícióját kell elhelyeznünk, pl:
  1. h1 { font-size: 20px; color: #a00000; }  
  2. p { font-size: 12px; color: #00a000; }  
A beágyazott stíluslapokhoz hasonlóan az így meghatározott stílus az egész dokumentumra érvényes.

Megjegyzések

Megjegyzés küldése

Népszerű bejegyzések ezen a blogon

Ágazati alapvizsga (Programozás)

Kép
 Első programozási gyakorlatok: Programozási feladatok Az Ön feladata az alábbiakban olvasható leírás alapján három program elkészítése. A három Python-feladat elvégzésére összesen kb. 60 perc áll rendelkezésre. A programokat a (megadott hely)-re kell mentenie. A programok elkészítése során a felhasználó által megadott adatok helyességét nem kell ellenőriznie – ha például a program egy 1 és 5 közé eső szám megadását kéri a felhasználótól, akkor feltételezheti, hogy a felhasználó számot, és a megadott feltételeknek megfelelő számot ad meg. Törekedjen arra, hogy a tanult programozási elveknek megfelelő adatszerkezeteket, vezérlési szerkezeteket alkalmazzon! Munkáját rendszeresen mentse! Amennyiben a vizsga során a számítógép nem megfelelő működését tapasztalja, jelezze a felügyelő tanárnak! Első feladat – 8 pont Írjon programot nagyobb.py néven! A program kérjen be két számot a felhasználótól, majd írja ki, ho...
További információk

Ágazati alap vizsga (WEB)

1.) Cirtusfélék webszerkesztés 40 pont Weboldalak kódolása – Citrusfélék      A forrásban található egy befejezetlen reszponzív oldal, amely részletesebben bemutatja a citrusféle gyümölcsöket. A mintának és a leírásnak megfelelően módosításokat kell elvégeznie a weboldalakon és a hozzátartozó CSS stíluslapon! Nyissa meg az index.html , mandarin.html és style.css állományokat és a feladatleírásnak megfelelően végezze el a módosításokat!   1. A weboldalak karakterkódolása utf-8 legyen és állítsa be az oldalak nyelvezetét magyarra! A böngésző fülön megjelenő cím egyezzen meg az oldal főcímével! 2. A Bootstrap stíluslap hozzá lett csatolva a weboldalakhoz, de sajnos a style.css stíluslap nem. A weboldalak fejrészében helyezzen el hivatkozást a css mappában található style.css stíluslapra a már meglévő Bootstrap stíluslap hivatkozása alá! 3. A header HTML elemhez tartozó elemkijelölőt módosítsa úgy, hogy a fejléc magassága legyen 350 pixel nagy...
További információk

HTML + CSS (elmélet+gyakrolat)

Kép
Weblapok formázása CSS segítségével A CSS (kaszkádolt stíluslap,  C ascading  S tyle  S heet) segítségével úgy formázhatunk egy weboldalt, hogy a formázási információk jól elkülöníthetők, általában egy külön állományban adhatók meg. A CSS használatának előnyei: letisztultabb HTML kód rövidebb HTML kód a "dizájn" egyszerűbben módosítható ugyanaz az oldal több stílusban is megjeleníthető a CSS több formázási lehetőséget ad, mint a HTML Tartalom 1 Helló CSS példa 2 A CSS utasítások szerkezete 3 CSS csatolása a HTML kódhoz 4 CSS parancsok csoportosítása 5 CSS parancsok hatásköre 6 Formázás 7 Weblap elrendezések CSS-sel Helló CSS példa HTML <html> <head> <link rel="stylesheet" type="text/css" href="stilus.css" />  </head> <body>    <h1>CSS példa</h1>    <p>    Helló CSS!!!    Ez egy minimális CSS példa.   ...
További információk