73 lines
No EOL
4.8 KiB
Markdown
73 lines
No EOL
4.8 KiB
Markdown
# О чём пойдёт речь
|
||
|
||
Неужели мы сейчас будем учить CSS? Ничего подобного. Предполагается, что вы *уже* знаете CSS, во всяком случае понимаете его на таком уровне, который позволяет делать Web-страницы.
|
||
|
||
[cut]
|
||
Особенность квалификации JavaScript-разработчика заключается в том, что он не обязан выбирать цвета, рисовать иконки, "делать красиво". Он также не обязан верстать макет в HTML, разве что если является по совместительству специалистом-верстальщиком.
|
||
|
||
**Вот что он должен уметь абсолютно точно -- так это и разработать такую структуру HTML/CSS для элементов управления, которая не сломается, и с которой ему же потом удобно будет взаимодействовать**.
|
||
|
||
Это требует **отличного знания CSS в области позиционирования** элементов, включая тонкости работы `display`, `margin`, `border`, `outline`, `position`, `float`, `border-box` и остальных свойств, а также подходы к построению структуры компонент (CSS layouts).
|
||
|
||
Многое можно сделать при помощи JavaScript. И зачастую, не зная CSS, так и делают. Но мы на это ловиться не будем.
|
||
|
||
[summary]
|
||
Если что-то можно сделать через CSS -- лучше делать это через CSS.
|
||
[/summary]
|
||
|
||
Причина проста -- как бы ни был сложен CSS, JavaScript ещё сложнее. С этим можно поспорить, особенно если достать из нафталина IE 6,7 (IE5.5 не завалялся?) и показать, что CSS там ну совсем никакой. Да и в IE8 тоже есть забавные баги.
|
||
|
||
**Как правило, даже если CSS на вид сложнее -- поддерживать и развивать его проще, чем JS**. Поэтому овчинка стоит выделки.
|
||
|
||
Кроме того, есть ещё одно наблюдение.
|
||
|
||
[summary]
|
||
Знание JavaScript не может заменить знание CSS.
|
||
[/summary]
|
||
|
||
Жить становится приятнее и проще, если есть хорошее знание и CSS и JavaScript.
|
||
|
||
## Чек-лист
|
||
|
||
Ниже находится "чек-лист". Если хоть одно свойство незнакомо -- это стоп-сигнал для дальнейшего чтения этого раздела.
|
||
|
||
<ul>
|
||
<li>Блочная модель, включая:
|
||
<ul>
|
||
<li>`margin`, `padding`, `border`, `overflow`</li>
|
||
<li>а также `height/width` и `min-height/min-width`.</li>
|
||
</ul>
|
||
</li>
|
||
<li>Текст:
|
||
<ul>
|
||
<li>`font`</li><li>`line-height`.</li>
|
||
</ul></li>
|
||
<li>Различные курсоры `cursor`.</li>
|
||
<li>Позиционирование:
|
||
<ul><li>`position`, `float`, `clear`, `display`, `visibility`</li>
|
||
<li>Центрирование при помощи CSS</li>
|
||
<li>Перекрытие `z-index` и прозрачность `opacity`</li>
|
||
</ul>
|
||
</li>
|
||
<li>Cелекторы:
|
||
<ul><li>Приоритет селекторов</li>
|
||
<li>Селекторы `#id`, `.class`, `a > b`</li>
|
||
</ul>
|
||
</li>
|
||
<li>Сброс браузерных стилей, <a href="http://meyerweb.com/eric/tools/css/reset/">reset.css</a>
|
||
</li>
|
||
</ul>
|
||
|
||
## Почитать
|
||
|
||
Книжек много, но хороших -- как всегда, мало.
|
||
|
||
С уверенностью могу рекомендовать следующие:
|
||
|
||
<ul>
|
||
<li><a href="http://www.ozon.ru/context/detail/id/3881079/?partner=iliakan">CSS. Каскадные таблицы стилей. Подробное руководство. Эрик Мейер.</a>
|
||
<li><a href="http://www.ozon.ru/context/detail/id/5647176/?partner=iliakan">Большая книга CSS, Дэвид Макфарланд</a></li>
|
||
<li><a href="http://www.ozon.ru/context/detail/id/5510936/?partner=iliakan">CSS ручной работы, Дэн Седерхольм</a></li>
|
||
</ul>
|
||
|
||
Дальнейшие статьи раздела не являются *учебником* CSS, поэтому пожалуйста, изучите эту технологию до них. Это *очерки для лучшей систематизации и дополнения* уже существующих знаний. |