Познакомьтесь с каскадными таблицами стилей с помощью этой шпаргалки CSS

Определите основные стили на каждом сайте, который вы создаете

Когда вы создаете сайт с нуля, разумно начинать с определенных основных стилей. Это как начать с чистого холста и свежих кистей. Одна из первых проблем, с которой сталкиваются веб-дизайнеры, заключается в том, что веб-браузеры все разные. Размер шрифта по умолчанию отличается от платформы к платформе, семейство шрифтов по умолчанию отличается, некоторые браузеры определяют поля и отступы для тега body, а другие нет, и так далее. Обойдите эти несоответствия, определив стили по умолчанию для своих веб-страниц.

CSS и набор символов

Прежде всего, установите для набора символов ваших документов CSS значение utf-8 . Хотя большинство страниц, которые вы разрабатываете, вероятно, написаны на английском языке, некоторые из них могут быть локализованы – адаптированы к различным языковым и культурным условиям. Когда они есть, utf-8 упрощает процесс. Установка набора символов во внешней таблице стилей не будет иметь приоритет над заголовком HTTP, но во всех других ситуациях это будет.

Это легко установить набор символов. Для первой строки документа CSS напишите:

 @charset "utf-8"; 

Таким образом, если вы используете международные символы в свойстве содержимого или в качестве имен классов и идентификаторов, таблица стилей все равно будет работать правильно.

Стилизация тела страницы

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

 html, тело {
поле: 0px;
отступ: 0px;
граница: 0px;
}

Установите цвет переднего плана по умолчанию или цвет шрифта на черный, а цвет фона по умолчанию – белый. Хотя это, скорее всего, изменится для большинства дизайнов веб-страниц, эти стандартные цвета, установленные на теле и HTML-теге, сначала облегчают чтение и работу с страницей.

 html, цвет тела {
: цвет: # 000;
фон: #fff;
}

Стили шрифтов по умолчанию

Размер шрифта и семейство шрифтов неизбежно изменятся после того, как дизайн вступит в силу, но начнем с размера шрифта по умолчанию 1em и семейства шрифтов Arial, Geneva или другого шрифта без засечек. Использование ems делает страницу максимально доступной, а шрифт без засечек более четким на экране.

 html, body, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, без засечек;
}

Там могут быть другие места, где вы можете найти текст, но p , th , td , li , dd и dt – хорошее начало для определения основного шрифта. Включите HTML и body на всякий случай, но многие браузеры отменяют выбор шрифта, если вы определяете только свои шрифты для HTML или тела.

Последние новости

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

 h1, h2, h3, h4, h5, h6 {
семейство шрифтов: Arial, Helvetica, без засечек;
}
h1 {размер шрифта: 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: посещения {цвет: # 009; }
a: hover {color: # 06f; }
a: active {color: # 0cf; }

Стилизация ссылок с довольно безобидной цветовой схемой гарантирует, что вы не забудете ни один из классов, а также делает их немного менее громкими, чем стандартные, синие, красные и фиолетовые.

Полная таблица стилей

Вот полная таблица стилей:

 @charset "utf-8"; 

html, поле {
margin: 0px;
padding: 0px;
border: 0px;
цвет: # 000;
фон: #fff;
}
html, тело, p, th, td, li, dd, dt {
шрифт: 1em Arial, Helvetica , без засечек;
}
h1, h2, h3, h4, h5, h6 {
семейство шрифтов: Arial, Helvetica, без засечек;
}
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: посещения {цвет: # 009; }
a: hover {color: # 06f; }
a: active {color: # 0cf; }

Оцените статью
Solutics.ru
Добавить комментарий