n-wp.ru — блог о WordPress

Несколько примеров работы с CSS: 62,5% и принудительный сброс стилей

Многие из вас уже имеют опыт сайтостроительства, но большинство заходят в тупик даже в самых простых случаях. Говорю это, так как сам являюсь таким же обычным пользователем, для которого что PHP, что CSS — дремучий лес, в который вхожу каждый раз очень осторожно, с фонариком, компасом, подробной картой и путеводителем. Если без них — тут же потеряюсь. Все, лирика закончена — начинаются жестокие будни. Очень часто я получаю комментарии и вопросы, из которых понимаю, что многие не знают самых простых приемов оформления содержимого с помощью CSS. Я решил устранить этот пробел, и написать несколько постов, в которых рассказать о некоторых удобных приемах, которые можно использовать в CSS. Конечно, я не гуру, и учить чему-то не берусь, но вы можете взять эти посты в качестве шпаргалок, и применять на практике. Начну с самого главного — с основных приемов работы с текстом.

Правило 62,5%

Установите для элемента body размер текста 62,5%. Что это дает? При таком относительном размере легче устанавливать точные размеры в единицах em (относительный размер) и px (абсолютный размер) — если размер шрифта равен 62.5%, то в абсолютной величине это составляет 10px. Таким образом 1em = 10px, а 1.2em = 12px. Удобно считать при проставлении всех остальных размеров в относительных величинах. Пример

Принудительный сброс стилей

Лучше принудительно обнулять стили при загрузке страницы. Это связано с тем, что браузеры по-разному обрабатывают CSS, и совершенно не понятно, как они воспримут относительные размеры, указанные в коде вашей страницы, перейдя с другой, где такие же параметры были отличными от текущих. Именно поэтому лучше сразу определить для всех браузеров точки отсчета, на которые они будут ориентироваться при прорисовке страницы. Дизайнером Эриком Мейером еще в 2007 был выработан список параметров CSS, которые он рекомендует применять в самом начале файла CSS. Этот список был взят многими на вооружение, став практически фундаментальным примером для использования.
[code lang=»css] /* обнуление основной разметки */
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: 62,5%;
font-family: inherit;
vertical-align: baseline;
}
/* обнуление стиля focus! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* обнуление разметки таблиц и цитат */
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: «» «»;
}

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

2 комментария

  • Попытался сделать 62.5%, но это сделало 1em равным 6px в Chrome и Opera, а в Firefox и IE9 ещё меньше — около 1px, судя по высоте строки в IE9.. 10px даёт 91%. Но из-за разных размерах в разных браузерах не буду использовать этот приём ):