Ну наконец-то перейдем к «раскрашиванию», то есть — к стилизации хтмл с помощью листа стилей. В скачанном вами проекте из самого первого урока лист стилей уже прикреплен.
Посмотрим в нашем индексе в область шапки — между тегами <head>…</head>.
Тут уже знакомые вам слова — link и href:
<link href="css/common.css" rel="stylesheet">
Как мы уже знаем из прикрепления картинок и выставления ссылок, то, что в кавычках после href — это урл (адрес) файла. У нас этот путь тоже относительный, как и в случае с картинкой — там мы обращались к папке img, а сейчас — к локальной папке css. Листы стилей и ява-скрипты ВСЕГДА, а также картинки в проекте ЧАЩЕ ВСЕГО должны быть указаны через относительный путь. Относительный — значит — относительно главной страницы. Потому что при переносе проекта с локального компьютера на удаленный сервер, или с одного сервера на другой, всегда должны «подцепиться». Если вы будете указывать полный путь (например: ваш_сайт/папка_сайта/css/лист_стилей.css), то при смене локации и удалении старого сайта страница потеряет все свои стили, ява-скрипты и изображения.
Какими могут быть относительные пути?
Если бы в папке css была папка styles, и наш лист стилей лежал в ней, то путь выглядел бы так:
css/styles/common.css
Тут вроде бы все понятно. Но что делать, если наоборот — наш index.html лежал бы в папке styles? А лист стилей common.css — в корне? (Корень здесь — папка html).
Тогда путь выглядел бы так:
../../common.css
Каждый блок ../ — означает — на одну папку вверх. Если бы индекс лежал на две папки «глубже» нашего .css, то он тащил бы стиль за две папки снаружи.
А если бы наш index.html лежал в папке img, а лист стилей — в своей папке css? Тогда путь был бы такой:
../css/common.css
То есть — выходим на одну папку вверх (../) и потом заходим в папку css (css/).
Но ближе к делу. Открываем наш лист стилей — файл common.css.
Видим знакомый нам body (тело). Найдем последнюю строку
color: #000;
Сотрите кусок #000 и вместо него напишите blue (без #!). Сохраните файл, откройте индекс в браузере. Вау — весь текст стал синим потому что
color — это цвет
blue — это синий.
То есть мы заменили цвет текста во всем боди на синий.
Что же такое было color: #000?
В вебе цвета чаще всего указываются в формате RGB. Аббревиатура от Red, Green, Blue (Красный, Зеленый, Синий). Это основные три цвета, которые в совем сочетании дают всю палитру наших мониторов. На картинке красный и желтый родили оранжевый:
Где же брать эти цифры? Если вы решили заниматься веб-разработкой серьезно, то вам обязательно нужен Adobe Photoshop. Скачайте и установите к себе на компьютер. Все файлы вам будут высылать дизайнеры в формате .psd, и все данные для своей работы вы будете брать из них благодаря этой программе.
Итак, найдем в Фотошопе ргб.
Запустим Фотошоп.
Для начала научитесь делать принт-скрины (скриншоты) — это очень пригодится впоследствии для наложения ваших собранных в хтмл проектов на выданный дизайн и выявления неточностей. Открываем нашу страницу в браузере и жмем кнопку Print Screen на клавиатуре (обычно клавиша наверху справа, поищите у себя, если нет — узнайте через Google, как делается принт-скрин на компьютере/ноутбуке вашей марки). Итак, нажали Print Screen. Зашли в фотошоп и нажали сочетание горячих клавиш Ctrl+N. N — это New [нью] — новый. Этим сочетанием вы откроете окно создания нового файла. После кнопки принт-скрин новый файл автоматически будет создан тех же размеров, что и ваш монитор. Просто нажмите Ok. Откроется новый файл, жмите Ctrl+V (добрый старый «вставить»). У меня получилось так:
Теперь найдем инструмент Пипетка или color picker, где color — известное нам уже слово «цвет», а picker [пикер] — сборщик. Кстати, пикап — тоже от слова pick, pick up — собирать (девочек).
Наводим пипетку на текст и кликаем мышкой
Ты заметишь, что внизу кубик сменил цвет — там появился тот, цвет, который ты выбрал. Теперь нажми на этот квадратик, откроется диалоговое окно цветовой палитры:
Вот эти цифры и есть наш RGB! Если ты теперь перетащишь кружок в цветовой палитре мышкой в правый нижний угол — в область черного, то увидишь, как знаки в окошке ргб поменяются на 000000. Шесть нулей обозначают абсолютно черный цвет, как шесть букв ffffff — абсолютно белый.
В вебе можно указывать цвет не шестью знаками, а тремя, если они повторяются, таким образом наш #000 — это сокращение от #000000. Обязательно для указания цвета в стилях ставить знак решетки (#) перед цифрами, в английском языке решетка заменяет наш знак номера (№). Мы говорим — цвет номер такой-то. Однако, если мы указываем цвет словами, то решетка не нужна, мы просто пишем: blue, green, red и т.п.
Попробуйте теперь взять любой цвет в палитре, скопировать знаки из окошечка и вставить их вместо blue в файл css. Не забудьте решетку. Сохраните, обновите — вуаля, цвет текста стал другим.
А какие еще слова знает html для обозначения цвета? Огромное количество )), и сейчас я научу вас, как подглядывать чужой код и заставить Google генерировать его для вас автоматически. Смотрите следующий урок.
You must be logged in to post a comment.