Содержание
- 2. Теги и атрибуты оформления
- 3. Теги и атрибуты оформления Куча проблем: захламляется HTML-разметка, многократно дублируется один и тот же код и
- 4. CSS (англ. Cascading Style Sheets — каскадные таблицы* стилей) — язык описания внешнего вида документа, написанного
- 5. Теги и атрибуты оформления CSS
- 6. CSS отвечает за такие аспекты Внешний вид элемента (цвет, шрифт, прозрачность и т.д. ); Размеры элемента
- 7. Синтаксис CSS div { color: red; font-size: 16pt; } CSS селектор, говорит к каким тегам (элементам)
- 8. Как использовать стили? style=“”
- 9. style=“”
- 11. mystyle.css …
- 12. На практике…
- 13. CSS Example Скачайте заготовку: http://files.courses.dp.ua/web/03/ex04.html И скопируйте в ваш текстовый редактор
- 14. Внешний вид элементов
- 15. CSS. Внешний вид элемента (тега)
- 16. CSS. Внешний вид элемента (тега)
- 17. Консоль разработчика, инспектор объектов
- 18. Консоль разработчика, инспектор объектов
- 19. DIV & SPAN В отличии от других тегов DIV и SPAN являются соответственно блочным и строчным
- 20. Размеры элемента (тега)
- 21. CSS. Размеры элемента (тега)
- 22. CSS. Размеры элемента (тега)
- 23. CSS. Размеры элемента (тега) padding: 10px; margin: 10px; body { padding: 0; margin: 0; } У
- 24. CSS. Размеры элемента (тега) CSS box model
- 25. CSS. Размеры элемента (тега) margin: 10px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; Отступы можно
- 26. padding: 5px; + padding: 0px; + padding: 5; - padding: 0; + CSS. Размерности
- 27. Абсолютные единицы измерения Не зависят от размера устройства и плотности точек на нём. Величина заданная при
- 28. Относительные единицы измерения https://webref.ru/css/value/size https://webref.ru/course/css-basics/size Зависят от размера окна браузера.
- 29. Относительные единицы измерения https://webref.ru/css/value/size https://webref.ru/course/css-basics/size Зависят от размера шрифта (родительского элемента/тега или корневого элемента/тега ).
- 30. Относительные единицы измерения https://webref.ru/css/value/size https://webref.ru/course/css-basics/size Зависят от размера шрифта (родительского элемента/тега или корневого элемента/тега ).
- 31. CSS. Цвет
- 32. http://www.colorpicker.com CSS. Цвет
- 33. Позиция элемента на экране
- 34. CSS. Позиция элемента на странице Браузер сам занимается определением того где какой элемент должен быть расположен,
- 35. CSS. Позиция элемента на странице
- 36. CSS. Позиция элемента на странице position: relative – задаёт расположение элемента относительно его положенного места, т.е.
- 37. CSS. Позиция элемента на странице position: absolute – задаёт расположение элемента «конкретно тут», и абсолютно не
- 38. CSS. Позиция элемента на странице position: fixed – также фиксирует элемент на странице, как и «absolute»,
- 39. Can I use?
- 40. http://caniuse.com/ - сервисе который знает в какому браузере какое css-свойство поддерживается; Где какое свойство будет работать?!
- 41. Обратите особое внимание на…
- 42. CSS свойство Transform https://www.w3schools.com/cssref/css3_pr_transform.asp
- 43. CSS свойство Filter https://www.w3schools.com/cssref/css3_pr_filter.asp
- 44. Вендорные префиксы
- 45. Вендорные префиксы Перед тем как добавить в свой браузер новое стилевое свойство разработчики браузера «обкатывают» его,
- 46. Итого
- 47. Как при помощи CSS навести красоту? CSS предоставляет множество инструментов («кирпичиков») из которых возможно построить практически
- 48. Домашнее задание
- 49. Cверстать вот такую кнопку? Есть тег который позволяет отобразить на странице кнопку, но кнопку вот в
- 50. «Изучаем HTML и CSS». Эрик Фримен, Элизабет Фримен.
- 51. http://www.w3schools.com/css/default.asp W3School CSS Tutorial
- 53. Скачать презентацию