Најважнији ЦСС концепт за учење

Каскада је како је ЦСС дизајниран од самог почетка, а постоји разлог да се зове ЦСС - Цасцадинг Стиле Схеетс!

Нажалост, ЦСС има лошу репутацију због истог основног концепта на којем је и изграђен.

Али шта је тачно Цасцаде и да ли је она толико лоша колико већина људи звучи?

Увод

Рецимо да Јохн напише гомилу ЦСС-а, а затим уђе у прегледач да га тестира. На његово изненађење, стилови које је написао не примењују се на елемент који је управо обликовао, већ неки други стилови!

Видиш ли то тамо? То је једна од најгорих ствари на које се сви жале када кажу „ЦСС је срање“.

Са ЦСС-ом, више стилова може утицати на један елемент. Дакле, имате paragraphвеб страницу. Али ово paragraphможе стилски обликовати било који ЦСС блок.

То је као да имате глобалну ЈаваСцрипт променљиву којом било која функција унутар кода може манипулисати. Чини се да је рецепт за катастрофу.

Али опет, Цасцаде чини основно образложење како је ЦСС уопште створен.

Загрлити га?

Па, не можете то променити.

Шта је Цасцаде?

Каскада је начин на који прегледач одређује које стилове ће применити на одређени елемент. То је тако једноставно и поставља пристојно питање за интервју за фронт-енд програмера.

Срећом, ноћне море повезане са каскадом могу се разумети, јер њима управљају само два фактора:

  1. Специфичност селектора елемената
  2. Редослед стилова који се пишу

Хајде да их брзо погледамо.

Специфичност селектора

Можете упоредити специфичност селектора са начином на који људски ум тумачи упутства.

На пример, узмите у обзир графику испод:

Да вам кажем: „Додај ми црвену кутију.“, Коју бисте ми додали? Има их двоје!

Можете поставити следеће питање: „Које од поља, а или б?“ .

Или чак можете да зграбите обе кутије! Нису ли обоје црвене кутије?

Ово је ситуација у којој се налази прегледач када се бави специфичностима.

Када кажете, ставите одломак у црвену боју позадине ...

p { background-color: red;}

Будући да на страници може бити пуно елемената пасуса, прегледач каже, „који пасус?“

Прегледник не може да вам постави додатно питање, па наставља и покушава да сваки пасус на страници стави у redпозадину.

Међутим, ако сте рекли да то желите, ставите пасус именом класе reddyса црвеном позадином:

p.reddy { background-color: red;}

То је конкретнији захтев!

Сада ће прегледач обликовати одређене елементе пасуса које сте тражили.

То је то!

Технички, прегледач прегледава сваки селектор који циља одређени елемент и додељује „оцене“ сваком од њих, а онај са вишом оценом специфичности побеђује.

Начин израчунавања резултата је једноставан.

Претпоставимо да је прегледач - док је тумачио ваш ЦСС - имао 4 објаве циља.

  1. За сваки уграђени стил који циља елемент помоћу styleатрибута, 1 циљ се додељује посту циља (a).
  2. За сваког idселектора додељује се 1 циљ (b).
  3. За сваки classприсутни селектор, селектор атрибута и псеудо-класе, 1 циљ је додељен за објављивање (c).
  4. За сваки селектор елемената и псеудо-елемент, 1 циљ је додељен за објављивање (d).

Начин на који се тога сећам је коришћење скраћенице СИЦАПЕП:

Након додељивања бодова, укупни бодови израчунавају се спајањем , као цифре у четвороцифреном броју.

Пример брзе специфичности

Размотрите следеће декларације стила:

#nav .removed > a:hover {}
li:last-child h3 .title {}

Како би прегледач израчунао специфичне „бодове“ за ове бираче?

#nav .removed > a:hoвер

Ево расподеле:

(а) Не постоји стил у линији, тако да је резултат за прву стативу 0.

(б) Постоји један idселектор, #navто је резултат 1 за други гол.

(ц) Такође постоји један classселектор и један селектор .removedпсеудо-класе :hover, што сабира резултат од 2 за трећу вратницу.

(д) Постоји један селектор елемената a, то је оцена 1 у четвртом посту.

Ево графичког приказа резултата.

Укупна оцена специфичности спојена је као 0121.

Као и код редовне математике, 0001мањи је од 0005и 0121већи од 0021.

Сада вам је јасно како се израчунава специфичност.

Можете ли покушати да израчунате специфичност за другог селектора li:last-child h3 .title?

Јавите ми до чега сте стигли у одељку за коментаре :)

Стиле Ордер

Други фактор који утиче на каскаду је редослед стилова. Заиста основни пример може се видети са обликовањем истог елемента у 2 различита блока кода.

На пример:

p.reddy { background: red;}p.reddy { background: blue;}

Иако оба селектора имају исту специфичност, 0011редослед правила правила долази у обзир.

Друга декларација ће надвладати претходну, а одломак ће бити плав, а не црвен.

Трик питање

Узимајући у обзир доњи документ, које би боје био текст линка?

 Inline Styles and Specificity  #nav-force > ul > li > a.nav-link { color: blue; };     
  • Link
  • Плава или црвена?

    Имајте на уму да је веза обликована и у линији и унутар &lблока т; / стиле>.

    Ох, ако се осећате самопоуздано, само одговор изговорите гласно - себи.

    Али прави одговор је, инлине стил увек побеђује. Циљ се постиже у првој пошти, чиме се надмашују сви голови у било којој другој објави.

    Зашто?

    Коначна специфичност биће величине хиљаду - 1000 - и то побеђује 9 голова у другом посту. 1000 је веће од 0900.

    НАПОМЕНА: Као што је истакао Паул МцЦанн у одељку за коментаре, горњи одломак је претерано поједностављено. Погледајте шта он каже.

    Закључак

    Надамо се да сте се сада наоружали чврстим разумевањем како каскада функционише. Учење напреднијег ЦСС-а сада ће вероватно бити лакше, и што је још важније, сада знате где да тражите када имате те досадне грешке.

    Видимо се касније!

    Спремни сте да постанете професионалац?

    Направио сам бесплатни ЦСС водич да бисте одмах стекли ваше ЦСС вештине. Набавите бесплатну е-књигу.