CSS Selektè. kalite seleksyon

, chak nan yo ki ou vle yo mete yon koulè espesifik. Ki jan fè li? seleksyon CSS Standard yo pa apwopriye pou Tags, yo endike paramèt yo pou tout blòk nan yon fwa. Solisyon an se senp. Bay manm klas la. Pou egzanp, premye resevwa nan klas div = 'wouj', dezyèm lan - klas = 'ble', twazyèm - klas = 'vèt'. Koulye a, yo ka chwazi lè l sèvi avèk tab CSS.

sentaks la se jan sa a: Endike yon pwen ( "."), Ki te swiv pa ekri non an nan klas la. Jere inite a an premye, sèvi ak konstriksyon an .wouj. Dezyèm - .Blue ak sou sa.

Enpòtan! Li rekòmande yo sèvi ak valè siyifikatif nan atribi nan klas la. Li se konsidere kòm move fòm yo sèvi ak Transliteration (egzanp, krasiviy-blok) oswa konbinezon o aza nan lèt / nimewo (ojfh834871). Nan kòd sa a, ou mare yo jwenn konfonn, nou pa mansyone difikilte sa yo ki ap fè fas a moun ki yo pral angaje nan pwojè a apre ou. Opsyon nan pi bon - yo sèvi ak nenpòt ki metodoloji, tankou BEM.

Avantaj - relativman wo fleksiblite.

Dezavantaj - eleman yo miltip pouvwa gen yon sèl ak klas la menm, ki vle di yo ke yo pral edited ansanm. se pwoblèm nan rezoud lè l sèvi avèk metodoloji a kòm byen ke pòsyon tè a preprocessors. Asire ou ke ou resevwa men ou mwens, toupe oswa kèk lòt preproseseur, yo anpil senplifye travay la.

ID seleksyon

Sou vèsyon sa-a programeur opinyon ak pwogramasyon yo se Limit. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Gen kèk tutoryèl CSS pa rekòmande pou yo sèvi ak ID, paske se nan aplikasyon kòrèk yo ka lakòz pwoblèm ki genyen ak pòsyon tè. Sepandan, ekspè anpil ladan yo aktivman fè aranjman pou yo nan tout Layout la. Ou deside. # »), затем имя блока. sentaks la se jan sa a: siy nan liv ( "#"), Lè sa a, non an nan blòk la. #red. Pou egzanp, #red.

отличается от класса по нескольким параметрам. ID se diferan de klas la nan plizyè fason. ID. Premyèman, paj la pa ka gen de ki idantik ID. Yo asiyen yon non inik. Dezyèmman, tankou yon seleksyon gen yon priyorite ki pi wo. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Sa vle di ke si ou presize yon klas inite wouj ak presize nan tab CSS wouj koulè jan nou koumanse, ak Lè sa a bay nan li id an menm ble ak presize koulè nan ble, inite a pral vire ble.

Avantaj - ou ka kontwole eleman nan espesifik, inyore diferan estil pou Tags ak klas yo.

ID и class. Dezavantaj - fasil jwenn pèdi nan yon gwo kantite ID ak klas la.

Enpòtan! ID вам, в общем-то, не нужны. Si w ap itilize BEM metodoloji (oswa analogue li yo), ID nou la a, an jeneral, yo pa bezwen. Teknik sa a enplike itilizasyon an nan klas Layout inik ki pi plis pratik.

inivèsèl seleksyon

{}. Sentaks: Starlets siy ( "*") ak aparèy òtopedik, sa vle di, {*} ...

Itilize yo asiyen sèten atribi yon fwa tout eleman nan paj la. Lè sa a kapab itil? box-sizing: border-box. Pou egzanp, si ou vle yo mete paj pwopriyete bwat-dimensionnement a: fwontyè-bwat. div *{}. Pa kapab dwe itilize sèlman nan jere tout eleman yo nan dokiman an, men tou, yo kontwole tout timoun yo nan blòk ki endike yo, pou egzanp, div * {}.

Avantaj - ou ka kontwole yon gwo kantite atik nan yon tan.

Kont - pa ase opsyon fleksib. Anplis de sa, itilize nan sa a seleksyon, nan kèk ka ralanti travay nan paj.

pa atribi

Fè li posib bay kontwòl eleman an ak yon atribi espesifik. Pou egzanp, ou gen yon nimewo nan Tags opinyon ak yon kalite atribi diferan. Youn nan yo - tèks, dezyèm lan - modpas la, twazyèm lan - nimewo a. Natirèlman, ou ka mete chak klas oswa ID, men li se pa toujou pratik. seleksyon CSS nan atribi fè li posib ou presize valè pou sèten Tags ak maksimòm presizyon. Pou egzanp, tankou sa a:

D '[' tèks 'di ki =] {}

seleksyon sa a pral chwazi tout atribi ak kalite a nan tèks opinyon.

Zouti a se byen fleksib epi yo ka itilize ak nenpòt nan etikèt yo, nan ki gen pouvwa pou atribi. Men, sa a pa tout! spesifikasyon nan CSS gen kapasite nan kontwole eleman yo ak menm plis konvenyans!

Imajine ke paj ou a gen opinyon ak kontneur nan atribi = "Mete yon non" ak kontneur opinyon = "Mete modpas". Yo kapab tou dwe chwazi lè l sèvi avèk seleksyon an! Pou fè sa, sèvi ak estrikti sa a:

D '[kontneur = "Ekri non an"] {} oswa opinyon [kontneur = "Mete modpas la"]

Petèt travay pi fleksib ak atribi figi. Se pou nou di ou gen yon nimewo nan Tags ak atribi figi ki sanble tit (pou egzanp, "kaspyèn" ak "kaspyèn"). Pou chwazi tou de, sèvi ak seleksyon sa yo:

[Tit * = "Kaspiysk"]

CSS pral chwazi tout atik yo nan tit la nan ki gen senbòl nan "kaspyèn", sa vle di. E., Ak "kaspyèn" ak "kaspyèn".

Ou kapab tou chwazi Tags ki kòmanse ak atribi figi yon karaktè sèten:

[Tit ^ = "karaktè ou vle"] {}

oswa mete fen nan yo:

[$ Title = "karaktè dwa"] {}.

Avantaj - maksimòm fleksiblite. Ou ka chwazi nenpòt eleman paj ki deja egziste san yo pa pitye ak klas yo.

Dezavantaj - itilize relativman raman, sèlman nan ka espesifik. Designers entènèt Anpil ta pito metodoloji, depi klas la pwen se pi fasil pase pou fè aranjman pou anpil parantèz kare ak siy "egal". Anplis de sa, seleksyon sa yo pa travay nan entènèt vèsyon Explorer 7 ak anba a. Sepandan, ki moun ki yo kounye a se bezwen fin vye granmoun nan Internet Explorer a?

pseudo-klas seleksyon

Vle di yon eleman pseudo-estati. Pou egzanp hover ,: - sa k ap pase nan pati a nan paj la lè ou hover ,: te vizite - lyen ki vizite. Li gen ladan tou eleman tankou: premye pitit-yo ak: dènye-timoun.

Sa a ki kalite seleksyon ap aktivman itilize nan Layout modèn, paske gras a li ou kapab fè yon paj "viv" san yo pa itilize a nan JavaScript. Pou egzanp, ou vle asire w ke lè ou hover sou bouton an ak klas la nan BTN koulè li yo chanje. Pou fè sa, nou itilize estrikti sa a:

.btn: hover {

jan nou koumanse-koulè: wouj;

}

Bote ka espesifye nan pwopriyete debaz yo nan bouton an, pwopriyete a tranzisyon, pou egzanp, 0.5s - nan ka sa a, bouton an pa pral ront imedyatman, e nan lespas de mwatye dezyèm yon.

Bèl kalite bèt - yo lajman ki itilize pou "retablisman an" nan paj. Fasil yo sèvi ak.

Dezavantaj - yo menm yo pa. Sa a se yon zouti reyèlman sou la men. Sepandan, Designers entènèt san eksperyans ka jwenn pèdi nan abondans la nan pseudo-klas yo. se pwoblèm nan rezoud etid ak pratik.

pseudo-seleksyon

"Pseudo" - sa yo, se pati pyès sa yo nan paj la ki pa nan HTML, men yo toujou ka jere. Ou pa t 'konprann? Li nan pi fasil pase sa li sanble. Pou egzanp, ou vle fè lèt la premye nan fisèl la gwo ak wouj, kite lòt tèks nan ti ak nwa. Natirèlman, li kapab fè konkli lèt sa a nan yon span ak yon klas sèten, men li la long ak raz. Li se pi fasil yo chwazi paragraf a tout antye epi sèvi ak pseudo :: premye lèt. Li bay opòtinite pou kontwole aparans nan lèt la an premye.

Gen byen yon gwo kantite pseudo-eleman. Lis yo nan yon atik nan yon sèl se fasil yo reyisi. Ou ka jwenn enfòmasyon ki enpòtan nan motè rechèch pi renmen ou.

Avantaj - bay fleksibilite nan Customize gade nan paj la.

Dezavantaj - nouvo yo yo souvan konfonn. Anpil seleksyon nan kalite sa a travay sèlman nan sèten navigatè.

Pou rezime

Selector - yon zouti pwisan pou kontwòl koule dokiman. Mèsi l ', ou ka chwazi chak eleman sèl nan paj la (gen menm sèlman pasyèlman). Asire ou ke ou aprann tout opsyon ki disponib, oswa menm ekri yo desann. Sa a se patikilyèman enpòtan si ou kreye paj konplèks ak yon konsepsyon modèn ak anpil nan eleman entèaktif.