Új hozzászólás Aktív témák

• #5992 Sk8erPeter nagyúr honda 1993 #5990

  Új Válasz 2014-10-03 17:58:24 #5992

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Sk8erPeter

  nagyúr

  válasz honda 1993 #5990 üzenetére

  Most megpróbálok segítőkész lenni.
  Vágod, vannak a class-ok/osztályok (<div class="my_class"></div>), meg van az id/unique identifier/azonosító (<div id="my_unique_id"></div>). Utóbbi (id) szerint teljesen egyértelműen lehet azonosítani egy adott elemet, akármi is az (hiszen egy azonosítóból csak és kizárólag egy darab szabad, hogy legyen az egész oldalon!), előbbi (class) szerint általánosabb, több elemre érvényesíthető szabályokat lehet megfogalmazni.
  Egy elem tehát 1, azaz egy darab id-val lehet ellátva, DE akárhány osztállyal is el lehet látva (class-attribútum szóközzel elválasztott értékei, pl. <div class="elso_osztaly masodik_osztaly">...</div>), ez arra ad lehetőséget, hogy több, külön-külön osztályban meghatározott szabály (stílusdefiníció) is vonatkozzon egy darab elemre. A kettőt természetesen kombinálni is lehet (id és class: <div id="my_unique_id" class="first_class second_class">...</div>), így mind az azonosítóra, mind az osztály(ok)ra vonatkozó stílusdefiníciók érvényesek lesznek az adott elemre. Tehát tulajdonképpen össze-vissza kombinálhatod a stílusdefiníciókat; nyilván ezt ésszel kell használni, nem egymásnak ellentmondó, egymást felülíró szabályokat ráhúzni egy adott elemre.
  Az id-ra vonatkozó szabályokat a CSS-ben az anchor/kettőskereszt/létra jellel tudod meghatározni:

  #my_unique_id {
  /* ide jöhetnek a szabályok */
  }

  Az osztályra vonatkozó stílusdefiníciókat pedig a ponttal:

  .first_class {
  }

  Vegyük ezt a példát, hogy van egy ilyen elemed:
  <div id="my_unique_id" class="first_class second_class">...</div>

  És van egy CSS-fájlod, amiben ilyen stílusdefiníciók szerepelnek:

  #my_unique_id {
  color: red;
  }
  
  .first_class {
  background-color: yellow;
  width:400px;
  }
  
  .second_class {
  font-size: 30px;
  }
  
  .blabla {
  margin: 20px 10px 30px 5px;
  }

  Na, mi következik ebből? Az előbb meghatározott divre mind a #my_unique_id-re, mind a .first_class-re, mind a .second_class-re vonatkozó stílus érvényes lesz:
  vagyis sorban:
  - piros színű lesz a divben minden szöveg (aminek a színe nincs felülbírálva!!), mert ő a my_unique_id azonosítójú elem
  - sárga lesz a háttere, meg 400px széles lesz, mert a first_class osztályba soroltad
  - jó nagydarab, 30px-es betűméretűek lesznek a szövegek a divben, amiknek a mérete nem lett felüldefiniálva, mert hozzácsaptad a second_class osztályt is

  A .blabla osztályt pedig direkt azért tettem be, hogy megzavarjalak. Na jó, nem, de a lényeg, hogy a blabla osztályban meghatározott margóértékek a mostani példában senkit nem fognak érdekelni az előbb említett div szempontjából, mert nem kapcsoltuk ezt az elemet is a blabla osztályhoz.

  Na, lépjünk tovább eggyel:
  Van az előbb említett elem, és bele van ágyazva egy <p> (blokkszintű elem, bekezdés), azonbelül meg van egy <span> (sorszintű elem), ami el van látva a whatever-span osztállyal:

  <div id="my_unique_id" class="first_class second_class">
  <p> Ez egy csodás bekezdés, <span class="whatever-span">ez meg egy csodás szöveg</span>.</p>
  </div>

  Na, ha a CSS-fájlodban a .whatever-span-re az előbb látott módon meghatározol valamilyen stílust, akkor az vonatkozni fog nyilván az ominózus <span>-re.
  DE hierarchikusan is hivatkozhatsz rá, abban a sorrendben, ahogy az elemek egymásba vannak ágyazva, pl. így:

  #my_unique_id .whatever-span {
  }

  VAGY így:

  #my_unique_id p .whatever-span {
  }

  VAGY így:

  #my_unique_id span.whatever-span {
  }

  VAGY így:

  .first-class .whatever-span {
  }

  VAGY... na jó, nem folytatom.

  Szóval esetedben - hogy a példádhoz is visszakapcsolódjak - így tudsz hivatkozni a #header id-vel ellátott elemben lévő képre:

  #header img {
  }

  DE ez még mindig elég általános, bármelyik, a header azonosítóval ellátott elemben lévő <img> tagre vonatkozni fog.

  Remélem, most sikerült kicsit tisztábbá tennem a képet, igazán erőlködtem, hogy ne olyanokat mondjak, hogy guglizzámávaze, óvassá sztekkóverflót, satöbbi.

  Sk8erPeter

Új hozzászólás Aktív témák