CSS level 1 Спецификация
Презентацията в CSS може да бъде повлияна от повече от един стилов лист. Съществуват две основни причина за това свойство: приспособимост и баланс автор/читател.
- приспособимост
-
Дизайнер на стилови листа може да комбинира няколко(непълни) стилови листа, за да намали претрупаността:
@import url(http://www.style.org/pastoral); @import url(http://www.style.org/marine); H1 { color: red } /* променя импортираните стилове */ - баланс автор/читател
- И читателите, и авторите могат да изменят презентацията чрез стилови листа. За да го направят, те използват един и същи език за стилови листа, което води до едно фундаментално свойство на уеб средата: всеки може да бъде издател. Браузърът избира механизма за отнасяне към личните стилови листа.
Понякога може да възникнат конфликти между стиловите листа, които да повлияят на презентацията. Решението на тези конфликти се базира на идеята всяко стилово правило да има свое тегло. По подразбиране, теглото на правилата на читателите е по-малко от това на правилата на документите на автора. Т.е., ако съществуват противоречия между стиловите листа на входящ документ и личните листа на читателя, ще бъдат използвани правилата на автора. И читателските, и авторските правила надделяват над стойностите по подразбиране на браузъра.
Импортираните стилови листа също прилагат каскадния модел едни на други в реда, по който са били импортирани, в зависимост от каскадните правила, дефинирани по-долу. Правила, които са били декларирани в самия стилов лист надделяват над правилата в импортираните стилови листа. Това ще рече, че импортираните стилови листа се намират по-ниско в каскадния ред от правилата в самия стилов лист. Импортираните стилови листа, от своя страна, могат да импортират и надделяват над други стилови листа, и т.н.
В CSS1, всички '@import' оператори трябва да настъпват в началото на стиловия лист, преди каквито и да са декларации. Така още по-лесно се вижда, че правилата в самия стилов лист надделяват над правилата в импортираните стилови листа.
3.1 'важно'('important')
Дизайнерите на стилови листа могат да увеличат тежестта на своите декларации:
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
В примера, показан горе, първите три декларации имат по-голямо тегло, докато последната декларация има нормално тегло.
A Читателско право с декларация 'important' ще надделее над авторско правило с нормална декларация. Авторско право с декларация 'important' ще надделее над читателско право с декларация 'important'.
3.2 Каскаден ред
Противоречащите правила са свойствени за механизма на CSS. За да бъде намерена стойността на комбинацията елемент/свойство, трябва да се следва следния алгоритъм:
- Да бъдат намерени всички декларации, които важат за комбинацията елемент/свойство, за която става на въпрос. Декларациите важат, ако селектора пасва на елемента, за който става на въпрос. Ако декларациите не важат се използва наследената стойност. Ако няма наследена стойност(такъв е случая при 'html' елемента и при свойствата, които не се наследяват), се използва първоначалната стойност.
- Подредете декларациите по ясно тегло: декларациите маркирани с '!important' имат по-голямо тегло от немаркираните(нормалните) декларации.
- Подредете по произход: авторовите стилови листа надделяват над читателските стилови листа, които от своя страна надделяват над настройките по подразбиране на браузъра. Импортиран стилов лист има същия произход като стиловия лист, от който е импортиран.
- Подредете в зависимост от спецификата на селектора: по-специфичните селектори ще надделеят над по-обобщените такива. За да намерите спецификата, пребройте броя на ID атрибутите в селектора(a), броя на класовите атрибути в селектора(b) и броя на имената на тагове в селектора(c). Сбора на трите числа(в бройна система с голяма основа) дава стойността на спецификата. Ето и някои примери:
LI {...} /* a=0 b=0 c=1 -> специфика = 1 */ UL LI {...} /* a=0 b=0 c=2 -> специфика = 2 */ UL OL LI {...} /* a=0 b=0 c=3 -> специфика = 3 */ LI.red {...} /* a=0 b=1 c=1 -> специфика = 11 */ UL OL LI.red {...} /* a=0 b=1 c=3 -> специфика = 13 */ #x34y {...} /* a=1 b=0 c=0 -> специфика = 100 */Псевдо-елементите и псевдо-класовете се броят като нормални елементи и класове, съответно.
- Подредете по реда на деклариране: ако две правила имат едно и също тегло, последното, което е било декларирано надделява. Смята се, че правилата в импортираните стилови листа трябва да се намират преди всички други правила в самия стилов лист.
Търсенето на стойност на свойство може да бъде прекъснато, когато едно правило има по-голямо тегло от другите правила, които важат за същата комбинация елемент/свойство.
Тази стратегия дава на авторските стилови листа значително по-голямо тегло от тези на читателите. За това е много важно читателя да притежава способността да изключва влиянието на определен стилов лист, например чрез падащо меню.
Декларация в атрибута 'style' на елемента(вижте примера в глава 1.1) има същото тегло, като декларация в ID-базиран селектор, който е деклариран в края на стиловия лист:
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
В горния пример цвета на елемента 'p' ще е червен. Въпреки, че спецификата е една и съща и при двете декларации, декларирането в атрибута 'style' ще надделее над това в 'style' елемента, поради причини, споменати в каскадно правило номер 5.
Браузърът може да избере почете други стилистически HTML атрибути, например 'align'. Ако това стане, тези атрибути се превеждат на съответните CSS правила със стойност за специфика, равна на 1. Счита се, че правилата трябва да бъдат в началото на авторския стилов лист и последващите стилови листа могат да надделеят над тях. По време на фазата на преминаване, тази стратегия ще улесни едновременното съществуване на стиловите атрибути, заедно с други стилови листа.