CSS kisreferencia

XHTML weblap stíluslappal

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Külső stílus</title>

</head>

<body>

<p class="szoveg">Helló világ!</p>

</body>

</html>

Doctype meghatározás (DTD)

A böngésző innen tudja meg, hogy milyen módon jelenítse meg a weblapot. Milyen üzemmódba kapcsoljon.

Ezt szabványkövető üzemmódnak nevezik.

A szabványokat egy W3C (World Wide Web Consorsortium) nevű szervezet dolgozza ki, amit megpróbál elfogadtatni a szoftvergyártó cégekkel.

A DTD változatai

A DTD-nek három változata van:

Szigorú:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Átmeneti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Keretkészletes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Érvényesség

Az érvényesség azt jelenti, hogy ha kiválasztottunk egy DTD-t, akkor annak a szabályai szerint kell dolgoznunk. Egy kód akkor érvényes, ha a kiválasztott DTD szabványnak megfelel.

Az érvényes kód mögött az a szabványosítási törekvés húzódik meg, hogy ha az előírásokat betartjuk, akkor minden böngészőben ugyanaz jelenjen meg.

Vannak szabvány-követő és nem szabványkövető böngészők.

A mai böngészők alapvetően szabványkövetők.

Body-hoz használt tulajdonságok

Tulajdonság név	Tulajdonság	Érték
Háttérszín	background-color:	szín vagy színkód #66ffdd vagy #6fd rgb(100%,100%,100%) rgb(255,255,255) green
Háttérkép	background-image	url(hatter.jpg)
Háttérkép ismétlődés	background-repeat	repeat no-repeat repeat-x repeat-y
Háttérképhelyzet	background-position	top center bottom left right 80% 30%
Háttérkép csatolás	background-attachment	scroll fixed
Margó	margin margin-top margin-right margin-bottom margin-left	2px 3px 4px 5px 2px 3px 4px 5px

Betű és bekezdés formázás

Speciális elemek

A speciális elemek elemjelölőkkel tetszőlegesen formázhatók. Ezek kimondottan szövegformázásra kitalált elemek.

Mozaikszó magyarázattal (acronym)

Az acronym (mozaikszó) elem segítségével rövidítéseket magyarázhatunk buborék ablakkal.

A <acronym title="Hipertext Markup Language">HTML</acronym> nyelv

Rövidítés (abbr)

Az abb (abbreviation = rövidítés) pontosan ugyanúgy működik, mint az acronym.

A <abbr title="Hipertext Markup Language">HTML</abbr> nyelv

Címhivatkozás (cite)

A <cite cite="Hipertext Markup Language">HTML</cite> nyelv

A cite nem jelenít meg semmit, pusztán saját belső cite tulajdonságába kerül valamilyen információ. A böngésző a vele megjelölt részt dőlttel szedi.

Idézetblokk (blockquote)

A blockquote nagyobb mennyiségű idézett szöveg: idézetblokk megjelölésére használjuk. Ezt általában úgy formázzuk stílussal, hogy beljebb kerül a szövegben.

<blockquote>

Valamilyen hosszú idézetblokk

</blockquote>

Előformázott szöveg (pre)

A pre (preformatted=előre formázott) vel megjelölt szöveg az eredeti szóközökkel és sortörésekkel jelenik meg.

További szövegformázó elemek

em (empharts= Kihangsúlyozás): általában dőlt betű

i (italic= dőlt): általában dőlt betű

Strong (erős): kiemelés

b (bold=vastag): vastag betű

tt : írógép betűk

code: valamilyen kód

kbd (keyboard=billentyűzet): valamilyen billentyűzetről beviendő szöveg

sub (subscript=alsó index)

sup (superscript=felső index)

Betű és bekezdés tulajdonságok

Tulajdonság név	Tulajdonság	Érték
Szóközök	word-spacing	3pt
Betűközök	letter-spacing	1pt
Sortávolság	line-height	150%
Szövegdekoráció	text-decoration	none (nincs) underline (aláhúzott) overline (föléhúzott) line-trought (áthúzott) blink (villogó)
Függőleges szövegelrendezés	vertical-align	sub (fent, felső index) sup (lent, alsó index) top (tetején) text-top middle (középen) bottom (alján) text-bottom (alján)
Kényszerített kis- és nagybetűk	text-transzform	none (nincs) uppercase (nagybetű) lowercase (kisbetű) capitalize (kiskapitális)
Igazítás	text-align	left (balra) right (jobbra) center (középre) justify (sorkizárt)
Első sor behúzása	text-indent	3em
Betű család	font-family	Verdana, Arial, Helvetia, sans-serif
Betű szín	color	szín vagy színkód #66ffdd vagy #6fd rgb(100%,100%,100%) rgb(255,255,255) green
Betű méret	font-size	1em
Betű stílus	font-style	italic (dőlt) oblique (ferde) normal (normál) inherit (öröklés)
Vastag betű	font-weight	bold (vastag)
Betű típus	font	1 em Verdana, Arial, Helvetia, sans-serif
Betűváltozat	font-variant	small-caps (kiskapitális)

Szöveg megjelenítése

Tulajdonság név	Tulajdonság	Érték
Megjelenítés (minden elem)	display	none (ne jelenjen meg) inline (egy sorban jelenjen meg) block (függőlegesen jelenjen meg) inline-block (szövegközi tömb) list-item (lista elem) run-in (befutó) table (táblázat) inline-table (szöveg közi táblázat) table-row-group (táblázatsor-csoport) table-row (táblázatsor) table-column (táblázatoszlop) table-cell (táblázatcella) table-caption (táblázatcím) inherit (öröklés)
Legkisebb szélesség (táblázatok kivételével minden)	min-width	100px vagy 5em vagy 80% stb.
Legnagyobb szélesség (táblázatok kivételével minden)	max-width	100px vagy 5em vagy 80% stb.

Média jellemzők

A média jellemző jelzi a böngészőnek, hogy milyen eszközön akarjuk a dokumentumot megjeleníteni.

A média jellemzőt a fejlécben, a stíluslap csatolásakor adjuk meg:

<head>

<title>Külső stílus</title>

</head>

A példában a dokumentumhoz két stíluslap tartozik. A böngésző a képernyőn való megjelenítéshez a stilulsap.css-el formázott, a nyomtató (nyomtatási kép) pedig a stiluslap_nyomtat.css-el formázottat fogja kinyomtatni. Ugyanaz a dokumentum tehát egészen másképp nézhet ki képernyőn és nyomtatón, sőt a display: none előírással a nem nyomtatandó részek eltüntethetők.

A stíluslapokon használható média jellemzők

all: Minden

arual: Valamilyen hangeszköz

braille: Braille-írás megjelenítésére alkalmas eszköz

embossed: Braille-írás nyomtatására alkalmas eszköz

handheld: Mobil eszközök (mobiltelefon stb.)

print: Nyomtató

projection: Kivetítő eszköz

screen: Képernyőn megjelenő

tty: szövegkijelzős telefon

tv: Televízió

Doboz modell

A dokumentumban lévő elemek mindegyike egy téglalap alakú dobozt formáz. Ez a doboz a dobozmodell.

A doboz részei:

Tartalom: ez lehet kép, szöveg stb.

Padding: Belső margó. A szegély és a tartalom távolsága (Átlátszó)

Border: Szegély

Margin: A szegély és a külvilág közötti távolság (Átlátszó)

A doboz Padding, Border, Margin minden oldala külön szabályozható

Tulajdonság név	Tulajdonság	Érték
Doboz szélessége	width	800px
Doboz magassága	height	15px
Padding (Belső margó)	padding padding-top padding-right padding-bottom padding-left	2px 3px 4px 5px 2px 3px 4px 5px
Szegély (általános, rövidítve)	border border-top border-right border-bottom border-left	2px dotted #ccc (Vastagság, szegély stílus, szín)
Szegély szélesség	border-width border-top-width border-right- width border-bottom- width border-left- width	thin (vékony) medium (közepes) thick (vastag) (százalék, valamilyen szám mértékegységgel)
Szegély stílus	border-style border-top-style border-right-style border-bottom-style border-left-style	none (nincs) hidden (rejtett) solid (folytotnos) dotted (pontozott) dashed (szaggatott) double (dupla) groove (bemélyített) ridge (domború) inset (süllyesztett) outset (kiemelkedő)
Szegély szín	border-color border-top-color border-right-color border-bottom-color border-left-color	szín vagy színkód #66ffdd vagy #6fd rgb(100%,100%,100%) rgb(255,255,255) green
Margó	margin margin-top margin-right margin-bottom margin-left	2px 3px 4px 5px 2px vagy 20% vagy auto 3px 4px 5px
helyzet megdás	position	absolute (kiemeli a szövegfolyamból és az adott pozícióba helyezi) fixed (mindig ugyanabban a pozícióban marad) relative (a szövegfolyamban előtte lévőhöz képest)
úsztatás	float	left right

Felsorolások

Az ul, ol, li kijelölőkhöz tartozó CSS tulajdonságok.

Az alábbi meghatározásokat a li elemkijelölőhöz kell rendelni

Tulajdonság név	Tulajdonság	Érték
Lista típus (ul: felsorolás)	list-style-type	none (ne jelenjen meg) disc (teli kör) circle (üres kör) square (négyzet)
Lista típus (ol: sorszámozott)	list-style-type	decimal (arab számok) none (ne jelenjen meg) decimal-leading-zero (számok kezdő nullával) upper-alpha (nagybetű) lower-alpha (kisbetű) upper-roman (nagy római szám) lower-roman (kis római szám)
A listához használható kép	list-style-image	none (ne jelenjen meg) kepek/kep.jpg
A lista jelölő pozíciója	list-style-position	inside (kilógás nélkül) outside (kilógó) inherit (öröklés)
A lista elhelyezkedése	display	inline (egy sorban)

Álosztály kijelölők

Az alább felsorolt álosztály kijelölőket a linkek viselkedésének vezérlésére használjuk. (Az álosztály szó azt jelenti, hogy magában a szövegben nem kell ilyen stílust létrehozni, ez be van építve a böngésző logikájába.)

Hivatkozási álosztályok (így látszik, ha nincs rajt az egér)

:link (hivatkozás)	Minden href jellemzővel ellátott horgony
:visited (felkeresve)	Minden felkeresett horgony

Dinamikus álosztályok

:hover (fölötte állva)	Minden olyan horgony, ami felett az egérmutató áll
:active (használatban)	Minden horgony az egérgomb lenyomva tartása közben

Linekek formázása

CSS példa (Ezt a CSS-ben feltétlenül ilyen sorrendben kell megadni.):

/* Ez egy link */

a:link {

color: Blue;

}

/* Már látogatott link */

a:visited {

color: Green;

}

/* Egér a link felett */

a:hover {

color: Red;

}

/* Egér lenyomva a linken */

a:active {

color: Yellow;

}