Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

278 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Стажировка 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

×