В предыдущем уроке мы закончили на том, что хотели узнать, какие цвета можно обозначать словами.

На примере цветов я вам покажу, как можно подсмотреть в вебе любую чужую страницу и любой стиль на ней! Это чрезвычайно полезный инструмент Google, постоянный помощник веб-разработчика — Google Inspector.

Если у вас стоит другой браузер (Internet Explorer или Mozilla Firefox), то рекомендую скачать и установить Google Chrome. Как у веб-разработчика у вас вообще должны стоять все три браузера, чтобы проверять работу на всех. Но для работы лучше Хрома ничего не найти. Хотя исторически именно Мозилла первая создала и запустила расширение для браузера Firebug, который позволяет редактировать страницу в режиме онлайн, Хром все-таки сделал инструменты для разработчиков более удобными и интуитивно-понятными.

После того, как вы установили Google Chrome, сделайте его браузером по умолчанию (во время установки он спросит вас об этом). Теперь откройте свой index.html в этом браузере. Далее нажмите правой кнопкой мыши на текст (любой) и выберите последний пункт — Inspect:

Справа или снизу откроется окно Инспектора:

Чтобы сменить положение панели на экране — нажмите три точки в правом верхнем углу (рядом с крестиком «закрыть панель инспектора») и выберите другую раскладку.

Итак, вглядимся — в верхнем окне у нас весь наш html, а вод ним панель стилей. Стили на сером фоне (справа написано user agent stylesheet) не редактируются, это стили по умолчанию примнятые в браузере. Скроллим окошечко со стилями вниз:

Кликните мышкой прямо на слово blue в стилях. Слово станет «активным» — оно попадет в окошечко, в которое мы теперь можем писать что-то другое. Удалите слово (клавишей Delete или Backspace). И сразу выскачит длиннющий список всех доступных цветов!

Теперь просто кликайте на клавиши вверх-вниз, чтобы выбрать какой-нибудь другой цвет. Цвет текста в вашем html-документе будет меняться сразу же, в режиме онлайн! Настоящая магия )). Конечно, эти изменения не сохранятся в ваш файл. Как только выберите нужный цвет (у меня violet-фиолетовый), нажмите Enter, чтобы он туда встал, потом выделите его, скопируйте и вставьте вместо blue или знаков #RGB в файле common.css. Сохраните ыайл, обновите страницу в браузере — текст должен стать фиолетовым уже сам по себе.

Таким образом вы можете проинспектировать любую страницу в интрнете, любой объект, который вам понравился.

Чем еще хорошо Инспектор — когда вы очищаете пространство после двоеточия (:), и выскакивает окошко выбора вариантов, там будут только те стили, которые могут быть приписаны данному свойству. Например, кликните на значение стиля после font-family: — выскочит список доступных вариантов, перевод на картинке:

То есть, вы всегда можете подсмотреть, какие стили бывают у данного css-свойства, чтобы не написать некорректное значение, и к тому же подглядеть у других, если хотите сделать также. Так как стилей огромное количество, которое мы не будем здесь рассматривать — вам придется учить их по мере своего развития как веб-разработчика.

После того, как мы разобрались с основами — что такое HTML, как его писать и как подключать стили, вы можете перейти на сайт Кодебра, можно сразу на первый урок по CSS https://codebra.ru/ru/lessons-css/familiarity/1/1.

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

Как только вы научитесь основным свойствам стилей, и вам захочется продвинуться по пути создания прекрасных сайтов, рекомендую CSS Zen Garden.

Вам достаточно скачать оттуда в одну и ту же папку HTML и CSS файлы, открыть локально и исследовать, как и что там сделано. Например, вертикальные меню, или фиксированные фоны. Вы сможете потом копипастить эти стили в свои проекты и использовать в качестве основы. Чтобы открыть другие примеры — жмите кнопку View All Designs (Смотреть все дизайны).

Со стороны Блога Авебдизайн это, конечно, далеко не все! Но теперь будут исключительно уроки формата tips and tricks css, что переводится как «фишки и трюки css». Мы будем рассматривать сложные случаи.

Не забудьте потом изучить также html-таблицы и формы.