Сьогодні ми з вами поговоримо про наступну тему. Ця тема – це CSS-селектори. Також ми поговоримо з вами про внутрішні та зовнішні отступи – це паддінг і марджін.

Також важлива тема – поговоримо, як, за допомогою CSS-файла, підключати шифти. Починаємо, як завжди, зі створенням нової папки.

Відкриваємо за допомогою нашого редактора.

Перш за все, пропоную вирішити домашнє завдання разом. Якщо раптом склалися якісь труднощі, будуть відповіді.

Ми копіюємо нашу CV. Ми копіюємо нашу контакт-форму. Ми копіюємо Assets.

Відразу по конвенції я пропоную додати окрему папку для CSS. У папці Assets створюємо нову папку, називаємо її CSS.

З попередньої лекції ми копіюємо Style CSS і вставляємо. Ось такий вигляд має виглядати дефолтна лабораторна робота, коли ми говоримо про наші файли.

Тобто всі файли ми беремо з п'яти лабораторної. Assets Image ми беремо з п'яти також.

Ось так виглядає наші файли. Ось так виглядає наші файли.

Ось так виглядає наші файли. Все добре.

Пропоную підключити наш CSS файл до нашої контакт-форми. Все добре. Пропоную підключити наш CSS файл до нашої контакт-форми.

Ось так виглядає наші файли. Все добре. Пропоную підключити наш CSS файл до нашої контакт-форми.

Все добре. Пропоную підключити наш CSS файл до нашої контакт-форми. Наші файли підключилися.

Все добре. Тепер повертаємося. Просто копіюйте. В CV, в Head, після Title, наприклад, вставляйте Link.

І тут зараз будуть зміни. Чому будуть зміни? Тому що у нас Style CSS, Color і Border для P. Зараз, мабуть, там буде дико все виглядать. Загалом все ще і норм, тому що у нас тільки один Element P.

Але таку змінився Color. Для нього взагалі не читабельно. Тому я пропоную поки що видаляємо. Ось це дефолтний стан того, як все повинно працювати. Коли ми просто підключили файл і жодного її властивості CSS не додали.

Отже, повертаємося до домашнього завдання. Домашнє завдання полягало в тому, щоб для кожного із заголовків, другого рівня, додати, щоб властивість була не через inline-стилі,

а через CSS-файл. Отже, що я пропоную зробити? Переглядаємо. Отже, у нас кожен із цих хедів. Вони у нас є H2.

Тобто, що нам потрібно зробити? Нам потрібно, в основні, ми хочемо для H2 додати CSS властивість. Ми пишемо selector. Це Element selector. Сьогодні ми розглянемо які є типи selector. Це ми також потім розглянемо.

Так, відкриваємо і пишемо, що ми хочемо йому вказати. Хочемо йому вказати колор. Ми просто копіюємо, вставляємо, зберігаємо.

Так. І для усіх H2 ми це видаляємо. Видалили. Видалили. Тут видалено. І ось тут все зберігаємо і переглядаємо.

Все, нічого не змінилося. Нічого не змінилося. І переглядаємо. About H2, колор і style.css. Ось наш файл. Те, що ми додали.

Загалом в цьому полягала ваша домашня завдання. Нічого складного. Все. І наступна тема це selector. І я зараз відразу на прикладі покажу, чому такий підхід крутий, але цього не достатньо.

Саме H2. Уявіть таку ситуацію, що у вас на сторінці може бути H2. Хедери другого рівня. Але ви не хочете для кожної з них додавати саме такий колір.

Ви хочете, щоб кожен з них був унікальний. Тобто знову виникає питання. А, то на рішення ось написати тут style, тільки для цього. Також рішення.

Але якщо їх декілька. Тобто знову ж таки ми повертаємося до попередньої проблеми, що нам треба писати багато коду. CSS має рішення. Саме для цієї проблеми.

Це selector. Один із типів selector ми з вами переглянули. Це element selector. Я зараз вам продемонструю які є типи. Щоб це наглядно виглядало.

Так, у нас є selector. У нас є 5 типів selector. Зараз нас цікавлять тільки перші три. В межах даного курсу. Це ID selector, class selector і element selector. Element selector ми з вами розглянули.

Ми з вами розглянули. Наступний це class selector. Class selector це... selector class убирає саме такі HTML-елементи, які мають значення атрибуту class однакові.

І якщо ми говоримо про CSS, вони також помічаються крапкою. Зараз на прикладі ми з вами переглянемо. Все це наочно. Ось на прикладі H2 не будемо чіпати. Ось гарний приклад.

У нас є лінка. У нас є лінка. Зараз ми подивимося як вона з вами вигляда. Лінка у нас має такий колір. Але зверніть увагу, ось тут також лінка має такий колір і тут. Але у нашого хедера посилання має дефолтний колір.

І ось відразу ця проблема, про яку я говорив. Тобто якщо ми зараз... Ага, ми ось бачимо. Element посилання A. Ми просто, наприклад, хочемо вирішити цю проблему. Ми хочемо прибрати ковр.

Цей Style, який складно навіть читати. Ми прибираємо, зберігаємо. Ось сюди вставляємо. Так, добре. І тут також ми видаляємо Style. Тобто воно вже буде працювати.

Вже буде працювати. Берігаємо і дивимося на результати. А результат не зовсім той, який ми очікували. Враховуючи те, що ми це все обговорили, це очікувано. Ось наше посилання тут не змінилось, не змінилось.

Але і тут додалися проблеми. Він каже питання, як це вирішити. І от саме ClassSelector вирішує цю проблему. Яку структуру має ClassSelector? Він починається з крапки. За допомогою CSS.

Тобто, зривніть увагу, ми зараз Style.CSS. За допомогою CSS ми вказуємо через крапку, що ця властивість буде працювати для класів. Не для елементів, а саме для класів. Наприклад, ми створюємо. Ми створюємо клас. Називаємо його CustomA.

Наприклад. Все. CustomA буде містити саме те щось. Ми хочемо додати унікальне, тому що у хедері повинні залишитися дефолтні посилання. Вони нічого не повинні змінювати. Все, ми зберігаємо, оновлюємо, повертаємося.

Звісно, нічого не працює, тому що наш браузер не розуміє, що таке CustomA. Для того, і де знаходяться ці елементи, для того, щоб пояснити йому, є наступна структура. Я зараз пропоную вам ось виділити, щоб це краще читабельніше виглядало,

бо зараз це буде складно читати. Ось у нас є наш елемент і є відкриваючий тег. У відкриваючого тега кожного атрибута ми можемо додати, наприклад,

атрибут class. Ось він так додається, class. Все, ми додали. Щодалі, нам потрібно зв'язати ось цей class із тим классом, який ми описали в CSS.

Зв'язуються вони по назві. Зверніть увагу, тут в CSS файлі для того, щоб пояснити, що це class, ми ставимо крапку попереду. Все. Ми копіюємо тільки назву без крапки і вставляємо в значення атрибуту class.

Вставляємо тільки назву. CustomA. Зберігаємо, переглядаємо, що у нас змінилось. Ось у нас наше посилання. Зараз я видалю, щоб ви бачили. Ось воно дефолтне. І ось ми додаємо class.

Все, воно оновилося. І ми заходимо через InSpec, через DevTools. Ми дивимося, що у нього є посилання class customA, і ось ці стилі class.class customA і ось такий повинен бути колір.

Все. Добре, це ми видаляємо. Копіюємось тільки це. Видаляємо. І додаємо до тих посилань, що повинні бути кастомними для нашого CV. Зараз я додам тільки для двох.

Для цього новилось, для цього новилось, для цього ні. Так, і ось ми додаємо для третє. Все. У нас є наші у нас є наші класси. Ми з ними взагалі вміємо працювати.

Основний посил використання класів це групувати елементи за якимсь за якоїсь кастомної назви. Тобто якщо ми будемо групувати тільки по елементам, то недостатньо гнучкості. Недостатньо гнучкості в тому сенсі,

що ми не можемо для усіх P додати якесь значення, або для усіх header додати один колір. Ми хочемо, щоб вони були різні. Але одночасно ми могли якось групувати, тобто щоб header-и, перші, не знаю, 10 header-ів, мали червоний колір,

потім наступні мали зелений колір. І ми для них додаємо різні класи. Так, гадаю, сподіваюся, що тут все зрозуміло. І наступний селектор. Наступний селектор – це селектор ID. Селектор ID, загалом як зрозуміло з назви,

це ідентифікуатор. Він використовується для вибору певного елементу. І тут важливо зауважити, що ідентифікатор з певною назвою може бути тільки один на сторінці. Ось зараз на прикладі. Тобто якщо ми хочемо, щоб цей, наприклад,

ми хочемо виділити, ми хочемо виділити тільки перший, ми хочемо виділити, наприклад, ось цей рядок таблиці. От хочемо виділити його. І тільки його, щоб ніде, тобто,

ніде ніякі стилі не перетоналися. Ми, наприклад, додаємо йому і ID. ID, наприклад, називаємо його First. Зараз First. First Education,

щоб зараз не витрачати час на продуманні називи. Ми хочемо, щоб він був один, тільки такий. Тобто це ідентифікатор, і ми ось йому. Ідентифікатор, зверніть увагу на написання,

він як клас, ми також повинні повідомити, що це саме ідентифікатор, і він помічається за допомогою рішотки. Ось ми додали. І ми хочемо, наприклад, додати, я навіть не знаю, Background Color.

Додамось такий. Все зберегли. Тепер цікаво переглянуть. Так, він додався Background Color. Для нашого першого зараз не зовсім наглядно. Пропоную тут Color. Ось такий до неї.

Ось, ось ви бачите, що ми виділили перший рядок. Ми зараз ось його знайдемо. Так, ось він. І ось цей ідентифікатор. Він повинен обов'язково бути тільки один на сторінці.

І він навіть не працює, якщо їх буде декілька. Зараз ми з вами скопіюємо і, наприклад, ось додамо сюди. Ось зараз. Секунду. Ставляємо. Ні, щось лишнє.

Ось це переглянемо, як це в себе працювати. Так. Так. Так. Дивно. First Education ID.

Дивно, як це працює. Так, тим не менше. Загалом по конвенції він 100% повинен бути один. Цікаво, чому він...

Так, зараз. Чому він працює? Зараз ще раз цікаво протестити. Так, загалом змінюється. Але суть полягає в тому, що він повинен бути один.

Бо в JavaScript, якщо ми будемо користувати, то в JavaScript він 100% поверне тільки останній. Бо навіть коли ми з JavaScript працюємо і намагаємося повернути по ідентифікатору, то він навіть по назві показує, що getElementByID.

Коли ми працюємо з класом, getElementsByID, тобто множені. Тобто основна ідея, щоб ідентифікатор був тільки один. Не саме просто ID 1, а саме щоб з однаковими назвами. Тобто ось таким чином це нормально.

Але ідентифікатор повинен бути саме один на сторінці по конвенціям. Так, зараз поки ми це прибираємо. Ось воно працює. Загалом те, як воно повинно працювати.

Ми розглянемо шрифти, як додавати саме шрифти до нашого CSS-файлу.

Зараз так. Переглядаємо, як у нас шрифти працювали до цього. Так, не можу знайти.

Так, Style, Background, Color. Так, цікаво. А у нас тут дефолтний шрифт. Давайте переглянемо, як це було в попередніх лекціях. Переглядаємо.

Не тут. Давайте ось тут переглянемо. Ось Fund Family.

Так, ось це виглядало раніше. Давайте я відрозкопію, як це виглядало. Ось, наприклад, ми хочемо для Main поставити Fund Family, щоб ми наглядно побачили, як це працює. Ось, у нас змінився шрифт. Ось він такий.

Так, давайте тепер переглянемо. Переглянемо, як цей шрифт можна змінити саме через CSS файл. Ось ми для Main його змінили. Тобто Contact Formа і футер у нас залишився такий, як він був до цього.

Добре, давайте переглянемо. Так, знаючи, як працювати CSS, ми бачимо, що ми хочемо це додати для нашого Main. Ось для Main. Ми пишемо назву тега, без класів, без нічого. І Fund Family.

І ось, до речі, тут є варіанти, як ми можемо її виглядати. Ось, виглядали. Ось, до речі, тут є варіанти, як ми можемо її виглядати. Давайте ось таки виглядати.

Зараз неважливо. Головне – зрозуміти, як це працює. До речі, зрозуміть увагу, що у Fund Family... Зараз відкриємо. У Fund Family йдуть значення через кому. Не так, як у Border, через просто пробіл.

Так, зберігаємо. Відповідно, тут видаляємо. Зберігаємо, переглядаємо, як це все буде працювати. Так, ось дивимось нашій Main. Ось бачимо Main, Fund Family.

І ось таке значення, щоб перевірити точно, щоб побачити різницю. Ми виберемо якийсь... Стоп, вибрав той же. Так, ми виберемо ось такий.

Так, ось. Я гадаю, ви різницю побачили. Шрифт змінився. Так. Зараз хвилину.

Зараз хвилину. Так. Так, є. Все, про шрифти ми поговорили. Зараз загалом не важливо оці значення. Я гадаю, якщо у вас буде час, ви ось можете за ось цим посиланням, я тільки що відкривав,

ви можете дослідити, як це все працює, які значення. Тут багато читанини. Шрифти, така широка тема, виникають різні проблеми з ними. Загалом, можна підключати свої шрифти, тобто скачені.

Можна використовувати стандартні ті, що є у наших операційних системах. Але зараз, в межах даного курсу, шрифти не цікаві. Так, добре. І наступною частиною є те, що говорив відступи внутрішні зовнішні.

Так, якщо не помиляюся, є зображення. В шості лекції зараз ми з вами переглянемо. Нібордер. Бордер. Добре, я на прикладі одразу покажу.

Ось у нас я пропоную в контакт форму. Ось ми беремо, копіюємо нашу форму, просто назив. Пишемо форм. Прикладом давайте її додамо. Бордер. 20 пікселів.

Солід. І червоний кольор. Зараз пропоную переглянути, як це все виглядає. З початку. Так, є. Ось у нашої форми є ось такий чарівний бордер.

І я вам пропоную переглянути різницю між margin. І потім ми переглянемо ще, що таке padding. Давайте ми додамо 10 пікселів. Зберігаємо. І ось, я гадаю ви помітило, як в один момент трошки все звузилось.

От переглядаємо тепер нашу форму. У нашої форми є padding. Тобто наша форма якось розташована саме на нашій HTML сторінці. Тобто у нас є секції. І ось у секції є header.

Є наша форма. І от форма, ми як натискаємо на форму ось. Зверніть увагу, є ось така схема того, що складається наша саме форма. І ось ми дивимося.

Кожен елемент, більшості елемент складається із саме його тіла. Ось тіло, ми бачимо його ширину та висоту. Це тіло нашої форми. Потім йде padding. Це внутрішній відступ. Тобто це наскільки в середині наша форма буде відступати від нашого контейнера.

Тобто наший контейнер, це ось коли ми просто на всю форму наводимо. Padding. Потім йде border. З border ми вже розібралися. Це те, що у нас ось червоним кольором. І після border йде margin. Margin – це зовнішній відступ. Тобто у нас ось ви бачите, наша форма відступає від contact form і взагалі від body.

Тобто від цієї частини саме невірішньої, від body, від main. На 10 піксілів. Margin у нас також, як і border, складається з чотирьох частин. Вверх, право, ниж, ліво.

Ось ми, наприклад, коли все ідентично до того, що було з border. Тут може бути одне, два, три, чотири значення. Також працюють по тій же схемі. Ось ми, наприклад, через нашу DevTools можемо в реальному часі змінювати це значення.

Ось ми ставимо 15. Я зараз затисну, ви будете дивитися на різницю, наскільки. Якщо ми наведемо на форму, форма, загалом, бачите, не змінилася. Але внутрішній відступ від меж нашої форми до саме тіла форми, ось він зменшується.

Він і збільшується. І ось ми збільшуємо, збільшуємо, збільшуємо. І наша форма з усіх сторін ніби сплющується. Ось це, якщо говорити про margin. Я зараз не буду розписувати саме тут, якщо ми поставимо їх два значення, три значення, чотири.

Ідентично до border. По годиниковій стілці. Пропоную почати. Пропоную далі розглянути саме. Пропоную зараз тут поставити 100.

Переглянути, як це по дефолту виглядає. Ось це так виглядає по дефолту. Те, що зараз эта екстерія вилазить, замежить, це нічого страшного. Можемо це з вами підправити. Щоб воно не заважало нам. Ось все. Ось так виглядає форма. Тобто загалом форма займає ось все це місце, що виділено різними кольорами, що ми з вами бачимо.

Але внутрішній відступ, ось ми додали його 100 пікселів з усіх сторін. Далі ми хочемо розібратися, що таке padding. Ми додаємо padding.

І ставимо, наприклад, 10 пікселів. Попробуємо тільки з пікселями. Оновлюємо все. Також побачили, що форма скакнула. І дивимося, в чому різниць. Ось ми одразу побачили. Наша форма, ось тіло, вона відділяється одразу, бачите.

Ми наводимо синім кольором, відділяється. Потім йде padding. Це внутрішній відступ. Це наскільки наша форма відступає від нашого бордера. Потім бордер, ну і потім ми вже з вами говорили за margin. І давайте ось переглянемо, як це буде змінюватися, якщо ми будемо збільшувати padding.

Ось ви бачите, внутрішні відступи, внутрішні відступи збільшуються. Ось так це працює. Тобто ми збільшуємо внутрішні відступ саме наші форми. Ну відповідно, якщо ми збільшуємо внутрішні відступ форми, збільшується, от в даному випадку, там вся сестра працює,

ще збільшується висота. Ну взагалом, висота збільшується, тому що у нас отут збільшується, тобто у нас збільшується x, y. Тому, відповідно, ніби і форма ростає, ніби вона не опускається. Ну головна суть, я гадаю, ви зрозуміли, ось наша форма, ось наші padding,

ось наші border і ось наші margin. Це такі основні пункти. Часто доводиться з цим працювати. Багато елементів мають вже дефолтні значення, якщо ми збільшуємо, якщо ми збільшуємо, ось ми бачимо з вами, що він не має padding, не має border,

але margin зверху і знизу такі значення має. Ось навіть ми можемо переглянути margin блок. Ось такі значення додані по дефолту. Це основні пункти, що ми бачимо.

Щодо домашнього завдання, я гадаю, найкращим рішенням буде це побавитися із вашим CV. Тобто ви можете десь збільшити, зменшити відступи margin. Можете додати різні кольори саме з використанням CSS файлу.

Можете додати різні кольори саме з використанням CSS файлу. Можете змінити шрифти, змінити шрифт тільки, наприклад, для хедів.

Наприклад, ви хочете використувати дефолтний шрифт для всього body. Для всього, наприклад, мейна ви зробите такий. Але для h2 ви хочете змінити на інше. Це просто треба буде вам ставити ось сюди значення phone family, що вам довподоби.

Можете також додати бордери, якщо є таке бажання, ось, наприклад, для main.info або ще для чогось, наприклад, для h2 додати бордер. Тобто домашнє завдання проявити

проявити дизайнерське бачення, проявити і підправити те, як вам довподоби.