15 – Stíluslapok használata a Dreamweaverben


A Dreamweaverben a Window/css Styles menüpont vagy a SHIFT F11 billentyűkombináció segítségével jeleníthetjük meg a stíluslapok kezelésére szolgáló CSS Styles palettát. Használata sok tekintetben hasonlít a már megismert HTML Styles paletta használatára:

Új stílust a paletta jobb alsó sarkán található új stílus ikonnal (a második ikonnal), vagy a helyi menü New pontjával hozhatunk létre. Ezután a megjelenő dialógusablakban meg kell határozni a stílus helyét (New Style Sheet File, új stíluslap fájlban) vagy This Document Only (csak ebben a dokumentumban), és létrehozásának típusát:

Make Custom Style (class), vagyis egyéni stílusosztály definiálás segítségével.
A stílusosztályra az itt megadott (mindig egy ponttal (.) kezdődő) névvel lehet hivatkozni, egy html-taghez (az ún. CSS-kiválasztóhoz, CSS selector-hoz) lehet hozzárendelni. A hozzárendelés az adott tag class attribútumá­ban a stílusosztály nevének megadásával történik. Beállításait az OK gomb megnyomása után lehet megadni.

Redefine HTML Tag, vagyis az adott HTML elem alapértelmezett tulajdonságainak felülírásával. Ezzel egy tag-et választhatunk ki, amelynek tulajdonságait szeretnénk módosí­tani. A tag későbbi előfordulásaiban ezt a tulajdonságot még felülírhatjuk.

Use CSS Selector, vagyis css választó segítségével a megadott (begépelt) tagek csoportját vagy a listából kiválasztható hivat­kozások (

a:active
: aktív,
a: visited:
látogatott,
a: link:
normál és
a: hover: az egér éppen a link
felett van) megjelenését lehet befolyásolni.

Type: a betű
tulajdonságait lehet itt beállítani.

Background: a háttérbeállítások megadására.

Block: szövegblokkok, bekezdések tulajdonságainak beállítására használható.

Box: képek, és szövegdobozok tulajdonságait lehet vele beállítani.

Border: keretek, szegélyek tulajdonságainak megadására használható

List: listák, felsorolások,számozások tulajdonságainak megadásához lehet használni.

Positioning: az elemek pontos elhelyezésére, pozícionálására használható.

Extensions: az itt található bővítményekkel és a filterekkel a képek elhelyezését, illetve a használt színek megjelenítését változtathatjuk meg, pl. szürkeskálás effektet, vagy
árnyékhatásokat érhetünk el.

A már létező CSS stílusokat a CSS Styles paletta helyi menüjében található Edit paranccsal, illetőleg az Edit ikonnal (a harmadikkal) tudjuk megnézni, illetve módosítani. A már nem szükséges CSS stílusokat a CSS Styles palettán a kuka ikonra vonszolással törölhetjük. Egy már alkalmazott sílust a stílus nevére kattintva lehet a kijelölt oldalelemen érvényesíteni. Egy létező stíluslapfájlt (.css-t) a paletta jobb alsó sarkában levő Attach StyleSheet ikonnal rendelhetünk hozzá az oldalhoz.

A szerző honlapja: http://fodorsi.ini.hu

Kapcsolódó bejegyzések:
  • Display: ezzel a tulajdonsággal az adott elem előtti és utáni sortörések megjelenését szabályozhatjuk. Lehetséges értékei: block (sortörést helyez el az elem elő …

  • Color: az adott elem színét adhatjuk meg vele. Pl.H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }Background Color: az adott elem háttérsz …

  • Top Margin: a felső margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla ér …

  • A stílusok öröklődhetnek, és a tagen belüli stílusdefiníciókkal felülírhatjuk a globális stílusmegadásokat. Ez azt is jelenti, hogyha egy tag-hez tartozik globál …

  • Használható mértékegységek, egységekHosszúságmértékek (Length Units): meg lehet adni abszolút és relatív formában. Használhatjuk a + és ” előjeleket, és nem …

A cikket beküldte: Harder (http://blog.harder.hu)

Szólj hozzá
a 15 – Stíluslapok használata a Dreamweaverben c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>