ugrás a tartalomhoz

CSS elemek linkelés - kérdés

Matyi Gábor · 2005. Már. 9. (Sze), 13.08
Van egy html és egy hozzá tartozó css fájl. a html fájlban van egy content és egyclr id, ami a css-ben az alábbiak szerint van formázva.
Az lenne a kérdésem, hogy mi a különbség a

.content {...} és a #content {#...} között?

illetve mire jó a #outer>#inner


a css fájl:

#outer>#inner { border-bottom: 1px solid #FFFFFF; }

.clr{clear:both;}

.content{padding:5px;}

#header .content{padding-bottom:0;}


A hozzá tartozó html fájl.

<body>
<div id="pagewidth" >
<div id="outer" >
<div id="inner">
<div id="maincol" >
<div class="content"> Main Content Column </div>
</div>

<div class="clr"></div>
</div>
</div>
</div>
</body>
</html>





ezenkívül egy html fájlban kétféleképen lehet belinkelni css-t: Mi a különbsége?

<style type="text/css" media="screen">
@import "/themes/azigazi/style.css";
</style>

<link type="text/css" media="screen" href="/themes/azigazi/bigfont.css" />
‹ Javascript folyamatok Tábla elem helyezése position nélkül ›
 ■
1

RTFM

Poetro · 2005. Már. 9. (Sze), 13.31
#inner>#outer w3c referencia
. és # közötti különbség:
. class selector
# id selector
--------
Poetro
2

kérdés megint, némi kötözködéssel

Anonymous · 2005. Már. 9. (Sze), 14.15
köszi szépen a linket, bár ezt én kiegészíteném egy magyar fordítással is, hátha az olvasóközönség között van olyan is, aki jobban csípi a magyar doksikat.

http://htmlinfo.polyhistor.hu/css2ref/selector.htm#class-html

akkor inkább feltenném másképpen a kérdést.
mi a különbség egy ilyen egyszerű móricka html-css fájlban a class . és az id # között?
A http://htmlinfo.polyhistor.hu/html_ref/blocklevel.htm#DIV link nem túl bőbeszédű e témában?

Válaszokat előre is köszi.
3

class és id

kmm · 2005. Már. 9. (Sze), 14.26
A class egy osztályt, amiben több egyed is lehet, az id egy és csak egy egyedet jelöl.
--
üdv: kmm...
5

úgy tűnik most már

Anonymous · 2005. Már. 9. (Sze), 14.44
úgy tűnik most már értem. az egész lapon van összesen 1 db header, de content van több is.
6

még valami

Anonymous · 2005. Már. 9. (Sze), 14.56
még erre nem érkezett válasz.

<style type="text/css" media="print">
@import "/themes/azigazi/print.css";
</style>

<link type="text/css" media="screen" href="/themes/azigazi/bigfont.css" />


tudja valaki, hogy mi a különbség?
7

stiluslap import

Jano · 2005. Már. 9. (Sze), 15.03
A link rel a hagyomanyos HTML-hez kulso dolog kapcsolasa modszer.

Viszont elofordulaht, hogy elkeszited a stiluslapodat es ahhoz akarsz egy masikat csatolni, ennek a megoldasa a @import.

Termeszetesen nem csak kulso css fajl eseten lehet hasznalni, hanem a HTML kodba beagyazott stilus definicios resznel is.

Azert szoktak hasznalni mert a regebbi bongeszok nem ismerik, igyazok elol elrejti a CSS fajlt, amit hibasan ertelmeznenek. A css nelkuli verzio pedig meg mindig jobb mint egy felre ertelmezett css miatti osszekuszat oldal.

Arra erdemes figyelni, hogy a style elem kozotti resz HTML kommentbe legyen, kulonben a szoeveges bongeszok vagy altalanosan akik nem ismerik a style elemet azok megjelenitik a nyito es zaro elem kozotti reszt vagyis a @import szoveget.
11

igen?

Őry Máté · 2005. Már. 9. (Sze), 22.06
Tudnál olyan szöveges vagy graf böngészőt mondani, ami kiírja? Szvsz szükségtelen és szabványtalan a comment..

Maat
8

Import vs. link

Poetro · 2005. Már. 9. (Sze), 15.09
Az import egy CSS rule, tehát a CSS kezelő importál. Ha ezt nem ismeri a CSS feldolgozó, akkor nem fogja egyáltalán betölteni a CSS-t.
A link elemet pedig a HTML feldolgozó fogja betölteni, és a beállításai szerint feldolgozni.
Igazi különbség nincs, hacsak az nem, hogy míg a link elemet a legtöbb böngésző fel tudja dolgozni, addig az import-ot csak az újabbak.
--------
Poetro
9

Kiegészítés

Bártházi András · 2005. Már. 9. (Sze), 15.11
Még annyit tennék hozzá, hogy a media tulajdonság azt határozza meg, hogy milyen médiumhoz történjen a CSS hozzárendelése. A print tartalmazza a nyomtatási nézetet, a screen pedig a képernyőn megjelenő stílust.

-boogie-
4

Magyarazat

Jano · 2005. Már. 9. (Sze), 14.30
A sima HTML elemeknek ugy tudsz kinezetet allitani, hogy megadod az elemet es moge irod a szabalyokat.

Pl:
P {}

Ez az oldalon talalhato minden P elemre vagyis bekezdesre hatassal lesz.

Ha csak ezek egy reszere, reszhalmazara szeretned alkalmazni a szabalyokat akkor osztalyt definialsz nekik. Ez HTML-ben
p class="osztalynev",
CSS-ben
p.osztalynev

Ha egy lapon EGYETLEN elemet celzol meg. Akkor annak adhatsz egy azonositot angolul (identity) ID-t.
HTML:
p id="jogszabaly_paragrafus_23"
CSS:
p#id
10

túlzott okoskodás ?

noocx · 2005. Már. 9. (Sze), 20.37
Üdv!

Ez HTML-ben:

<p class="osztalynev">tartalom</p>

-------------------------------------------------------

CSS-ben:

p.osztalynev {
/*szabályok megadása, pl: */
color: #FFF;
background-color: #03F;
}

Hogy a teljesen kezdők is könnyebben megértsék miről beszéltek
és szokják a helyes szintaxist.

</noocx>
12

hexa kód... és css

monghuz · 2005. Már. 9. (Sze), 23.39
Hali!

Sok helyen látom hogy a szinek megadásánál használnak ilyeneket : #FFF meg hasonlókat... ez ugye csak akkor alkalmazható ha jelen esetben az utolsó 3 tag értéke 0.. ugye??

és egy másik dolog.. a két sor definició ugyan azt csinálja, vagy van köztük valami küldömbség???

.fcs:link { color:#FFFFFF; text-decoration:underline; }
link.fcs { color:#FFFFFF; text-decoration:underline; }

ill. a fenti két sor elejénél nem kell #-et használni...

hali: Tomi
13

hexa

Bártházi András · 2005. Már. 10. (Cs), 06.51
A #123 jelentése #112233.

A .fcs:link jelentése: az oldalon levő összes olyan HTML elem, aminek az osztálya (class tulajdonsága) fcs, és nem meglátogatott link.

A link.fcs jelentése: az oldalon levő összes <link> HTML elem, aminek az osztálya fcs. A <link> elemre, mely az oldal forrásának a fejlécében fordulhat elő, nem szokás stílust definiálni, ezért azt gondolom, hogy valamit elírhattál.

A # jelentése: az utána következő azonosítójú id-val rendelkező elemek. A kiválasztóknál elsőként az elem nevét kell írni (ha van), utána jöhet vegyesen az osztály, id és virtuális kiválasztó (mint a fenti link), a sorrend mindegy. És lehet hierarchia is, szóközzel, tabbal elválasztva: #content a.kiemelt jelentése: a content id tulajdonsággal rendelkező valamely HTML elemen belüli összes olyan link, aminek a class tulajdonsága kiemelt.

-boogie-
14

link.fcs

Jano · 2005. Már. 10. (Cs), 10.47
A <link> elemre, mely az oldal forrásának a fejlécében fordulhat elő, nem szokás stílust definiálni, ezért azt gondolom, hogy valamit elírhattál.

Ha csinalsz egy ilyet:

head {
 display:block;
}
Akkor maris lathatova tehetok a head-ben megadott dolgok. Linkek vagy meta infok.

Bővebben: Metadata Extraction
15

OK

Bártházi András · 2005. Már. 10. (Cs), 12.03
Ezt tudom :), de nem szokás (egyelőre), s a kérdések alapján nekem valószínűbb volt, hogy elírás történt, mint hogy ennek a lehetőségnek a kihasználásról lett volna szó.

-boogie-
16

Tényleg elírás

monghuz · 2005. Már. 11. (P), 14.18
A link.fcs formát egy weblapon láttam pár hete és azt hittem hogy jó valamire, de tévedtem :)

Viszont felmerült egy másik kérdés. Van a köv css file:

#fejlec background {}
#fejlec kiemelt.link {}

#main background {}
#main kiemelt.link {}
Ez esetben a fejléc részt a html kódban <div class="fejlec"> és </div> közé, a tartalmi részt (main) pedig <div class="main"> megoldással szétválasztom, majd a formázni kivánt linket, <a href="" class="kiemelt"></a> módon kell megadnom?

Jah és mégegy kérdés, valami JavaScript-tel foglakozó lehetőleg magyarnyelvű oldalt tudnátok ajánlani?

bye : Tomi
19

Tárgytalan

monghuz · 2005. Már. 13. (V), 12.58
Az elöbbi hozzászólásom aktualitását vesztette, voltam a phpconf-on :)

Jah amúgy kúl volt a "CSS ereje" előadás :)

bye Tomi
17

linkek

asmany · 2005. Már. 12. (Szo), 01.16
Sziasztok!
Bár nem teljesen téma, de css-kérdésem lenne, mint kezdőnek. Végigolvastam a hozzászólásokat, de még mindig nem teljesen világos. Ha mondjuk egyszerűen:
A:Link{ color: #003366; text-decoration: none; font-family: "Comic Sans MS"; }
A:Active{ color: #003366; text-decoration: none; font-family:"Comic Sans MS"; }
A:Visited{ color: #003366; text-decoration: none; font-family: "Comic Sans MS"; }
A:hover{ color: white; text-decoration: none; font-family: "Comic Sans MS";}

AKKOR, hogy tehetem meg, hogy ugyanezen az oldalon egy másik kupac link teljesen más tulajdonságokat kapjon (vagy egy bármilyen más szelektor)?
18

linkek

Anonymous · 2005. Már. 13. (V), 02.47
Ha több színt akarunk a linkekhez rendelni, akkor az egyes csoportoknak kulon class-okat adunk meg. Például:
<style>
a.zold {color:green}
a.zold:hover {color:red}
a.sarga {color:yellow}
a.sarga:hover {color:black}
</style>
<a class="zold" href="/x">Egyik zöld link<a>
<a class="zold" href="/y">Másik zöld link<a>
<a class="sarga" href="/z">Egyik sárga link<a>
<a class="sarga" href="/w">Másik sárga link<a>

Gyulus