Мои первые ошибки или «Как правильно верстать»
Уже как два года занимаюсь версткой, и в основном только ей. И уже накопил громадный опыт по CSS/HTML. И хочу поделиться некоторыми секретами и важными вещами для любопытных.
Каждый начинающий изучает CSS с помощью интернета. СТОП! Не стоит этого делать. Я рекомендую сначала купить книгу «CSS — Каскадные таблицы стилей». Чтобы понять, какие параметры существуют для селекторов. После трехкратного прочтения, уже можно искать дополнительную информацию по CSS в интернете.
Смысл этой статьи — указать на те ошибки, которые я делал по глупости в начале фриланса.
Селектор *
Никогда не используйте в качестве селектора «*». Это принесет большие проблемы по написанию стилей для всех элементов, так как данное определение устанавливает для всех селекторов размер шрифта в 11px. А как же заголовки, параграфы, ячейки и так далее? Это, конечно, можно исправить с использованием правила «!important»:
* {
font-size : 11px
}
td {
font-size : 12px !important
}
Это же относится и к цвету текста. Не использовать в при данном селекторе правило color, т.е.:
* {
color : #000
}
Длинные описание стилей
.box {
margin-right : 20px;
margin-left : 20px;
margin-top : 3px;
}
C этого начинает каждый студент, и я начинал с этого тоже. Эту запись можно упростить, если вы, конечно, прочли «CSS — Каскадные таблицы стилей»:
.box {
margin : 3px 20px 0
}
Это был пример для отступов, это касается также полей и шрифтов.
Длинные HEX цвета
.color {
color : #000000;
background : #ffffff;
border-bottom : #ff0000
}
Согласно W3C-стандартам, эту запись можно сократить. Правило простое: если в HEX три пары символов, удаляем каждый второй повторяющийся.
.color {
color : #000;
background : #fff;
border-bottom : #f00
}
Удаляйте последнюю точку с запятой
.color {
color : #000;
background : #fff;
border-bottom : #f00;
}
Последнее описание стиля работает и без последней точки с запятой.
.color {
color : #000;
background : #fff;
border-bottom : #f00
}
Не используйте RESET CSS
Если, конечно, вы не сами это написали. Есть пример в Eric A. Meyer. Если вы все-таки решите использовать, то вы получите самый большой гемор для себя в плане верстки. Так как в перечне есть практически все селекторы. Грубо говоря, вы установите все значения по умолчанию.
И, соответственно, вы не сможете для определенной ячейки выставить выравнивание по правой стороне с отступом, так как первым будет обрабатываться reset, и у него будет приоритет перед уникальным правилом. И чтобы исправить эту ошибку вам придется использовать правило «!important», о котором я написал выше.
В любом случае, каждый проект уникальный. Проще написать стандартную болванку CSS, и потом уже ее править.
Господа, учитесь.
все правила обрадатываются по порядку и если в ресет.css будет h1 { margin: 0; padding: 0; }
а в main.css h1 { margin-bottom: 25px; }
то второе применится точно)
+ использование !impotant это грязно и создаёт кучу проблем
лутше после основных таблиц стилей в html включить
IF IE link rel=ie.css
и там переопределить что надо
Прошло пол года) Так забавно читать свой пост, когда в CSS был совсем глуп)
Книгу, которую Вы рекомендуете я так и не купил)
Нашел всю необходимую инфу в инете.
Хорошую статью (для тогдашнего уровня знаний) я нашел на shugich.ru/blog/2009-07-06-100
;)
Думаю, что проще сначала сверстать, как удобней, потом, если уж совсем лень не замучила, оптимизировать код. :)
А, да, к вышенаписанному:
я белый цвет вообще пишу — "white" в цсс-е.
:)
Но я категорически несогласен с тем, что надо купить книгу, типа интернет не даст достоверной информации. Это реклама книги - НЕ БОЛЕЕ.
Я сам верстальщик. Изучал css посредством интернета. Как правильно работать с CSS есть и в инете. Ошибки выдуманы, высосаны из пальца. В частности, написание #fff не гарантирует прописание белого цвета. Некоторые браузеры (не Windows) определяют #fff, как синий цвет. Поэтому именно БЕЛЫЙ цвет прописывается полностью - #FFFFFF
Не спорю, это не критично, мало кто пользуется такими браузерами, но ведь здесь речь идёт о стандартах, о правильном написании кода.
Написание #FFF не критично, но правильно #FFFFFF