Сброс стилей css!

Привет,  дорогие читатели!  В одной из предыдущих статей я обещал, что буду стараться по-чаще писать в  блог, вот  пока свое слово держу :). Правда признаюсь сегодня, как и впрочем,  в прошлый раз, статья будет совсем коротенькая. И поговорим мы сегодня с вами о таком понятии как: сброс стилей css. Расскажу я вам зачем используют сброс css стилей и какие виды сбросов существует на данный момент. Итак приступим!

Зачем нужен сброс стилей css?

Дело в том, что практически каждый html элемент, по умолчанию,  имеет  заранее определенный набор стилей.  То есть если мы сейчас создадим простую html страницу с какой-либо минимальной разметкой,  вот  к примеру с такой:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Сброс стилей css</title>
</head>
<body>
	<h1>Тестовый заголовок</h1>
	<p>Простой текст, который написан исключительно для демонстрации отображения 
	параграфа и его изначальных стилей. Данный текст не несет никаокй смысловой нагрузки это просто текст</p>
</body>
</html>

И откроем данную страницу в браузере, то мы увидим, что все заданные нами элементы имеют определенный набор свойств и правил.

reset-css

К примеру,  заголовок имеет верхний и нижний отступ, параграф имеет отступ снизу, а самое главное  элемент body имеет внутренние отступы. Хотя мы никаких css стилей не задавали, мы открыли голую разметку.

Вы можете сказать, ну и что подумаешь, небольшие отступы, а то что заголовки и параграфы имеют стили по умолчанию наоборот хорошо, не нужно самому их задавать, смотрится не плохо вроде бы. Ну не тут-то было, проблема здесь в том, что в каждом браузере некоторые стили (в частности внутренние отступы )  отличаются. То есть в разных браузерах одна и та же разметка будет  выглядеть немного иначе. Я сейчас не буду  лезть   в исторические дебри  и выяснять кто прав и кто виноват, почему так сложилось и как так вышло  что конкуренты  не ходили друг к другу   в гости  и не спрашивали разрешения какие им стили по умолчанию использовать, мы имеем то что имеем.

В общем, смысл всего вышесказаного в том, что разные браузеры некоторые заданные по умолчанию   стили отображают по разному.

Как же решить данную проблему? На самом деле все очень просто, все что нужно сделать это как бы «затереть» все не нужные нам стили. О каких «ненужных стилях» идет речь? Конечно же в первую очередь это внешние и внутренние отступы, именно они разнятся в разных браузерах.  Именно с обнулением данных свойство складывается самый простой  css reset (так еще называют сброс стилей css).  Вот как  это самый простой сброс выглядит:

	*{
		padding:0;
		margin:0;
	}

Думаю, пояснений, что такое marging:0; и padding:0 не нужно и так понятно, что данными свойствами мы обнуляем все внешние и внутренне отступы элемента. Что касается  селектора «*», то да, это так называемый универсальный селектор, который говорит, что свойства нужно применить абсолютно ко всем элементам на странице.

Символ «*» пришел к css из регулярных выражений там, данный символ тоже обозначает что выбрать нужно все элементы. После того как мы применим данный сброс для нашей страницы, мы увидим следующее:

result-reset

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

Я могу точно сказать, что данный сброс стилей на данный момент является самым популярным,  им пользуются многие верстальщики. Но справедливости ради должен признать, что он в то же время является самым не однозначным.  До сих пор на форумах ведутся дискуссии по поводу всех достоинств и недостатков данного метода.

Дело в том, что использования сброса для всех элементов на странице (используя универсальных селектор) в некоторой степени добавляет  работы верстальщику,  ведь в этом случаю  стили обнуляются в абсолютно всех элементах,  в том числе и списках, цитатах, параграфах, таблицах и т. д. Из-за чего разработчику приходится по новой задавать свойства внутренних и вреднейших отступов для данных элементов. Так же раньше когда еще был жив IE6  были и другие проблемы связанные с использованием  универсального селектора «*» в данном браузере.

Что касается достоинств сброса css стилей таким способом, то конечно же это простота. Вам не нужно парится для каких элементов отступы оставлять для каких убирать, вы просто двумя строчками кода решаете эту проблему.

Конечно же вышеописанный сброс стилей не единственный,  их существует целое множество,  более того многие разработчики используют свои собственные сбросы. Одни из самых популярные, которые я встречал на просторах интернета — это reset Эрика Мейера,  Тантека Челика ,   Yahoo CSS Reset  и многие другие. Я специально не привожу данные сбросы в этой статье, так как они настолько популярные, что вы легко можете их найти в сети, гугл вам в помощь.

В любом случаи вы сами для себя должны определить какой сброс стилей лучше использовать.  Я в свое время часто пользовался сбросом  Эрика Мейера, сейчас же больше предпочитаю простой сброс используя универсальный селектор «*». Здесь нельзя сказать, что лучше, мнения по этому поводу уже давно разделились.

Но как бы там ни было CSS Reset  нужно использовать обязательно, это поможет вам избежать проблем отображения верстки в разных браузерах, и, в конченом счете, с экономит кучу времени и сил.

На этом буду заканчивать данную статью, в итоге пост получился не такой уж маленький как я писал в начале, но надеюсь вы дочитали его до конца и данный материал вам поможет в вашей работе. На этом у меня все, до новый встреч!!!