|Web Учебник | Самоучитель по HTML |Самоучитель по PHP + MySql |Основы PhotoShop |Контакты. |

Наследование и каскадирование в CSS.

Я вам уже немного рассказывал о том как браузер выводит страницу на монитор, сначала он считывает весь документ и конфигурирует его на дерево элементов(считает сколько каких тегов и т.д.), дальше он обязан назначить каждому элементу(тексту, картинке, таблице и т.д.) его значение и уже согласно этих значений трансформировать согласно локальных возможностей браузера(размер окна, видеокарта и т.д.). А теперь об этом более подробно.

После того как браузер считал документ он обязан задать значения всем элементам, для этого есть приоритеты:
1)Если значение явно задано, то использовать его;
2)Если значение не задано, унаследовать его у предков, чаще всего вычисленное значение;
3)Если значение не задано и у предков, то его нужно вычислить, например если это картинка, то у нее есть базовый размер, если есть текст то у каждого шрифта есть размер по умолчанию и т.д.

Вычисленные значения в свою очередь могут быть:
1)абсолютными('gold', '2cm' и т.д.), эти значения не требуют ни каких вычислений.
2)относительными('1.5ex','1.2em', '#08ff00', '40%' и т.д.), т.е. которые нужно вычислить относительно предков, с цифрами я вам уже рассказывал, а от цветах нет, например '#08ff00' , если бы 00ff00, то такой пример понятен что это зеленый цвет, но первый вариант может быть не поддерживается видеокартой и тогда нужно рассчитать цвет близкий по значению, например вместо '#08ff00' может быть '#00ff00' или '#0fff00' хотя может более близкий.

Вычисленные значения можно сказать готовы к использованию, за исключением того что браузеры используют реальные значения. Например таблица width=100% с тремя ячейками и размером окна 800пикселей, получается 100%=800px а 800/3=266.6666, но пиксель это точка и не может делиться, значит реальный размер для двух ячеек 266px а третей 267px, тоже самое с абсолютными величинами, например 20mm, опять-же зависит от плотности экрана(качество видеокарты) допустим 96пикселей на дюйм, дюйм это 25.4мм и при делении у нас не получается целых пикселей, потому браузеру придется это значение округлить.

Наследование это передача значений от родителей к потомкам(дочерним или даже более поздним), на пример цвета текста, если мы создаем правило BODY{color:red} т.е. зададим цвет текста, то это свойство будет назначено всем тегам содержащих текст в всем документе, кроме тех случаев если значение переопределяется другим правилом. Сейчас говорить о том, какие значения наследуются а какие нет не имеет смысла даже не потому что мы их не знаем, а потому что есть исключения. Так-что все по порядку.

Каскадирование. Если проще говорить то каскад это ступени, а в CSS эти ступени имеют приоритеты друг над другом.
CSS имеет три независимых источника:
1)Авторские таблицы стилей - описаны в спецификации по CSS ;
2)Пользовательские таблицы стилей- разработаны пользователями;
3)Таблицы стилей пользовательских агентов - разработаны и встроены в браузеры.
Авторские стили имеют самый высокий приоритет, если чего-то нет в авторских то это можно написать в пользовательских таблицах, но если каких либо свойств нет в авторских и пользовательских, то они должны быть предусмотрены разработчиками браузеров. Но прежде чем приступать создавать новые стили, мы должны узнать все что уже изобретено, и с следующей страницы у нас начинается практика!!!

 

                   Перейти к выбору следующей страницы
 

Добавить в закладки
Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!