Post Tagged with: "css"

CSS átlátszóság

Az opacity tulajdonságot a w3c a második css specifikációban vezette be, viszont csak a css3-ban lett tökéletes. Én Firefox1.0.2, Mozilla1.7.5 böngészõkön teszteltem. Az általános szintaxis az opacity: 0.5;, ahol a 0.5 az átlátszóság mértéke és ez 50%-os átlátszóságot jelent. Mozillánál az 1.6-os verziószám alatt a -moz-opacity:0.5; szintaxist kell használni. Az ie a filter:alpha(opacity=50); szintaxist használja, […]

Honlap tartalmának középre igazítása

Alapvetően 2 módja van a css alapú lapok tartalmának középre igazításához attól függően, hogy a lap rugalmas vagy fix szélességű. Rugalmas lapszélesség Ez esetben %-osan adod meg a méreteket, pl. a lap szélessége legyen 80%-a a mindenkori böngészőablak szélességének. Ez azt jelenti, hogy a lap mellett pl. 10-10% hely kell hogy maradjon. A kódot így […]

CSS rollover trükk

A képek váltakozását egy menüben (rollover effekt) a legtöbben javascript segítségével oldják meg, talán a régi beidegződésnek köszönhetően. Pedig van már erre egy sokkal szebb, könnyebb megoldás is css felhasználásával, amihez mindössze az alábbi leírást kell elolvasni és kipróbálni. :) – kiegészítés: Harder A feladat az, hogy JavaScript nélkül hozzuk létre demo oldalon is látható […]

Vízszintes menü CSS segítségével

css segítségével könnyen és gyorsan lehet a későbbiekben pillanatok alatt módosítható vízszintes menüt készíteni. Első körben a HTML (vagy php) oldal HEAD részébe illeszd be az alábbi CSS kódot (Természetesen ez a CSS külső fájlban is lehet!) 1 2 3 4 5 6 7 8 9 10 11 12 13 #navcontainer ul { float:left; width:100%; […]

Űrlapok háttere

Háttérként egyéni képek használata egyszerű módja annak, hogy érdekesebbé tedd az űrlapjaidat. css-vel ezt pár soros egyszerű kóddal megtehetjük.

Weblap elrendezése a CSS használatával

Weblap elrendezése a CSS használatával

Meguntad a táblázatokat, és a css a kedvenc eszközöd hogy elrendezd weblapjaidat, annak ellenére, hogy unalmasnak és csúnyának tűnik? Ez a cikk leírja egy módját annak, hogy egy szép CSS elrendezést készítsünk háttérképek és margók használatával. Ehhez egy XHTML oldalt fogunk használni: “Tartalom külső stílussal“. Ha minden megvan, kezdjünk bele!

Böngészőfüggetlen CSS

A következő leírásból megtudhatod, hogyan készíts olyan honlapot, amit minden böngésző biztosan ugyanúgy jelenít meg. Persze ez arra az esetre vonatkozik, ha a lapon lévő formázásokat css-ből adod meg. Az alábbi kódot másold be a *.php dokumentum fejlécébe (HEAD). A lapnak *.php kiterjesztésűnek kell lennie, és a szerverednek tudnia kell futtatni php scripteket.

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 […]

14 – SPAN tag

Ezt a tag-et azért találták ki, hogy stílust olyan elemeknek, szövegrészeknek is lehessen adni, amelyek beállítására hagyományosan más mód nincsen. Használhatjuk kiválasztóként a stílusok definiálásakor, és ismeri a STYLE CLASS és ID attribútumokat is. Pl. Ha a stílusmegadásban szerepel az, hogy : 1 .zoldbetus {color: #00ff00} .zoldbetus {color: #00ff00}

13 – STYLE attribútum

A STYLE attribútum segítségével az egyes HTML tag-ek szintjén adhatunk meg stílusdefiníciókat. Használhatjuk minden <BODY>-ba illeszthető tag-ben, kivéve pl. a <SCRIPT>-et. Pl.

12 – Stíluslapok importálása

A stíluslapok importálására is lehetőség van a css-benaz @import kulcsszó segítségével. Ezt az önálló stíluslapfájlokban és a STYLE tag-en belül használhatjuk (a beágyazott stílusoknál). Pl.:

11 – Stíluslapok elhelyezése

A külső stíluslapfájlok HTML dokumentumainkhoz csatolásának legnagyobb előnye, hogy számos oldal kinézetét megváltoztathatjuk egyetlen fájl, a stíluslap módosításával. Külső stíluslapfájlokra (.css) a LINK tag-gel lehet hivatkozni a HTML dokumentumokban, pl.: