Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Короткий урок: Как Создать Собственный Reset.css Файл.

by
Difficulty:BeginnerLength:ShortLanguages:

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

Очень многие новички в CSS не понимают важность “reset.css” файла (файл с начальным форматированием). Когда вы работаете в системе, где у каждого браузера своя стилизация, вам часто приходится сталкиваться с ситуацией, когда вы бьетесь головой задавая себе один вопрос ”Ну почему же здесь пустое место?”. Чтобы избавить себя от головной боли, которая у вас обязательно в таком случае возникнет, вам нужно создать файл, который “сбрасывает” форматирование. Проблема многих существующих фреймворков в том, что они не созданы специально для вас. Например, я никогда, не использую устаревший элемент “center” в своих проектах. Следовательно, мне не нужно ставить его в мой стиль по умолчанию. Однако другим, возможно, это нужно, хотя признаться, надо бы их за это отшлепать....

Step 1: Обнулите Margins и Padding

По определению, бразуеры добавляют поля для многих элементов. Например, для элемента body, как правило используются поля в 6 пикселей. Как дизайнер, вы сами должны контролировать эти величины! (Возможно исключение можнет быть для размера шрифтов, хотя этому можно посвятить целый урок). И так давайте обнулим эту кучу элементов

Шаг 2: Возьмите Ваши Элементы под Контроль

Возможно вы замечали, что ваши элементы меняются в размеры, от браузера к браузеру.  Вы можете изменить это, здав значение шрифта по умолчанию равным 100%.

Далее нам нужно задать, поля и отступы для элементов шапки. Также я собираюсь “обнулить” стиль для элементов списка. И, наконец,  я задам базовый шрифт для элементов body.

Шаг 3: Дополнительно

Обычно я включаю некоторые классы, которые,  как правило, использую во всех своих проектах. Вы можете поступить так же, а можете этого и не делать.

И вот наш окончательный Reset.css файл.

По крайней мере, для меня,  это все что мне нужно для начала работы над новым веб-сайтом. Для ваших проектов, вы можете расширить этот файл, так как вам будет удобнее. Возможно вам нужно будет задать другие поля, для наиболее часто используемых элементов,  таких как параграфы например (для тега “p”).

Если вы хотите  100% reset файл, я рекомендую вам использовать популярный файл Эрика Майера "Reset CSS" file. Или вы можете использовать этот вариант YUI Reset CSS. Увидимся в понедельник!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.