Html-старт для дітей
Ну нарешті-то перейдемо до «розфарбовування», тобто - до стилізації хтмл за допомогою листа стилів. У викачаному вами проект з самого першого уроку лист стилів вже прикріплений.
Подивимося в нашому індексі в область шапки - між тегами
....Тут вже знайомі вам слова - link і href:
Якими можуть бути відносні шляхи?
Якби в папці css була папка styles, і наш лист стилів лежав в ній, то шлях виглядав би так:
Тут начебто все зрозуміло. Але що робити, якщо навпаки - наш index.html лежав би в папці styles? А лист стилів common.css - в корені? (Корінь тут - папка html).
Тоді шлях виглядав би так:
Кожен блок ../ - означає - на одну папку вгору. Якби індекс лежав на дві папки «глибше» нашого .css, то він тримав би стиль за дві папки зовні.
А якби наш index.html лежав в папці img, а лист стилів - в своїй папці css? Тоді шлях був би такий:
Тобто - виходимо на одну папку вгору (../) і потім заходимо в папку css (css /).
Але ближче до справи. Відкриваємо наш лист стилів - файл common.css.
Бачимо знайомий нам body (тіло). Знайдемо останній рядок
Зітріть шматок # 000 і замість нього напишіть 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 генерувати його для вас автоматично. Дивіться наступний урок.