Dewiswyr CSS. mathau o ddetholwyr

, pob un ohonynt yr ydych am i osod lliw penodol. Sut i wneud hynny? Nid yw detholwyr CSS safonol yn addas ar gyfer tagiau, maent yn dangos y paramedrau ar gyfer yr holl blociau ar unwaith. Mae'r ateb yn syml. Neilltuo aelodau'r dosbarth. Er enghraifft, mae'r derbyniodd div class = gyntaf, yn ail 'coch' - class = 'glas', trydedd - class = 'gwyrdd'. Nawr gall maent yn cael eu dewis drwy ddefnyddio tablau CSS.

Mae'r gystrawen fel a ganlyn: Yn dynodi pwynt ( "."), Ddilyn gan ysgrifennu enw'r dosbarth. Rheoli'r uned gyntaf, defnyddiwch y .red adeiladu. Ail - .blue ac yn y blaen.

Pwysig! Argymhellir defnyddio gwerthoedd ystyrlon o'r priodoledd dosbarth. Ystyrir ei bod yn ffurflen ddrwg i ddefnyddio trawslythrennu (ee, krasiviy-blok) neu gyfuniadau ar hap o lythrennau / rhifau (ojfh834871). Yn y cod hwn, byddwch yn siwr o ddrysu, heb sôn am yr anawsterau a fydd yn wynebu'r rhai a fydd yn cymryd rhan yn y prosiect ar ôl i chi. Y dewis gorau - i ddefnyddio unrhyw fethodoleg, fel BEM.

Manteision - hyblygrwydd gymharol uchel.

Anfanteision - Gall yr elfennau lluosog fod yn un a yr un dosbarth, sy'n golygu y byddant yn eu golygu ar yr un pryd. Mae'r broblem yn cael ei datrys gan ddefnyddio'r fethodoleg yn ogystal â etifeddu preprocessors. Byddwch yn siwr i gael eich dwylo llai, Sass neu ryw Preprocessor arall, maent yn symleiddio'r gwaith yn fawr.

dewisydd ID

Ynglŷn fersiwn hwn coders barn a rhaglenwyr yn amwys. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Nid yw rhai sesiynau tiwtorial CSS yn argymell y defnydd o adnabod, oherwydd yn y cais anghywir gallant achosi problemau gyda etifeddiaeth. Fodd bynnag, mae llawer o arbenigwyr yn weithredol yn eu trefnu drwy gydol y cynllun. Y byddwch yn penderfynu. # »), затем имя блока. Mae'r gystrawen fel a ganlyn: yr arwydd bunt ( "#"), yna enw'r bloc. #red. Er enghraifft, #red.

отличается от класса по нескольким параметрам. ID yn wahanol i'r dosbarth mewn sawl ffordd. ID. Yn gyntaf, ni all y dudalen fod yn ddau ID union yr un fath. Maent yn cael eu neilltuo enw unigryw. Yn ail, mae detholydd fath yn cael blaenoriaeth uwch. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Mae hyn yn golygu os byddwch yn pennu dosbarth uned coch a nodi yn y tablau CSS coch lliw cefndir, ac yna rhoi iddo yr un id glas a nodi'r lliw glas, bydd yr uned yn troi las.

Manteision - gallwch reoli'r elfen benodol, gan anwybyddu arddulliau o dagiau a dosbarthiadau.

ID и class. Anfanteision - hawdd i fynd ar goll mewn nifer fawr o adnabod a dosbarth.

Pwysig! ID вам, в общем-то, не нужны. Os ydych yn defnyddio methodoleg BEM (neu ei analogau), adnabod i chi, yn gyffredinol, nid oes angen. Mae'r dechneg hon yn golygu defnyddio dosbarthiadau unigryw cynllun sy'n llawer mwy cyfleus.

dewisydd cyffredinol

{}. Cystrawen: starlets arwydd ( "*") a bresys, hy, {*} ...

Fe'i defnyddir i neilltuo priodoleddau penodol unwaith bob elfen o'r dudalen. Pryd y gall hyn fod yn ddefnyddiol? box-sizing: border-box. Er enghraifft, os ydych am osod y dudalen eiddo blwch-sizing: border-bocs. div *{}. Ni ellir ond eu defnyddio i reoli holl elfennau y ddogfen, ond hefyd i reoli holl blant y bloc penodol, er enghraifft, div * {}.

Manteision - gallwch reoli nifer fawr o eitemau ar y tro.

Anfanteision - dim digon o ddewis hyblyg. Yn ogystal, y defnydd o dewisydd hwn, mewn rhai achosion arafu'r gwaith dudalen.

gan priodoleddau

Ei gwneud yn bosibl rheoli'r elfen gyda priodoledd penodol. Er enghraifft, mae gennych nifer o dagiau mewnbwn gyda gwahanol fath priodoledd. Mae un ohonynt - destun, yr ail - password, y trydydd - rhif. Wrth gwrs, gallwch osod pob dosbarth neu adnabod, ond nid yw bob amser yn gyfleus. detholwyr CSS o briodoleddau ei gwneud yn bosibl i bennu gwerthoedd ar gyfer tagiau penodol yn fanwl gywir mwyaf. Er enghraifft, fel hyn:

mewnbwn [= math 'testun'] {}

Bydd y detholydd yn dewis yr holl briodoleddau â'r math o destun mewnbwn.

Mae'r offeryn yn eithaf hyblyg a gellir ei ddefnyddio gydag unrhyw un o'r tagiau, lle y gall fod priodoleddau. Ond nid dyna'r cyfan! Mae'r fanyleb CSS y gallu i reoli'r elfennau gyda hyd yn oed mwy cyfleus!

Dychmygwch fod eich tudalen yn cael mewnbwn gyda'r placeholder priodoledd = "Rhowch enw" a mewnbwn dalfan = "Rhowch gyfrinair". Gallant hefyd yn cael eu dewis gan ddefnyddio'r dewisydd! I wneud hyn, defnyddiwch y strwythur canlynol:

mewnbwn [placeholder = "Rhowch yr enw"] {} neu fewnbwn [dalfan = "Rhowch y cyfrinair"]

Efallai gwaith mwy hyblyg gyda nodweddion. Dewch i ddweud eich gennym nifer o dagiau gyda theitl nodweddion tebyg (er enghraifft, "Caspia" a "Caspian"). I ddewis y ddau, defnyddiwch y dewisiadau canlynol:

[Teitl * = "Kaspiysk"]

Bydd CSS yn dewis yr holl eitemau yn y teitl y ceir symbolau o "Caspian", hy. E., A "Caspia" a "Caspian".

Gallwch hefyd ddewis tagiau sy'n dechrau gyda chymeriad arbennig phriodoleddau:

[Teitl ^ = "cymeriad rydych am"] {}

neu derfynu eu:

[Teitl $ = "cymeriad cywir"] {}.

Manteision - yr hyblygrwydd mwyaf. Gallwch ddewis unrhyw elfennau dudalen presennol heb cyboli gyda'r dosbarthiadau.

Anfanteision - a ddefnyddir yn gymharol anaml, dim ond mewn achosion penodol. Mae llawer o ddylunwyr gwe well gan fethodoleg, gan fod y dosbarth pwynt yn haws nag trefnu nifer cromfachau sgwâr ac arwyddion "cyfartal". Yn ogystal, nid dewiswyr hyn yn gweithio mewn fersiynau Explorer Internet 7 ac isod. Fodd bynnag, sydd yn awr mae angen yr hen Internet Explorer?

detholwyr ffug ddosbarth

Yn dynodi elfen ffug-statws. Er enghraifft ,: hofran - beth sy'n digwydd i'r rhan o'r dudalen pan fyddwch yn hofran ,: ymwelodd - y ddolen ymwelwyd â hwy. Mae hefyd yn cynnwys elfennau megis: yn gyntaf-blentyn ac: olaf plentyn.

Mae'r math hwn o dewisydd cael ei ddefnyddio yn weithredol mewn cynllun modern, oherwydd diolch iddo gallwch wneud dudalen "byw" heb y defnydd o JavaScript. Er enghraifft, ydych am wneud yn siŵr bod pan fyddwch yn hofran dros y botwm gyda'r dosbarth o Btn ei liw newid. Er mwyn gwneud hyn, rydym yn defnyddio strwythur canlynol:

.btn: hofran {

cefndir-lliw: coch;

}

Gellir Harddwch yn cael ei nodi yn yr eiddo sylfaenol y botwm, yr eiddo pontio, er enghraifft, 0.5s - yn yr achos hwn, y botwm ni fydd gochi yn syth, ac o fewn hanner eiliad.

Rhinweddau - yn cael eu defnyddio yn eang ar gyfer y "adfywiad" o dudalennau. Hawdd i'w defnyddio.

Anfanteision - nid ydynt yn. Mae hwn yn arf defnyddiol mewn gwirionedd. Fodd bynnag, gall dylunwyr gwe dibrofiad mynd ar goll yn y cyfoeth o ffug-ddosbarth. Mae'r broblem yn cael ei datrys astudio ac ymarfer.

ffug-ddetholwyr

"Ffug" - mae'r rhain yn y rhannau o'r dudalen sydd ddim yn HTML, ond maent yn dal yn gallu cael eu rheoli. Doeddech chi ddim yn deall? Mae'n llawer haws nag y mae'n ymddangos. Er enghraifft, ydych am wneud y llythyr cyntaf yn y llinyn mawr a choch, gan adael y testun bach a du arall. Wrth gwrs, gellir dod i'r casgliad bod llythyr mewn cyfnod gyda dosbarth penodol, ond mae'n hir a diflas. Mae'n llawer haws i ddewis y paragraff cyfan ac yn defnyddio ffug :: gyntaf-lythyr. Mae'n rhoi cyfle i reoli golwg y llythyr cyntaf.

Mae cryn nifer fawr o ffug-elfen. eu rhestru mewn erthygl unigol yn debygol o lwyddo. Gallwch ddod o hyd i'r wybodaeth berthnasol yn eich hoff chwilotwr.

Manteision - darparu'r hyblygrwydd i addasu golwg y dudalen.

Anfanteision - newydd iddynt yn aml yn ddryslyd. Mae llawer o dewisiadau o'r math hwn o waith yn unig mewn rhai porwyr.

i grynhoi

Dewisydd - arf pwerus ar gyfer rheoli llif y ddogfen. Diolch iddo, gallwch ddewis pob cydran unigol o'r dudalen (mae hyd yn oed dim ond yn rhannol). Byddwch yn siwr i ddysgu yr holl opsiynau sydd ar gael, neu hyd yn oed eu hysgrifennu. Mae hyn yn arbennig o bwysig os ydych yn creu tudalennau cymhleth gyda dyluniad modern a llawer o elfennau rhyngweithiol.