Selectors CSS. llojet e përzgjedhësit

, secila prej të cilave ju doni të vendosur një ngjyrë të veçantë. Si për të bërë atë? CSS Selectors standarde nuk janë të përshtatshme për tags, ata tregojnë parametrat për të gjitha blloqet e në të njëjtën kohë. Zgjidhja është e thjeshtë. Caktojë anëtarët e klasës. Për shembull, i pari mori div class = 'red', i dyti - class = 'blue', e treta - class = 'green'. Tani ata mund të zgjidhen duke përdorur tabelat CSS.

Sintaksa është si vijon: Tregon një pikë ( "."), E ndjekur duke shkruar emrin e klasës. Për të menaxhuar njësia e parë, përdorni ndërtimin .red. Së dyti - .blue dhe kështu me radhë.

E rëndësishme! Është e rekomanduar për të përdorur vlerat kuptimplotë të atribut klasës. Ajo është konsideruar formë e keqe për të përdorur transliterim (p.sh., krasiviy-blok) apo kombinime të rastit të shkronjave / numrave (ojfh834871). Në këtë kod, ju jeni i detyruar për të marrë hutuar, për të mos përmendur vështirësitë që do të hasin ata të cilët do të jenë të angazhuar në këtë projekt pas teje. Opsioni më i mirë - për të përdorur ndonjë metodologji, të tilla si bem.

Avantazhet - fleksibilitet relativisht e lartë.

Disavantazhet - elementet e shumta mund të jetë një dhe e njëjta klasë, që do të thotë se ata do të redaktohen në të njëjtën kohë. Problemi është zgjidhur duke përdorur metodologjinë si dhe trashëgiminë e preprocessors. Të jetë i sigurt për të marrë në duart tuaja pak, SASS apo ndonjë preprocessor-tjetrin, ata të lehtësuar shumë punën.

përzgjedhës ID

Në lidhje me këtë version coders opinionit dhe programuesit janë të paqarta. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Disa mësime CSS nuk e rekomandojmë përdorimin e ID, sepse në aplikim të pasaktë që ata mund të shkaktojnë probleme me trashëgiminë. Megjithatë, shumë ekspertë janë aktive caktoni atyre në të gjithë paraqitjen. Ju vendosni. # »), затем имя блока. Sintaksa është si vijon: shenjën paund ( "#"), pastaj emrin e bllokut. #red. Për shembull, #red.

отличается от класса по нескольким параметрам. ID është e ndryshme nga klasa në disa mënyra. ID. Së pari, faqja nuk mund të jetë dy ID identike. Ata janë caktuar një emër të veçantë. Së dyti, një përzgjedhës i tillë ka një prioritet të lartë. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Kjo do të thotë se në qoftë se ju specifikoni një klasë njësi të kuqe dhe të specifikojë në tabelat CSS kuqe ngjyrën e sfondit, dhe pastaj të caktojë atë të njëjtën ID blu dhe të përcaktojë ngjyrën blu, njësia do të kthehet blu.

Avantazhet - ju mund të kontrollojë element të veçantë, duke injoruar stilet e tags dhe klasa.

ID и class. Disavantazhet - lehtë për të marrë humbur në një numër të madh të identitetit dhe klasës.

E rëndësishme! ID вам, в общем-то, не нужны. Nëse jeni duke përdorur metodologji Bem (ose analoge të saj), ID për ju, në përgjithësi, nuk janë të nevojshme. Kjo teknikë përfshin përdorimin e klasave paraqitjen unike që shumë më i përshtatshëm.

përzgjedhës universal

{}. Sintaksa: Starlets shenjë ( "*") dhe formatimin e teksteve, pra, {*} ...

Përdoret për të caktojë atribute të caktuara kur të gjitha elementet e faqes. Kur kjo mund të jenë të dobishme? box-sizing: border-box. Për shembull, në qoftë se ju doni të vendosur faqen pronës box-sizing: kufirit-box. div *{}. nuk mund të përdoret vetëm për të menaxhuar të gjitha komponentët e dokumentit, por edhe për të kontrolluar të gjithë fëmijët e bllokut të caktuar, për shembull, div * {}.

Avantazhet - ju mund të kontrollojë një numër të madh të artikujve në një kohë.

Cons - nuk mjafton opsion fleksibël. Përveç kësaj, përdorimi i kësaj selektor, në disa raste të ngadalësojnë punën e faqe.

nga atributet

Të bëjë të mundur për të kontrolluar elementin me një atribut të veçantë. Për shembull, ju keni një numër të klikoni të dhëna me një lloj tjetër atribut. Një prej tyre - text, e dyta - fjalëkalimin, i treti - numri. Sigurisht, ju mund të vendosni çdo lloj apo ID, por kjo nuk është gjithmonë i përshtatshëm. Selectors CSS e atributeve të bëjë të mundur që të përcaktojë vlerat për tags caktuara me saktësi maksimale. Për shembull, si kjo:

hyrje [tekst type =] {}

Kjo përzgjedhës do të zgjidhni të gjitha atributet me llojin e tekstit input.

Mjet është mjaft fleksibël dhe mund të përdoret me ndonjë nga tags, në të cilat mund të ketë atributet. Por kjo nuk është e gjitha! Specifikimi CSS ka aftësinë për të kontrolluar elementet me edhe më shumë komoditet!

Paramendoni se faqja juaj ka të dhëna me placeholder atribut = "Futni një emër" dhe placeholder input = "Fut fjalëkalimin". Ata gjithashtu mund të zgjidhen duke përdorur përzgjedhës! Për ta bërë këtë, përdorni strukturën e mëposhtme:

hyrje [placeholder = "Shkruani emri"] {} ose të dhëna [placeholder = "Shkruani kalimit"]

Ndoshta puna më fleksibël me atributet. Le të thonë se ju keni një numër të klikoni me atribute të ngjashme titull (për shembull, "Kaspik" dhe "Kaspik"). Për të zgjedhur dy, përdorni përzgjedhjet e mëposhtme:

[Titull * = "Kaspiysk"]

CSS do të zgjedhin të gjitha sendet në titullin e të cilit nuk janë simbole të "Kaspik", dmth. E., dhe "Kaspik" dhe "Kaspik".

Ju gjithashtu mund të zgjidhni tags që fillojnë me një karakter të caktuar atributet:

[Title ^ = "karakter që ju dëshironi"] {}

ose të përfundojë ato:

[Title $ = "karakter të drejtë"] {}.

Avantazhet - fleksibilitet maksimal. Ju mund të zgjidhni ndonjë element ekzistues faqe pa messing me klasat.

Disavantazhet - të përdorura relativisht rrallë, vetëm në raste të veçanta. Shumë web designers preferojnë të metodologjisë, pasi klasa pikë është më e lehtë se sa për të rregulluar të shumta kllapa katrore dhe shenja "të barabartë". Përveç kësaj, këto Selectors nuk punojnë në versionet e internet explorer 7 dhe poshtë. Megjithatë, të cilët janë tani duhet vjetër Internet Explorer?

selectors pseudo të klasës

Tregon një element pseudo-statusit. Për shembull ,: rri pezull - çfarë ndodh në pjesën e faqes kur ju rri pezull ,: vizituar - lidhjen vizituar. Ajo gjithashtu përfshin elemente të tilla si: të parë fëmijës dhe: fundit-fëmijë.

Ky lloj i selektor është përdorur në mënyrë aktive në paraqitjen moderne, sepse në sajë të atë që ju mund të bëni një faqe të "jetojnë" pa përdorimin e JavaScript. Për shembull, ju doni të bëni të sigurtë që kur ju rri pezull mbi butonin me klasën e BTN ngjyra e saj ndryshoi. Për ta bërë këtë, ne përdorim strukturën e mëposhtme:

.btn: hover {

background-color: red;

}

Beauty mund të specifikohen në vetitë themelore të butonit, pronës tranzicionit, për shembull, 0.5s - në këtë rast, butoni nuk do skuqem menjëherë, dhe brenda një gjysmë të dytë.

Virtytet - janë përdorur gjerësisht për "ringjalljen" e faqeve. Lehtë për t'u përdorur.

Disavantazhet - ata nuk janë. Ky është një mjet i vërtetë i dobishëm. Megjithatë, web designers të papërvojë mund të merrni humbur në bollëkun e pseudo-klasa. Problemi është zgjidhur studimit dhe praktikës.

pseudo-selectors

"Pseudo" - këto janë pjesë të faqes që nuk janë në HTML, por ata ende mund të menaxhohen. Ju nuk e kuptoni? Është shumë më e lehtë se sa duket. Për shembull, ju doni të bëni letra e parë në vargun e madh dhe i kuq, duke e lënë tekstin tjetër të vogël dhe të zi. Sigurisht, kjo mund të konkludohet se letër në një hapësirë me një klasë të caktuar, por është e gjatë dhe i mërzitshëm. Ajo është shumë më e lehtë për të zgjedhur të gjithë paragraf dhe të përdorin pseudo :: parë letër. Ajo jep mundësinë për të kontrolluar pamjen e shkronjës së parë.

Ka një numër mjaft i madh i pseudo-elemente. Lista e tyre në një artikull të vetëm nuk ka gjasa të ketë sukses. Ju mund të gjeni informacionin e duhur në favorite search engine tuaj.

Avantazhet - të sigurojë fleksibilitet për të rregulloje pamjen e faqes.

Disavantazhet - të reja për ata shpesh janë të hutuar. Shumë Zgjedhje e këtij lloji të punës vetëm në shfletues të caktuara.

për të përmbledhur

Selector - një mjet i fuqishëm për kontrollin e rrjedhjes dokument. Në sajë të tij, ju mund të zgjidhni çdo komponent të vetme të faqes (ka edhe vetëm pjesërisht). Të jetë i sigurt për të mësuar të gjitha opsionet në dispozicion, apo edhe të shkruani ato. Kjo është veçanërisht e rëndësishme në qoftë se ju e krijoni faqe komplekse me një dizajn modern dhe shumë elemente interaktive.