HTML

Szintaktika

A stílusokat kijelölők és meghatározások segítségével tudjuk leírni. A kijelölő megadja, hogy melyik HTML elemet formázzuk. A legegyszerűbb esetben például az összes bekezdés elemet formázva:

p {
	tulajdonság: érték;
	tulajdonság: érték;
}

Természetesen nem fontos minden tulajdonságot külön sorba írni, de az átláthatóságot nagyban segíti. Látható, hogy a meghatározásblokkot "{" zárójelek közé kell zárni, valamint a tulajdonságokat ";"-el kell elválasztani.

Mértékegységek

Nagyon sok tulajdonsághoz valamilyen értéket kell megadni (szélesség, magasság, vonalvastagság, margó stb.). Az egyes értékeket megadhatjuk pixelben (px), százalékosan (%) illetve az em. 1em jelöli az adott környezet betűméretét. A százaléks magadásnál fontos megjegyezni, hogy a szülő elem értékéhez kell viszonyítani. (Mint tudjuk, a HTML elemek egymásba ágyazhatók, ilyenkor szülő-gyerek kapcsolat jön létre.)

Színek

A színeket három különböző módon tudjuk megadni.

1. Névvel: ez a megadás elég macerás, tekintve, hogy ismernünk kell a színek angol elnevezéseit. Aki mégis ezt szeretné használni, annak itt egy kis segítség.
2. Hexadecimálisan: Ebben az esetben a vörös (red), a zöld (green) és a kék (blue) alapszínek arányát kell megadnunk. Az egyes alapszínek 0-255-ig vehetnek fel értéket, tehát hexadecimálisan 0-FF között. Minden színt két helyiértéken kell leírni, ezért egy szín magadása a következő: #00FAEE. Az legmagasabb két helyiérték a vörös, a következő kettő a zöld, az alsó kettő pedig a kék arányát adja meg.
3. Decimálisan: az elv ugyanaz, mint az előző esetben, csak a leírás más: rgb(00,250,238).

Tulajdonságok részletezése

A CSS esetében bizonyos tulajdonságok összevonhatók. Ilyen például a background, ami az összes háttérrel kapcsolatos tulajdonságot magába foglalja. Mindenkinek egyéni döntése, hogy a tulajdonságokat összevonva, vagy részletezve használja. Én a lenti táblázatban csak az összevont tulajdonságokat sorolom fel, a könnyebb áttekinthetőség miatt.

Példa az összevont és a részletezett megadásra:

			/* Részletezve:*/

			#header_menu{

				background-image: url('images/header_menu.jpg');

				background-repeat: repeat-x;

			}



			/* Összevonva: */

			#header_menu{

				background: url('images/header_menu.jpg') repeat-x;

			}

Tulajdonság	Leírás
background	Háttér
border	Szegély
color	Betűszín
display	Elemek megjelenítését szabályozza
float	"Körbefolyás"
font	Betűtípus
height	Block típusú elem magassága
width	Block típusú elem szélessége
letter-spacing	Betűk közötti térköz
list-style	Felsorolás stílusa
margin	Margó mérete
overflow	"Túlcsordulás" kezelése (ha a tartalom nem fér bele a dobozba).
padding	Belső margó mérete
position	Elem pozíciójának megadása
text-align	Szöveg igazítása
text-decoration	Szöveg 'dekoráció', mint aláhúzás stb.
text-indent	Bekezdés első sorának behúzása
text-transform	Szöveg alakítása kis vagy nagybetűsre
visibility	Elem láthatósága
z-index	Rétegek sorrendje

Pszeudo-elemek

Léteznek a CSS-ben úgynevezett pszeudo elemek is. Például egy hivatkozásnak vannak különböző állapotai: látogatott, aktív, egér fölötte van. A pszeudo elemekkel ezeket az eseteket formázhatjuk.

Tulajdonság	Leírás
:active	Aktív elem
:hover	Az elem megkapta a fókuszt (pl. input mezőben villog a kurzor)
:link	Nem látogatott hivatkozás
:visited	Látogatott hivatkozás
:after	Tartalom beszúrása elem után
:before	Tartalom beszúrása elem elé
:first-child	Első előfordulás
:first-letter	Első karakter
:first-line	Első sor
:focus	Az elem megkapta a fókuszt (pl. input mezőben villog a kurzor)

background

• background-color: háttérszín. Megadása: a lásd a színeknél.
• background-image: háttérkép
• background-repeat: háttérkép ismétlése. Alapértelmezés szerint a háttérképet annyiszor ismétli függőlegesen és vízszintesen, ahányszor kifér, mint ahogy az előző példában is láttuk. További lehetséges értékek:
  • repeat-x: ismétlés vízszintesen
  • repeat-y: ismétlés függőlegesen
  • no-repeat: nincs ismétlés
• background-attachment: háttérkép görgetése
  • fixed: a háttérkép fix, tehát csak a tartalom lesz görgethető.
  • scroll: a tartalommal együtt a háttér is görgethető (alapértelmezés).
• background-position: háttérkép pozíciója
  • left: bal
  • right: jobb
  • center: közép
  • top: fent
  • bottom: lent

Ezeket kombinálhatjuk. Ezen kívül használhatjuk a mértékegységeknél tanultakat. A 0;0 pozíció a bal felső sarok. Természetesen akkor látványos a dolog, ha no-repeat-et választunk background-repeat értékének.
Vissza...

border

• border-width: szegély vastagsága
• border-style
  • solid: folytonos
  • dotted: pontozott
  • dashed: szaggatott
  • double: dupla
  • különböző 3D-s szegélyek: groove, ridge, inset, outset
• border-color: szegély színe

Megadhatjuk a négy szegélyt külön-külön is a top, right, bottom, left segítségével is. Fontos hogy a style értékét kötelező megadni. Mit a mintán is látszik, a border az összes szegélyre vonatkozik, az egyéni definíciók pedig felülbírálják azt.
Vissza...

color

Betűszín magadása. Lásd a színeknél.
Vissza...

display

Sok lehetséges paramétere van, én csak az általam leggyakrabban használtakat mutatom be.

Az első esetben ún. inline elemeket tehetünk block típusú elemekké. Például egy hivatkozás esetében, nem csak a szövegre kattintva aktív a hivatkozás, hanem a körülötte lévő téglalap is aktív. Ezt leginkább menük esetében használhatjuk ki. Amint a mintán látható, block érték megadásakor használhatjuk a magasság és a szélesség tulajdonságokat is.

A másodi kesetben ennek éppen az ellenkezője történik. Itt azt érdemes megfigyelni, hogy hiába adom meg a szélességet és a magasságot.
Vissza...

float

Ennek a tulajdonságnak a működését legegyszerűbb egy képpel megmutatni, de nagyon sok esetben használjuk div-ek esetében.
Lehetséges értékei:

• left
• right
• none

Ide tartozó fontos tulajdonság még a clear, ami az előzőleg beállított float értékeit érvényteleníti.
Vissza...

font

• font-style: betű stílusa
  • normal
  • italic: dőlt
  • oblique: ez is dőlt. Mi a különbség? Passz:)
• font-variant
  • small-caps: kiskapitális
• font-weight: betű vastagsága
  • bold, bolder: félkövér, félkövérebb
  • lighter: vékonyabb, de ez nem túl feltűnő:)
  • 100-900: 400 megfelel a normálnak, 700 a bold-nak
• font-size: betűméret. Megadható a mértékegységeknél leírt módon, valamint használható néhány konstans is.
• line-height: sorköz
• font-family: betűtípus. Célszerű több betűtípust egymás után vesszővel elválasztva megadni, mert előfordulhat, hogy a felhasználónak nincs telepítve egy adott betűtípus.

Vissza...

list-style

• list-style-type: felsorolásjel típusa
  • circle: kör
  • disc: kitöltött kör
  • square: négyzet
  • decimal: számozott
  • lower-roman: kis római számok (i, ii, ..., iv)
  • upper-roman: nagy római számok (I, II, ..., IV)
  • lower-alpha: kisbetűk (a, b, c)
  • stb...
• list-style-image: felsorolásjelként képet adhatunk meg.

Egy egyszrű példa a felsorolásokra.
Vissza...