CSS tagapili. uri ng tagapili

, bawat isa sa kung saan nais mong itakda ang isang tiyak na kulay. Kung paano ito gawin? Standard CSS tagapili ay hindi angkop para sa mga tag, ipahiwatig nila ang mga parameter para sa lahat ng mga bloke nang sabay-sabay. Ang solusyon ay simple. Magtalaga ng miyembro ng klase. Halimbawa, ang unang nakatanggap ng div class = 'pulang', pangalawa - class = 'asul', ikatlong - class = 'green'. Ngayon ay maaari silang mapili gamit ang CSS mga talahanayan.

Ang syntax ay ang mga sumusunod: Tinutukoy ng isang punto ( "."), Sinunod sa pamamagitan ng pagsusulat ng pangalan ng klase. Upang pamahalaan ang unang yunit, gamitin ang konstruksiyon .red. Pangalawa - .blue at iba pa.

Mahalaga! Ito ay inirerekumenda na gumamit ng makabuluhang halaga ng mga klase attribute. Ito ay itinuturing na masamang form na ito upang gamitin ang transliteration (eg, krasiviy-blok) o random na mga kumbinasyon ng mga titik / mga numero (ojfh834871). Sa code na ito, ikaw ay nakasalalay upang makakuha ng nalilito, hindi upang mailakip ang mga paghihirap na harapin ang mga taong ay nakikibahagi sa mga proyekto matapos sa iyo. Ang pinakamahusay na opsyon - upang gamitin ang anumang pamamaraan, tulad ng BEM.

Kalamangan - relatibong mataas na flexibility.

Disadvantages - ang maramihang mga elemento ay maaaring isa at sa parehong klase, na nangangahulugan na sila ay ma-edit nang sabay-sabay. Ang problema ay malulutas gamit ang pamamaraan pati na rin ang mana ng preprocessors. Maging sigurado na makakuha ng iyong mga kamay mas mababa, sass o ilang iba pang pre-processor, sila lubos na gawing simple ang trabaho.

ID selector

Tungkol sa ang bersyon na ito opinyon coders at programmer ay hindi siguradong kayarian. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Ang ilang mga CSS tutorial ay hindi inirerekomenda ang paggamit ng ID, dahil sa hindi tumpak na application maaari silang maging sanhi ng problema sa mana. Gayunpaman, maraming mga eksperto ay aktibong ayusin ang mga ito sa buong layout. Ikaw ang magpapasya. # »), затем имя блока. Ang syntax ay ang mga sumusunod: ang pound sign ( "#"), at pagkatapos ay ang pangalan ng block. #red. Halimbawa, #red.

отличается от класса по нескольким параметрам. ID ay naiiba mula sa mga klase sa maraming paraan. ID. Una, ang pahina ay hindi maaaring maging ng dalawang magkatulad na ID. Sila ay bibigyan ng isang kakaibang pangalan. Pangalawa, tulad ng isang selector ay may mas mataas na priority. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Nangangahulugan ito na kung tinukoy mo ang isang unit klase ng pula at tukuyin sa CSS mga talahanayan pulang kulay ng background, at pagkatapos ay italaga sa ito sa parehong id asul at tukuyin ang kulay asul, ang yunit ay magpapasara sa asul.

Kalamangan - Maaari mong kontrolin ang mga partikular na elemento, nang binabalewala estilo ng mga tag at mga klase.

ID и class. Disadvantages - madaling mawala sa isang malaking bilang ng ID at klase.

Mahalaga! ID вам, в общем-то, не нужны. Kung gumagamit ka ng BEM pamamaraan (o analogues nito), ID sa iyo, sa pangkalahatan, ay hindi kinakailangan. pamamaraan na ito ay nagsasangkot ng paggamit ng mga layout natatanging mga klase na mas maginhawa.

unibersal selector

{}. Syntax: Starlets sign ( "*") at braces, ie, {*} ...

Ginagamit upang magtalaga ng tiyak na mga katangian sa sandaling ang lahat ng mga elemento ng pahina. Kapag ito ay maaaring maging kapaki-pakinabang? box-sizing: border-box. Halimbawa, kung nais mong i-set ang pahina ng ari-arian box-sizing: border-box. div *{}. Hindi lamang magamit upang pamahalaan ang lahat ng mga bahagi ng dokumento, ngunit din upang kontrolin ang lahat ng mga anak ng mga tinukoy na block, halimbawa, div * {}.

Kalamangan - Maaari mong kontrolin ang isang malaking bilang ng mga item sa isang pagkakataon.

Cons - hindi sapat na kakayahang umangkop pagpipilian. Sa karagdagan, ang paggamit ng selector na ito, sa ilang mga kaso mabagal down ang pahina ng trabaho.

pamamagitan ng mga katangian

Gawing posible upang kontrolin ang elemento na may isang tiyak na attribute. Halimbawa, mayroon kang isang bilang ng mga input tag na may ibang uri ng katangian. Ang isa sa kanila - teksto, ang pangalawang - password, ang ikatlong - number. Of course, maaari mong itakda ang bawat klase o ID, ngunit ito ay hindi laging maginhawa. CSS tagapili ng mga katangian gawin itong posible upang tukuyin ang mga halaga para sa mga tiyak na mga tag na may maximum na katumpakan. Halimbawa, tulad nito:

input [ 'text' type =] {}

tagapili Pipiliin nito ang lahat na katangian sa ang uri ng pag-input ng teksto.

Ang kasangkapan ay lubos na kakayahang umangkop at maaaring magamit sa alinman sa mga tag, na kung saan maaaring may mga katangian. Ngunit hindi iyon ang lahat! Ang CSS pagtutukoy ay may kakayahan upang kontrolin ang elemento na may mas maraming kaginhawahan!

Isipin na ang iyong mga pahina ay may input sa mga attribute placeholder = "Magpasok ng isang pangalan" at input placeholder = "Ipasok ang password". Maaari din nila ay pinili gamit ang tagapili! Upang gawin ito, gamitin ang mga sumusunod na istraktura:

input [placeholder = "Ipasok ang pangalan"] {} o input [placeholder = "Ipasok ang password"]

Marahil mas nababaluktot trabaho na may mga katangian. Sabihin nating mayroon kang isang bilang ng mga tag na may katulad na mga katangian pamagat (halimbawa, "Caspian" at "Caspian"). Upang piliin ang parehong, gamitin ang mga sumusunod na pagpipilian:

[Title * = "Kaspiysk"]

CSS ay piliin ang lahat ng mga item sa pamagat na kung saan mayroong mga simbolo ng "Caspian", ie. E., At "Caspian" at "Caspian".

Maaari mo ring piliin ang mga tag na nagsisimula sa isang tiyak na mga katangian ng karakter:

[Title ^ = "character na gusto mong"] {}

o wakasan ang mga ito:

[Title $ = "right karakter"] {}.

Kalamangan - maximum na kakayahang umangkop. Maaari kang pumili ng anumang umiiral na mga sangkap ng pahina nang walang panggugulo sa klase.

Disadvantages - ginagamit relatibong bihirang, lamang sa mga tiyak na mga kaso. Maraming mga web designers ginustong pamamaraan, dahil ang punto ng klase ay mas madali kaysa upang ayusin ang maraming mga square bracket at mga palatandaan "pantay-pantay". Sa karagdagan, ang mga tagapili ay hindi gumagana sa Internet Explorer bersyon 7 at ibaba. Gayunpaman, kung sino ngayon ay kailangan ang lumang Internet Explorer?

pseudo-class tagapili

Nagpapahiwatig ng isang pseudo-status elemento. Halimbawa ,: hover - kung ano ang mangyayari sa bahagi ng pahina kapag pinapadaan mo ,: binisita - ang binisita link. Kasama rin dito ang mga elemento tulad ng: una-anak at: huling-anak.

Ang uri ng selector ay aktibong ginagamit sa modernong layout, dahil salamat sa ito maaari kang gumawa ng isang pahina ng "live" na walang ang paggamit ng JavaScript. Halimbawa, nais mong tiyakin na kapag hover ka sa button na may klase ng mga btn kulay nito ay nagbago. Upang gawin ito, gagamitin namin ang mga sumusunod na istraktura:

.btn: hover {

background-color: red;

}

Kagandahan ay maaaring tinukoy sa ang mga pangunahing katangian ng ang pindutan, ang paglipat ng ari-arian, halimbawa, 0.5s - sa kasong ito, ang pindutan ay hindi kulay-rosas agad, at sa loob ng kalahating segundo.

Virtues - ay malawakang ginagamit para sa "revival" ng mga pahina. Madaling gamitin.

Disadvantages - ang mga ito ay hindi. Ito ay isang talagang madaling gamitin na tool. Gayunpaman, walang karanasan web designer ay maaaring mawala sa kasaganaan ng pseudo-klase. Ang problema ay malulutas pag-aaral at pagsasanay.

pseudo-tagapili

"Pseudo" - ito ang mga bahagi ng page na hindi sa HTML, ngunit sila pa rin ay maaaring pinamamahalaang. hindi mo naintindihan? Ito ay lubhang mas madaling kaysa sa tila. Halimbawa, nais mong gumawa ng ang unang titik sa string malaki at pula, umaalis sa iba pang maliliit at itim na teksto. Siyempre, maaari itong Forrester na sulat sa isang span na may isang tiyak na klase, ngunit ito ay mahaba at boring. Ito ay lubhang mas madaling piliin ang buong talata at gamitin pseudo :: primera sulat. Nagbibigay ito ng pagkakataon upang makontrol ang hitsura ng ang unang titik.

May mga lubos ng malaking bilang ng mga pseudo-elemento. Ilista ang mga ito sa isang solong artikulo ay malamang na hindi magtagumpay. Maaari kang makahanap ng mga kaugnay na impormasyon sa iyong mga paboritong search engine.

Kalamangan - magbigay ng kakayahang umangkop upang i-customize ang hitsura ng pahina.

Disadvantages - bago sa kanila ay madalas na nalilito. Maraming mga seleksyon ng ganitong uri ng trabaho lamang sa ilang mga browser.

upang ibuod

Tagapili - isang napakalakas na tool para daloy dokumento control. Salamat sa kanya, maaari mong piliin ang bawat solong bahagi ng pahina (may mga kahit lamang bahagyang). Maging sigurado na malaman ang lahat ng mga opsyon na magagamit, o kahit na isulat ang mga ito pababa. Ito ay partikular na mahalaga kung lumikha ka ng mga kumplikadong mga pahina na may modernong disenyo at maraming mga interactive na mga elemento.