Содержание
- 2. Подключаем CSS стили My first page body{ background: red; } Структура файлов /project_name index.html /assets /images
- 3. CSS селекторы //По названию тега body{...} li{...} div ul li{...} //По id #elem {...} div#elem {...}
- 4. Псевдоклассы в CSS // Стили для непосещенных ссылок a:link {...} a.logo-link:link {...} // Стили для посещенных
- 5. CSS свойства width: value | % | auto | calc(); height: value | % | auto
- 6. margin-top: 10px; margin-right: 20px; margin-bottom: 15px; margin-left: 20px; margin: 10px 20px 15px 20px; margin: 10px 20px
- 7. margin для блочных элементов width: 200px; height: 200px; border: 1px solid; width: 200px; height: 200px; border:
- 8. width: 200px; height: 200px; border: 1px solid; margin: 10px -50px; width: 200px; height: 200px; border: 1px
- 9. Поля в CSS height: 200px; border: 1px solid; padding: 20px 80px; width: 200px; height: 200px; border:
- 11. Рамки в CSS border-width: value; border-style: solid | dashed | dotted; border-color: color | HEX color
- 12. Цвета в CSS // HEX цвет обозначается хэштегом “#” и записывается в шестнадцатеричной системе счисления, белый
- 13. Лайфхаки с border border-top: 50px solid red; border-right: 50px solid green; border-bottom: 50px solid gray; border-left:
- 14. Сетка сайта
- 15. Блочная верстка, вариант 1 - float .box { border: 1px solid; } .float-element { width: 33.3%;
- 16. Лайфхаки с float ★★★★☆ $2.25 Cablexpert CC-HDMI4-10 *{margin: 0;} .main{ max-width: 350px; border: 1px solid; }
- 17. Блочная верстка, вариант 2 - inline-block .box { border: 1px solid; font-size: 0; } .ib-elem {
- 18. Блочная верстка, вариант 3 - flex .box { border: 1px solid; display: flex; } .flex-elem {
- 20. Скачать презентацию