Seletturi CSS. tipi ta 'seletturi

, li kull wieħed minnhom inti tixtieq li twaqqaf kulur speċifiku. Kif tagħmel dan? seletturi CSS Standard mhumiex adattati għall-tikketti, huma jindikaw il-parametri għall-blokki kollha f'daqqa. Is-soluzzjoni hija sempliċi. Jassenja membri tal-klassi. Per eżempju, l-ewwel irċeviet div class = "aħmar", it-tieni - klassi = "blu", it-tielet - klassi = "aħdar". Issa dawn jistgħu jiġu magħżula użu ta 'tabelli CSS.

Is-sintassi hija kif ġej: Jindika punt ( "."), Segwit minn kitba l-isem tal-klassi. Biex jamministra l-ewwel unità, uża l-kostruzzjoni .red. It-tieni - .blue u l-bqija.

Importanti! Huwa rakkomandat li tuża valuri sinifikanti tal-attribut klassi. Huwa meqjus forma ħażina li jużaw trasliterazzjoni (eż krasiviy-blok) jew kombinazzjonijiet każwali ta 'ittri / numri (ojfh834871). F'dan il-kodiċi, inti huma marbuta li titħawwad, biex ma nsemmux id-diffikultajiet li ser jiffaċċjaw dawk li se jkunu involuti fil-proġett wara li inti. L-aħjar għażla - biex tuża kwalunkwe metodoloġija, bħal BEM.

Vantaġġi - flessibilità relattivament għoli.

Żvantaġġi - l-elementi multipli jistgħu ikunu l-istess klassi, li jfisser li dawn se jiġu editjati simultanjament. Il-problema hija solvuta permezz tal-metodoloġija kif ukoll wirt ta 'preprocessors. Kun żgur li tikseb idejk inqas, Sass jew xi preprocessor oħra, huma tissimplifika aktar il-ħidma.

selettur ID

Dwar din il-verżjoni kodifikaturi opinjoni u programmaturi huma ambigwi. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Xi tutorials CSS ma jirrakkomandaw l-użu ta 'ID, minħabba fl-applikazzjoni mhux eżatta jistgħu jikkawżaw problemi bil wirt. Madankollu, bosta esperti huma attivament tirranġa għalihom matul il-format. Inti tiddeċiedi. # »), затем имя блока. Is-sintassi hija kif ġej:-sinjal lira ( "#"), allura l-isem tal-blokka. #red. Per eżempju, #red.

отличается от класса по нескольким параметрам. Identità hija differenti mill-klassi f'diversi modi. ID. L-ewwel, il-paġna ma tistax tkun tnejn ID identiċi. Huma assenjati isem uniku. It-tieni nett, tali selettur għandha prijorità ogħla. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Dan ifisser li jekk inti tispeċifika klassi unità aħmar u jispeċifikaw fit-tabelli CSS aħmar kulur fl-isfond, u mbagħad tassenja lilu l-istess id blu u tispeċifika l-kulur blu, l-unità se jsir blu.

Vantaġġi - inti tista 'tikkontrolla l-element speċifiku, jinjora stili ta' tikketti u l-klassijiet.

ID и class. Żvantaġġi - faċli biex jintilfu f'numru kbir ta 'identità u l-klassi.

Importanti! ID вам, в общем-то, не нужны. Jekk qed tuża metodoloġija BEM (jew analogi tagħha), ID lilek, b'mod ġenerali, mhumiex meħtieġa. Din it-teknika tinvolvi l-użu ta 'tqassim klassijiet uniċi li ħafna aktar konvenjenti.

selettur universali

{}. Sintassi: Starlets sinjal ( "*") u ċingi, jiġifieri, {*} ...

Użati biex tassenja ċerti attributi darba elementi kollha tal-paġna. Meta dan jista 'jkun utli? box-sizing: border-box. Per eżempju, jekk inti tixtieq li twaqqaf l-proprjetà paġna kaxxa daqs: fruntiera kaxxa. div *{}. ma jistgħux jintużaw biss biex jamministraw il-komponenti kollha tad-dokument, iżda wkoll biex jikkontrollaw it-tfal kollha tal-blokk speċifikat, per eżempju, div * {}.

Vantaġġi - inti tista 'kontroll numru kbir ta' elementi fi żmien.

Cons - mhux biżżejjed għażla flessibbli. Barra minn hekk, l-użu ta 'dan selettur, f'xi każijiet tnikkirx l-ħidma paġna.

permezz ta 'attributi

Jagħmluha possibbli li tikkontrolla l-element bl attribut speċifiku. Per eżempju, għandek numru ta 'tikketti tal-input ma' tip attribut differenti. Wieħed minnhom - test, it-tieni - password, it-tielet - numru. Of course, inti tista 'tistabbilixxi kull klassi jew ID, iżda mhux dejjem huwa konvenjenti. seletturi CSS ta 'attributi jagħmluha possibbli li tiġi speċifikata valuri għal ċerti tikketti bi preċiżjoni massima. Per eżempju, bħal din:

Input [ "test" = tat-tip] {}

Dan selettur se tagħżel attributi mat-tip ta 'test input.

L-għodda huwa pjuttost flessibbli u jistgħu jintużaw ma 'kwalunkwe mill-tikketti, fejn jista' jkun hemm attributi. Imma dak li mhux kollha! L-ispeċifikazzjoni CSS għandu l-abbiltà li tikkontrolla l-elementi ma saħansitra aktar konvenjenza!

Immaġina dik il-paġna tiegħek daħħal mal-placeholder attribut = "Daħħal l-isem" u placeholder input = "Daħħal il-password". Huma jistgħu wkoll ikunu magħżula bl-użu selettur! Biex tagħmel dan, uża l-istruttura li ġejja:

Input [placeholder = "Daħħal l-isem"] {} jew Input [placeholder = "Daħħal il-password"]

Forsi xogħol aktar flessibbli b'attributi. Ejja ngħidu li għandek numru ta 'tikketti b'attributi simili titolu (per eżempju, "Kaspju" u "Kaspjan"). Biex tagħżel tnejn, uża l-selezzjonijiet li ġejjin:

[Titlu * = "Kaspiysk"]

CSS se jagħżlu l-oġġetti kollha fit-titolu li minnhom hemm simboli ta ' "Kaspju", jiġifieri. E., U "Kaspju" u "Kaspju".

Tista 'wkoll tagħżel tags li jibdew bil-karattru partikolari attributi:

[Titolu ^ = "karattru inti tixtieq"] {}

jew itemmhom:

[Titolu $ = "karattru dritt"] {}.

Vantaġġi - flessibilità massima. Tista 'tagħżel kwalunkwe elementi paġna eżistenti mingħajr messing mal-klassijiet.

Żvantaġġi - użati relattivament rari, biss f'każijiet speċifiċi. web disinjaturi Ħafna jippreferu li metodoloġija, peress li l-klassi punt huwa aktar faċli milli li jirranġa numerużi parentesi kwadri u sinjali "ugwali". Barra minn hekk, dawn il seletturi ma jaħdmux fil-verżjonijiet Explorer Internet 7 u hawn taħt. Madankollu, li huma issa jeħtieġ l-Internet Explorer qodma?

seletturi ta 'klassi psewdo

Tindika element psewdo-istatus. Per eżempju ,: imbagħad jerġgħu - dak li jiġri għall-parti tal-paġna meta inti imbagħad jerġgħu ,: żar - ir-rabta miżjura. Dan jinkludi wkoll elementi bħal: l-ewwel tarbija u:-aħħar tfal.

Dan it-tip ta 'selettur huwa użat b'mod attiv fil-format moderna, minħabba grazzi għal dan inti tista' tagħmel paġna "live" mingħajr l-użu ta 'JavaScript. Per eżempju, inti tixtieq li tagħmel ċert li meta inti imbagħad jerġgħu jsiru fuq il-buttuna bil-klassi ta BTN kulur tagħha inbidlet. Biex tagħmel dan, aħna nużaw l-istruttura li ġejja:

.btn: imbagħad jerġgħu {

isfond bil-kulur: aħmar;

}

Sbuħija jistgħu jiġu speċifikati fil-proprjetajiet bażiċi tal-buttuna, il-proprjetà transizzjoni, per eżempju, 0.5s - f'dan il-każ, il-buttuna mhux se blush istantanjament, u fi ħdan nofs sekonda.

Virtujiet - huma użati għall- "qawmien mill-ġdid" ta 'paġni. Faċli biex jintuża.

Żvantaġġi - mhumiex. Din hija għodda verament handy. Madankollu, web disinjaturi esperjenza tista jintilfu fl-abbundanza ta 'psewdo-klassijiet. Il-problema tissolva istudju u l-prattika.

psewdo-seletturi

"Psewdo" - dawn huma l-partijiet tal-paġna li mhumiex HTML, iżda xorta jistgħu jiġu ġestiti. Inti ma fehmux? Huwa ħafna aktar faċli milli jidher. Per eżempju, inti tixtieq li tagħmel l-ewwel ittra fis-sekwenza kbar u aħmar, li jħallu t-test żgħar u iswed ieħor. Naturalment, jista 'jiġi konkluż li l-ittra fil-medda ma' ċertu klassi, iżda huwa twil u boring. Huwa ħafna aktar faċli li jagħżlu l-paragrafu kollu u l-użu psewdo ::-ewwel ittra. Hija tagħti l-opportunità li jikkontrolla l-dehra ta 'l-ewwel ittra.

Hemm numru pjuttost kbir ta 'psewdo-elementi. Jelenkahom f'artikolu wieħed huwa probabbli li jirnexxu. Tista 'ssib l-informazzjoni rilevanti fil-search engine favoriti tiegħek.

Vantaġġi - jipprovdu l-flessibilità biex jippersonalizzaw l-ħarsa tal-paġna.

Żvantaġġi - ġodda lilhom spiss huma konfużi. Selezzjonijiet ħafna ta 'dan it-tip ta' xogħol biss f'ċerti browsers.

Fil-qosor

Selettur - għodda qawwija għall-kontroll tal-fluss dokument. Grazzi lilu, inti tista 'tagħżel kull komponent singolu tal-paġna (hemm anke biss parzjalment). Kun żgur li jitgħallmu l-għażliet kollha disponibbli, jew saħansitra write them down. Dan huwa partikolarment importanti jekk inti toħloq paġni kumplessi ma 'disinn modern u lottijiet ta' elementi interattivi.