Tanulási css class vagy id - melyik a jobb, css

Irányítsd a megjelenése HTML-elemeket az oldalon lehet, ha több szelektor. Azonosító és CSS osztály a leggyakoribb, ami segíthet nemcsak a teremtés HTML-jelölés dokumentumokat. hanem a tervezési (styling).

Hogyan kell alkalmazni a CSS-választó ID

ID szelektor rövidítés használatos egyetlen HTML-elem egy egyedi azonosító attribútum értékeit. A következő példa mutatja eleme

, id egy értéket képvisel, amelynek attribútuma fejlécet.

A CSS-ben ez a div elem lehet használni a különböző hajformázó:

Hogyan kell használni a CSS osztály választó

Választó osztály HTML CSS-t használnak ki egy egyén vagy egy egész csoport HTML-elemek azonos attribútum értéke osztályban.

A CSS több pontban, akkor lehet alkalmazni a különböző hajformázó:

Mi a különbség a CSS osztály és az azonosító

Celektor id használt egyes oldalelemek (#header), míg a választó osztály (.content) - több. Mivel az id érték csak egy HTML-elemet. Más szóval, több elem nem lehet azonos értékű id egyetlen oldalra. Például, ha csak az egyik elem id #header. vagy az egyik elem id #footer.

Ugyanez az érték az osztály lehet állítani, hogy egy vagy több HTML-elemeket. Például előfordulhat, hogy néhány bekezdés a class .content vagy több kapcsolatot az osztály .external.

Az alábbi példa segít, hogy jobban megértsük a különbségeket CSS class és id. valamint megérteni, hogyan kell használni:

A fenti HTML-jelölés kezdtük tartály div elem. Megkérdeztük, id (#container), mivel az csak a tároló lesz a honlapunkon. Belül helyezzük el a dolgokat a menüben (#menu) és tartalmi (#content). Ahogyan az a tartály, akkor csak egy menü, és egy részén tartalmat. Bent a négy menüpontjaira találhatók , de mindegyik általunk alkalmazott CSS osztály (.link). Hasonlóképpen, az általunk használt osztály (.text) mindegyik bekezdés a div-elem tartalma.

Ha azt szeretnénk, hogy stilizálhatja elemet, akkor használja a következő példát:

Ha egy osztály, és amikor az id?

Azonosító alapján különálló elemekből csak egyszer fordul elő az oldalon. Például, a cím, pince, menük és így tovább. D. Egy osztály választó használunk egy vagy több elemet, amely többször fordul elő az oldalon. Például a fenti, linkek, gombok, beviteli elemeket. Bár tudod használni az osztály egy egyedi tétel, de jobb, hogy ezeket a választókat a célállomás felé.

Azt is meg kell jegyezni, hogy a HTML-elem is megadható, és id. és az osztály. Tegyük fel, hogy van két oldalt a blokk azonos méretű és stilizáció, hanem egy másik elhelyezése. Ebben az esetben, akkor lehet alkalmazni az azonos osztályba tartozó említett blokkokra megváltoztatni a mérete és a stílus, akkor érdemes egy külön azonosító-választó az egyes blokk, hogy megkérdezzük őket különböző elhelyezése.

Elemek is kötődik több osztály. Ez nagyon hasznos, ha az alkalmazni kívánt stílust külön elemek csoportja egy bizonyos típusú. Például van .content osztályban. amelyet alkalmazni minden bekezdését. Ha azt szeretnénk, hogy egy olyan keretet, vagy bármilyen más stílus több egyes bekezdések, meg tudod csinálni a segítségével további CSS p class .bordered:

Megjegyzés az üres tér a két osztály neveket a class attribútum a második bekezdés. Az alábbiakban egy példát CSS-kód:

Fontos, hogy használja az id és CSS osztály. azok helytelen használata hibákhoz vezethet a kijelzőn a HTML-kódot.

Fordítása a cikk „CSS osztály vs ID: melyiket használja” már készített egy csapat barátságos Web design projekt tól Z-ig