Keresés
Hírlevél
 
Kiemelt témák
»Hogy viszonyul ehhez a család?
»Legjobb metodika emberi relációk tárolására
»A programozó hibája, hogy törik a programját?
»Jogosultság kezelés mezőszinten
Állás/munka
»Wordpress szakértőt keresünk
»Kamu álláshirdetők listája
»Front-end fejlesztő / Sitebuilder
»DataStore Developer
»PHP programozó, webfejlesztő munkát keres
» több téma
Tudástár
?Input mezőből visszakapott adat probléma
?HTML-ben a Flash átméretezés torzul
Eredeti mezőnevek lekérdezése
Oldalon keresés 8x írja ki az eredményt
?XML-ből sok szövegmező
TinyMCE és az ékezetek
?Rengeteg hasonló kép betöltése gyorsan (PHP)
Ékezetes kar. nem minden táblában jól
?Shelltreeview gond
Grafikon rajzolás probléma
?Onclick= php függvény
?Egyenes megrajzolása
?Access-ből adott xml fájl kinyerése
Listázás időpont szerint
Exportálás változó könyvtárba
» több téma
Társalgó
»A programozásból jól meg lehet élni?
»MFC tanulás
»Könyvet adok-veszek
»Hogy viszonyul ehhez a család?
»Nintendo wii
»Letölthető az új Rad Studio XE és Delphi XE
»Weblap véleményezés
»Játékmotor elmélet
»Informatikai bulvárlap
»Delphi-ről C++-ra váltás
» több téma
Cikkek
»Bevezetés a genetikus algoritmusokba
»Bevezetés az adatkezelésbe
»Bevezetés a CSS alapjaiba
»GroupWise-kiegészítők készítése Python-ban
»Aspektus-orientált programozás
» több cikk
ASP  |  C#  |  C++  |  CSS  |  Delphi  |  Flash  |  HTML  |  Java  |  JavaScript  |  Pascal  |  Perl  |  PHP  |  Python  |  Visual Basic  |  Visual C++  |    »    

Cikkek

»

Web-programozás

»

CSS

»

Bevezetés a CSS alapjaiba

szerző: Thomeee, idő: 2005.04.19., értékelés: 4 (73 szavazat)
  Betűméret növelése Betűméret csökkentése Kapcsolódó fórum Felvétel kedvencekhez Küldés emailben Nyomtatható verzió
A CSS egy olyan leírónyelv, melynek segítségével különböző stíluslapokat hozhatunk létre és ágyazhatunk be HTML honlapjainkba. Ezek a stíluslapok befolyásolják az oldal megjelenését: meghatározhatjuk velük, hogy az egyes HTML elemek mekkora méretben, milyen színnel jelenjenek meg.
Mi is az a CSS ?

A CSS (Cascading Style Sheets) egy olyan leírónyelv, melynek segítségével különböző stíluslapokat hozhatunk létre és ágyazhatunk be HTML honlapjainkba. Ezek a stíluslapok befolyásolják az oldal megjelenését (design-ügyileg kiváló nyelv), meghatározhatjuk vele, hogy az egyes HTML tagek (bekezdések, táblázatok, címsorok stb.) hogyan jelenjenek meg, meghatározhatjuk a méretüket, színüket, stílusukat, típusukat stb.

A CSS története

A CSS megjelenésének oka az volt, hogy a weboldalakon megnőtt az igény az egyre bonyolultabb, kiforrottabb elemekre és formázásokra, amiket már az eredetileg egyszerű szöveges információk ábrázolására kitalált HTML-lel már nem nagyon lehetett megoldani. (Sok mindent meg lehetett, csak nagyon sok munka volt mindenhol beállítani a különböző formázásokat, így a nyelv elvesztette egyszerűségét, áttekinthetőségét). Itt jött képbe a CSS, mely sokkal rövidebbé, rugalmasabbá és szabadon kezelhetőbbé tette a HTML dokumentumokat.

Maga nyelv már elég régóta létezik, a CSS (1) 1996. december 17-én készült el. A nyelv kiadása óta több verziója is megjelent, 1998. május 12-én napvilágot látott a CSS 2 is (a CSS 2.1 és CSS 3 készülése pedig folyamatban van). A legelterjedtebb böngészők nagy része ma már támogatja a CSS nyelv elemeit, de még mindig vannak olyan böngészők is, amelyek egyes nyelvi elemeket rosszul jelenítenek meg vagy kihagynak, mert nem tudják értelmezni.

Miért éppen a CSS?

Most egy példán keresztül bemutatjuk, hogy hogyan tudjuk megkönnyíteni a munkánkat a CSS-sel. A feladat az, hogy készítsünk el két felsorolást és két bekezdést betűformázásokkal. A feladatot először csak HTML-lel oldjuk meg, azután használjuk a CSS-t.

<html>
  <head>
  <title>Feladat megoldása HTML-lel</title>
  </head>
  <body>
  <ul>
  <font color="#EBEBEB"><li>Első felsorolás első sora</font></li>
  <font color="#EBEBEB"><li>Első felsorolás második sora</font></li>
  </ul>
  <font color="#EBEBEB"><p><font size="6">Első bekezdés</font></p>
  <ul>
  <font color="#EBEBEB"><li>Második felsorolás első sora</font></li>
  <font color="#EBEBEB"><li>Második felsorolás második sora</font></li>
  </ul>
  <p><font size="6">Második bekezdés</font></p>
  </body>
  </html>
 

Láthatjuk, ez egy általános HTML dokumentum, minden egyes bekezdés - és felsorolás elemet külön kellett formázni, ez egy kicsit hosszadalmas dolog ennél nagyobb dokumentumoknál. Sőt, még a tagekbe és belekavarodhatunk, nem tudjuk, hogy mit hol zártunk le stb. És ha egy nagyobb dokumentumban mindent így formázunk, akkor a lap olyan lassan fog betölteni, hogy a felhasználók megőrülnek. Most nézzük meg, hogy ezt hogyan lehetett volna megoldani CSS-sel:

  <html>
  <head>
  <title>Feladat megoldása CSS-sel</title>
  <style type ="text/css">
  li { color: #EBEBEB }
  p { font-size: 28px }
  </style>
  </head>
  <body>
  <ul>
  <li>Első felsorolás első sora</li>
  <li>Első felsorolás második sora</li>
  </ul>
  <p>Első bekezdés</p>
  <ul>
  <li>Második felsorolás első sora</li>
  <li>Második felsorolás második sora</li>
  </ul>
  <p>Második bekezdés</p>
  </body>
  </html>

Mint láthatjuk, a dokumentum sokkal áttekinthetőbb, rugalmasabb, könnyebben szerkeszthető és lényegesen rövidebb lett. A HTML-ben a betűméretet csak 1-7 -ig választhatjuk ki, de a CSS-ben annyi Pixel-t (px) adunk meg, amennyit akarunk. Már egy ilyen kicsi dokumentumnál is tapasztalhatjuk a CSS előnyeit, és ez még nem minden, amit ez a nyelv tud...

Fontos megemlíteni, hogy a CSS nyelv magában nem sokat ér, ha valaki arra adja a fejét, hogy megtanulja és még nem ismeri a HTML-t legalább alapszinten, az előbb a HTML-lel kezdje, és csak azután (miután a HTML-t elsajátította) fogjon bele a CSS-be!

Küldés emailben Küldés emailben Nyomtatható verzió Nyomtatható verzió
Belépés
E-mail cím:
Jelszó:

RSS források
-Hírek
-Cikkek
-Fórumok
-Állás/munka
Top pontgyűjtők
»Micu1.030
»Interlock280
»mezofi150
»Pitta_100
»Frostech0100
»szbzs.2100
»Hack100
»Riha60
»Akhiles50
»mrchandra50
Top wikieditorok
»Sting
»Doi
»FlamingClaw
»Argathron
»Csaboka2
»Vodka
»Joexy
»Ivn
»Balucinho
»Kelemzol
» ugrás a wikire
A nap kifejezései
»Algoritmus
»Hogyan kezdjem el
»Perl
» ugrás a wikire
Hírek
»Megérkezett a PostgreSQL 9.0 kiadásra jelölt változata
»Letölthető az új Rad Studio XE és Delphi XE
»Function-X digitális művészeti találkozó és demoscene party
»Webfejlesztőknek szóló közösségi oldalt indított a Microsoft
»Letölthető a hardvergyorsított Chrome 7 első fejlesztői kiadása
» több hír
PC Fórum hírek
»Itt az első kép az AMD nyolcmagos processzoráról
»"Szuperdizájnos" érintő-egeret mutatott be a Microsoft
»Szabadalmaztatta a számítógép kikapcsolását a Microsoft
»Vírusriadót váltott ki a webezőknél a Google
»Ingyen iWiW-ezhetnek mobiljaikról a T-Mobile-osok
»Automatikusan kiválogatja legfontosabb leveleink a Google
»OOo4Kids - ingyenes Office csomag gyerekeknek
»Új, gyorsabb Core i3 és Pentium processzorokat jelentett be az Intel
Tagi blogok
»PSP
»Első Programozó
»USB
»PHP, mint sablonmotor egyszerűen