CSS selectors. tegundir selectors

, hvert sem þú vilt setja ákveðna lit. Hvernig á að gera það? Staðlað CSS selectors eru ekki hentugur fyrir tags, þeir tilgreina breytur fyrir alla blokkir í einu. Lausnin er einföld. Úthluta flokki meðlimir. Til dæmis, í fyrsta fékk div class = "rauða", annað - class = 'blár', þriðja - class = 'græna'. Nú geta þeir að velja að nota CSS töflur.

The setningafræði er sem hér segir: Gefur punkt ( "."), Eftir að skrifa nafnið á bekknum. Til að stjórna fyrsta eining, nota byggingu .red. Í öðru lagi - .blue og svo framvegis.

Mikilvægt! Það er mælt með að nota þroskandi gildi bekknum eiginleiki. Það er talið ósiður að nota umritun (td krasiviy-Blok) eða handahófi samsetningar stafina / tölurnar (ojfh834871). Í þessum kóða, þú ert á leiðinni til að fá rugla, ekki sé minnst á erfiðleika sem standa frammi þá sem vilja taka þátt í verkefninu eftir þér. Besti kosturinn - að nota hvaða aðferðafræði, svo sem bem.

Kostir - tiltölulega hár sveigjanleika.

Ókostir - margfeldi þættir geta verið einn og sami flokkur, sem þýðir að þeir verða að breyta samtímis. Vandamálið er leyst með því að nota aðferðafræði sem og arf preprocessors. Vertu viss um að fá þinn snertið minna, Sass eða einhver annar Preprocessor, þeir einfalda stórlega vinnu.

ID val

Um þessa útgáfu álit merkjamál og forritarar eru óljós. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Sumir CSS námskeið mæli ekki með notkun ID, því að í ónákvæmra umsókn sem þeir geta valdið vandamálum með arf. Hins vegar eru margir sérfræðingar virkan raða þeim um skipulag. Þú ákveður. # »), затем имя блока. The setningafræði er sem hér segir: Pundmerki ( "#"), þá the nafn af the blokk. #red. Til dæmis, #red.

отличается от класса по нескольким параметрам. ID er frábrugðið bekknum í nokkra vegu. ID. Í fyrsta lagi er síða getur ekki verið tveir eins ID. Þeir eru úthlutað einstakt nafn. Í öðru lagi, svo val hefur meiri forgang. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Þetta þýðir að ef þú tilgreinir eining bekknum rauðan og tilgreina CSS töflum rauða litinn, og þá tengja við það sama id bláu og tilgreina lit blár, eining mun snúa blá.

Kostir - þú getur stjórnað sérstaka þáttur, hunsa notaðar af merkjum og flokka.

ID и class. Ókostir - auðvelt að villast í fjölda auðkenni og bekknum.

Mikilvægt! ID вам, в общем-то, не нужны. Ef þú ert að nota Bem aðferðafræði (eða hliðstæðum), ID þér, almennt, er ekki þörf. Þessi tækni felur í sér notkun skipulag einstaka flokka sem miklu þægilegra.

alhliða val

{}. Setningafræði: Starlets merki ( "*") og axlabönd, þ.e. {*} ...

Notað til að tengja tilteknar eigindir einu sinni alla þætti síðunnar. Þegar þetta getur verið gagnlegt? box-sizing: border-box. Til dæmis, ef þú vilt stilla síðu eign kassi-límvatn: Border-reit. div *{}. Getur ekki aðeins hægt að nota til að stjórna öllum hlutum skjalsins, heldur einnig til að stjórna öllum börnum tilgreinda blokk, til dæmis, div * {}.

Kostir - þú getur stjórnað fjölda af hlutum í einu.

Gallar - ekki nægilega sveigjanlegt valkostur. Að auki, að nota þessa val, í sumum tilvikum hægja á síðu verkið.

eftir eiginleikum

Gera það mögulegt að stjórna frumefni með ákveðna eiginleika. Til dæmis, þú hafa a tala af inntak tags með öðru eiginleiki tegund. Einn af þeim - texti, annað - lykilorð, þriðji - númer. Auðvitað er hægt að setja hvern flokk eða auðkenni, en það er ekki alltaf þægilegt. CSS selectors af eiginleikum gera það mögulegt að tilgreina gildi fyrir tiltekin tags með hámarks nákvæmni. Til dæmis, eins og þetta:

inntak [tegund = "textinn"] {}

Þetta val mun merkja allar eiginleika með tegund inntak texta.

The tól er alveg sveigjanlegt og hægt er að nota með einhverju tags, þar sem það getur verið eiginleiki. En það er ekki allt! The CSS forskrift hefur getu til að stjórna þætti með enn meiri þægindi!

Ímyndaðu þér að síðunni hefur inntak með eigindi tákn = "Sláðu inn nafn" og inntak tákn = "Sláðu inn lykilorð". Þeir geta einnig verið valinn með val! Til að gera þetta, nota eftirfarandi byggingu:

inntak [staðgenglar = "slá inn nafn"] {} eða inntak [staðgengillinn = "Sláðu inn lykilorð"]

Kannski sveigjanlegri vinnu með eiginleika. Við skulum segja að þú ert að tala um merki með svipuðum ímyndarhluta titil (til dæmis, "Caspian" og "Caspian"). Til að velja hvort tveggja, nota eftirfarandi val:

[Title * = "Kaspiysk"]

CSS mun velja öll atriðin í titli þar af eru tákn um "Caspian", td. E., og "Caspian" og "Caspian".

Þú getur einnig valið merkjum sem byrja með ákveðin karakter eiginleika:

[Title ^ = "bókstafur"] {}

eða segja þeim:

[Title $ = "rétt eðli"] {}.

Kostir - hámark sveigjanleika. Þú getur valið hvaða fyrirliggjandi síðueiningum án Messías með bekkjum.

Ókostir - notað tiltölulega sjaldan, aðeins í sérstökum tilvikum. Margir hönnuðir vefur kjósa að aðferðafræði, þar sem lið Námskeiðið er auðveldara en að raða fjölda hornklofa og merki "jafnir". Auk þess að gera þessar selectors virka ekki í Internet Explorer útgáfa 7 og neðan. Hins vegar, sem eru nú þurfa gamla Internet Explorer?

gervi-flokks selectors

Táknar gervi-stöðu frumefni. Til dæmis ,: sveima - hvað gerist í hluta síðunnar þegar þú sveima ,: alltaf - heimsótta tengilinn. Það felur einnig í þætti eins og: fyrsta barn og: síðasta barns.

Þessi tegund af val er nýtt í nútíma skipulag, því þökk sé það að þú getur gert síðuna "lifandi" án þess að nota JavaScript. Til dæmis, þú vilt ganga úr skugga um að þegar þú sveima yfir hnappinn með flokki btn litur hennar breyttist. Til að gera þetta, notum við eftirfarandi byggingu:

.btn: sveima {

background-litur: rauður;

}

Fegurð getur verið skilgreindur á helstu eiginleika hnappinn, umskipti eign, til dæmis, 0.5s - í þessu tilfelli, hnappurinn ekki blush í stað, og innan hálfs sekúndu.

Dyggðir - eru mikið notaðar til að "vakning" af síðum. Auðvelt að nota.

Ókostir - þeir eru ekki. Þetta er mjög handlaginn tól. Hins vegar óreyndur vefur hönnuður getur týnast í gnægð af gervi-flokkum. Vandamálið er leyst rannsókn og framkvæmd.

gervi-selectors

"Gervi" - þetta eru hlutar af síðunni sem eru ekki í HTML, en þeir geta samt verið stjórnað. Þú ekki skilja? Það er miklu auðveldara en það virðist. Til dæmis, þú vilja til gera fyrsta stafinn í strengnum stór og rauður, þannig að önnur lítil og svartan texta. Að sjálfsögðu má draga þá ályktun að bréf í haf með ákveðinni tegund, en það er langur og leiðinlegur. Það er miklu auðveldara að velja alla málsgreinina og nota gervi :: fyrstu bréf. Það gefur tækifæri til að stjórna útliti fyrsta staf.

Það eru alveg stór tala af gervi-þætti. Skrá þá í einni grein er ólíklegt til að ná árangri. Þú getur fundið viðeigandi upplýsingar í uppáhalds leitarvélina þína.

Kostir - veita sveigjanleika til að aðlaga útliti síðunnar.

Ókostir - ný til þeirra eru oft ruglað saman. Margar val af þessari tegund af vinna aðeins í ákveðnum vöfrum.

til að draga saman

Val - öflugt tæki til skjal rennsli stjórn. Þökk sé honum, getur þú valið hvert einasta hluti af síðunni (það eru enn aðeins að hluta). Vertu viss um að læra alla valkosti í boði, eða jafnvel skrifa þær niður. Þetta er sérstaklega mikilvægt ef þú búa til flókið síður með nútíma hönnun og fullt af gagnvirkum þáttum.