Содержание
- 2. Азы CSS CSS — это язык для управления внешним видом HTML-документа. С помощью CSS можно задавать
- 3. CSS: общий синтаксис CSS-правило: селектор { свойство: значение; свойство: значение; свойство: значение; }
- 4. Классы в CSS Текст Текст .text-class1 { color: red; } .text-class2 { color: green; }
- 5. Группы свойств В CSS существует огромное количество свойств. Их можно разбить на следующие группы: оформление текста;
- 6. Оформление текста .underline { text-decoration: underline; } .bold { font-weight: bold; } .italic { font-style: italic;
- 7. Размеры и отступы .p-first { margin-left: 50px; } .p-second { font-weight: padding: 20px; } .p-third {
- 8. Позиционирование элементов .p-absolute { position: absolute; left: 100px; bottom: 200px; }
- 9. Сетки .left-column { float: left; } .right-column { float: right; } .footer { clear: both; }
- 10. Декоративные свойства .alert { background-color: #dff0d8; color: #468847; border-radius: 5px; }
- 11. Каскадность .p { padding: 10px; } .truth { background-color: #dff0d8; } //.p{background-color: #dff0d8;} //.truth{background-color: #aaddff;}
- 12. Приоритеты каскадности Когда для одного и того же элемента есть несколько CSS-правил с одинаковыми свойствами, браузер
- 13. Наследование body { color: red; } ul { font-style: italic; } Наследование работает не для всех
- 14. Селекторы
- 15. Контекстные(вложенные) селекторы p strong { … } ul .hit{ … } footer .menu a{ … }
- 16. Дочерние селекторы ... ... ul > li { … } ul > li > span{ …
- 17. Псевдоклассы селектор:псевдокласс { … } a:visited { … } li:last-child { … } .alert:hover { …
- 18. Псевдокласс :nth-child li:nth-child(2) { … } li:nth-child(4) { … } li:nth-child(2n) { … } С помощью
- 19. Псевдокласс :hover a:hover { … } tr:hover { … } .menu-item:hover { … } Этот псевдокласс
- 20. Динамические эффекты :hover li.top ul.submenu { display: none; } li.top:hover ul.submenu { display: block; } Этот
- 21. Что такое сетка?
- 22. Что такое поток документа?
- 23. Что такое поток документа? class="header"> class="column1"> class="column2"> class="column3"> class="footer"> .header .column1 .column2 .column3 .footer
- 24. Что такое поток документа? class="header"> class="column1"> class="column2"> class="column3"> class="footer"> .header .column1 .column2 .column3 .footer
- 25. class="header"> class="column1"> class="column2"> class="column3"> class="footer"> Что такое поток документа? .header .column1 .column3 .column2 .footer
- 26. Как управлять потоком?
- 27. Как управлять потоком? Управляя потоком, можно строить необходимые сетки. Для управления потоком нужно знать, как работает
- 28. Блочная модель документа CSS–cвойства, относящиеся к блочной модели: Влияют на поведение элементов в потоке (изменяют его
- 29. Типы элементов Базовые: блочные, строчные. Дополнительные: блочно-строчные, табличные, другие.
- 30. Блочные элементы Блочные элементы — прямоугольные области на странице. Блочными по умолчанию являются: ... /* и
- 31. Особенности блочных Принудительный перенос строки до и после. Воспринимают ширину, высоту, внутренние и внешние отступы. Занимают
- 32. Строчные элементы — фрагменты текста. Строчными по умолчанию являются: /* и другие теги для выделения небольших
- 33. Нет переносов строки до и после — можно располагать в одной строке. Ширина и высота зависят
- 34. Влияют на размер элемента: width height margin padding border Свойства блочной модели, 1 часть
- 35. width /* ширина содержимого */ width: width: width: 500px; 50%; auto; /* по умолчанию */
- 36. height: 500px; height: auto; /* по умолчанию */ height /* высота содержимого */
- 37. Пример width и height
- 38. Пример width одновременно с height
- 39. Советы Старайтесь не использовать одновременно width и height, если это не декоративный элемент с фиксированными размерами.
- 40. Позволяют управлять размерами гибче: min-width min-height max-width max-height Дополнительные свойства
- 41. padding: padding: padding: 10px; 5%; 2em; padding /* внутренние отступы */
- 42. padding с разных сторон Либо значения через пробелы 10px; /* одинаково со всех сторон */ 20px;
- 43. Примеры padding
- 44. /* особый эффект, об этом позже */ margin: margin: margin: margin: 10px; 5%; auto; 2em; margin
- 45. margin с разных сторон Либо значения через пробелы 10px; /* одинаково со всех сторон */ 20px;
- 46. Примеры margin
- 47. Состоит из трёх компонентов: Ширина рамки. Стиль рамки. Цвет рамки. Пример: border: 1px solid #ff0000; border
- 48. /* Компоненты: border-width border-style border-color /* Стороны: */ border-right border-left border-top border-bottom Компоненты и стороны border
- 49. div { /* белая точечная рамка шириной 5px */ border-width: border-style: border-color: 5px; dotted; #ffffff; }
- 50. Примеры border
- 51. Блочная модель и строчные Не реагируют на width и height. Воспринимают только горизонтальные margin и padding.
- 52. Блочная модель и строчные Если вдруг для элемента не работают отступы или размеры, то проверьте его
- 53. Если ширина не задана, общая ширина равна доступному месту в родителе. Расчёт полного размера элемента
- 54. Расчёт полного размера элемента При добавлении внутренних отступов ужимается содержимое.
- 55. Расчёт полного размера элемента Рамки также приводят к уменьшению области содержимого.
- 56. Расчёт полного размера элемента Внешние отступы изменяют общую ширину блока.
- 57. Если ширина задана, то общая ширина равна: ширина контента + внутренние отступы + ширина рамок Расчёт
- 58. Расчёт полного размера элемента Внешние отступы не влияют на общую ширину блока с заданной шириной.
- 59. При height: auto общая высота равна: высота содержимого + внутренний отступ + рамки Если не height:
- 60. Расчёт полного размера элемента
- 61. Общая ширина и высота элемента, это не то же самое, что свойства width и height, а
- 62. Схлопывание внешних отступов (margin). Выпадание внешних отступов (margin). Как расположить элемент по центру. Ширина по умолчанию
- 63. Схлопывание внешних отступов margin-bottom: 20px; margin-top: 40px; ?
- 64. Схлопывание внешних отступов В вертикальном направлении внешние отступы (margin) не складываются, а выбирается максимальный из доступных.
- 65. Выпадание внешних отступов margin-top: 40px; ?
- 66. Выпадание внешних отступов margin-top: 40px; 40px В вертикальном направлении внешний отступ (margin) вложенного блока может выпадать
- 67. Родительскому блоку можно задать одно из следующих свойств: overflow: hidden; /* использовать осторожно */ padding-top: 1px;
- 68. Как расположить элемент по центру div { width: [меньше margin-left: чем ширина родителя]px; auto; margin-right: auto;
- 69. width: auto; и width: 100%; width: auto; width: auto; padding width: 100%; width: 100%; padding родительский
- 70. Свойство box-sizing box-sizing: content-box; width: 100%; padding box-sizing: border-box;
- 71. h ttp://www.adamkaplan.me/grid
- 72. Аккуратно и точечно. Старайтесь не использовать его для разметки сеток, а применять точечно в узких местах,
- 73. Управляют поведением в потоке: display float /* а также clear */ Свойства блочной модели, 2 часть
- 74. Самые часто используемые значения: display: block display: inline display: inline-block display: none Да, вы можете сделать
- 75. Приёмы построения сеток float display: display: display: inline-block table flex
- 76. Свойство float Задумывалось для обтекания блоков текстом. Возможные значения: left, right, none. Прижимает элемент к левому
- 77. Свойство float Элементы со свойством float называют «плавающими». Плавающий элемент ужимается под контент. Плавающий элемент частично
- 78. Плавающий элемент «не виден» последующим блочным элементам. Последующие строчные элементы его обтекают. Частичное выпадение из потока
- 79. Выпадают и из родительских блоков Частичное выпадение из потока
- 80. Плавающие элементы пытаются встать друг за другом в ряд, если есть место. Если места не хватает
- 81. Плавающие элементы пытаются встать друг за другом в ряд, если есть место. Если места не хватает
- 82. Частичное выпадение из потока float: left; float: right; Вывод: плавающие элементы позволяют создавать колонки. Проблема: выпадают
- 83. Как предотвратить выпадение? Приём «распорка»: использовать свойство clear: both у элемента расположенного после плавающих. float: left;
- 84. Как предотвратить выпадение? Приём «псевдораспорка»: контейнеру, содержащему флоаты, добавляются псевдоэлемент с clear:both. .row::after { content: display:
- 85. Рецепт: добавляем контейнеру с плавающими элементами «псевдораспорку». Следим, чтобы колонки помещались в ряд. Построение сеток на
- 86. Особенности: Снаружи как строчный, внутри как блочный. Воспринимает ширину, высоту, внутренние и внешние отступы. Ширина по
- 87. Особенности: Можно располагать на одной строке (отсутствуют принудительные переносы). Воспринимают «текстовые свойства», например vertical-align или text-
- 89. Скачать презентацию