Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
8 г. назад

Мои первые ошибки или «Как правильно верстать»

Уже как два года занимаюсь версткой, и в основном только ей. И уже накопил громадный опыт по 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-стандартам, эту запись можно сократить:

.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

Если, конечно, вы не сами это написали. Есть пример в Никиты Селецкого. Если вы все-таки решите использовать, то вы получите самый большой гемор для себя в плане верстки. Так как в перечне есть практически все селекторы. Грубо говоря, вы установите все значения по умолчанию.

И, соответственно, вы не сможете для определенной ячейки выставить выравнивание по правой стороне с отустпом, так как первым будет обрабатываться reset, и у него будет приоритет перед уникальным правилом. И чтобы исправить эту ошибку вам придется использовать правило «!important», о котором я написал выше.

В любом случае, каждый проект уникальный. Проще написать стандартную болванку CSS, и потом уже ее править.

Господа, учитесь.

Комментарии

#DareD16.12.2008 06:39
Всё, конечно правильно описано.

Но я категорически несогласен с тем, что надо купить книгу, типа интернет не даст достоверной информации. Это реклама книги - НЕ БОЛЕЕ.

Я сам верстальщик. Изучал css посредством интернета. Как правильно работать с CSS есть и в инете. Ошибки выдуманы, высосаны из пальца. В частности, написание #fff не гарантирует прописание белого цвета. Некоторые браузеры (не Windows) определяют #fff, как синий цвет. Поэтому именно БЕЛЫЙ цвет прописывается полностью - #FFFFFF

Не спорю, это не критично, мало кто пользуется такими браузерами, но ведь здесь речь идёт о стандартах, о правильном написании кода.Ответить
#PaLyCH16.12.2008 12:51
Интересно, то это за браузеры? Скорее всего древние оченьОтветить
#DareD16.12.2008 16:01
Да, достаточно старые, вы правы.

Я же говорю, что прописание белого цвета обязательно как #FFFFFF. Можно и #FFF. Можно и white.

Но правильно будет - #FFFFFF! И это соответствует стандартам.Ответить
#DareD16.12.2008 16:03
Неправильно выразился...

Написание #FFF не критично, но правильно #FFFFFF. Вот что хотел сказать...Ответить
#cybr06.01.2009 20:14
Цитата:
.top_div { margin:3px 20px 0 20px;}
.top_div { margin:3px 20px 0;}

;)Ответить
#PaLyCH06.01.2009 20:48
Само собойОтветить
#cybr06.01.2009 21:01
Правда, иногда это запутывает.
Думаю, что проще сначала сверстать, как удобней, потом, если уж совсем лень не замучила, оптимизировать код. :)

А, да, к вышенаписанному:
я белый цвет вообще пишу — "white" в цсс-е.

:)Ответить
#PaLyCH07.01.2009 23:23
#FFF все таки короче на один символОтветить
#Станислав26.01.2010 13:17
Автор, а Вы не могли бы назвать автора книги "Основы CSS"?Ответить
#PaLyCH12.04.2010 08:54
#Станислав02.07.2010 16:19
Эх... Было время... Мой коммент 26.01.2010 13:17 ...
Прошло пол года) Так забавно читать свой пост, когда в CSS был совсем глуп)
Книгу, которую Вы рекомендуете я так и не купил)
Нашел всю необходимую инфу в инете.
Хорошую статью (для тогдашнего уровня знаний) я нашел на shugich.ru/blog/2009-07-06-100Ответить
#Neonailol26.11.2010 16:55
про ресет штот нето написано
все правила обрадатываются по порядку и если в ресет.css будет h1 { margin: 0; padding: 0; }
а в main.css h1 { margin-bottom: 25px; }
то второе применится точно)

+ использование !impotant это грязно и создаёт кучу проблем
лутше после основных таблиц стилей в html включить
IF IE link rel=ie.css
и там переопределить что надоОтветить

Добавить комментарий

Наверх