Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
CSS
Содержание
- 1. CSS
- 2. Css css Zen Gardenhttp://www.mezzoblue.com/zengarden/alldesigns/
- 3. дополненияWeb Developer
- 4. подключение
- 5. Структура CSS-файла
- 6. селекторСелектор тэгаid-селекторСелектор классов
- 7. Групповые селекторыЭлемент1, Элемент2, … , ЭлементN{…}
- 8. Селекторы потомковРодитель потомок {…}
- 9. псевдоселекторыa:link {…} ещё не посещенаa:visited {…} уже
- 10. Семейство шрифтовhttp://www.ampsoft.net/webdesign-l/WindowsMacFonts.htmlfont-family: “…”;
- 11. Размер шрифтаfont-size http://htmlbook.ru/css/font-size
- 12. Управление текстом
- 13. Управление текстом
- 14. Управление текстом
- 15. Управление текстом
- 16. Управление текстом
- 17. рамкиborder-width:2px;border-style:…;Border-color:…;-top--bottom-outline
- 18. спискиВнешний вид маркера тэга – list-style-type:
- 19. спискиlist-style-image: url(../image/…);list-style-position: inside | outside;
- 20. наследованиеhttps://www.w3.org/TR/CSS22/
- 21. Каскадность и приоритетность
- 22. Блочная модель
- 23. Блочная модельoverflow Значенияvisible - Отображается все содержание элемента,
- 24. Конфликт полейБраузер выбирает большее поле во внешнем отступе marginРегулировать блоки лучше отступом padding
- 25. Блочный и встроенный элемент
- 26. Блочный и встроенный элементdisplayМногоцелевое свойство, которое определяет,
- 27. Фоновые цвета и изображенияBackground-color:…;Background-image:url(…);
- 28. повтор изображенияhttp://ava7patterns.comBackground-image:url(…);Background-repeat: no-repeat/repeat-x/repeat-y;
- 29. Позиционирование фонаBackground-position:…;Фиксация фонаBackground-attachment:fixet;
- 30. Оформление таблицРамкаBorder-collapse: collapse | separate;Ширина таблицы и
- 31. Оформление формЗадачаОграничить форму по ширинеПодключить шрифт Вопросы сделать жирнымиЗадать фоновый цветВыделять активное поле
- 32. Оформление формСкругленные углыborder: 3px #CCCCCC solid; /*
- 33. Плавающие элементыfloat: left | right | none
- 34. Плавающие элементыclear: none | left | right | both
- 35. Плавающие элементы Выравнивание колонок по высоте - Вариантыhttps://habrahabr.ru/post/64173/https://html5book.ru/kak-sdelat-kolonki-odinakovoy-vysoti/http://chikuyonok.ru/2009/06/float-columns/http://dimox.name/3-column-css-layout-right-sidebars/
- 36. Позиционирование position: absolute | fixed | relative | static | sticky
- 37. Позиционирование absoluteTop | right | bottom | left
- 38. Позиционирование relativeTop | right | bottom | left
- 39. Позиционирование fixedTop | right | bottom | left
- 40. Позиционирование z-indexTop | right | bottom | left
- 41. visibilityVisible – изначально Hiddendisplay: none;
- 42. Max и Min ширина блокаMin-widthMax-width
- 43. Max и Min ширина блока@media screen and (max-width:800px){…}
- 44. Max и Min ширина блокаWidth:100% /*для картинок*/
- 45. Max и Min ширина блокаWidth:100% /*для картинок*/
- 46. Адаптивная вёрсткаMax-widthMargin: 1%; width: 22%;Margin: 0 -2%;Box-sizing: border-box;Position: static;Min-Height:
- 47. Браузеры Поппури ;)Старые ослики – вопрос Чернышевского ЛечитьНа Нараям!!!
- 48. Подключение CSS … style=“…”……@import url(“…”);
- 49. Ненаследуемые свойстваinherit
- 50. Скачать презентанцию
Css css Zen Gardenhttp://www.mezzoblue.com/zengarden/alldesigns/
Слайды и текст этой презентации
Слайд 9псевдоселекторы
a:link {…} ещё не посещена
a:visited {…} уже посещена
a:hover {…} наведён
курсор НО не активирована ссылка
Слайд 23Блочная модель
overflow
Значения
visible - Отображается все содержание элемента, даже за пределами
установленной высоты и ширины.
hidden - Отображается только область внутри элемента,
остальное будет скрыто.scroll - Всегда добавляются полосы прокрутки.
auto - Полосы прокрутки добавляются только при необходимости.
inherit - Наследует значение родителя.
Слайд 24Конфликт полей
Браузер выбирает большее поле во внешнем отступе margin
Регулировать блоки
лучше отступом padding
Слайд 26Блочный и встроенный элемент
display
Многоцелевое свойство, которое определяет, как элемент должен
быть показан в документе.
Inline - Элемент отображается как встроенный
block- Элемент
отображается как блочный
Слайд 28повтор изображения
http://ava7patterns.com
Background-image:url(…);
Background-repeat: no-repeat/repeat-x/repeat-y;
Слайд 30Оформление таблиц
Рамка
Border-collapse: collapse | separate;
Ширина таблицы и ячеек
Высота таблицы и
ячеек
Отступы
Выравнивание текста
vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top| |
Цвет фона
Фоновое изображение
Слайд 31Оформление форм
Задача
Ограничить форму по ширине
Подключить шрифт
Вопросы сделать жирными
Задать фоновый
цвет
Выделять активное поле
Слайд 32Оформление форм
Скругленные углы
border: 3px #CCCCCC solid; /* стили рамки */
-moz-border-radius:
10px; /* закругление для старых Mozilla Firefox */
-webkit-border-radius: 10px;
/* закругление для старых Chrome и Safari */ -khtml-border-radius:10px; /* закругление для браузера Konquerer системы Linux */
border-radius: 10px; /* закругление углов для всех, кто понимает */
Слайд 35Плавающие элементы
Выравнивание колонок по высоте - Варианты
https://habrahabr.ru/post/64173/
https://html5book.ru/kak-sdelat-kolonki-odinakovoy-vysoti/
http://chikuyonok.ru/2009/06/float-columns/
http://dimox.name/3-column-css-layout-right-sidebars/
Слайд 46Адаптивная вёрстка
Max-width
Margin: 1%; width: 22%;
Margin: 0 -2%;
Box-sizing: border-box;
initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
Position: static;
Min-Height:
