Cascading Style Sheets или CSS са настроени така, че да имате много свойства, които засягат един и същ елемент. Някои от тези имоти може да са в конфликт един с друг. Например, може да зададете червен цвят на шрифта на маркера за параграф и след това по-късно да зададете цвят на шрифта със син цвят. Как браузърът знае кой цвят да направи параграфите? Това се определя от каскадата.
Видове стилови листове
Има три различни типа стилови листа:
- Стилове на автора
- Това са стилови листове, създадени от автора на уеб страницата. Те са това, което повечето хора мислят, когато мислят за CSS стилове.
- Стилове на потребителски стилове
- Потребителските стилови листове се задават от потребителя на уеб страницата. Те позволяват на потребителя да има повече контрол върху показването на страниците.
- Стилове на потребителски агент
- Това са стилове, които уеб браузърът прилага на страницата, за да ви помогне да покажете тази страница. Например, в XHTML, повечето зрителни потребителски агенти показват етикета като текст с курсив. Това е дефинирано в стиловия лист на потребителския агент.
В свойствата, които са дефинирани във всеки от горепосочените стилови листове, се дава тежест. По подразбиране листът за стила на автора има най-голямо тегло, последван от листа с стилове на потребителите и накрая от листа с стилове на потребителския агент. Единственото изключение в това отношение е вашето правило в лист с потребителски стилове. Това има по-голяма тежест от стиловия лист на автора.
Каскаден ред
За да разрешите конфликти, уеб браузърите използват следната подредба за сортиране, за да определят кой стил има предимство и ще бъде използван:
- Първо, потърсете всички декларации, които се отнасят за въпросния елемент, и за зададения тип носител.
- След това вижте какъв стилов лист идва от него. Както е посочено по-горе, листът за авторските стилове е на първо място, след това потребител, след това потребителски агент. С важни потребителски стилове, които имат по-висок приоритет от авторските важни стилове.
- Колкото по-специфичен е селекторът, толкова по-голямо предимство ще получи. Например, стил на "div.co p" ще има по-висок приоритет от този на маркера "p".
- Накрая, подредете правилата по реда, който те са дефинирали. Правилата, дефинирани по-късно в дървото на документите, имат по-висок приоритет от определените по-горе. Правилата от вносния лист стил се разглеждат преди правилата директно в листа стил.