Базовые правила построения CSS
Думаю сегодня я Америку не открою, но все же некоторые забывают простые и очевидные вещи. Хотя начинающим верстальщикам урок будет полезен.
Продолжаем копилку знаний!
И так, "кроссбраузерность" что это и с чем ее едят. Кроссбраузерность - это свойство сайта корректно отображаться и работать во всех браузерах. Коль мы повели речь о кроссбраузерности, следовательно некоторые браузеры отображают свойства тегов по разному, поэтому начиная писать css стиль для сайте, следует сначала обнулить все свойства тегов. Я это делаю так:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big , cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, center, dl, dt, dd, ul, li, fieldset, form, label, legend, table, caption {
background: transparent;
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
padding: 0;
outline: 0;
vertical-align: baseline;
}
table {border-collapse:collapse;border-spacing:0;}
не забываем про HTML5 и добавляем новые или давно забытые теги:
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
// на всякий случай принудительно объявим блочный метод
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
для наглядности я привел каждое свойство с новой строки, но почему то мне привычней писать в одну строку. Так и читается лучше и поиск по свойствам не заставляет насиловать скролл. Да и пробелов стараюсь ставить как можно меньше, эта привычка осталась со времен dial-up интернет-соединения. А выглядеть это будет так:
article {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:none;}
Перейдем к шрифтам. Я привык размеры шрифтов привязывать к базе, основной font я описываю в теге body, причем использую универсальное свойство, которое многие игнорируют. Заголовки объявляю в процентах от базового. Пример:
// где 12px - размер шрифта
// 1.4 - межстрочное расстояние (интерлиньяж). Можно указывать и фиксированный интерлиньяж в px
body {
font: 12px/1.4 Tahoma, sans-serif;
}
h1 {font-size: 180%;}
h2 {font-size: 160%;}
h3 {font-size: 140%;}
h4 {font-size: 120%;}
Если мы часто пользуемся классами(class) в написании контента, я описываю универсальные классы с float, который склеивается с другими. Думаю не для никого не секрет что классы можно склеивать class="atrib float_left cs_other". Чаще всего такая техника используется с графическим контентом (img)
.float-left {
float: left;
}
.float-right {
float: right;
}
Еще один класс без которого я не представлю верстки - clearfix, отменяющий обтекание.
.clearfix, #clearfix {
clear:both;
}
Я постарался описать те базовые элементы верстки без которых по моему не обойтись ни одному верстальщику, хотя их конечно же гораздо больше.
Чуть позже я постараюсь описать технику создания анимации по средствам CSS3 без использования JS и фреймворков.
