_-=Tutorial mindenkinek=-

CSS stílusok segítségével szinte bármilyen objektum megjelenítését szabadon tudjuk befolyásolni. Lehetoségünk van a stílusainkat egy külso file-ban, egy úgynevezett stíluslapon eltárolni, majd ezt alkalmazni oldalainkra. Megtehetjük, hogy az egyes HTML tagek megjelenítési tulajdonságait atformáljuk (pl.: a H1 nem nagy méretu, félkövér karaktereket fog használni, hanem egy 18 pontos középre igazított, sötétkék színu, villogó feliratot).
Alkalmazásukkal olyan formázási lehetoségeink is adódnak, amelyek pusztán HTML nyelv alkalmazásával nem lennének lehetségesek (pl beállíthatjuk a szövegekben a szavak közötti távolságot cm-ben megadva).

Sajnos a CSS-stílusok használatát csak a 4.0 ill. annál nagyobb verziószámú böngészok támogatják, de ezek sem képesek minden formázási lehetoséget megjeleníteni, illetve nem mindegyik böngészo jeleníti meg oket pontosan.

A CSS a HTML-hez hasonlóan egy leíró nyelv, több verziója létezik (CSS1, CSS2). A DreamWeaver a CSS1 specifikációt használja.

A CSS stílusok alkalmazása egy kicsit körülményesebb, mint a HTML formázás, hiszen bármely egyedi stílust bármelyik elemre ráhúzhatjuk, de bizonyos meghatározásoknál bizonyos paramétereknek az adott objektumok esetén nincs értelmük, ezért elég kiszámíthatatlan hatásokat érhetünk el helytelen használatukkal.
Pl.: Egy képre ráhúzunk egy stílust, ami az adott szöveges részt hivatott villogóvá tenni.

CSS stílust a CSS paletta New ikonjára klikkelve, vagy a paletta menüjének New pontját választva hozhatunk létre.

Elso lépésként válasszuk ki a létrehozandó stílus típusát:
- Custom Style:	Egyedi stílus. Ha ezt a pontot válasszuk, a szövegmezoben adjunk egy nevet stílusunknak.
- Redefine HTML:	HTML taget felülíró stílus. A legördülo menübol válasszuk ki, hogy melyik HTML tag felülírását akarjuk elvégezni.
- CSS-Selector:	Itt egy stílust határozhatunk meg, amit abban az esetben fogunk használni, ha a HTML tagek bizonyos sorrendben követik egymást. A szövegmezobe írjuk be szóközzel elválasztva az egymást követo tag-eket. Pl.: td h1.

Ha kiválasztottuk a megfelelo stílust, és meghatároztuk a szükséges paramétereket, kattintsunk az OK gombra.

- Font:

Karakterkészlet típusa (lista).

- Size:

Az alkalmazott karakterek mérete (px, pt, cm, mm, pica, stb.)

- Style:

Beállíthatjuk, hogy sima, vagy dolt betus karaktereket akarunk alkalmazni

- Weight:

A karakterek "kövérsége" (400: Normal, 700: Félkövér)

- Variant:

Beállíthatjuk, hogy a karakterkészlet mely változatát akarjuk használni.

- Line Height:

Megadhatjuk a sormagasságot. Ezt a beállítást jelenleg semelyik böngészo sem támogatja

- Case:

Betuméretek beállítása:

	- Capitalize:	A szövegben minden szó elso karakterét nagybetuvé alakítja
	- Uppercase:	A szöveget csupa nagybetuvé alakítja
	- Lowercase:	Csupa kisbetu
	- None:	Betuméretekkel kapcsolatos beállítások elvetése

- Decoration:

A szöveg "díszítése":

	- Underline:	Aláhúzás
	- Overline:	Föléhúzás
	- Line-Through:	Áthúzás
	- Blink:	Villiogás
	- None:	Dekorácók eltávolítása

- Color:

A szöveg színe

- Background Color:

Háttérszín

- Background Image:

Háttérkép

- Repeat:

Háttérkép ismétlésével kapcsolatos beállítások

	- No-repeat:	Nincs ismétlés
	- Repeat:	Ismétlodés mindkét irányban
	- Repeat-X:	A háttérkép csak vízszíntesen ismétlodik.
	- Repeat-Y:	A háttérkép csak függolegesen ismétlodik.

- Attachment:

A háttérkép rögzítésével kapcsolatos beállítások

- Fixed:

A háttérkép fix, nem scrollozódik a dokumentummal (mint bgproperties="fixed")
- Scroll: Az oldallal együtt mozog.

- Horizontal Position:

Háttérkép vízszintes igazítása

	- Left:	Balra
	- Center:	Középre
	- Right:	Jobbra
	- (Value):	Az adott objektum (oldal, táblázat, cella, réteg, stb.) bal szélétol a megadott távolságra.

- Vertical Position:

Függoleges igazítás

	- Top:	Felülre
	- Center:	Középre
	- Bottom:	Alulra
	- (Value):	A felso széltol a megadott távolságra

A Horizontal- ill. Vertical Position pontoknál megadott beállításoknak csak akkor van értelmük, ha a háttér rögzítéséhez (Attachment) a fix pontot választottuk.

- Word Spacing:

Szavak közötti távolság

- Letter Spacing:

Betuk közötti távolság

- Vertical Alignment:

A blokk függoleges igazítása, leggyakrabban a szülo objektumhoz képest. Ld.:Képek, Alignment tulajdonság.

- Text-Align:

Szöveg igazítása a blokkon belül:

	- Left:	Balra zár
	- Right:	Jobbra zár
	- Center:	Középre igazított
	- Justify	Sorkizárt. (Ha ezt használjuk, felülbírálhatja a Letter, ill. Word Spacingnél megadott értékeket.)

- Text-Indent:

A blokk elején lévo szöveg behúzásának mértéke.

- Whitespace:

Szóköz, tabulátor karakterek kezelésének módja:

	- Normal:	Mint HTML-ben
	- Pre:	Mint HTML eloreformázott blokk esetén
	- Nowrap:	Automatikus sortördelés kikapcsolása.

- Width:

Befoglaló szélessége

- Height:

Befoglaló magassága

- Float:

Befoglaló szöveggel való körbefuttatásának módja

	- Left:	ld. képek, alignment
	- Right:	ld. képek, alignment
	- None:	nincs körbefuttatás

- Clear:

Itt meghatározhatjuk, hogyha az adott befoglalónkat valamelyik oldalról egy másik elem, vagy szöveg eloz meg (vagy követ), akkor ezeket az új objektumokat új sorba rendezzük.

- Padding:

A befoglaló bélelése. A befoglaló szélei és tartalmának szélei közötti távolság a megadott mértékegységben (ld.: Táblázatok, Cellpaddind)

- Margin:

A befoglaló széle, és a befoglalót körülvevo objektumok közötti távolság a különbözo irányokban.

- Type:

Lista típusa (Az egyes típusokról bovebben ld. Listák)

- Bullet Image:

Rendezetlen lista esetén egy képet rendelhetünk a lista pontjait jelképezo ikon helyére

- Position:

A lista pozícionálása, azaz az új sorba kerülo szöveg bal széle mihez legyen igazítva

	- Inside:	Igazítás a listaelem-jelhez.
	- Outside:	Igazítás az éppen aktuális behúzáshoz

- Type:

Az elhelyezés módszere:

	- Absolute:	A létrejövo réteg koordinátáit az oldal bal felso sarkához viszonyítjuk
	- Relative:	A megadott koordinátákat az objektum aktuális pozíciójához képest értelmezzük
	- Static:	A megadott koordinátákat nem vesszük figyelembe, az új réteg mindig pontosan ott jön létre, ahol az eredeti objektum elhelyezkedik

- Visibility:

A létrejövo réteg láthatóságát állíthatjuk be ebben a pontban

- Overflow:

ld. Rétegek tulajdonságai, Overflow tulajdonság

- Placement:

Itt adhatjuk meg a koordinátákat, amelyeket a fentebb beállított viszonyítási alaptól függoen a réteg elhelyezésére fogunk használni, és a léterjövo réteg szélességét, magasságát is ebben a pontban állítjuk be.

- Clip:

Levágandó területek meghatározása (ld. Rétegek tulajdonságai, Clip)

A létrehozott réteg típusát az Edit/Preferences Layers pontjánál megadott TAG beállítás határozza meg.

- PageBreak:

Az oldal nyomtatásakor oldaltörés alkalmazása (Jelenleg nem támogatott)

	- Before:	az objektum elott
	- After:	az objektum után

- Cursor:

Beállíthatjuk, hogy az objektum fölé állva milyen egérmutató jelenjen meg (csak IE4+)

	- Hand:	Kéz
	- Crosshair:	Célkereszt
	- Text:	Szöveg
	- Wait:	Homokóra
	- XYResize:	Különbözo irányú átméretezo

- Filter:

Speciális effektek alkalmazása (IE4+)

	- Invert:	Színek invertálása
	- FlipH, FlipV:	Vízszintes, függoleges tükrözés
	- Stb.	Szöveg

Jelöljük ki azt a rész, ill. objektumot, amire a stílust alkalmazni akarjuk, majd a CSS palettán válasszuk ki az alkalmazni kívánt stílust, és klikkeljünk az Apply gombra.

Hozzuk létre az oldalon az összes CSS stílust, majd válasszuk a File / Export / Export CSS Styles pontot.

Az Import beilleszti a stíluslap tartalmát az aktuális dokumentumba, a Link eléri és továbbítja az információkat. A Link opcióval való csatolás sokkal elterjedtebb, támogatottabb, több lehetoséget biztosít.