Basic CSS functional
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
Alternative Title |
| |
Title of Series | ||
Number of Parts | 10 | |
Author | ||
License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
Identifiers | 10.5446/62730 (DOI) | |
Publisher | ||
Release Date | ||
Language |
Content Metadata
Subject Area | |
Genre |
1
2
3
4
5
6
7
8
9
10
00:00
Computer fileMarginal distributionOnline helpXMLUMLComputer animation
01:17
Text editorComputer fileFlow separationDefault (computer science)Cross-site scriptingComputer animationSource codeJSON
03:18
MathematicsCross-site scriptingComputer fileForm (programming)Computer animation
03:47
Computer fileRootForm (programming)WritingComputer animation
04:27
Open setDisk read-and-write headLink (knot theory)Insertion lossComputer animation
05:01
Graph coloringElement (mathematics)State of matterDefault (computer science)Computer animationSource code
05:29
Computer fileCross-site scriptingCategory of beingComputer animation
06:01
Cross-site scriptingCategory of beingElement (mathematics)Computer fileType theorySource code
07:23
Computer fileGraph coloringComputer animationJSON
07:52
Type theoryCodeWeb pageGraph coloringLevel (video gaming)EmailDecision theoryElement (mathematics)Source codeJSON
09:14
Element (mathematics)Social classAttribute grammarType theoryCross-site scriptingProgram flowchart
10:09
Link (knot theory)Touch typingGraph coloringEmailElement (mathematics)Default (computer science)Source codeComputer animation
10:45
Graph coloringGoodness of fitResultantSource codeJSON
11:27
ResultantLink (knot theory)Social classOnline helpCategory of beingEmailData structureComputer animation
12:40
Web browserSocial classOpen setOrder (biology)Keyboard shortcutInsertion lossComputer fileAttribute grammarData structureElement (mathematics)Computer animation
14:07
Link (knot theory)Default (computer science)Graph coloringSocial classComputer animationSource code
14:42
Link (knot theory)Social classSource codeComputer animation
15:10
Graph coloringGroup action1 (number)Social classEmailElement (mathematics)Message passingMultiplication signComputer animation
16:07
Multiplication signWeb pageIdentifiabilityElement (mathematics)Row (database)Table (information)Source code
18:07
Graph coloringLine (geometry)Web pageComputer animationSource codeJSON
18:45
Source codeJSONComputer animation
19:14
Point (geometry)Source codeJSON
19:54
Social classIdentifiabilityComputer animation
20:32
Web pageIdentifiabilityNormal (geometry)Source codeComputer animation
21:02
Computer fontDefault (computer science)Computer fileJSONComputer animationSource code
21:51
Computer fontSet (mathematics)Source codeComputer animation
22:37
Computer fontCross-site scriptingComputer fileComputer configurationSource codeComputer animation
23:52
SpacetimeView (database)Source codeComputer animation
24:22
Different (Kate Ryan album)Computer fontComputer animationSource code
25:08
Computer fontMereologyMultiplication sign1 (number)Medical imagingPhysical systemLimit (category theory)Computer animationSource code
26:07
Form (programming)Graph coloringSource code
26:48
Form (programming)Different (Kate Ryan album)Marginal distributionGraphics tabletComputer animation
27:17
Point (geometry)Limit (category theory)Form (programming)Numbering schemeElement (mathematics)Real-time operating systemShape (magazine)MereologyGraphics tabletSheaf (mathematics)EmailMathematicsMarginal distributionDifferent (Kate Ryan album)Web pageClique-widthComputer animationProgram flowchart
30:11
Default (computer science)Limit (category theory)Graph coloringForm (programming)Graphics tabletComputer animation
30:53
Form (programming)Graphics tabletDefault (computer science)CASE <Informatik>Marginal distributionBlock (periodic table)Different (Kate Ryan album)Point (geometry)Cross-site scriptingShape (magazine)Element (mathematics)Computer animation
33:17
Computer fontComputer fileEmailGraph coloringDefault (computer science)Computer animation
33:48
Machine visionComputer animation
34:34
Computer animation
Transcript: Ukrainian(auto-generated)
00:00
Я сподіваюсь, ви з домашнім завданням з попередньої лекції справилися.
00:27
Сьогодні ми з вами поговоримо про наступну тему. Ця тема – це CSS-селектори. Також ми поговоримо з вами про внутрішні та зовнішні отступи – це паддінг і марджін.
00:45
Також важлива тема – поговоримо, як, за допомогою CSS-файла, підключати шифти. Починаємо, як завжди, зі створенням нової папки.
01:03
Відкриваємо за допомогою нашого редактора.
01:31
Перш за все, пропоную вирішити домашнє завдання разом. Якщо раптом склалися якісь труднощі, будуть відповіді.
01:47
Ми копіюємо нашу CV. Ми копіюємо нашу контакт-форму. Ми копіюємо Assets.
02:07
Відразу по конвенції я пропоную додати окрему папку для CSS. У папці Assets створюємо нову папку, називаємо її CSS.
02:29
З попередньої лекції ми копіюємо Style CSS і вставляємо. Ось такий вигляд має виглядати дефолтна лабораторна робота, коли ми говоримо про наші файли.
02:49
Тобто всі файли ми беремо з п'яти лабораторної. Assets Image ми беремо з п'яти також.
03:09
Ось так виглядає наші файли. Ось так виглядає наші файли.
03:29
Ось так виглядає наші файли. Все добре.
03:49
Пропоную підключити наш CSS файл до нашої контакт-форми. Все добре. Пропоную підключити наш CSS файл до нашої контакт-форми.
04:09
Ось так виглядає наші файли. Все добре. Пропоную підключити наш CSS файл до нашої контакт-форми.
04:29
Все добре. Пропоную підключити наш CSS файл до нашої контакт-форми. Наші файли підключилися.
04:45
Все добре. Тепер повертаємося. Просто копіюйте. В CV, в Head, після Title, наприклад, вставляйте Link.
05:01
І тут зараз будуть зміни. Чому будуть зміни? Тому що у нас Style CSS, Color і Border для P. Зараз, мабуть, там буде дико все виглядать. Загалом все ще і норм, тому що у нас тільки один Element P.
05:23
Але таку змінився Color. Для нього взагалі не читабельно. Тому я пропоную поки що видаляємо. Ось це дефолтний стан того, як все повинно працювати. Коли ми просто підключили файл і жодного її властивості CSS не додали.
05:45
Отже, повертаємося до домашнього завдання. Домашнє завдання полягало в тому, щоб для кожного із заголовків, другого рівня, додати, щоб властивість була не через inline-стилі,
06:05
а через CSS-файл. Отже, що я пропоную зробити? Переглядаємо. Отже, у нас кожен із цих хедів. Вони у нас є H2.
06:25
Тобто, що нам потрібно зробити? Нам потрібно, в основні, ми хочемо для H2 додати CSS властивість. Ми пишемо selector. Це Element selector. Сьогодні ми розглянемо які є типи selector. Це ми також потім розглянемо.
06:43
Так, відкриваємо і пишемо, що ми хочемо йому вказати. Хочемо йому вказати колор. Ми просто копіюємо, вставляємо, зберігаємо.
07:01
Так. І для усіх H2 ми це видаляємо. Видалили. Видалили. Тут видалено. І ось тут все зберігаємо і переглядаємо.
07:25
Все, нічого не змінилося. Нічого не змінилося. І переглядаємо. About H2, колор і style.css. Ось наш файл. Те, що ми додали.
07:41
Загалом в цьому полягала ваша домашня завдання. Нічого складного. Все. І наступна тема це selector. І я зараз відразу на прикладі покажу, чому такий підхід крутий, але цього не достатньо.
08:05
Саме H2. Уявіть таку ситуацію, що у вас на сторінці може бути H2. Хедери другого рівня. Але ви не хочете для кожної з них додавати саме такий колір.
08:27
Ви хочете, щоб кожен з них був унікальний. Тобто знову виникає питання. А, то на рішення ось написати тут style, тільки для цього. Також рішення.
08:43
Але якщо їх декілька. Тобто знову ж таки ми повертаємося до попередньої проблеми, що нам треба писати багато коду. CSS має рішення. Саме для цієї проблеми.
09:01
Це selector. Один із типів selector ми з вами переглянули. Це element selector. Я зараз вам продемонструю які є типи. Щоб це наглядно виглядало.
09:21
Так, у нас є selector. У нас є 5 типів selector. Зараз нас цікавлять тільки перші три. В межах даного курсу. Це ID selector, class selector і element selector. Element selector ми з вами розглянули.
09:43
Ми з вами розглянули. Наступний це class selector. Class selector це... selector class убирає саме такі HTML-елементи, які мають значення атрибуту class однакові.
10:01
І якщо ми говоримо про CSS, вони також помічаються крапкою. Зараз на прикладі ми з вами переглянемо. Все це наочно. Ось на прикладі H2 не будемо чіпати. Ось гарний приклад.
10:21
У нас є лінка. У нас є лінка. Зараз ми подивимося як вона з вами вигляда. Лінка у нас має такий колір. Але зверніть увагу, ось тут також лінка має такий колір і тут. Але у нашого хедера посилання має дефолтний колір.
10:41
І ось відразу ця проблема, про яку я говорив. Тобто якщо ми зараз... Ага, ми ось бачимо. Element посилання A. Ми просто, наприклад, хочемо вирішити цю проблему. Ми хочемо прибрати ковр.
11:04
Цей Style, який складно навіть читати. Ми прибираємо, зберігаємо. Ось сюди вставляємо. Так, добре. І тут також ми видаляємо Style. Тобто воно вже буде працювати.
11:23
Вже буде працювати. Берігаємо і дивимося на результати. А результат не зовсім той, який ми очікували. Враховуючи те, що ми це все обговорили, це очікувано. Ось наше посилання тут не змінилось, не змінилось.
11:42
Але і тут додалися проблеми. Він каже питання, як це вирішити. І от саме ClassSelector вирішує цю проблему. Яку структуру має ClassSelector? Він починається з крапки. За допомогою CSS.
12:00
Тобто, зривніть увагу, ми зараз Style.CSS. За допомогою CSS ми вказуємо через крапку, що ця властивість буде працювати для класів. Не для елементів, а саме для класів. Наприклад, ми створюємо. Ми створюємо клас. Називаємо його CustomA.
12:23
Наприклад. Все. CustomA буде містити саме те щось. Ми хочемо додати унікальне, тому що у хедері повинні залишитися дефолтні посилання. Вони нічого не повинні змінювати. Все, ми зберігаємо, оновлюємо, повертаємося.
12:42
Звісно, нічого не працює, тому що наш браузер не розуміє, що таке CustomA. Для того, і де знаходяться ці елементи, для того, щоб пояснити йому, є наступна структура. Я зараз пропоную вам ось виділити, щоб це краще читабельніше виглядало,
13:02
бо зараз це буде складно читати. Ось у нас є наш елемент і є відкриваючий тег. У відкриваючого тега кожного атрибута ми можемо додати, наприклад,
13:22
атрибут class. Ось він так додається, class. Все, ми додали. Щодалі, нам потрібно зв'язати ось цей class із тим классом, який ми описали в CSS.
13:41
Зв'язуються вони по назві. Зверніть увагу, тут в CSS файлі для того, щоб пояснити, що це class, ми ставимо крапку попереду. Все. Ми копіюємо тільки назву без крапки і вставляємо в значення атрибуту class.
14:03
Вставляємо тільки назву. CustomA. Зберігаємо, переглядаємо, що у нас змінилось. Ось у нас наше посилання. Зараз я видалю, щоб ви бачили. Ось воно дефолтне. І ось ми додаємо class.
14:21
Все, воно оновилося. І ми заходимо через InSpec, через DevTools. Ми дивимося, що у нього є посилання class customA, і ось ці стилі class.class customA і ось такий повинен бути колір.
14:42
Все. Добре, це ми видаляємо. Копіюємось тільки це. Видаляємо. І додаємо до тих посилань, що повинні бути кастомними для нашого CV. Зараз я додам тільки для двох.
15:02
Для цього новилось, для цього новилось, для цього ні. Так, і ось ми додаємо для третє. Все. У нас є наші у нас є наші класси. Ми з ними взагалі вміємо працювати.
15:20
Основний посил використання класів це групувати елементи за якимсь за якоїсь кастомної назви. Тобто якщо ми будемо групувати тільки по елементам, то недостатньо гнучкості. Недостатньо гнучкості в тому сенсі,
15:41
що ми не можемо для усіх P додати якесь значення, або для усіх header додати один колір. Ми хочемо, щоб вони були різні. Але одночасно ми могли якось групувати, тобто щоб header-и, перші, не знаю, 10 header-ів, мали червоний колір,
16:01
потім наступні мали зелений колір. І ми для них додаємо різні класи. Так, гадаю, сподіваюся, що тут все зрозуміло. І наступний селектор. Наступний селектор – це селектор ID. Селектор ID, загалом як зрозуміло з назви,
16:20
це ідентифікуатор. Він використовується для вибору певного елементу. І тут важливо зауважити, що ідентифікатор з певною назвою може бути тільки один на сторінці. Ось зараз на прикладі. Тобто якщо ми хочемо, щоб цей, наприклад,
16:42
ми хочемо виділити, ми хочемо виділити тільки перший, ми хочемо виділити, наприклад, ось цей рядок таблиці. От хочемо виділити його. І тільки його, щоб ніде, тобто,
17:00
ніде ніякі стилі не перетоналися. Ми, наприклад, додаємо йому і ID. ID, наприклад, називаємо його First. Зараз First. First Education,
17:23
щоб зараз не витрачати час на продуманні називи. Ми хочемо, щоб він був один, тільки такий. Тобто це ідентифікатор, і ми ось йому. Ідентифікатор, зверніть увагу на написання,
17:40
він як клас, ми також повинні повідомити, що це саме ідентифікатор, і він помічається за допомогою рішотки. Ось ми додали. І ми хочемо, наприклад, додати, я навіть не знаю, Background Color.
18:01
Додамось такий. Все зберегли. Тепер цікаво переглянуть. Так, він додався Background Color. Для нашого першого зараз не зовсім наглядно. Пропоную тут Color. Ось такий до неї.
18:22
Ось, ось ви бачите, що ми виділили перший рядок. Ми зараз ось його знайдемо. Так, ось він. І ось цей ідентифікатор. Він повинен обов'язково бути тільки один на сторінці.
18:42
І він навіть не працює, якщо їх буде декілька. Зараз ми з вами скопіюємо і, наприклад, ось додамо сюди. Ось зараз. Секунду. Ставляємо. Ні, щось лишнє.
19:01
Ось це переглянемо, як це в себе працювати. Так. Так. Так. Дивно. First Education ID.
19:24
Дивно, як це працює. Так, тим не менше. Загалом по конвенції він 100% повинен бути один. Цікаво, чому він...
19:43
Так, зараз. Чому він працює? Зараз ще раз цікаво протестити. Так, загалом змінюється. Але суть полягає в тому, що він повинен бути один.
20:02
Бо в JavaScript, якщо ми будемо користувати, то в JavaScript він 100% поверне тільки останній. Бо навіть коли ми з JavaScript працюємо і намагаємося повернути по ідентифікатору, то він навіть по назві показує, що getElementByID.
20:22
Коли ми працюємо з класом, getElementsByID, тобто множені. Тобто основна ідея, щоб ідентифікатор був тільки один. Не саме просто ID 1, а саме щоб з однаковими назвами. Тобто ось таким чином це нормально.
20:43
Але ідентифікатор повинен бути саме один на сторінці по конвенціям. Так, зараз поки ми це прибираємо. Ось воно працює. Загалом те, як воно повинно працювати.
21:07
Ми розглянемо шрифти, як додавати саме шрифти до нашого CSS-файлу.
21:20
Зараз так. Переглядаємо, як у нас шрифти працювали до цього. Так, не можу знайти.
21:41
Так, Style, Background, Color. Так, цікаво. А у нас тут дефолтний шрифт. Давайте переглянемо, як це було в попередніх лекціях. Переглядаємо.
22:09
Не тут. Давайте ось тут переглянемо. Ось Fund Family.
22:20
Так, ось це виглядало раніше. Давайте я відрозкопію, як це виглядало. Ось, наприклад, ми хочемо для Main поставити Fund Family, щоб ми наглядно побачили, як це працює. Ось, у нас змінився шрифт. Ось він такий.
22:41
Так, давайте тепер переглянемо. Переглянемо, як цей шрифт можна змінити саме через CSS файл. Ось ми для Main його змінили. Тобто Contact Formа і футер у нас залишився такий, як він був до цього.
23:02
Добре, давайте переглянемо. Так, знаючи, як працювати CSS, ми бачимо, що ми хочемо це додати для нашого Main. Ось для Main. Ми пишемо назву тега, без класів, без нічого. І Fund Family.
23:21
І ось, до речі, тут є варіанти, як ми можемо її виглядати. Ось, виглядали. Ось, до речі, тут є варіанти, як ми можемо її виглядати. Давайте ось таки виглядати.
23:40
Зараз неважливо. Головне – зрозуміти, як це працює. До речі, зрозуміть увагу, що у Fund Family... Зараз відкриємо. У Fund Family йдуть значення через кому. Не так, як у Border, через просто пробіл.
24:02
Так, зберігаємо. Відповідно, тут видаляємо. Зберігаємо, переглядаємо, як це все буде працювати. Так, ось дивимось нашій Main. Ось бачимо Main, Fund Family.
24:20
І ось таке значення, щоб перевірити точно, щоб побачити різницю. Ми виберемо якийсь... Стоп, вибрав той же. Так, ми виберемо ось такий.
24:42
Так, ось. Я гадаю, ви різницю побачили. Шрифт змінився. Так. Зараз хвилину.
25:00
Зараз хвилину. Так. Так, є. Все, про шрифти ми поговорили. Зараз загалом не важливо оці значення. Я гадаю, якщо у вас буде час, ви ось можете за ось цим посиланням, я тільки що відкривав,
25:21
ви можете дослідити, як це все працює, які значення. Тут багато читанини. Шрифти, така широка тема, виникають різні проблеми з ними. Загалом, можна підключати свої шрифти, тобто скачені.
25:40
Можна використовувати стандартні ті, що є у наших операційних системах. Але зараз, в межах даного курсу, шрифти не цікаві. Так, добре. І наступною частиною є те, що говорив відступи внутрішні зовнішні.
26:03
Так, якщо не помиляюся, є зображення. В шості лекції зараз ми з вами переглянемо. Нібордер. Бордер. Добре, я на прикладі одразу покажу.
26:20
Ось у нас я пропоную в контакт форму. Ось ми беремо, копіюємо нашу форму, просто назив. Пишемо форм. Прикладом давайте її додамо. Бордер. 20 пікселів.
26:40
Солід. І червоний кольор. Зараз пропоную переглянути, як це все виглядає. З початку. Так, є. Ось у нашої форми є ось такий чарівний бордер.
27:00
І я вам пропоную переглянути різницю між margin. І потім ми переглянемо ще, що таке padding. Давайте ми додамо 10 пікселів. Зберігаємо. І ось, я гадаю ви помітило, як в один момент трошки все звузилось.
27:25
От переглядаємо тепер нашу форму. У нашої форми є padding. Тобто наша форма якось розташована саме на нашій HTML сторінці. Тобто у нас є секції. І ось у секції є header.
27:42
Є наша форма. І от форма, ми як натискаємо на форму ось. Зверніть увагу, є ось така схема того, що складається наша саме форма. І ось ми дивимося.
28:02
Кожен елемент, більшості елемент складається із саме його тіла. Ось тіло, ми бачимо його ширину та висоту. Це тіло нашої форми. Потім йде padding. Це внутрішній відступ. Тобто це наскільки в середині наша форма буде відступати від нашого контейнера.
28:22
Тобто наший контейнер, це ось коли ми просто на всю форму наводимо. Padding. Потім йде border. З border ми вже розібралися. Це те, що у нас ось червоним кольором. І після border йде margin. Margin – це зовнішній відступ. Тобто у нас ось ви бачите, наша форма відступає від contact form і взагалі від body.
28:47
Тобто від цієї частини саме невірішньої, від body, від main. На 10 піксілів. Margin у нас також, як і border, складається з чотирьох частин. Вверх, право, ниж, ліво.
29:02
Ось ми, наприклад, коли все ідентично до того, що було з border. Тут може бути одне, два, три, чотири значення. Також працюють по тій же схемі. Ось ми, наприклад, через нашу DevTools можемо в реальному часі змінювати це значення.
29:22
Ось ми ставимо 15. Я зараз затисну, ви будете дивитися на різницю, наскільки. Якщо ми наведемо на форму, форма, загалом, бачите, не змінилася. Але внутрішній відступ від меж нашої форми до саме тіла форми, ось він зменшується.
29:45
Він і збільшується. І ось ми збільшуємо, збільшуємо, збільшуємо. І наша форма з усіх сторін ніби сплющується. Ось це, якщо говорити про margin. Я зараз не буду розписувати саме тут, якщо ми поставимо їх два значення, три значення, чотири.
30:03
Ідентично до border. По годиниковій стілці. Пропоную почати. Пропоную далі розглянути саме. Пропоную зараз тут поставити 100.
30:20
Переглянути, як це по дефолту виглядає. Ось це так виглядає по дефолту. Те, що зараз эта екстерія вилазить, замежить, це нічого страшного. Можемо це з вами підправити. Щоб воно не заважало нам. Ось все. Ось так виглядає форма. Тобто загалом форма займає ось все це місце, що виділено різними кольорами, що ми з вами бачимо.
30:47
Але внутрішній відступ, ось ми додали його 100 пікселів з усіх сторін. Далі ми хочемо розібратися, що таке padding. Ми додаємо padding.
31:01
І ставимо, наприклад, 10 пікселів. Попробуємо тільки з пікселями. Оновлюємо все. Також побачили, що форма скакнула. І дивимося, в чому різниць. Ось ми одразу побачили. Наша форма, ось тіло, вона відділяється одразу, бачите.
31:20
Ми наводимо синім кольором, відділяється. Потім йде padding. Це внутрішній відступ. Це наскільки наша форма відступає від нашого бордера. Потім бордер, ну і потім ми вже з вами говорили за margin. І давайте ось переглянемо, як це буде змінюватися, якщо ми будемо збільшувати padding.
31:40
Ось ви бачите, внутрішні відступи, внутрішні відступи збільшуються. Ось так це працює. Тобто ми збільшуємо внутрішні відступ саме наші форми. Ну відповідно, якщо ми збільшуємо внутрішні відступ форми, збільшується, от в даному випадку, там вся сестра працює,
32:00
ще збільшується висота. Ну взагалом, висота збільшується, тому що у нас отут збільшується, тобто у нас збільшується x, y. Тому, відповідно, ніби і форма ростає, ніби вона не опускається. Ну головна суть, я гадаю, ви зрозуміли, ось наша форма, ось наші padding,
32:22
ось наші border і ось наші margin. Це такі основні пункти. Часто доводиться з цим працювати. Багато елементів мають вже дефолтні значення, якщо ми збільшуємо, якщо ми збільшуємо, ось ми бачимо з вами, що він не має padding, не має border,
32:41
але margin зверху і знизу такі значення має. Ось навіть ми можемо переглянути margin блок. Ось такі значення додані по дефолту. Це основні пункти, що ми бачимо.
33:02
Щодо домашнього завдання, я гадаю, найкращим рішенням буде це побавитися із вашим CV. Тобто ви можете десь збільшити, зменшити відступи margin. Можете додати різні кольори саме з використанням CSS файлу.
33:24
Можете додати різні кольори саме з використанням CSS файлу. Можете змінити шрифти, змінити шрифт тільки, наприклад, для хедів.
33:41
Наприклад, ви хочете використувати дефолтний шрифт для всього body. Для всього, наприклад, мейна ви зробите такий. Але для h2 ви хочете змінити на інше. Це просто треба буде вам ставити ось сюди значення phone family, що вам довподоби.
34:04
Можете також додати бордери, якщо є таке бажання, ось, наприклад, для main.info або ще для чогось, наприклад, для h2 додати бордер. Тобто домашнє завдання проявити
34:22
проявити дизайнерське бачення, проявити і підправити те, як вам довподоби.