Return to Video

Основи CSS (Відео версія)

  • 0:01 - 0:02
    Ми вивчили, як зробити гарну
  • 0:02 - 0:04
    наповнену веб-сторінку з
    виділеним текстом
  • 0:04 - 0:08
    та картинками, але чогось
    не вистачає – стилю.
  • 0:08 - 0:09
    Моя сторінка виглядає так само,
  • 0:09 - 0:11
    як і ті сторінки, які робили ви.
  • 0:11 - 0:14
    Чорний текст, білий фон, однаковий шрифт,
  • 0:14 - 0:16
    все однакове з верху сторінки до низу.
  • 0:16 - 0:18
    Але ви бачили, що в Інтернеті
  • 0:18 - 0:20
    веб-сторінки дуже відрізняються
    одна від одної.
  • 0:20 - 0:22
    Погляньте на сайт Khan Academy:
  • 0:22 - 0:25
    різні кольори, шрифти і розміри.
  • 0:25 - 0:27
    Зробіть це зараз!
  • 0:27 - 0:30
    Поставте на паузу це відео і
    перегляньте декілька веб-сайтів.
  • 0:30 - 0:32
    Чим вони відрізняються?
  • 0:32 - 0:35
    Що вам подобається,
    у їхніх стилях, а що ні?
  • 0:35 - 0:37
    Я почекаю вас тут.
  • 0:38 - 0:41
    Важливо побачити, наскільки різними
    можуть бути сайти.
  • 0:41 - 0:43
    Тому що дуже скоро ви
    також навчитесь робити
  • 0:43 - 0:45
    ваші сторінки нетиповими,
    ви захочете зробити їх такими, щоб
  • 0:45 - 0:49
    вони приносили вам задоволення,
    оскільки вони представляють вас,
  • 0:49 - 0:51
    і в той же час приносили задоволення іншим.
  • 0:51 - 0:53
    Щоб змонтувати сторінку,
    нам потрібно
  • 0:53 - 0:55
    вивчити нову мову - CSS.
  • 0:55 - 0:58
    Вона розшифровується як
    "Каскадні таблиці стилів"
  • 0:58 - 1:00
    і містить в собі стилі, які ми
    можемо застосувати
  • 1:00 - 1:02
    до різних частин нашої сторінки.
  • 1:02 - 1:06
    Ми вставили CSS в HTML,
    але насправді – це не HTML.
  • 1:06 - 1:08
    Тому ми маємо вивчити нову мову
  • 1:08 - 1:11
    і постаратись не сплутати CSS і HTML.
  • 1:11 - 1:14
    Ми побачимо, як використовувати
    стилі CSS у різних аспектах,
  • 1:14 - 1:17
    таких як шрифти, розміри і
    розмітка сторінки.
  • 1:17 - 1:21
    Однак почнемо ми з
    дечого цікавішого – кольору.
  • 1:21 - 1:22
    Як щодо того, щоб змінити заголовки
  • 1:22 - 1:26
    на сторінці на трав'янисто-зелений?
  • 1:26 - 1:28
    Для початку нам потрібно додати
    тег (укр. "стиль")
  • 1:28 - 1:31
    всередині контейнера <head>.
  • 1:32 - 1:34
    Коли браузер побачить це,
    він подумає:
  • 1:34 - 1:37
    "Добре, все, що тут є – це CSS.
  • 1:37 - 1:40
    Замість парсера HTML,
    я використаю парсер CSS,
  • 1:40 - 1:43
    щоб зрозуміти його."
  • 1:43 - 1:48
    Тут ми додамо правило стилю CSS.
  • 1:48 - 1:51
    Правило стилю має селектор,
    який каже браузеру,
  • 1:51 - 1:54
    якій частині сторінки потрібно
    додати стиль, і пояснення,
  • 1:54 - 1:57
    які кажуть браузеру,
    як оформити цю частину.
  • 1:57 - 2:00
    Якщо ми хочемо оформити
    всі заголовки h2 на нашій сторінці,
  • 2:00 - 2:04
    ми вкажемо селектор – h2.
  • 2:04 - 2:06
    Потім поставимо фігурні дужки.
  • 2:06 - 2:08
    Переконайтесь, що вони фігурні,
    а не квадратні.
  • 2:08 - 2:10
    Квадратні не спрацюють.
  • 2:10 - 2:13
    Всередині ми напишемо пояснення,
  • 2:13 - 2:14
    які мають властивості і значення.
  • 2:14 - 2:19
    Для того, щоб змінити колір тексту, ми
    використаємо властивість "color" (укр. колір ).
  • 2:19 - 2:23
    Потім ми ставимо двокрапку, і тепер
    нам потрібно придумати значення.
  • 2:23 - 2:26
    Нам потрібно сказати браузеру,
    який колір ми хочемо.
  • 2:26 - 2:29
    Гаразд, ми можемо просто написати
    "зелений" (англ. green).
  • 2:29 - 2:32
    Він зрозуміє, тому що зелений –
    це загальновживаний колір.
  • 2:32 - 2:34
    Але це не той зелений,
    який я хочу.
  • 2:34 - 2:36
    Я хочу трав'янисто-зелений.
  • 2:36 - 2:39
    Якщо я напишу трав'янисто-зелений, оу...
  • 2:39 - 2:42
    Тепер браузер спантеличений,
    і тому робить загаловок
  • 2:42 - 2:46
    знову чорним, тому що він ніколи
    не чув про трав'янисто-зелений колір.
  • 2:46 - 2:48
    Якщо ми хочемо мати можливість
    встановити будь-який колір,
  • 2:48 - 2:52
    ми маємо використати
    спектр RGB (R - red, G - gree, B - blue),
  • 2:52 - 2:54
    про який ви, можливо, чули
    на уроках мистецтва.
  • 2:54 - 2:56
    Вам не потрібно бути в цьому експертом,
  • 2:56 - 2:59
    тому що тут ми маємо для вас
    палітру кольорів RGB.
  • 2:59 - 3:04
    Щоб використати її, просто
    напишіть "rgb" і круглі дужки.
  • 3:04 - 3:07
    З'явиться палітра кольорів,
    і рухаючи мишкою
  • 3:07 - 3:09
    всередині неї, ви зможете
    вибрати собі колір
  • 3:09 - 3:12
    і побачити, як ваша сторінка
    відразу ж змінюється.
  • 3:12 - 3:15
    Коли ви будете задоволені,
    клацніть мишкою.
  • 3:15 - 3:17
    Добре, а ви знаєте, що означають ці
    три числа,
  • 3:17 - 3:20
    що знаходяться всередині дужок?
  • 3:20 - 3:23
    Це компоненти червоного,
    зеленого та синього,
  • 3:23 - 3:26
    що утворюють потрібний нам колір.
  • 3:26 - 3:30
    Основна річ про селектор h2,
    який ми використали,
  • 3:30 - 3:34
    це те, що він такий же самий,
    як і всі інші h2 на цій сторінці.
  • 3:34 - 3:37
    Тому ми можемо змінити одразу
    декілька заголовків,
  • 3:37 - 3:40
    оскільки ми хочемо, щоб всі заголовки h2,
    які будуть знайдені
  • 3:40 - 3:43
    на сторінці, були зеленими.
  • 3:43 - 3:45
    Якщо ви продовжите вивчати CSS,
    ви знайдете
  • 3:45 - 3:47
    багато інших способів змінювати
    частини сторінки,
  • 3:47 - 3:50
    наприклад, зможете змінити
    лише декілька заголовків h2.
  • 3:50 - 3:54
    Але ви можете зробити багато
    навіть з цими основними селекторами.
  • 3:54 - 3:56
    Як щодо того, щоб вивчити
    ще одне правило стилю CSS?
  • 3:56 - 3:59
    Цього разу ми зробимо
    фон блакитним.
  • 3:59 - 4:02
    Як ми можемо змінити
    фон на сторінці?
  • 4:02 - 4:06
    Гаразд, який тег
    охоплює цілу сторінку?
  • 4:06 - 4:07
    Це не <h1>,
  • 4:07 - 4:11
    не <p>, і не <img>.
  • 4:11 - 4:13
    Це тег <body> (тег тіла сторінки). Пам'ятай,
    все, що можна побачити на сайті,
  • 4:13 - 4:16
    завжди знаходиться всередині тега <body>.
  • 4:16 - 4:18
    Тому, якщо ми хочемо оформити
    всю сторінку,
  • 4:18 - 4:23
    ми маємо використати селектор
    і вибрати цей тег.
  • 4:23 - 4:25
    Тому ми пишемо "body".
  • 4:27 - 4:31
    Тепер замість "колір", ми напишемо
    "колір фону"(англ. "background color"),
  • 4:32 - 4:36
    ставимо двокрапку, далі "rgb" і круглі дужки.
  • 4:36 - 4:41
    З'являється палітра,
    і я обираю блакитний колір,
  • 4:41 - 4:46
    що наштовхує мене на думки про
    наляканих кроликів під блакитним небом.
  • 4:46 - 4:47
    Та-дам!
  • 4:47 - 4:49
    Погляньте на мою стильну сторінку.
  • 4:49 - 4:51
    Існують сотні інших властивостей СSS,
  • 4:51 - 4:54
    окрім кольору та кольору фону,
  • 4:54 - 4:57
    але з цих найцікавіше починати.
  • 4:57 - 4:59
    Після того, як я закінчу лекцію,
    побавтесь з кольорами,
  • 4:59 - 5:02
    які я вибрала і зробіть так,
    щоб ця сторінка
  • 5:02 - 5:04
    виглядала, як ваша, а не як моя.
  • 5:04 - 5:06
    Добре? Починайте!
  • 5:08 - 5:13
    Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.ogr"
Title:
Основи CSS (Відео версія)
Description:

Основи CSS (Відео версія)
more » « less
Video Language:
English
Duration:
05:09

Ukrainian subtitles

Revisions

Our website uses cookies for analysis purposes.