Ми вивчили, як зробити гарну
наповнену веб-сторінку з виділеним текстом
та картинками, але чогось не вистачає – стилю.
Моя сторінка виглядає так само,
як і ті сторінки, які робили ви.
Чорний текст, білий фон, однаковий шрифт,
все однакове з верху сторінки до низу.
Але ви бачили, що в Інтернеті
веб-сторінки дуже відрізняються одна від одної.
Погляньте на сайт Khan Academy:
різні кольори, шрифти і розміри.
Зробіть це зараз!
Поставте на паузу це відео і перегляньте декілька веб-сайтів.
Чим вони відрізняються?
Що вам подобається, у їхніх стилях, а що ні?
Я почекаю вас тут.
Важливо побачити, наскільки різними можуть бути сайти.
Тому що дуже скоро ви також навчитесь робити
ваші сторінки нетиповими, ви захочете зробити їх такими, щоб
вони приносили вам задоволення, оскільки вони представляють вас,
і в той же час приносили задоволення іншим.
Щоб змонтувати сторінку, нам потрібно
вивчити нову мову - CSS.
Вона розшифровується як "Каскадні таблиці стилів"
і містить в собі стилі, які ми можемо застосувати
до різних частин нашої сторінки.
Ми вставили CSS в HTML, але насправді – це не HTML.
Тому ми маємо вивчити нову мову
і постаратись не сплутати CSS і HTML.
Ми побачимо, як використовувати стилі CSS у різних аспектах,
таких як шрифти, розміри і розмітка сторінки.
Однак почнемо ми з дечого цікавішого – кольору.
Як щодо того, щоб змінити заголовки
на сторінці на трав'янисто-зелений?
Для початку нам потрібно додати тег (укр. "стиль")
всередині контейнера <head>.
Коли браузер побачить це, він подумає:
"Добре, все, що тут є – це CSS.
Замість парсера HTML, я використаю парсер CSS,
щоб зрозуміти його."
Тут ми додамо правило стилю CSS.
Правило стилю має селектор, який каже браузеру,
якій частині сторінки потрібно додати стиль, і пояснення,
які кажуть браузеру, як оформити цю частину.
Якщо ми хочемо оформити всі заголовки h2 на нашій сторінці,
ми вкажемо селектор – h2.
Потім поставимо фігурні дужки.
Переконайтесь, що вони фігурні, а не квадратні.
Квадратні не спрацюють.
Всередині ми напишемо пояснення,
які мають властивості і значення.
Для того, щоб змінити колір тексту, ми використаємо властивість "color" (укр. колір ).
Потім ми ставимо двокрапку, і тепер нам потрібно придумати значення.
Нам потрібно сказати браузеру, який колір ми хочемо.
Гаразд, ми можемо просто написати "зелений" (англ. green).
Він зрозуміє, тому що зелений – це загальновживаний колір.
Але це не той зелений, який я хочу.
Я хочу трав'янисто-зелений.
Якщо я напишу трав'янисто-зелений, оу...
Тепер браузер спантеличений, і тому робить загаловок
знову чорним, тому що він ніколи не чув про трав'янисто-зелений колір.
Якщо ми хочемо мати можливість встановити будь-який колір,
ми маємо використати спектр RGB (R - red, G - gree, B - blue),
про який ви, можливо, чули на уроках мистецтва.
Вам не потрібно бути в цьому експертом,
тому що тут ми маємо для вас палітру кольорів RGB.
Щоб використати її, просто напишіть "rgb" і круглі дужки.
З'явиться палітра кольорів, і рухаючи мишкою
всередині неї, ви зможете вибрати собі колір
і побачити, як ваша сторінка відразу ж змінюється.
Коли ви будете задоволені, клацніть мишкою.
Добре, а ви знаєте, що означають ці три числа,
що знаходяться всередині дужок?
Це компоненти червоного, зеленого та синього,
що утворюють потрібний нам колір.
Основна річ про селектор h2, який ми використали,
це те, що він такий же самий, як і всі інші h2 на цій сторінці.
Тому ми можемо змінити одразу декілька заголовків,
оскільки ми хочемо, щоб всі заголовки h2, які будуть знайдені
на сторінці, були зеленими.
Якщо ви продовжите вивчати CSS, ви знайдете
багато інших способів змінювати частини сторінки,
наприклад, зможете змінити лише декілька заголовків h2.
Але ви можете зробити багато навіть з цими основними селекторами.
Як щодо того, щоб вивчити ще одне правило стилю CSS?
Цього разу ми зробимо фон блакитним.
Як ми можемо змінити фон на сторінці?
Гаразд, який тег охоплює цілу сторінку?
Це не <h1>,
не <p>, і не <img>.
Це тег <body> (тег тіла сторінки). Пам'ятай, все, що можна побачити на сайті,
завжди знаходиться всередині тега <body>.
Тому, якщо ми хочемо оформити всю сторінку,
ми маємо використати селектор і вибрати цей тег.
Тому ми пишемо "body".
Тепер замість "колір", ми напишемо "колір фону"(англ. "background color"),
ставимо двокрапку, далі "rgb" і круглі дужки.
З'являється палітра, і я обираю блакитний колір,
що наштовхує мене на думки про наляканих кроликів під блакитним небом.
Та-дам!
Погляньте на мою стильну сторінку.
Існують сотні інших властивостей СSS,
окрім кольору та кольору фону,
але з цих найцікавіше починати.
Після того, як я закінчу лекцію, побавтесь з кольорами,
які я вибрала і зробіть так, щоб ця сторінка
виглядала, як ваша, а не як моя.
Добре? Починайте!
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.ogr"