GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Учебник
  • Курсы
  • Форум
  • Тесты знаний
  • Node.js
  • Webpack
  • Gulp
  • React.js
  • Angular
  • Git: курс
  • Git: разное
  • CSS для JavaScript-разработчика

This view

  • Original page
  • New address

GeezerVison is showing learn.javascript.ru — О чём пойдёт речь

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

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

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

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

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

Если что-то можно сделать через CSS – лучше делать это через CSS.

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

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

Знание JavaScript не может заменить знание CSS.

Жить становится приятнее и проще, если есть хорошее знание и 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
  • Селекторы:

    • Приоритет селекторов
    • Селекторы #id, .class, a > b
  • Сброс браузерных стилей, reset.css

Почитать

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

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

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

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

Это очерки для лучшей систематизации и дополнения уже существующих знаний.

Предыдущий урокСледующий урок
Поделиться
Карта учебника
Проводим курсы по JavaScript и фреймворкам.

Комментарии

перед тем как писать…
  • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.