Слишком много начинающих дизайнеров CSS не осознают важность создания файла «reset.css». Когда у вас есть среда, в которой каждый браузер имеет свой собственный стиль «по умолчанию», вы часто обнаруживаете, что бьетесь в черепе, когда спрашиваете себя: «Почему здесь расстояние?» Чтобы избавить себя от некоторых головных болей, которые вы, несомненно, испытаете, вам нужно создать свой собственный простой файл сброса. Проблема с использованием одной из многих существующих в настоящее время платформ заключается в том, что они не предназначены специально для вас. Например, я никогда не использую устаревший элемент «center» в своих проектах. Следовательно, мне не нужно помещать это в мой стиль по умолчанию. Однако, другим, возможно, потребуется сделать это — хотя они заслуживают пощечины на запястье … или ягодиц, если вы так склонны.
Шаг 1: обнулите поля и отступы
По умолчанию браузеры добавляют поля для многих элементов. Например, обычно на элементе тела есть около шести пикселей полей. Как дизайнер, именно вы должны указать эти цифры! (За исключением, может быть, когда дело доходит до размера шрифта — это совсем другая тема, которая будет обсуждаться подробно.) Итак, давайте обнуляем кучу этих элементов!
|
1
2
3
4
5
|
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0;
}
|
Шаг 2: Возьмите под контроль свои элементы
Возможно, вы заметили, что ваши элементы различаются по размеру от браузера к браузеру. Вы можете изменить это, установив размер шрифта по умолчанию на 100%.
|
1
2
3
4
|
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}
|
Далее нам нужно определить поля и отступы для наших элементов заголовка. Я также собираюсь удалить list-style-type из моих элементов списка. Наконец, я установлю базовый размер шрифта для элемента body.
|
1
|
body { line-height: 1;
|
Шаг 3: разверните
Обычно мне нравится включать несколько общих классов, которые я использую во всех своих проектах. Вы можете или не можете использовать их самостоятельно.
|
01
02
03
04
05
06
07
08
09
10
11
|
.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}
.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}
|
Вот наш последний простой файл Reset.css.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0;
}
body
{
line-height: 1;
font-size: 88% /* Decide for yourself if you want to include this.
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}
ul, ol
{
list-style: none;
}
a
{
color: black;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}
.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}
|
По крайней мере, для меня это все, что мне нужно, чтобы начать работу с новым сайтом. Для ваших собственных проектов вы должны расширить то, что у меня есть, чтобы оно вам лучше всего подходило. Вероятно, вы должны указать поля для более часто используемых элементов, таких как тег абзаца.
Если вы хотите получить файл с 100% сбросом, я рекомендую обратиться к популярному файлу Эрика Мейера «Reset CSS» . Кроме того, вы можете проверить YUI Reset CSS. Увидимся в понедельник!