ugrás a tartalomhoz

CSS alapjai II.

Bártházi András · 2004. Ápr. 6. (K), 23.00
CSS alapjai II.
A cikksorozat második részében folytatjuk az ismerkedést a CSS alapjaival, azt fogjuk áttekinteni, hogy egy elem kiválasztása után hogyan tudjuk befolyásolni a megjelenését - erről szólnak a CSS tulajdonságok. Az elemek azon paramétereit fogjuk végignézni, melyeket a stíluslapok segítségével meg tudunk határozni. Nem törekszünk a teljes, minden lehetőséget bemutató referenciaszerű felsorolásra, inkább csak a lehetőségek gyors, de alapos áttekintésére. A további lehetőségeket későbbi cikkekben fogjuk bemutatni.

Bekezdések megjelenése

Betűkészletek

Adott elemeken állítani tudjuk a betűkészletet, a stílust, módosítást, súlyozást méretet.
Betűtípus
body { font-family: Arial, Helvetica, sans-serif; }
A példában az egész dokumentumra beállítjuk, hogy milyen betűkészlet legyen az alapértelmezett. Érdemes több, hasonló betűkészletet is felsorolni, illetve a lista végére egy általános betűkészletet is elhelyezni az adott családból. Az általános betűkészletek a következők lehetnek: serif, sans-serif, cursive, fantasy, monospace.
Stílus
Egy font dőltségét befolyásolhatjuk, példánkban az egész dokumentumra adtuk meg, hogy dőltek legyenek a betűk. További lehetőségeink: normal, italic, oblique.
body { font-style: italic; }
Súlyosság
A példában félkövér betűkészletet állítunk be a HTML dokumentumra. Lehetőségeink: lighter, normal, bold, bolder, illetve 100-tól 900-ig a számok 100-asával (egyre vastagabb betűkészletet választva).
body { font-weight: bold; }
Méret
A HTML dokumentum alapértelmezett betűtípusának a méretét határoztuk meg a példában. A konkrét méretmegadásnál több lehetőségünk is van, lehetséges pixelben (mint a példában), pontban (pt-t kell írni), százalékban, szövegesen (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) megadni a méretet. A lehetséges mértékegységekre egy következő cikkben még részletesebben is ki fogunk térni.
body { font-size: 14px; }
Csoportos megadás
Lehetőségünk van a fentieket egy paraméterként is átadni:
body { font: italic bold 14px Arial, Helvetica, sans-serif; }

Szöveg paraméterek

A szöveg színét, sűrűségét, igazítását, aláhúzását, behúzását állíthatjuk, továbbá konvertálhatjuk a szöveget különböző formára (kisbetűs, nagybetűs, stb.). Pár példa:
h1 { color: black; }
A 1. szintű címsor színét feketére állítjuk. Lehetőségünk van #ffffff hexadecimális formában is megadni a színt (a mértékegységek mellett a lehetséges színmegadási módokat is be fogjuk mutatni még).
h1 { letter-spacing: 10px; }
A címsor betűi közötti távolságot növeltük meg 10 képponttal. Lehetőségünk van növelni és csökkenteni a távolságot.
h1 { text-align: center; }
A címsor igazítását adjuk meg, lehetőségünk van balra, középre és jobbra igazítani, valamint sorkizártra beállítani a stílust (left, center, right és justify rendre a megfelelő értékek).
a { text-decoration: none; }
A példában a link dekorációjaként nem adtunk meg semmit, azaz felülbíráltuk az alapértelmezett aláhúzást. A lehetséges értékek: none, underline, overline, line-through, blink lehetnek, melyek rendre díszítetlen, aláhúzott, felülhúzott, áthúzott és villogó értékeket állítanak be.
p { text-indent: 40px; }
A bekezdések első sorának behúzását állíthatjuk ennek a paraméternek a segítségével.
h1 { text-transform: uppercase; }
A stíluslap hatására az 1. szintű címsorunk végig nagybetűvel fog megjelenni. Lehetséges értékek: none, capitalize, uppercase és lowercase, melyek rendre: módosítatlan, első betű nagy, összes betű nagy és összes betű kicsi jelentésűek.
h1 { text-shadow: 5px 5px 3px #000000; }
A tulajdonság hatására egy árnyékot rajzol a böngészőnk a szöveg köré. A pozíciók megadása nem kötelező, a sziné igen. Az egyes értékek jelentése rendre: lefele való távolság, jobbra való távolság, elmosottság sugara, szín. A távolságok negatív értéket is felvehetnek.
p { white-space: nowrap; }
A szóközök, tabulátorok kezelését állíthatjuk a white-space attribútummal. A normal a sorvégeken tördeli a szöveget, a nowrap nem enged sortörést, míg a harmadik lehetséges érték, a pre megtartja egy az egyben a sortöréseket, szóközöket, tabulátorokat (mint a pre HTML elemnél).
p { word-spacing: 10px; }
A szavak közötti távolságot vezérelhetjük ennek a paraméternek a segítségével. Lehetőségünk van negatív értékek megadására is.
p { line-height: 20px; }
A sormagasságot állíthatjuk vele egy paragrafuson belül. Célszerű a betűink méreténél nagyobb sormagasságot beállítani, különben összecsúsznak a sorok.
.super { vertical-align: super; }
A tulajdonsággal az elem függőleges pozícióját tudjuk szabályozni. Egy cellán belül a HTML nyelv td elemének valign tulajdonságához hasonlít, azonban szöveg környezetben (például egy div-en belül) a betűkhöz, és nem a befoglaló blokk méreteihez viszonyított igazítást állítja. Az értékei lehetnek: sub, super, baseline, text-top, text-bottom, middle, top, bottom. A példában egy felső index pozíció beállítását láthatjuk.

Dobozok megjelenése

A legtöbb HTML elem egy dobozba foglalható, és ezzel kapcsolatosan különböző tulajdonságai állíthatóak. Az alábbi ábra egy általános HTML elem megjelenését mutatja be.

Doboz modell


Négy oldala van, a felső, az alsó, a bal oldali és a jobb oldali. Mindegyik oldalnak van margója (1), kerete (2) és kitöltése (3). A margó a befoglaló doboz legszéle és a keret közötti távolságot állítja be. A keret a margó és a kitöltés között található. Végül a kitöltés a keret és a tartalom között helyezkedik el. Mindegyik lehet akár 0 pixel szélességű is, ekkor egyszerűen nem jelennek meg. A tartalom és a kitöltés által meghatározott terület hátterének színe állítható, illetve képet is el lehet helyezni rajta.

Az elemeknek van magasság (4) és szélesség (5) tulajdonsága is. Ezek a szabvány szerint az adott keret külső részétől az átellenes keret külső részéig értendőek. Erről sajnos a jelenleg domináns böngésző valamiért nem tud (kivéve 6-os verziójának kompatibilis módját), és a teljes dobozszélességet, illetve dobozmagasságot érti ezen tulajdonságok alatt.

Egy soron belüli elemnek is megadhatjuk a fenti értékeket, viszont előfordulhat, hogy több sorban jelenik meg. Ekkor az alábbi jelenséget figyelhetjük meg:

Doboz modell soron belül


Ahogy a képen látható, a piros keretű doboz középen (az elválasztásnál) kettétörik, és a keret (illetve a másik két tulajdonság) mindkét sorban hat, viszont a törésnél, azaz a sorok megfelelő szélénél nem. Ha több sorba kerül az elemünk aminek ezeket a tulajdonságokat megadtuk, akkor több helyen is kettétörik a doboz.

Háttér

A háttér színét vezérelhetjük segítségével, továbbá elhelyezhetünk képet háttérként, s annak tulajdonságait (elhelyezkedését, ismétlődését, mozgását) állíthatjuk be. A betűkhöz hasonlóan egy definícióban is, és külön-külön is szabályozhatjuk az tulajdonságokat.
body { background-color: white; }
Fehérre állítja a háttér színét. Természetesen a színt hexadecimális formában (#ffffff) is megadhatjuk.
body {
 background-image: url(hatter.gif);
 background-position: top left;
 background-attachment: scroll;
 background-repeat: repeat;
 }
A példa a háttérnek megadja a hatter.gif-et (lehetne még none is megadva, ekkor csak a színezés maradna), a bal felső sarokhoz igazítja, beállítja, hogy amikor görgetjük az oldalt, akkor a háttér is mozogjon, s végül még azt, hogy ismétlődjön a háttérkép. A background-position (elhelyezkedés) értékei lehetnek szövegesek: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, illetve százalékosak (pl. 12% 34%) és pixelben megadottak (pl. 12px 34px). A background-attachement (a rögzízettséget szabályozza) értéke lehet fixed és scroll, az előbbinél nem mozdul a háttér, az utóbbinál pedig a görgetéssel együtt mozog. Az ismétlődést befolyásoló background-repeat négy értéket vehet fel: repeat, repeat-x, repeat-y, no-repeat, melyekkel mindkét, csak az egyik, vagy egyik irányban sem történő ismétlődést érhetünk el.

A háttér paraméterek egy összevonó background paraméterrel:
body { background: white url(hatter.gif) no-repeat fixed center center; }
Ebben az esetben mivel a képnek no-repeat értéket adtunk ismétlésül, a fennmaradó területen a háttér fehér színű lesz.

Keretek

A stíluslapok segítségével lehetőségünk van különböző stílusú keretet adni a kiválasztott HTML elemeinknek.
p { border: 2px solid blue; }
A fenti példában 2 képpont széles, sima és kék keretet adtunk minden bekezdésnek. Az első fenti paraméter a keret szélességét, a második a keret stílusát (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), a harmadik pedig a színét adja meg. Az egyes paraméterek elhagyhatóak, de általában szükséges mind.

Lehetőségünk van a keretek mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:
p {
 border-left: 1px solid red;
 border-top: 3px double blue;
 border-right: 3px dotted green;
 border-bottom: 3px dashed black;
 }
Bal oldalt egy képpont széles piros, felül 3 képpontnyi két vonalas (vonalanként 1-1 képpontos) kék, jobb oldalt 3 képpontos pontozott zöld és végül alul 3 képpontos szaggatott vonalas fekete keretet kap minden bekezdés.

Körvonalak

A körvonalak a keretekhez nagyon hasonlóan működnek, ellenben az elem méretét nem befolyásolják, mindig körülötte és felette (előtte, azaz eltakarják mindenképpen a doboz tartalmát) jelennek meg, helyet nem foglalnak. A legegyszerűbb talán a fókusz példáját felhozni, mely ehhez nagyon hasonló: mikor egy beviteli elem (például gomb) aktív, akkor körülötte az operációs rendszer egy körvonallal jelzi, hogy fogadja a felhasználói bevitelt.

A körvonalak és a keretek további különbsége, hogy nem lehet a négy oldalon külön-külön megadni és hogy nem csak négyzetes alakú lehet.

De lássuk azokat a tulajdonságokat, melyekkel befolyásolni tudjuk a körvonal megjelenését!
p { outline-width: 2px; }
p { outline-style: solid; }
p { outline-color: #000000; }
Az outline-width tulajdonság segítségével a körvonal szélessége adható meg, az outline-style a stílust definiálja, míg az outline-color a körvonal színét állítja be. A stílusnál a kereteknél bemutatott stílusok használhatóak.

Lehetőség van egy tulajdonság segítségével beállítani a három tulajdonságot, ekkor opcionálisan és bármilyen sorrendben megadhatjuk az outline után ezeket:
p { outline: 2px solid #000000; }

Margók

Az egyes elemek a kereten (legyen az akár 0 képpontnyi) kívüli helyfoglalását szabályozhatjuk a margók segítségével.
p { margin: 0px 1px 2px 3px; }
A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi margót állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk:
body { margin: 0px; }
Ha csak két értéket adunk meg paraméterként, akkor az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú margókra fog vonatkozni:
body { margin: 10px 0px; }
Lehetőségünk van a margók mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:
p {
 margin-left: 3px;
 margin-top: 0px;
 margin-right: 1px;
 margin-bottom: 2px;
 }
Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső margós példánál bemutatottal.

Kitöltés

Az egyes elemek a kereten (legyen az akár 0 képpontnyi) belüli helyfoglalását szabályozhatjuk a kitöltések segítségével.
p { padding: 0px 1px 2px 3px; }
A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi kitöltést állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk:
body { padding: 5px; }
Ahogy a margóknál, itt is lehet csak két értéket megadni paraméterként, ahol az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú kitöltést szabályozza:
body { padding: 10px 0px; }
Lehetőségünk van a kitöltések mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:
p {
 padding-left: 3px;
 padding-top: 0px;
 padding-right: 1px;
 padding-bottom: 2px;
 }
Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső kitöltéses példánál bemutatottal.

Listák megjelenése

A listák két különböző HTML elemek egymásba ágyazásából állnak össze. A külső elem lehet ul, ol és dd elem, melyben li, illetve dt elemek kapnak helyet. Mind a külső, mind a belső elemek saját margóval, kerettel és kitöltéssel rendelkeznek. A belső listaelemek listajelölő grafikájának megjelenítésekor a különböző böngészők kicsit eltérően viselkednek, egy részük a külső elem bal felének megfelelő szélességű margót, másik részük pedig megfelelő szélességű kitöltést ad, majd ezen a területen jeleníti meg a grafikát (a dd-dt páros esetén alapértelmezett esetben nem jelenik meg grafika, de a megfelelő margókkal rendelkezik). A grafika megjelenítése a belső listaelemeken kívülről áthelyezhető belülre egy tulajdonság segítségével.

Listaelemek

A listák megjelenését tudjuk szabályozni a következőkben bemutatott paraméterekkel. Lehetőségünk van képet rendelni a listaelemekhez, vagy egy előre meghatározott listából választani, továbbá befolyásolhatjuk az egyes listaelemek előtt álló jelek helyzetét. Lehetőségünk van mindezt egy paraméterrel, illetve külön-külön is állítani:
ul { list-style: square inside url(pont.gif) }
ul { list-style-position: inside }
ul { list-style-type: disc }
ul { list-style-image: url(pont.gif) }
Az első sor az egy paraméterként megadott szabályozást mutatja be. Egy kép fog megjelenni minden listaelem előtt, s a képet a szöveggel együtt fogja behúzni. Ha azt szeretnénk, hogy a kép ne legyen behúzva, akkor outside paramétert kell megadnunk. A fenti példában, mivel a kép meg van adva, s bár azt is meghatároztuk, hogy négyzet (square) legyen a jel, ezt felül fogja bírálni a kép. Mindazonáltal a jelet is meg kell adnunk, enélkül ugyanis nem jelenik meg a kép...

A második sorban a jel behúzásának szabályozó paramétert mutatjuk be, ahogy az előbb is említettük, itt állhat értékül inside és outside. A harmadik sor a jelet szabályozza. Itt széles választási lehetőségünk van: none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha - persze nem mindegyik böngésző támogatja az összes jelet. Végül az utolsó sorban a képre cserélését láthatjuk a lista jelének - mégegyszer kihangsúlyozzuk, ha szeretnénk, hogy a kép megjelenjen, meg kell adnunk a jel típusát is.

A következő két ábra a list-style-position tulajdonság hatását mutatja be, az elsőn az outside, alapértelmezett érték esetén történő megjelenítés látható, míg a másodikon az inside érték beállításával.

Lista pozíció - kívül


Lista pozíció - belül

Összefoglalás

Nos, még korántsem értünk a végére a cikksorozatnak, de talán már az eddig bemutatott ismeretanyagból is látszik, hogy rengeteg lehetőségünk van, ha a HTML állományunk megjelenését szeretnénk befolyásolni.

A cikksorozat következő részeiben megismerkedünk a CSS mértékegységekkel (távolságok, színek, stb.), további kiválasztási lehetőségekkel, pár további paraméterrel, továbbá számos tippel és trükkel, melyek segítségével felfedezhetjük a CSS technológia szépségeit.
 
Bártházi András arcképe
Bártházi András
Az Emarsys-nál dolgozik vezető fejlesztőként, és az API-ért, integrációkért felelős termékmenedzserként. Szeret profi csapatban profit alkotni.
1

text-shadow

sajt · 2004. Ápr. 7. (Sze), 12.51
Nekem nem mukodik :( (firefox 0.8)
<html>
<head>
<style>
h1 {text-shadow: 5px 5px 3px #000000;}
</style>
</head>
<body>
<h1>Valami</h1>
</body>
</html>
4

re: text-shadow

Bártházi András · 2004. Ápr. 7. (Sze), 14.08
Többször is hangsúlyozom, hogy a szabványt, és nem a böngészők valódi működését mutatom be. No, ez egy ilyen dolog. :)

-boogie-
23

Árnyék

Anonymous · 2006. Ápr. 24. (H), 13.47
Tudtok mondani olyan böngészőt, amivel ez működik? Mert 1.5.0-2-es firefoxszal sem láttam az árnyékot.. ):

Laca
24

re

Anonymous · 2006. Ápr. 24. (H), 13.48
Stornó, lejjeb megtaláltam, bocs...
L
29

Arnyek

Anonymous · 2006. Okt. 11. (Sze), 16.03
Safari szepen megjeleniti, de azon kivul nem tudok mast.
2

Doboz modell helyesen

Jano · 2004. Ápr. 7. (Sze), 12.54
A doboz modellt rosszul irtad le.
Ezen az oldalon lathato, hogyanertelmezi IE es mi a szabvany:
microsoft IE 6 fejlesztesek

A szabvany szerint a szelesseg a TARTALOM szelessege.
IE-ben a szelesseg = TARTALOM + PADDING + BORDER!

Hogy konnyu legyen megjegyezni melyik a szabvany, gondljunk a kepekre.
Szeretnenk ha a 100*100pixel szeles kepunk korul lenne egy 1px szeles keret. Ekkor ha 100px-t alliananak be a kep szelessegere es IEfele logikat neznenk akkor a 100pixelbol kivonna a 2*1px keretet es 98px-re kene torzitani a kepunket.
Ezert van, hogy a szabvany a tartalom szelesseget allitja.
5

Re: Doboz modell helyesen

Bártházi András · 2004. Ápr. 7. (Sze), 14.15
Teljesen igazad van, mindig keverem ezeket... :) A cikkben javítottam.

Hogy érdemlegeset is mondjak, a megoldás a különbözőség elkerülésére kettőféleképpen oldható meg. Vagy két értéket adunk meg hack-ek segítségével, vagy pedig mind a kitöltést, mind a keretet 0-ra állítjuk be. Ez utóbbi esetben a szélességek megegyeznek. Ha kell ennek ellenére keret, illetve padding, azt egy a diven belüli divvel lehet megoldani, aminek az ember nem ad meg szélességet. Ilyenkor mindegyik böngésző rugalmasan állapítja meg a szélességet, és a rendelkezésre álló helyből vonja le a border-t és a padding-ot. Én ezt a megoldást szoktam használni, persze ha éppen megoldható így szervezni a HTML forrást.

-boogie-
3

text-shadow

Jano · 2004. Ápr. 7. (Sze), 13.15
Mac-es Safari ismeri talan egyedul:
Text-Shadow in Safari 1.1

Itt egy trukk, hogyan lehet elerni hasonlot Mozilla, Opera alatt az :after segitsegevel.
CSS Shadow
6

re: text-shadow

Bártházi András · 2004. Ápr. 7. (Sze), 14.26
Még Opera 7 is tudja (elvileg, most hirtelen nincs Operám):
http://www.opera.com/docs/specs/css/

-boogie-
7

css kulonbozosegek

sajt · 2004. Ápr. 7. (Sze), 15.32
Van valahol olyan oldal ahol az ember-fia megnezheti, hogy melyik bongeto hogyan ertelmezi a szabvanyt?
8

en csak ilyenrol tudok: http:

ene · 2004. Ápr. 7. (Sze), 15.39
en csak ilyenrol tudok: http://www.westciv.com/style_master/academy/browser_support/index.html
9

Index dot CSS

Anonymous · 2004. Ápr. 8. (Cs), 08.46
Az Index dot CSS egy nagyon jó kompatibilitási információkkal is rendelkező referencia.
10

divben szöveg középre

Anonymous · 2004. Ápr. 9. (P), 00.55
"A tulajdonsággal az elem függőleges pozícióját tudjuk szabályozni. Egy cellán belül a HTML nyelv td elemének valign tulajdonságához hasonlít, azonban szöveg környezetben (például egy div-en belül) a betűkhöz, és nem a befoglaló blokk méreteihez viszonyított igazítást állítja."

És azt akkor meglehet valamivel csinálni hogy a befogadó szülő (div) magasságához képest rendezi középre??
11

re: divben szöveg középre

Bártházi András · 2004. Ápr. 9. (P), 07.06
Nem lehet. Vannak trükkök, ha például tudod a div magasságát, akkor igen, vagy lehet javascriptet használni, stb.

-boogie-
14

hmm

Anonymous · 2004. Ápr. 11. (V), 13.54
Ezek szerint a css 2 még elég gyerek cipős cucc,
de utánna néztem a css 3ban már lesznek ilyen okosságok :)
16

re: hmm

Bártházi András · 2004. Ápr. 12. (H), 18.57
Azért ez így túlzás, de valóban vannak hiányosságai. :)

-boogie-
12

Horizontal and vertical centering in CSS without js and table

Anonymous · 2004. Ápr. 10. (Szo), 10.10
De lehet. Es nem is olyan bonyolult.
Semmi javascript, vagy table, es a magassag sem szamit, barmilyen kepernyomeretben pozicionalhato egy div horizontalisan es vertikalisan is kozepre egy masik diven belul, es barmilyen resize eseten is ott marad.
Tessek: http://www.wpdfd.com/editorial/thebox/deadcentre3.html

A gyengebbek (vagy angolul nem tudok) kedveert, alul a "view construction" megmutatja borderekkel, hogy is epul fel ez a dolog, illetve lehet a css-t is tanulmanyozni.

Zorius
13

Nem, nem lehet...

Bártházi András · 2004. Ápr. 10. (Szo), 14.49
Szia!

Az általad bemutatott példát ismerem, és pont az valósítja meg, amit én is írtam: ha tudod a div-nek a méretét, amit függőlegesen pozícionálni szeretnél, akkor megoldható. Ellenkező esetben elég sok keresgélés után sem találtam megoldást a problémára. És a baj pont az, hogy általában az ember nem tudja a tartalom magasságát.

-boogie-
18

centering

Anonymous · 2004. Ápr. 14. (Sze), 22.36
akkor elertettem, mert a kerdesbol a lenyeg nem derul ki. azt hittem, a befoglalo magassaga ismert.
viszont ugy nem is gyakran szokott az ember vertikalisan centralgatni, hogy egy folyekony divrol van szo. inkabb holmi cimeket, logokat stb. mert ugye mondjuk egy novekvo hosszusagu div eleg hamar tuler a kepernyon, onnantol meg nincs ertelme vertikalisan centralni, addig meg szamolgassa ki szepen a tag...
hallgattal volna, bolcs maradtal volna. latszik, hogy nem ertek hozza, minek is irtam?
19

CSS

Anonymous · 2004. Okt. 25. (H), 09.33
Van-e lehetőség egy HTML elem tulajdonsának a lekérdezésére és egy másik elemben azt felhasználni ?
20

Nincs, kivéve.

Bártházi András · 2004. Okt. 25. (H), 10.07
Te itt azt mondod - ha jól értem -, hogy van egy A elemed és egy B elemed. Szeretnéd, ha az A elem CSS-e ugyanaz lenne, mint a B elemé:

A->CSS->B

Ezt így nem lehet, de ha másik oldalról fogjuk meg a kérdést, egyből megoldódik:

CSS->A
CSS->B

Azaz mindkét elemnek ugyanazt a class-t kellene adni (ugyanabba az osztályba sorolni), s egyből ugyanaz lenne a tulajdonságuk.

Ha valamiért dinamikusan szeretnéd állítgatni ezeket (nem tudok elképzelni ilyen körülményt), akkor Javascripttel le lehet kérdezni, majd beállítani (itt a .style tulajdonsága a lényeg az adott HTML elem objektumának).

Ha kicsit részletesebben leírod, hogy mit szeretnél csinálni, akkor lehet, hogy jobb választ tudok adni. :)

-boogie-
21

Méret meghatározása

Anonymous · 2004. Okt. 25. (H), 11.26
Köszönöm a választ! Én a "Nem, nem lehet..." hozzászólásodra reagáltam volna. Tehát egy elemet egy DIV elembe szeretnék függőlegesen középre állítani és ha változtatom a DIV elem méretét, akkor továbbra is középen marad az adott elem.
De szerintem is JS kell hozzá. Sokat jelent egyébként számomra ez a sorozat, mert hiányos az angol ismeretem és sok mindent nem értek meg az CSS dokumentációban.
22

nem ismerek ilyen megoldást

Bártházi András · 2004. Okt. 25. (H), 13.28
Attól függ, hogy mi az az elem, mert végülis meg lehet oldani, de csak konkrét esetekben. Általánosan nem. Ha egy sornyi szövegről van szó, ha egy ismert magasságú elemről (pl. egy kép), akkor középre lehet illeszteni. De általánosan nem lehet (legalábbis én nem ismerek ilyet).

A Javascript a jó megoldás erre a problémára.

-boogie-
33

Hát nekem úgy tűnik hogy lehet...

Hörb · 2010. Jún. 12. (Szo), 13.53
Be kell rakni egy egycellás táblázatot, és abban működik a vertical-align tulajdonság. Pl.:

<div style="width: 500px; height: 500px;">
	<table style="width: 100%; height: 100%;">
		<tr>
			<td style="vertical-align: middle; text-align: center;">
				<div style="margin: auto; width: 100px;">belső</div>
			</td>
		</tr>
	</table>
</div>
A text-align-t csak azért raktam be, hogy ie alatt is működjön. Mondjuk már nem 2004 van, de ie6 alatt is jó :)
34

Tableless

Török Gábor · 2010. Jún. 13. (V), 08.40
A táblázatok nem formázásra, hanem a tartalom táblázatosságának jelölésére valók.
35

Igaz

Hörb · 2010. Jún. 17. (Cs), 17.57
Én se szoktam formázásra használni, csak ez ilyen kényszerhelyzet. Mondjuk meg lehet oldani táblázat nélkül is, pl:

<div id="container">
	<div id="aligner">
		<div id="content">belső</div>
	</div>
</div>
a css pedig:

#container{
	display: table;
	width: 500px;
	height: 500px;
	border: 1px solid black;
}
#aligner{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	position: relative;
	top: expression(this.parentNode.clientHeight/2 - this.firstChild.clientHeight/2 + " px");
}
#content{
	margin: auto;
	width: 100px;
}
Mondjuk itt már kell javascript, mert az IE nem támogatja a table és a table-cell értékeket. De a content középen lesz, a magasságától függetlenül.
15

background-attachment

Anonymous · 2004. Ápr. 12. (H), 18.53
A szövegben van egy elírás. Helyesen "background-attachment" a
tulajdonság neve:

http://www.w3.org/TR/REC-CSS2/colors.html

Tetszik, szép cikk.

BLC
17

Re: background-attachment

Bártházi András · 2004. Ápr. 12. (H), 19.01
Köszi a hibajelentést (javítva), illetve a dicséretet is. :)

-boogie-
25

Segítség

Anonymous · 2006. Május. 12. (P), 18.57
Mi a különbség a class és az Id között?
valamint milyen szintakszis a DIV#valami?

ezek nem derültek ki világosan számomra.....
26

id vs class

Jano · 2006. Május. 13. (Szo), 01.29
Id identity vagyis egyéni azonosító autóknál a rendszám. Csak egy lehet belöle az oldalon. A class osztályt jelent, ha autós hasonlatnál maradunk akkor ez a tipus. Ahogy egy autó tipusból is lehet több az utcán ugyanolyan class-ba tartozhat több elem.
27

id vs class

Anonymous · 2006. Május. 13. (Szo), 15.30
megjelenésben van valami különbség akettő között?azon kívül, hogy ha jól tudom a class tulajsonságai öröklődnek.
Gyakorlatban mikor használják az egyiket és mikor a másikat?


köszönöm a választ.
28

kiválasztó

Jano · 2006. Május. 13. (Szo), 16.27
Nem érted a lényeget! A CSS szabályok 2 részből állnak: a kapcsos zárojelen belül van az, hogy milyen kinézetet akarsz a kapcsos zárójel előtt pedig az, hogy mire, melyik elem(ek)re.

Ha van egy olyan szabályod, hogy p {color:blue;} akkor a kapcsos zárójelen belül megmondod, hogy szeretnéd, hogy kék színűek legyenek a betűk, a kapcsos zárójel előtt pedig meghatározodd, hogy ez a P elemekre vonatkozzon csak.

Hol jön be a class vagyis osztály?
Tegyük fel, hogy az oldaladon vannak blog bejegyzések és minden blog bejegyzés első bekezdését szeretnéd megvastagítani mert az a bejegyzés bevezetője, összefoglalója (leadje, kopfja). Ezért a lapon minden ilyen bekezdésnek megadod class="bevezeto".

Ekkor a CSS-ben kiválaszthatod csak a bevezeto oszályú bekezdéseket a p.bevezeto kivalasztoval. És megadhatod, hogy legyenek vastagok:

p.bevezeto {font-weight:bold;}
30

id vs class

Anonymous · 2006. Okt. 26. (Cs), 13.31
Az ID (azonosito) hasznalatanak akkor van haszna, ha egy elembol biztosan csak egy van az adott dokumentumon belul. Peldaul egy termekoldalon a vezerkep egy ilyen elem lehet, mig alatta vannak thumbnailek, amikbol sok van.
A vezerkepnek erdemes azonositot adni (emellett lehet neki osztalyt is definialni), mig a thumbnaileket azonos osztalyba sorolni.
A thumbnaileken valo klikkeles eseten javascriptet hasznalva kicsereljuk a vezerkep forrasat. Ahhoz, hogy ezt megtehessuk, szukseg van arra, hogy a dokumentumon belul egyertelmuen azonosithassuk az elemet es ne kelljen vegigparsolni az egeszet.
Ebbol a peldabol biztosan megerted:

function roll_over(id, img_src)
{
document.getElementById(id).src = img_src;
}


<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>
31

Framek szövegszerkesztése.

Tiger91 · 2009. Már. 19. (Cs), 21.18
Szervusztok!
Nagy segítségre lenne szükségem!!! Mily módon tudok KERETES oldalon (a linkek iframes-ben töltődnek be. A bajom az, hogy nemtudom hogyan kell,) IFRAMES-en belül szövegetformázni külső .css stíluslappal (legfőképp a színe érdekelne)???
Segítsetek légyszíves!!!!
32

IFRAME

Poetro · 2009. Már. 19. (Cs), 22.58
Bár nem tudom, mire gondolsz az alatt, hogy
Framek szövegszerkesztése
illetve
IFRAMES-en belül szövegetformázni
, ám ami működik, az az, hogy az IFRAME-be behívott tartalomban ágyazod be a CSS-t, azaz a abban a fileban, amit az IFRAME-be behívsz.
Ha a szülő oldalról szeretnél valami hasonlót elérni, akkor azt csak azonos domain esetén teheted meg, ekkor egy ehhez hasonló JavaScripttel lehet módosítani az IFRAME CSS-et, azaz egy újabb CSS-t beágyazni.
head = document.frames['frameneve'].document.getElementByTagName('head')[0];
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('media', 'all');
link.setAttribute('href', 'http://example.com/example.css');
head.appendChild(link);