Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
- 1. Основы HTML и CSS Евгений Тарасенко
- 2. Термины HTML - Элементы - Теги - Атрибуты <a href="http://7bits.it">About</a>
- 3. Блочные элементы - начинаются с новой строки - занимают всю доступную ширину - накладываются друг на друга - могут быть вложены друг в друга и обёртывать строчные элементы
- 4. Строчные элементы - не начинаются с новой строки и выстраиваются друг за другом - их ширина основана на их содержимом - могут быть вложены друг в друга, но не могут обёртывать блочные элементы
- 5. Блочные и строчные элементы <div> <p>Hello <span>World</span></p> </div>
- 6. Термины CSS - Селекторы - Свойства - Значения p { font-size: 16px; }
- 7. Работа с селекторами <div class="class1" id="id1">...</div> div { ... } .class1 { ... } #id1 { ... } div.class1#id1 { ... }
- 8. CSS каскад Все стили идут каскадом сверху вниз p { background: orange; font-size: 24px; } p { background: green; }
- 9. Вычисление специфичности - считаем кол-во ID selectors (= a) - считаем кол-во class selectors (= b) - считаем кол-во type selectors (= c) li /* a=0 b=0 c=1 -> specificity = 1 */ ul li /* a=0 b=0 c=2 -> specificity = 2 */ li.red.level /* a=0 b=2 c=1 -> specificity = 21 */ #x34y /* a=1 b=0 c=0 -> specificity = 100 */
- 11. Разделение стилей по классам <a class="btn btn-danger">...</a> <a class="btn btn-success">...</a> .btn { font-size: 16px; } .btn-danger { background: red; } .btn-success { background: green; }
- 12. Блочная модель Как именно отображаются элементы — как блочные или строчные или как-то ещё, определяется свойством display display: block; display: inline; display: inline-block;
- 13. Блочная модель Каждый элемент на странице представляет собой прямоугольный блок и может иметь ширину, высоту, поля, границы и отступы. div { border: 6px solid #949599; height: 100px; margin: 20px; padding: 20px; width: 400px; }
- 14. Размеры блока По умолчанию размер элемента на экране начинается со свойств width и height, далее к ним добавляются значения свойств padding, border или margin. Но можно использовать div { box-sizing: border-box; }
- 15. Инструменты разработчика Показать блочную модель
- 16. Позиционирование содержимого Как сделать 2 колонки А как 3 колонки Как закрепить элемент
- 17. Style Guide Подумайте о других