CSS2 összefoglaló

CSS "nyelv"

A CSS (Cascading Style Sheets, azaz egymásba ágyazott stíluslapok) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le.

A HTML oldalaink megjelenését befolyásoló egyszerű nyelvről van szó, mely segítségével meghatározhatjuk, hogy hogyan (és hol) jelenjenek meg az egyes HTML elemek (paragrafusok, címsorok, stb.), többek között befolyásolhatjuk a színüket, méretüket, elhelyezkedésüket, margóikat, stb. Az egymásba ágyazhatóság (kaszkádolás) arra utal, hogy több stíluslapot, meghatározást is megadhatunk egyszerre, illetve egy stílus lehet több elemre is érvényes, amit egy másik stílussal felüldefiniálhatunk. A stílusok öröklődnek az oldal hierarchiája szerint, ha például a gyökér elemre definiálunk egy stílust, akkor az többnyire az oldal összes elemére érvényes (a tulajdonságok örökölhetőségétől függően).

Szintaxis



 /* Megjegyzés */
 @ media type {
  szelektor {
	tulajdonság: érték;
  }
 }
a "media type" opcionális/elhagyható

Szelektorok hatóköre

*		összes elemre
div		<div> tag-re
div *		összes <div> alatti elemre
div span	<div> alatti <span>-ra
div, span	<div>-re és <span>-ra
div > span	<span>-ra <div> szülővel
div + span	<div>-re és <span>-ra
.cla		a "cla" osztály elemeire
div.cla		a "cla" osztályú <div> elemeire
#azo		az "azo" azonosítójú elemekre
div#azo		az "azo" azonosítójú <div> elemeire
a[tul]		"tul" tulajdonságú <a> elemekre
a[tul='x']	"tul" tulajdonságú <a> elemekre, ha a "tul" étéke 'x'

Méretek és színek

0		0 esetén nem kell mértékegység

     relatív méretek

em		szülőelem betűméretéhez (magasságához) viszonyított
ex		az "x" betűméretéhez (magasságához) viszonyított
%		szülőelem betűméretéhez (magasságához) viszonyított

     abszolút méretek

px		képpont/pixel a rasztergrafikus képen
cm		centiméter
mm		miliméter
in		1inch = 2,54cm
pt		1pt = 1/72in
pc		1pc = 12pt

     színek kóddal, névvel

#add8e6		hexa (a=10,d=13,e=14) világoskék (Red|Green|Blue)
#a8e		#aa88ee rövidítése
rgb(173,216,230) világoskék (pl. e6 - 14*16+6=230)
LightBlue	világoskék

Szövegek tulajdonságai

text-align	igazítás (left, center, right, justify)
text-indent	első sor behúzása
text-decoration	dekoráció (none, underline, overline, line-through, blink)
text-transform	transzformáció (none, capitalize, uppercase, lowercase)
text-shadow	árnyék (távolság le,jobbra, elmosottság sugara, szín)
line-height	sormagasság állítása paragrafuson belül
letter-spacing	betűk közötti távolság
word-spacing	szavak közötti távolság
white-space	szóközök, tabulátorok, sortörések kezelése (normal, nowrap, pre)

Fontok tulajdonságai

font		font összevont pl. font: italic bold 14px Arial,Helvetica,sans-serif;
font-family	betűtípus (ált: serif,sans-serif, cursive, fantasy, monospace)
font-style	betűstílus (dőltség: normal, italic, oblique)
font-size	betűméret (xx-small, x-small, small, medium, large, ...)
font-variant	normál és kiskapitális betűszedés váltása (inherit, normal, small-caps)
font-weight	súly,vastagság (lighter, normal, bold, bolder, 100, ..., 900)
font-stretch	tömörít/tágít (normal, wider, narrower, condensed, expanded, ...)
font-size-adjust

Színek/háttérszínek/háttérképek

color			szín megadása
background		háttér összevont pl. background: url(ht.jpg) gray 50% repeat fixed;
background-color	háttérszín megadása
background-image	háttérkép megadása
background-repeat	háttérkép ismétlése (repeat, repeat-x, repeat-y, no-repeat)
background-attachment	háttérkép scrollozása (scroll, fixed)
background-position	htk. kezdőpoz. (értékpár vagy top|center|bottom  left|center|right)

Doboz tulajdonságok

margin		margó (top, right, bottom, left; margin-top, ..., margin-left)
padding		kitöltés (top, right, bottom, left; padding-top, ..., padding-left)
border		szegély összevont pl. border: 1px solid red;
border-width	szegély vastagsága (thin, medium, thick; hossz)
border-style	stílusnégyes (none,dotted,dashed,solid,double,groove,ridge,inset,outset)
border-color	szegélyszínek négyese

Pozícionálás

display		megjelenítés módja (none,inline,block,list-item,run-in,compact,marker,table)
position	pozícionálás módja (static, relative, absolute, fixed)
overflow	megjelenítés túlcsorduláskor (visible, hidden, scroll, auto)
top right bottom left
float		lebegő elem helyzete egy másikhoz képest (none, left, right)
clear	hol nem lehet lebegő elem (none, left, right, both)
z-index		"mélységi" sorrend (auto, number)
visibility	láthatóság (visible, hidden, collapse)
clip		elem kivágása (auto, shape)
direction	szövegirány (ltr, rtl)
unicode-bidi	írásirány (normal, embed, bidi-override)

Dimenziók

width min-width max-width
height min-height max-height
vertical-align	(sub,super, baseline, text-top,text-bottom, top,middle,bottom)

Táblák

table-layout	oszlopszélesség kiszámítási módja (fix, auto)
caption-side	cím helyzete (top, right, bottom, left)
border-collapse		szegélyek beállítása (separate, collapse)
border-spacing
empty-cells		üres cellák szegélye (show, hide)
speak-header

Interfész

cursor	egérkurzor (auto, default, pointer, crosshair, url, move, help, text, wait, ...)
outline outline-width outline-style outline-color

Vegyes

content
list-style list-style-type list-style-image list-style-position
counter-reset	számlálók újraindítása
counter-increment	számlálók növekménye
marker-offset	marker/jel eltolása
quotes	időzőjel beállítása

Készítette: burcsi