О чём пойдёт речь

Неужели мы сейчас будем учить CSS? Ничего подобного. Предполагается, что вы уже знаете CSS.

Если нет, то обязательно подучите перед тем, как читать этот раздел. Мы будем останавливаться на особенностях CSS, понемногу, но очень конкретно.

Особенность квалификации JavaScript-разработчика заключается в том, что он не обязан выбирать цвета, рисовать иконки, «делать красиво». Он также не обязан верстать макет в HTML, разве что если является по совместительству специалистом-верстальщиком.

Вот что он должен уметь абсолютно точно — так это и разработать такую структуру HTML/CSS для элементов управления, которая не сломается, и с которой ему же потом удобно будет взаимодействовать.

Это требует отличного знания CSS в области позиционирования элементов, включая тонкости работы display, margin, border, outline, position, float, border-box и остальных свойств, а также подходы к построению структуры компонент (CSS layouts).

Многое можно сделать при помощи JavaScript. И зачастую, не зная CSS, так и делают. Но мы на это ловиться не будем.

Причина проста — как бы ни был сложен CSS, JavaScript ещё сложнее. С этим можно поспорить, особенно если достать из нафталина IE 6,7 (IE5.5 не завалялся?) и показать, что CSS там ну совсем никакой. Да и в IE8 тоже есть забавные баги.

Как правило, даже если CSS на вид сложнее — поддерживать и развивать его проще, чем JS. Поэтому овчинка стоит выделки.

Кроме того, есть ещё одно наблюдение.

Жить становится приятнее и проще, если есть хорошее знание и CSS и JavaScript.

Чек-лист

Ниже находится «чек-лист». Если хоть одно свойство незнакомо — это стоп-сигнал для дальнейшего чтения этого раздела.

• Блочная модель, включая:
  • margin, padding, border, overflow
  • а также height/width и min-height/min-width.
• Текст:
  • font
  • line-height.
• Различные курсоры cursor.
• Позиционирование:
  • position, float, clear, display, visibility
  • Центрирование при помощи CSS
  • Перекрытие z-index и прозрачность opacity
• Cелекторы:
  • Приоритет селекторов
  • Селекторы #id, .class, a > b
• Сброс браузерных стилей, reset.css

Почитать

Книжек много, но хороших — как всегда, мало.

С уверенностью могу рекомендовать следующие:

• CSS. Каскадные таблицы стилей. Подробное руководство. Эрик Мейер.
• Большая книга CSS, Дэвид Макфарланд
• CSS ручной работы, Дэн Седерхольм

Дальнейшие статьи раздела не являются учебником CSS, поэтому пожалуйста, изучите эту технологию до них. Это очерки для лучшей систематизации и дополнения уже существующих знаний.