Среда, 11 Апреля 2012 13:43

Сброс стилей с помощью reset.css

Written by 
Оцени эту запись
(2 Голоса)

Идея сброса стилей появилась от того, что разные браузеры задают разные дефолтовые стили элементам. Например, значение margin и padding у списков ul, ol разные, от этого они по-разному будут отображаться в разных браузерах. Смысл создания и использования файла reset.css в том. чтобы обнулить эти дофолтовые отличия, чтобы дальше каждому списку задавать именно те значения, которые нужны по дизайну.

 

Пример:

 

ul, ol, ul li, ol li {margin: 0; padding: 0;}

 

В отдельном файле reset.css или вначале своего файла со стилями задаете нужные обнуления. а потом перебываете их нужными стилями.

 

Стандартный файл сброса стилей можно посмотреть здесь reset.css

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

 

Мой сброс стилей выглядит так

 

 

html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
blockquote, a, em, font, img, strong, b, u, i, 
dl, dt, dd, ol, ul, li, form, label, table,  
tbody, tr, th, td {
margin: 0px;
padding: 0px;
border: 0px;
outline: none ;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
font-size: 62.5%
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: ''; content: none;
}
:focus {
outline: none;
}
blockquote {
background: #222; padding: 10px;
}
table {
border-collapse: collapse;
border-spacing: 0px;
}
html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 14px;
background: #000;
color: #c0c0c0;
width: 100%;
height: 100%;
font-size: 12px;
}
a {
color: #7D26CD;
}
a:hover {
color: #8e37de;
}

 

Просмотрев стандартный и мой варианты, можете выбрать то, что вам будет нужно. Если какие-то  теги вы вообще не используете в верстке, то и их стили сбрасывать не нужно.

Остановлюся на некоторых моментах.

 

:focus {outline: none;}

 

Для элементов input и texarea в браузерах делается подсветка при клике. Когда кликаете на input, вокруг него появляется голубая рамочка. А это не очень уместно, если ваш дизайн и красных тонах. Потому я предпочитаю эту милость убирать.

 

textarea {resize: none;}

Элемент textarea в Safari и Chrome имеет возможность разтягиваться, если потянуть за правый нижный угол. Это полезно для пользователей, но не хорошо смотрится, если у вас красивая форма фиксированной ширины или высоты. Потому я предпочитаю убирать эту полезность, а в нужном месте задавать возможность растяжения только по горизонтали или только по вертикали. В начале файла (или в отдельном reset.css) нужно задать дефолтный цвет ссылки для сайта, а также цвет ссылки при наведении и т.д. Я понимаю, что вы не забудете указать цвет ссылок в меню, но можете забыть указать в комментариях или на какой-то отдельной странице с отдельным классом. Чтобы у вас неожиданно не появилась синяя ссылка в черно-белом дизайне, задайте всем ссылкам черный цвет, а потом уже меняйте его по мере необходимости.

 

font-size: 62.5%

 

Убирает отличия браузеров в соотношениях между em и px. Когда задано это свойство, 1em=10px.

 

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

 

 

body { font-family: Arial, Helvetica, sans-serif; line-height: 14px; color: #c0c0c0; font-size: 12px; }

 

 

Рекомендую ознакомиться со статьей Стандартные стили WebKit

 

 

 

Additional Info

Комментарии  

 
0 #2 4rx 12.04.2017 01:44
Passion the website-- very individual friendly and whole lots
to see!
Цитировать
 
 
-2 #1 electric guitars 02.03.2014 20:19
It is the beѕt time to make some plans for the fսture anԀ it is time tο be happy.
I've read thiѕ submit and if I may I dеѕzire to counѕel you few
fascinating thinɡs or tips. Perhոaps yoou could write subsequent articles regarding this article.
I want to гead more things about it!

my weblog :: electric guitars
cheap: http://electric-guitars.biz/
Цитировать
 

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов