Для понимания того, как работают CSS и почему это важно, новичкам неплохо будет узнать несколько основных советов, прежде чем они начнут работать с XHTML и CSS дизайном сайтов.
Важно научиться отличать идентификаторы и классы. Документ CSS может применять свои стили несколькими различными способами, в первую очередь путем определения ID элемента или индикатора класса. Эти два дескриптора являются ключевыми способами определения стиля объектов, как «DIV» теги, теги заголовков, шрифты, и так далее, но есть ключевое различие, которое отделяет идентификаторы от классов.
С точки зрения HTML и CSS, элемент «class» добавляется в теги, которые будут повторяться. Например, типичный блог покажет не менее пяти записей на главной странице. Эти записи должны быть оформлены одинаково. В целях экономии места, разработчик может определить элементы «DIV» окружающие каждый из его постов с классом:
1 |
Это сигнализирует о том, что элемент будет повторяться несколько раз на одной странице, и что он обычно используется только с теми элементами, которые будут найдены неоднократно на той же странице. Для того, что появляется только один раз, например, заголовка или элементов навигации, используется ID тег:
1 |
В таблице стилей разница между классами и идентификаторами определена пунктуацией (написанием). Для стиля «blog-post» класса (см. пример выше), соответствующий элемент CSS будет выглядеть примерно так:
1 | .blog-post {
color: #000;
line-height: 150%;
} |
Для стиля ID вместо класса, просто вносятся изменения в элемент CSS. Вот так описывается ID для примера «navigation» (см. выше):
1 | #navigation {
text-align: center;
} |
Без правильной пунктуации указанные стили не появятся, когда документ HTML загрузится в окне браузера. Вместо этого, он появится полностью без стилей, пока ошибка в написании не будет устранена. Протестировав это можно, подключившись к любой тизерной партнерке и адаптируя дизайн блоков тизерной рекламы под дизайн вашего сайта.
Укажите важность стиля. Иногда, стиль в одном элементе будет переопределять стили в другом. Это чаще всего проявляется, когда «страница» или «HTML» элемент используется для создания по умолчанию шрифтов и цветов для всей страницы. Параметры по умолчанию – удобная вещь, но они могут испортить другие области страницы. Для предотвращения влияния параметров по умолчанию на переопределение стиля другого элемента, разработчики могут просто использовать индикатор !important сразу после переопределения стиля. Выглядит это в обычном режиме примерно так:
1 2 3 | .sidebar-box {
background-color: #fff !important; font-family: Arial, Helvetica, sans-serif; color: #e3e3e3 !important; } |
Если любой другой аспект стилей попробует переопределить цвет фона или цвет шрифта, эти попытки будут игнорироваться в связи с наличием индикатора «!important» до конца строки точки с запятой. Этот индикатор может быть использован практически в любом месте в пределах стандартных стилей для получения того же результата.