Автор: CrucialWebHosting.com
Перевод: Всеволод Козлов

При работе с CSS новички (да и не только) допускают одну и ту же грубейшую ошибку – забывают сбрасывать дефолтные стили браузера. Обычно эта оплошность приводит к некорректному отображению сайта в различных браузерах.

Когда так происходит, верстальщики начинают злостно обвинять тот или иной «некорректно» работающий браузер во всех мирских грехах, в то время как виноваты именно они сами, их невнимательность и халатность!

Поэтому Вы должны взять себе за правило, «намотать на ус», как Вам больше нравится, каждый раз перед началом создания таблицы стилей CSS производить сброс дефолтных стилей браузера.

Наиболее популярным и распространенным способом сброса дефолтных стилей является global reset, но он не является панацеей, при работе с ним также возникают трудности. Например, под него попадают такие элементы форм как кнопки и fieldset’ы. Из-за этого они теряют свой первоначальный, стандартный стиль оформления, предустановленный браузером.

Чтобы избежать подобных «переусердствований», Вам не следует повсеместно использовать global reset, вместо него просто перечислите те элементы, дефолтные параметры которых требуется сбросить!

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

/***** Global Settings *****/
html, body {
border:0;
margin:0;
padding:0;
}
body {
font:100%/1.25 Arial, helvetica, sans-serif;
}
/***** Headings *****/
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}
h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}
h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}
h3 {
font-size:1em;
font-weight:bold;
}
/***** Common Formatting *****/
p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}
ul, ol {
padding:0 0 1.25em 2.5em;
}
blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}
small {
font-size:0.85em;
}
img {
border:0;
}
sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}
sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}
acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}
/***** Links *****/
a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}
/***** Forms *****/
form {
margin:0;
padding:0;
display:inline;
}
input, select, textarea {
font:1em Arial, helvetica, sans-serif;
}
textarea {
width:100%;
line-height:1.25;
}
label {
cursor:pointer;
}
/***** Tables *****/
table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}
table tr td {
padding:2px;
}
/***** Wrapper *****/
#wrap {
width:960px;
margin:0 auto;
}
/***** Global Classes *****/
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }
.wrap { width:960px;margin:0 auto; }
.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }
.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }

Источник: Master Stylesheet: The Most Useful CSS Technique
























































































































Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: