ЦСС - Правила о предностима (тежина)

Да ли сте знали да ЦСС одређује специфичну тежину сваког правила стила? Ово је веома аспект ЦСС-а јер ће избећи било какве недоследности између онога што желите да добијете и онога што добијете у стварности.

Пример:

Испробајте следећи ХТМЛ код:

 див {бацкгроунд-цолор: плава;} 

Као резултат добићете плави квадрат од 100Кс100 пк.

Сада му додајте класу:

 див {бацкгроунд-цолор: блуе;}. МаДив {бацкгроунд-цолор: ред;} 

Трг је постао црвен!

Сада користите ИД:

 див {бацкгроунд-цолор: блуе;} .маДив {бацкгроунд-цолор: ред;} #мДив {бацкгроунд-цолор: иеллов;} 

Квадрат је сада жут јер је ИД јачи од класе.

Следећа употреба дефинише стилове:

 див {бацкгроунд-цолор: блуе;}. МаДив {бацкгроунд-цолор: ред;} # МаДив {бацкгроунд-цолор: иеллов;} 

Квадрат постаје зелен: док је у теорији, додељене су му четири различите боје!

Тежине

Ови резултати су посљедице тежине (која се назива и правилима приоритета) ЦСС:

• Тежина ознаке је 1
• Тежина класе је 10.
• Тежина ИД-а је 100.
• Тежина атрибута стила је 1000.

Ово су основне тежине, постоје и друге, на пример, псеудо-класе (: ховер, : афтер, : фоцус ...). Пример атрибута ЦСС: ховер само додаје мало тежине елементу када је курсор миша прошао.

Гомилање тежине

Правило стила може имати средњу тежину. Заиста, гомила тежине.

Пример:

 див {бацкгроунд-цолор: блуе;} .маДив {бацкгроунд-цолор: ред;} .маДив {бацкгроунд-цолор: иеллов;} 

Као што видите, имам елемент (тежину 1) и две једнаке класе (тежина 10): последњи елемент преузима и наш квадрат је жут. Сада након додавања

 див {бацкгроунд-цолор: блуе;} див.маДив {бацкгроунд-цолор: ред;} .маДив {бацкгроунд-цолор: иеллов;} 

Квадрат постаје црвен. Зашто?

• ".маДив" - 10
• "див.маДив" комбинује елемент и класу - 11!

Упозорење: Понекад додавање класе правилу неће бити довољно за повећање тежине свих елемената који су били укључени.

Напоменути да

Упоредите резултат овог кода:

 див {бацкгроунд-цолор: плаво;} див # маДив {бацкгроунд-цолор: ред;} 

Резултат овог:

 див {позадинска боја: плава;} див #маДив {позадинска боја: црвена;} 

У првом случају наш див је црвени, у другом случају плави!

"Али зашто, елемент + ИД =, тако да увек треба да буде црвено!"

Обратите пажњу на суптилну разлику:

• див # маДив : се односи на див са "маДив" ИД.
• див #маДив : Примењује се на све елементе чији је ИД "маДив" садржан у родитељском елементу који се зове "див".

Наш трг се бави само првим правилом. Као опште правило, увек обратите пажњу на то како пишете правила, правилно користите размаке, зарезе ... итд

Примери:

• п .миЦласс а {} : за све линкове садржане у било ком елементу чија је класа "миЦласс", све садржано у било ком

  елемент. Тежина: 12.

• п.миЦласс, а {} : за све линкове и све

  чија је класа "миЦласс". Тежина: 11 или 1

• п, .миЦласс, а {} : за све линкове и све елементе чија је класа "миЦласс" и све

  елемент. Тежина: 1 до 10 или 1