Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).

279 views

Published on

Основы языка разметки HTML и каскадных таблиц стилей (CSS)

Published in: Education
  • Be the first to comment

  • Be the first to like this

Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).

  1. 1. Основы HTML и CSS Евгений Тарасенко
  2. 2. Термины HTML - Элементы - Теги - Атрибуты <a href="http://7bits.it">About</a>
  3. 3. Блочные элементы - начинаются с новой строки - занимают всю доступную ширину - накладываются друг на друга - могут быть вложены друг в друга и обёртывать строчные элементы
  4. 4. Строчные элементы - не начинаются с новой строки и выстраиваются друг за другом - их ширина основана на их содержимом - могут быть вложены друг в друга, но не могут обёртывать блочные элементы
  5. 5. Блочные и строчные элементы <div> <p>Hello <span>World</span></p> </div>
  6. 6. Термины CSS - Селекторы - Свойства - Значения p { font-size: 16px; }
  7. 7. Работа с селекторами <div class="class1" id="id1">...</div> div { ... } .class1 { ... } #id1 { ... } div.class1#id1 { ... }
  8. 8. CSS каскад Все стили идут каскадом сверху вниз p { background: orange; font-size: 24px; } p { background: green; }
  9. 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 */
  10. 10. Вычисление специфичности Как бороться/управлять специфичностью?
  11. 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. 12. Блочная модель Как именно отображаются элементы — как блочные или строчные или как-то ещё, определяется свойством display display: block; display: inline; display: inline-block;
  13. 13. Блочная модель Каждый элемент на странице представляет собой прямоугольный блок и может иметь ширину, высоту, поля, границы и отступы. div { border: 6px solid #949599; height: 100px; margin: 20px; padding: 20px; width: 400px; }
  14. 14. Размеры блока По умолчанию размер элемента на экране начинается со свойств width и height, далее к ним добавляются значения свойств padding, border или margin. Но можно использовать div { box-sizing: border-box; }
  15. 15. Инструменты разработчика Показать блочную модель
  16. 16. Позиционирование содержимого Как сделать 2 колонки А как 3 колонки Как закрепить элемент
  17. 17. Style Guide Подумайте о других
  18. 18. Домашнее задание Прочитать https://webref.ru/layout/learn-html-css

×