CSS Reset – Скидаємо CSS стилі
CSS Reset (або ж reset.css) – це css файл, ціль якого, скидання стилів і досягнення максимально однакового відображення HTML сторінки в різних браузерах.
Всі хто стикався із верстанням знають, які браузери бувають “капризні”. А все тому, що кожний браузер вважає за потрібне встановити свої значення стилів для різних HTML елементів. CSS Reset допоможе вам “підігнати” стилі під один шаблон.
Простим прикладом цього може бути широко вживаний елемент, як а. Більшість браузерів таких як: Internet Explorer та Firefox елемент а підкреслюють і виділяють синім кольором, а уявіть, що через рік виходить новий браузер та його розробники для елемента а використовують оранжевий колір і курсив (а)…. Що ж тоді буде із вашою HTML сторінкою? Жах… чи не так?
Але не впадаємо в паніку тому що на допомогу нам приходить CSS Reset :)
З чого все почалось.
Джерела говорять про те, що вперше CSS Reset був застосований у 2004 році Ендрю Креспанісом (Andrew Krespanis) і мав структуру з універсальним селектором, який ставився на початку CSS файла і задавав нульові відступи для margin і padding.
|
1 2 3 4 5 |
* { margin: 0; padding: 0; } |
Забавно, чи не так? Але і тут є свої нюанси, які нам не потрібно знати, так як ми підемо далі.
Рекомендації, що до CSS Reset
- Ваш reset.css файл, має бути першим, що побачить браузер
- Використовуйте окремий CSS – файл для CSS Reset
- Старайтесь уникати використання універсального селектора
- Уникайте надлишкових описів
Оптимальний CSS Reset.
Для кожного він буде свій і даний CSS Reset буде лише прикладом.
|
1 2 3 4 5 6 7 8 9 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 |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } |
Як підключити reset.css файл.
Нічого складного, існує два варіанти:
1) Через @import. І це має вигляд:
|
1 2 3 4 5 6 7 8 9 10 |
@import url(../reset.css); body { background: #6a93aa url(/images/body-bg.png) repeat-x 0 0; font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align: center; color: #7f7f7f; } ... |
2) Через <link/>. І це має вигляд:
|
1 2 |
<link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> |
Особисто я надаю перевагу другому методу, так як даний метод “шустріший”
Можливо і третій варіант, вписати ваш CSS Reset прямо у Style.css, алеу цьому багато недоліків і я не рекомендую таке робити.
Онлайн збірка CSS Reset
Ви можете використати наступний сайт для створення власного CSS Reset. Плюс, там є можливість використання різноманітних “бонусів”. Ось і саме посилання: “Online сборка reset.css”
На кінець поділюсь корисним посиланням на статтю мого партнера: Як встановити WordPress
(1 votes, average: 5.00 out of 6)
Loading ...
Адаптивне мега меню на CSS3
Я в Google+