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