Frontend basics

eleks.comeleks.com
HTML/CSS: основи

Поговоримо про
 Фронт-енд: що це?
 HTML
 CSS
 Інструменти розробника

HTML: HyperText Markup Language
 наслідується від SGML
 описується тегами (елементи в кутових дужках)

HTML != XML
 не чутлива до регістру
 змішані правила закривання

HTML: Document Object Model (DOM)
 ієрархія елементів
 також граф об’єктів

HTML документ
• DOCTYPE – тип
документа
• html – опис документа
• head – дані про
документ
• title – назва документа
• body – візуальний вміст
• h1 - заголовок
• p - параграф

HTML: теги
 <div></div> - контейнер
 <a href=“http://someurl”></a> - посилання
 <img src=“path/to/image/” alt=“text” /> - картинка
 <ul><li></li>…<li></li></ul> - невпорядкований список
 <ol><li></li>…<li></li></ol> - впорядкований список
 <table><tr><td></td></tr></table> - таблиці

Теги
 Парні (<div></div>, <p></p>, <a></a>)
 Непарні (<img />, <br />, <hr />)

Теги
 Лінійні (<span></span>, <img />, <a></a>)
 Блокові (<div></div>, <p></p>)

HTML приклад сторінки (колись)

HTML приклад сторінки (тепер)

HTML5: теги
 header
 nav
 section
 footer
 article
 aside
 ...

HTML форми: основні теги
 label
 input
 textarea
 button

HTML форми: приклад

CSS: підходи
 Властивість style
 Тег style
 Каскадні таблиці стилів (CSS) – окремий файл

CSS: підключення до сторінки

CSS: id, class селектори

CSS: селектори за атрибутами
[disabled]
вибирає усі елементи з атрибутом "disabled"
[type='button']
вибирає усі елементи з типом a "button".
[class~=key]
вибирає усі елементи з класом "key" (але не e.g. "keyed", "monkey", "buckeye"). Еквівалентно .key.
[lang|=es]
вибирає усі елементи з атрибутом lang, що починається з “es” (ціле слово). Включає "es-MX".
[title*="example" i]
вибирає усі елементи з атрибутом title, що містить "example", ігноруючи регістр.
a[href^="https://"]
вибирає усі посилання з атрибутом href, що починається з https:// (не ціле слово).
img[src$=".png"]
вибирає усі картинки з атрибутом src, що закінчуються на “.png”

CSS: селектори псевдо-класів
selector:pseudo-class {
property: value;
}
• :link
• :visited
• :active
• :hover
• :focus
• :first-child
• :last-child
• :nth-child
• :nth-last-child
• :nth-of-type
• :first-of-type
• :last-of-type
• :empty
• :target
• :checked
• :enabled
• :disabled

CSS: селектори, що базуються на відношеннях
Селектор Вибрані елементи
A E Усі Е елементи, що є нащадками елемента А (діти, діти дітей…)
A > E Усі Е елементи, що є прямими нащадками елемента А (тільки діти)
E:first-child Будь-який елемент Е, що є першою дитиною свого батька
B + E Будь-який елемент Е, що є наступним братом елемента В

CSS: position
 Static – значення по замовчуванню, елементи
відображаються послідовно один за одним
 Relative – відображається як static, але зміщений зі
своєї позиції
 Absolute – елемент відображається абсолютно
відносно першого нестатичного предка
 Fixed – відображається як absolute, та не змінює
позицію при скролі.

CSS: display
 Block
 Inline
 Inline-block
 …

CSS: float
 Left – елемент займає крайню можливу ліву позицію
на лінії в якій він мав би з’явитись
 Right - елемент займає крайню можливу праву
позицію на лінії в якій він мав би з’явитись
 Clear – змушує елементи з’являтись під плаваючими
(floated) елементами

CSS: горизонтальне центрування
 для inline та inline-*
 для block

CSS: вертикальне центрування
 для block

eleks.com
Інструменти розробника

Chrome Developer Tools: Network

Chrome Developer Tools: Sources

Chrome Developer Tools: Console

eleks.com
Inspired by Technology.
Driven by Value.

Useful
 https://habrahabr.ru/post/202408/ (Как с
верстать веб-страницу. Часть 1)
 https://developer.mozilla.org/en/ (mozila
developer network)
 http://caniuse.com/ (feature detection)
 https://www.sublimetext.com/ (text editor)

Frontend basics

Recommended

More Related Content

Viewers also liked (20)

More from eleksdev (7)

Frontend basics

Editor's Notes