Содержание
Все веб-браузеры содержат так называемые стили по умолчанию. Это стили, которые определяют внешний вид HTML-элементов при отсутствии какой-либо другой информации о стиле. Например, почти в каждом браузере гиперссылки по умолчанию выглядят ярко-синим цветом с подчеркиванием. Так выглядят эти ссылки, если вы не скажете им отображать их по-другому.
Стили браузера по умолчанию могут быть полезны, но во многих случаях веб-дизайнеры хотят удалить эти стили, чтобы они могли начать все заново со стилей, которые они контролируют на 100%. Это делается с помощью так называемой «основной таблицы стилей».
Основная таблица стилей должна быть первой таблицей стилей, которую вы вызываете во всех ваших документах. Вы используете главную таблицу стилей, чтобы очистить настройки браузера по умолчанию, которые могут вызвать проблемы в кросс-браузерном веб-дизайне. Как только вы очистили стили с помощью главной таблицы стилей, ваш дизайн начинается с одного и того же места во всех браузерах — как чистый холст для рисования.
Глобальные значения по умолчанию
Ваша главная таблица стилей должна начинаться с обнуления полей, отступов и границ на странице. Некоторые веб-браузеры устанавливают размер документа по умолчанию на 1 или 2 пикселя с отступом от краев панели браузера. Это гарантирует, что все они отображаются одинаково.
Вы также хотите сделать шрифт согласованным. Не забудьте также установить размер шрифта на 100 процентов или 1em, чтобы ваша страница была доступна, но размер все еще не изменился. И обязательно указывайте высоту строки.
Форматирование заголовка
Теги заголовка или заголовка (H1, H2, H3 и т. Д.) Обычно по умолчанию выделены жирным шрифтом с большими полями или отступами вокруг них. Сбрасывая вес, поля и отступы, вы гарантируете, что эти теги по-прежнему остаются большими (или меньшими), чем текст вокруг них, без дополнительных стилей.
Возможно, вы захотите задать конкретные размеры, межбуквенный интервал и отступы для тегов заголовка, но это действительно зависит от стиля сайта, который вы разрабатываете, и должно быть исключено из основной таблицы стилей. Вы можете добавить больше стилей к этим заголовкам по мере необходимости для вашего конкретного дизайна.
Форматирование простого текста
Помимо заголовков, есть другие текстовые теги, которые вы должны обязательно очистить. Один набор, который часто забывают, — это теги ячеек таблицы (TH и TD) и теги форм (SELECT, TEXTAREA и INPUT). Если вы не установите для них тот же размер, что и для основного текста и текста абзаца, вы можете быть неприятно удивлены тем, как их отображают браузеры.
Также приятно придать вашим цитатам (BLOCKQUOTE и Q), аббревиатурам и аббревиатурам немного дополнительный стиль, чтобы они выделялись чуть больше:
Ссылки и изображения
Ссылки просты в управлении и могут быть изменены по сравнению с вышеупомянутым ярко-синим подчеркнутым текстом. Мы предпочитаем, чтобы наши ссылки оставались подчеркнутыми, но если вы предпочитаете это по-другому, вы можете установить эти параметры отдельно. Мы также не включаем цвета в основную таблицу стилей, потому что это зависит от дизайна.
С изображениями важно отключить границы. Хотя большинство браузеров не отображают границу вокруг простого изображения, когда изображение связано, браузеры включают границу.
таблицы
Хотя таблицы больше не используются в целях верстки, ваш сайт может по-прежнему использовать их для фактических табличных данных. Это прекрасное использование таблиц HTML. Мы уже убедились, что размер текста по умолчанию одинаков для ячеек таблицы, но есть несколько других стилей, которые вы должны установить, чтобы ваши таблицы оставались неизменными:
формы
Как и в случае с другими элементами, вы должны очистить поля и отступы вокруг ваших форм. Еще одна вещь, которую нам нравится делать, это переписать тег формы как «встроенный», чтобы он не добавлял дополнительного места в месте размещения тега в коде. Как и с другими текстовыми элементами, мы определяем информацию о шрифте для select, textarea и input выше, так что она такая же, как и остальная часть нашего текста.
Это также хорошая идея, чтобы изменить курсор для ваших меток. Это помогает людям увидеть, что ярлык что-то сделает, когда щелкнет по нему.
Общие классы
Для этой части основной таблицы стилей вы должны определить классы, которые имеют для вас смысл. Вот некоторые из классов, которые мы используем чаще всего. Обратите внимание, что они не настроены на какой-либо конкретный элемент, поэтому вы можете назначить их любому, что вам нужно.
Помните, что поскольку эти классы написаны раньше любых других стилей и являются просто классами, их легко переопределить с помощью более специфических свойств стилей, которые появляются позже в каскаде. Если вы обнаружите, что вы установили общий класс для элемента, и он не вступает в силу, вам следует убедиться, что в одной из ваших последующих таблиц стилей нет какого-либо другого стиля, влияющего на этот же элемент.
