09 Октября 2008

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

Уже как два года заниамюсь версткой, и в основном только ей. И уже накопил громадные опыт по CSS/HTML. И хочу поделиться некоторыми секретами и важными вещами для любопытных.

Каждый начинающий изучает CSS с помощью интернета. СТОП! Не стоит этого делать. Я рекомендую сначала купить книгу "Основы CSS". Чтобы понять какие параметры существуют для селекторов. После трехкратного прочтения, уже можно искать дополнительную информацию по CSS в интернет.

Смысл статьи, указать на те ошибки, которые я делал по глупости в начале фриланса.

* { font-size:11px;} 

Ни когда не используете в качестве селектора "*". Это даст большие проблемы по написанию стилей для всех элементов. Так как данное определение устанавливает для всех селекторов размер шрифта в 11px. А как же заголовки, параграфы, ячейки и так далее? Это конечно можно исправить с использованием правила "!important"

* {font-size:11px;}

td {font-size:12px !important;} 

Это же относится и к цвету текста. Не использовать в при данном селекторе правило color, т.е.

* {color: #000;}

Длинные описание селекторов

.top_div { margin-right:20px; margin-left:20px; margin-top:3px; }

C этого начинает каждый студент, и я с этого тоже. Эту запись можно упростить, если вы конечно прочитали "Основы CSS"

top_div { margin:3px 20px 0;}

Это был пример для отступов, это качается также полей, шрифтов. 

Длинные CSS цвета

.color { color:#000000; background:#ffffff; border-bottom:#ff0000; }

Согласно w3c стандартам, эту запись можно сократить 

.color { color:#000; background:#fff; border-bottom:#f00; }

Не используйте RESET CSS

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

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

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

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

Теги: ,

Комментарии 

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

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

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

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

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

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

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

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

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

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

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

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