Когда вы создаете сайт с нуля, разумно начинать с определенных основных стилей. Это похоже на чистый холст и свежие кисти. Одна из первых проблем, с которыми сталкиваются веб-дизайнеры, - это то, что веб-браузеры разные. Размер шрифта по умолчанию отличается от платформы к платформе, семейство шрифтов по умолчанию отличается, некоторые браузеры определяют поля и отступы на теге тела, а другие - нет, и так далее. Обходите эти несоответствия, определяя стили по умолчанию для своих веб-страниц.
CSS и набор символов
Прежде всего, установите набор символов ваших документов CSS UTF-8 , Хотя вполне вероятно, что большинство страниц, которые вы разрабатываете, написаны на английском языке, некоторые из них могут быть локализованы, адаптированы к различным языковым и культурным контекстам. Когда они, utf-8 упрощает процесс. Установка набора символов во внешней таблице стилей не будет иметь приоритета над HTTP-заголовком, но во всех остальных ситуациях это произойдет.
Легко установить набор символов. Для первой строки документа CSS напишите:
@charset "utf-8";
Таким образом, если вы используете международные символы в свойстве контента или как имена классов и идентификаторов, таблица стилей будет работать правильно. Следующее, что требуется таблицей стилей по умолчанию, - это стили, чтобы обнулить поля, отступы и границы. Это гарантирует, что все браузеры размещают контент в одном месте, и между браузером и контентом нет никаких скрытых пространств. Для большинства веб-страниц это слишком близко к краю текста, но важно начать там, чтобы фоновые изображения и макеты были правильно выстроены. html, body { margin: 0px; padding: 0px; border: 0px; }
Установите цвет переднего плана или шрифта по умолчанию на черный, а цвет фона по умолчанию - белый. Хотя это, скорее всего, изменится для большинства проектов веб-страниц, имея эти стандартные цвета, установленные на теле и теге HTML, сначала облегчает чтение и работу с этой страницей. html, body { цвет: # 000; background: #fff; } Размер шрифта и семейство шрифтов - это то, что неизбежно изменится после того, как проект укрепится, но начните с размера шрифта по умолчанию 1em и семейства шрифтов по умолчанию Arial, Geneva или другого шрифта без засечек. Использование ems делает страницу максимально доступной, и шрифт sans-serif более разборчив на экране. html, body, p, th, td, li, dd, dt { шрифт: 1em Arial, Helvetica, sans-serif; }
Могут быть и другие места, где вы могли бы найти текст, но п , го , тд , литий , дд , а также дт являются хорошим началом для определения базового шрифта. Включают HTML а также тело на всякий случай, но многие браузеры переопределяют выбор шрифтов, если вы определяете только свои шрифты для HTML или тела. Заголовки HTML важны для использования, чтобы помочь контенту вашего сайта и позволить поисковым системам глубже проникнуть на ваш сайт. Без стилей они все довольно уродливы, поэтому устанавливают стили по умолчанию для всех из них и определяют семейство шрифтов и размеры шрифтов для каждого. h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } Стилирование цветов ссылок почти всегда является важной частью дизайна, но если вы не определяете их в стилях по умолчанию, скорее всего, вы забудете хотя бы один из псевдоклассов. Определите их с небольшим изменением на синем, а затем измените их, как только у вас есть цветовая палитра для сайта. Чтобы установить ссылки в синих оттенках, установите: как показано в этом примере: a: link {color: # 00f; }a: visited {color: # 009; }a: hover {color: # 06f; }a: active {color: # 0cf; }
Путем стилизации ссылок с довольно безобидной цветовой схемой, это гарантирует, что вы не забудете ни один из классов, а также сделайте их немного менее громкими, чем синий, красный и фиолетовый по умолчанию. Вот полная таблица стилей: @charset "utf-8"; html, body { margin: 0px; padding: 0px; border: 0px; цвет: # 000; background: #fff; } html, body, p, th, td, li, dd, dt { шрифт: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: visited {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; } Стилирование тела страницы
Стандартные стили шрифтов
Последние новости
Не забывайте ссылки
Полный лист стилей
