Благодетели сайта

Справочник CSS

В этом справочнике описаны все стилевые решения для создания и работы со стилями CSS.

В справочнике вы найдете все ответы для решения поставленной задачи. Формат стилевых свойств представлен в одинаковом написании.

Различное отображение стилей в браузерах

Каскадные таблицы стилей (CSS) были разработаны сравнительно давно, но разработчики браузеров не включали возможность отображения стилей, на данный момент, все браузеры отображают CSS, но к сожалению представление элемнтов с помощью стилей, до сихпор происходит по разному в разных браузерах. Можно выделить группу браузеров интерпретирующие стили почти одинаково это Mozilla Firefox, Opera, Safari, Google Chrome и Internet Explorer 8, два других популярных браузера, такие как Internet Explorer 6 и 7 версии отображают стилевые решения как попало, даже в этих двух версиях браузеров, одна страница может выглядеть по разному. Поэтому кроссбраузерная верстка с помощью CSS, остается актуальной проблемой на данный момент.

Наследование родительского стиля

Наследование — это форматирование стилем родительского элемента, стиля второго уровня, то есть стиль находящийся в контейнере другого стиля, первого уровня, наследует от него все форматирование. Например, для контейнера div задали цвет для текста синем цветом, то текст в теге p входящего в контейнер div будет отображен синем цветом:

<div style=”color:blue;”>
 <p>Текст синего цвета</p>
</div>

то есть тег p унаследовал от родительского элемента синий цвет.

Что бы вывести цвет стиля второго уровня, например красным цветом то нужно применять !important для подключения свой собственной таблицы стилей, например вот эта запись не окрасит цвет в красный:
<div style=”color:blue;”>
 <p style=”color:red;”>Текст все равно синего цвета</p>
</div>

а вот эта окрасит:

<div style=”color:blue;”>
 <p style=”color:red !important;”>Вот теперь наш текст красного цвета</p>
</div>

Применение стилей

Стили имеют общую структуру применения и индивидуальную, например к изображению не стоит применять стили предназначенные для текста, в итоге браузер проигнорирует это или в худшем случае будет стараться применить текстовые стили для изображения, что приведет к некорректному выводу элементов в окно браузера. Поэтому нужно четко представлять себе какой стиль к чему применяем.

Стили CSS можно прописывать в отдельном, прикрепленном к документу файле. Это дает возможность гибко управлять отображением элементов страницы, такие как, например менять цвет заголовков у всех страниц сайта или изменить размер изображения, или переместить контейнер в любое другое место страницы. Так же, внешний файл можно сделать специально для браузера определенной версии, например Internet Explorer-у можно задать ссылку в документе:

<!--[if IE 6]>
 <link href="/css/style-ie6.css" rel="stylesheet" media="all" />
<![endif]-->

ссылка прикрепляющая стилевый файл предназначенный только для Internet Explorer версии 6, следующая ссылка прикрепляет к документу файл только для Internet Explorer версии 7

<!--[if IE 7]>
 <link href="/css/style-ie7.css" rel="stylesheet" media="all" />
<![endif]-->

также можно сделать и ссылку на Internet Explorer версии 8

<!--[if IE 8]>
 <link href="/css/style-ie8.css" rel="stylesheet" media="all" />
<![endif]-->

или на все версии сразу Internet Explorer

<!--[if IE]>
 <link href="/css/style-ie.css" rel="stylesheet" media="all" />
<![endif]-->