Достоинства и недостатки различных браузеров в работе с CSS2
Федеральное агентство по
образованию
Государственное
образовательное учреждение среднего профессионального образования
Хакасский политехнический
колледж
Внеаудиторная работа
по дисциплине:
«Программное обеспечение АИС»
На тему: «Достоинства и
недостатки различных браузеров в работе с CSS2»
Выполнил: студент гр. АИС-41
Марков И.В.
Проверил преподаватель:
Зараменских А.А.
Абакан 2008
Отображение некоторых примеров работы CSS2 в различных браузерах
стиль браузер отступ css
Что такое margin, padding и в чём их отличие
Это всё виды отступов для HTML-элементов.
При ответе на этот вопрос грех не воспользоваться рисунком,
который приводится в спецификации CSS2.
В принципе из этой картинки и так всё понятно, но можно
пояснить, что порядок отступов (а по сути margin и padding это отступы)
определяется так: margin, border, padding.
Также попутно можно указать, что для того чтобы элемент DHTML
(в том числе и элемент body) занимал всё доступное пространство, то он должен
определяться со следующим стилем./* какой-то файл с расширением *.css */
dhtml-no-indent
{: 0px 0px 0px 0px;: 0px 0px 0px 0px;: 0px 0px
0px 0px;
Здесь существует одна особенность, которую следует упомянуть,
дело в том, что спецификацией явно не указывается, какие отступы определяются
по умолчанию для элемента <body>, поэтому производители браузеров на своё
усмотрение могут выставлять их при рендеринге HTML. Чем собственно они и не
приминули воспользоваться: Браузер Опера по умолчанию выставляет
padding-отступы, а браузеры IE и Mozilla - выставляют margin-отступы. Чтобы
избежать некорректного отображения в некоторых браузерах рекомендуется явно
устанавливать все отступы для этого элемента.
Стиль cursor: hand и cursor: pointer
Стиль hand - это малоизвестное расширение CSS2 (введённое в
IE и оставленное для совместимости с предыдущими версиями), которое также
поддерживается браузером Opera. В реальности же в стандарте CSS2 нет упоминания
“cursor: hand”, вместо него употребляется “cursor: pointer”. Это свойство
поддерживается во всех браузерах, которые заявляют о поддержке CSS2 (это в
первую очередь браузер Mozilla всех версий, Opera начиная с версии 6, MS
Internet Explorer начиная с версии 6.0). ПРИМЕЧАНИЕ
Будьте внимательны, для IE версии ниже 6.0. необходимо
указывать стиль hand. Для обхода этого ограничения можно воспользоваться
следующим трюком, основанном на том, что по спецификации нераспознанные
значения должны пропускаться (правда надо оговорится, что IE нераспознанные
значения заменяет на значения по умолчанию, но и это можно обойти). Смотрим
код:
style=”cursor: pointer; cursor: hand;”
Такая конструкция работает во всех упомянутых браузерах.
Что такое :hover и его отличия от обычных стилей CSS- это, по
определению в спецификации CSS2, динамический псевдо-класс (dynamic
pseudo-class) - специальный стиль, который меняет рендеринг элемента, к
которому он применён, в ответ на пользовательские действия. Таким
пользовательским действием для псевдо-класса :hover является наведение на элемент
указателя мышки. ПРЕДУПРЕЖДЕНИЕ
Внимание при указании стилей с псевдо-классом a:hover
необходимо соблюдать последовательность объявления.
a:link { color: red; } /* не посещённые ссылки */
a:visited { color: green; } /* посещённые ссылки */:hover { color: yellow; } /*
пользователь навёл указатель мыши */
a:active { color: gray; } /* активный элемент */
То есть стиль a:hover должен располагаться после стиля a:link
и a:visited, потому как будет наблюдаться скрытие перекрывающихся правил
(например, в примере это color - цвет шрифта). Основной смысл, что статические
правила должны идти в объявлении раньше, чем динамические.
В спецификации CSS2 определено ещё несколько динамических
псевдо-классов: :active (правило срабатывает при активизации элемента), :focus
(когда элемент находится в фокусе). Кроме того, эти классы могут суммироваться,
то есть следующее объявление:
<style>
a:focus {color: red;}:focus:hover {color: blue;}
</style>
вполне корректно и, в случае, когда ссылка (элемент
<a>) в фокусе (:focus), то при наведении (:hover) она будет менять цвет.
ПРИМЕЧАНИЕ
Обратите внимание, что при объявлении стиля для
псевдо-класса, обязательно отсутствие пробела между именем элемента (или стиля)
и именем псевдо-класса (a:hover:focus).
Я намеренно не стал говорить про динамические псевдо-классы
применительно только к элементу <a> (как чаще всего их и применяют), а
дело тут в том, что CSS2 не ограничивает применение псевдо-классов только на
этот элемент (зато это прекрасно делает браузер IE любых версий). Например,
абсолютно корректен с точки зрения спецификации следущий код:/* Стиль будет
применяться на любой элемент
<div> */
{
color: black;
}:hover
{: red;
}
</style>
А также такой:/* Стиль будет применяться на любой элемент c
классом
style */
<style>style
{: black;
}style:hover
{: red;
}
</style>
Что и прекрасно подтверждается браузерами Mozilla и Opera.
Примечание:
В браузере IE последние примеры работать не станут.