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

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

Правило 62,5%

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

body {
font-size: 62.5%; /* 10px - базовый размер, точка отсчета */
}

p {
font-size: 1.4em; /* 1.4em = 14px, стандартный размер текста */
}

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

Лучше принудительно обнулять стили при загрузке страницы. Это связано с тем, что браузеры по-разному обрабатывают 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 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

2 Комментарии

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

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*