HTML+CSS, верстка

Сентябрь 7, 2022

Главная
Алгебра
HTML+CSS, верстка

Содержание

2. Короткое введение Последний стандарт HTML – версия 5 XHML – переработанный HTML в соответствии со стандартом
3. Заготовка
4. Привет, Мир!
5. Элементы и теги содержание тега Текст абзаца HTML – это прежде всего содержание, данные. HTML, как
6. Редакторы WYSIWYG или текстовые процессоры WebStorm Sublime Atom Notepad++ Microsoft Word!?
7. Браузеры Internet Explorer Edge Firefox Opera Safari Chrome Yandex Vivaldi
8. Другие инструменты Firebug – не заменим для разработки и отладки HTML, CSS, Javascript Pixel Perfect –
9. Теги, атрибуты. Блочные и строковые элементы , , Семантика, логичность кода ( , , , ,
10. Обработка ошибок, DTD Отсутствующие теги – плохая практика Первый абзац Второй абзац Заголовок Игнорирование лишних тегов
11. Текст Текст, абзацы, перевод строки Лишние пробельные символы не учитываются Скачано 10Кб Заголовки, значение заголовков и
12. Шрифт Немного терминов Название шрифта, семейство (serif, sans-serif, monospace…) Размер Цвет Межсимвольное расстояние Курсив, жирность Б
13. Теги логической разметки текста Не гарантируется именно такое отображение
14. Основные теги физической разметки Не гарантируется именно такое отображение Содержимое вышеупомянутых тегов – любые элементы допустимые
15. Цитаты, адреса и — цитаты (длинная и короткая) Длииинная цитата Адрес - адрес
16. Линейки Использование атрибутов не рекомендуется Часто используется для логического отделения информационных блоков line.html
17. Изображения в документе HTML Формат? Все зависит от браузеров, в HTML нет спецификаций Формат GIF сжатие
18. Формат JPEG 24 битная палитра (16 млн цветов) потеря качества рисунка Формат PNG цветовые схемы: truecolor
23. Итог JPEG – для фотографий, изображений с большим количеством градиентов и цветов GIF – для маленьких
24. Применение изображений в HTML align="bottom | left | middle | right | top" Заливка с помощью
25. Гиперссылки Основа гипертекста URL scheme:scheme_specific_part :// : @ : / http://ru.wikipedia.org:80/wiki/HTTP?get#GET Только US-ACSII – символы http://yandex.ru/yandsearch?text=%2F+%D0%BA%D0%BE%D0%B4%20%2F
26. Отношения. Мета-теги. Мы имеем дело не с документом, а с проектом, набором документов relations.html
27. Списки Страны Англия Швейцария Города Крокодил Гена Чебурашка relations.html
28. Списки определений Термин 1 Определение первого термина Термин 2 Определение второго термина lists.html
29. Формы Процесс заполнения, отправки События (controls) type=text, password, file size="30" maxlength="20" value="my name" accept="image/*" forms.html
30. Поля форм forms.html
31. Поля форм 2 текст texxxt accesskey, disabled, readonly Введите имя: forms.html http://trevordavis.net/play/input-vs-button/
32. Таблицы Название таблицы 111 background, bgcolor, bordercolor, cols, height, title, nowrap colspan, rowspan , , tables.html
33. Фреймы Фреймы Рамки для frameset noresize, scrolling, frameborder для frame Не работают фреймы? target у ссылки,
34. Объекты и апплеты Вложенные object object.html, object.html http://www.i2r.ru/static/245/out_21542.shtml - Параметры object
35. div и span Div – блочный Span – строчный title, dir, lang, style, class
36. CSS 2 Стиль – это правило отображения тега Встроенные стили, стили документа, внешние таблицы или @import
37. Синтаксис seceltor {property:value; property1:value1;} p {color: red; text-decoration: underline;} p {font-family: Georgia, 'Times New Roman', Times,
38. Селекторы p {} /* типовой, по тегу */ #id1 {} /* идентификатор */ .class1 {} /*
39. Приоритеты стилей Стили !important Порядок каскадирования: По источнику ("ближе" к тегу) Специфичность, более узкое, точное определение
40. Специфичность a – id; b – класс, псевдокласс, аттрибут; c – имя тега. * {} /*
41. Размеры, цвета, URL в CSS Ключевые слова, inherit url(http://localhost/1.jpg) red, #7788AA, rgb(12,11,34) Размеры: em — ширина
42. Шрифты font-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..) font-size: larger; font-style: italic;
43. Свойства текста letter-spacing: 2px; line-height: 120%; (наслед. вычисл. от родителя) text-align: right; text-decoration: blink | line-through
44. Контейнер строки
45. Свойства контейнеров Блочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств) top, right, bottom, left
46. Горизонтальное форматирование Значение auto – заполняет всю оставшуюся ширину контейнера (margin, width) Отрицательные поля Сумма 7
47. контейнер контейнер height=auto horis1.html
48. Вертикальное форматирование Высота по содержимому (auto) Или через height. Если содержимого больше чем height – прокрутка
49. Сворачивание вертикальных полей margins.html
50. Форматирование строчных элементов Многострочный строковый элемент, рамки, фон Строковый блок и контейнер строки Отступы, рамки и
51. Изменение представления элемента display: block | inline | inline-table | list-item | none | run-in |
52. Поля По умолчанию margin=0 У некоторых элементов есть поля по умолч. img {margin: 1em;} img {margin:
53. Рамки Рамки внутри полей, они ограничивают фон Ширина, стиль, цвет Ширина по умолч.=medium или none Цвет
54. Рамки, стили рамок border-top, border-right, border-bottom, border-left: border-width || border-style || color border: border-width || border-style
55. Отступы padding: значение (любые меры, проценты) (TRBL) Залиты фоном Отступы не сворачиваются % относительно ширины родителя
56. Цвета, фон color: | inherit Свойство color для элементов форм background-color: цвет | transparent (умолч.) background-image:
57. Фон background-position: [проценты | значение] | [left | center | right] || [top | center |
58. Перемещение, плавающая модель Рисунки, параграф с float Задание ширины обязательно Поля не сворачиваются Перемещаемый элемент генерирует
59. Позиционирование position: absolute | fixed | relative | static static – нормальный поток relative – смещение
60. Позиционирование 2 Блок-контейнер для элементов с position = relative | static – родитель Блок-контейнер для элементов
61. Свойства смещения top, right, bottom, left: | | auto | inherit Ширина и высота min-width, min-height:
62. Переполнение и отсечение содержимого overflow: visible | hidden | scroll | auto | inherit overflow-x и
63. Видимость элементов visibility: visible | hidden | collapse | inherit visibility.html
64. Абсолютное позиционирование Абсолютное позиционирование относительно… Перекрытие элементов Размеры и размещение left + margin-left + border-left-width +
65. Размещение по оси z z-index: число | auto Может быть отрицательным Локальный контекст занесения в стек
66. Фиксированное позиционирование Относительно окна браузера Удобно, например, для баннеров или для меню position_fixed.html
67. Относительное позиционирование Смещение относительно текущего положения position_relative.html
68. Верстка таблиц Объединять ячейки через CSS нельзя У ячеек нет полей Свойство display tables2.html
69. Таблицы. Продолжение display: inline-table – таблица строкового уровня (типа inline-block) Значения можно присвоить любым элементам и
70. Таблицы. Продолжение Слои таблицы caption-side: top | bottom border-collapse: collapse | separate | inherit border-spacing: ?
71. Сливающиеся рамки ячеек Если display: table | inline-table у элемента не может быть отступов, только поля
72. Размеры таблиц Ширина table-layout: auto | fixed | inherit Скорость рендера с фиксированной шириной больше Если
73. Элементы списка Управлять размещением сложно list-style-position: inside | outside – вне содержимого или как строковый маркер
74. Генерируемое содержимое Например маркеры списка… a[href]:before {content: "(link)";} Ограничения на display content: строка | attr(атрибут) |
75. Курсоры cursor: [[ ,]* [auto | default | pointer | crosshair | move | e-resize |
76. Курсоры
77. Контуры Ну участвуют в потоке документа Могут употребляться вместе с рамками outline-style: none | dotted |
79. Скачать презентацию

Слайд 2

Короткое введение
Последний стандарт HTML – версия 5
XHML – переработанный HTML в

соответствии со стандартом XML
Стандарты неоднозначны, не все моменты регламентированы
Придерживайтесь стандартов, осторожнее с нестандартными решениями

Слайд 3

        Заготовка

Слайд 4

Привет, Мир!

Слайд 5

Элементы и теги
<название_тега>
<название_тега>содержание тега
Текст абзаца

HTML – это прежде всего содержание, данные.

HTML, как правило, только лишь советует как отображать документы.

Слайд 6

Редакторы
WYSIWYG или текстовые процессоры
WebStorm
Sublime
Atom
Notepad++
Microsoft Word!?

Слайд 7

Браузеры
Internet Explorer
Edge
Firefox
Opera
Safari
Chrome
Yandex
Vivaldi

Слайд 8

Другие инструменты
Firebug – не заменим для разработки и отладки HTML, CSS,

Javascript
Pixel Perfect – плагин для подложки рисунка дизайна при верстке
IE Developer Toolbar,
IETester,
DebugBar for IETester

Слайд 9

Теги, атрибуты. Блочные и строковые элементы
, , <br><body bgcolor="#A0BEC4" onload="alert('Loaded');"></body><br><br>Семантика, логичность кода (<strong>, <em>, <blockquote>, <code>, …)<br>Спецсимволы: < > …<br><p>, <h1>, <h2>, <h3>, …, <br>, <hr><br><a href="url">текст</a><br><img src="url" title="текст"><br>Вложенность тегов<br><p>test.html<br></div></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 10</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-9.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Обработка ошибок, DTD Отсутствующие теги – плохая практика Первый абзац Второй" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-9.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-9.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-9.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-9.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Обработка ошибок, DTD<br><p>Отсутствующие теги – плохая практика <p>Первый абзац <p>Второй абзац <h2>Заголовок<br>Игнорирование</div></h2><div class="slides-content">лишних тегов <p>Первый абзац <p><p>Второй абзац <uktag><br>XHTML – намного строже<br> - не правильно, <br /> - правильно<br>Регистр символов в названии тегов<br><b>текст <i>текст </b>текст</i> - не правильно<br>Обязательные теги, например <html><br>Инструменты проверки кода на ошибки: HTML – валидатор<br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br><p>error.html, error2.html<br></div></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 11</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-10.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Текст Текст, абзацы, перевод строки Лишние пробельные символы не учитываются Скачано" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-10.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-10.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-10.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-10.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Текст<br><p>Текст, абзацы, перевод строки<br>Лишние пробельные символы не учитываются<br><p align="left" class="log" lang="ru"</div></h2><div class="slides-content">id="loginfo" style="color:blue" title="Некоторая статистическая информация">Скачано 10Кб</p><br>Заголовки, значение заголовков<br> и <nobr> — все браузеры поддерживают, но…<br><pre> — блок предварительно форматированного текста (все пробелы, переводы строк, и т.д., монош. шрифт)<br>Физическая и логическая разметка<br><p>text.html<br></div></div></div><div class="slides-wrapper"><div id="slide12" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 12</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-11.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Шрифт Немного терминов Название шрифта, семейство (serif, sans-serif, monospace…) Размер Цвет" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-11.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-11.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-11.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-11.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Шрифт<br><p>Немного терминов<br>Название шрифта, семейство (serif, sans-serif, monospace…)<br>Размер<br>Цвет<br>Межсимвольное расстояние<br>Курсив, жирность<br><font size=5 color="#FFFFFF"</div></h2><div class="slides-content">face="Courier, Arial"> Б</font>уква<br></div></div></div><div class="slides-wrapper"><div id="slide13" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 13</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-12.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Теги логической разметки текста Не гарантируется именно такое отображение" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-12.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-12.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-12.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-12.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Теги логической разметки текста<br><p>Не гарантируется именно такое отображение<br></div></h2></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 14</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-13.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Основные теги физической разметки Не гарантируется именно такое отображение Содержимое вышеупомянутых" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-13.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-13.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-13.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-13.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Основные теги физической разметки<br><p>Не гарантируется именно такое отображение<br>Содержимое вышеупомянутых тегов –</div></h2><div class="slides-content">любые элементы допустимые в тексте.<br>Употребляться могут везде, где применяются элементы, относящиеся к тексту.<br></div></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 15</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-14.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Цитаты, адреса и — цитаты (длинная и короткая) Длииинная цитата Адрес - адрес" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-14.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-14.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-14.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-14.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Цитаты, адреса<br><p><blockquote> и <q> — цитаты (длинная и короткая) <blockquote cite="http://lib.ru/" lang="en"</div></h2><div class="slides-content">style="color:green;">Длииинная цитата</blockquote><br><address>Адрес</address> - адрес<br></div></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 16</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-15.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Линейки Использование атрибутов не рекомендуется Часто используется для логического отделения информационных блоков line.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-15.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-15.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-15.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-15.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Линейки <br><p><hr align="center" color="#000000" size="3" width="50%"><br>Использование атрибутов не рекомендуется<br>Часто используется для</div></h2><div class="slides-content">логического отделения информационных блоков<br><p>line.html<br></div></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 17</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-16.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Изображения в документе HTML Формат? Все зависит от браузеров, в HTML" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-16.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-16.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-16.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-16.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Изображения в документе HTML<br><p>Формат? Все зависит от браузеров, в HTML нет</div></h2><div class="slides-content">спецификаций<br>Формат GIF<br>сжатие "без потерь"<br>256 цветов максимум<br>чересстрочный (всплывающий) и нормальный формат<br>прозрачность<br>анимация<br></div></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 18</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-17.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Формат JPEG 24 битная палитра (16 млн цветов) потеря качества рисунка" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-17.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-17.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-17.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-17.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Формат JPEG<br>24 битная палитра (16 млн цветов)<br>потеря качества рисунка<br>Формат PNG<br>цветовые схемы:<br>truecolor<br>grayscale<br>индексированная</div></h2><div class="slides-content">палитра (GIF-подобная) – PNG-8<br>альфа канал на 254 уровня<br>улучшенное сжатие без потерь<br>двухмерное чередование<br>гамма-коррекция<br>Формат MNG<br></div></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 19</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-18.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-18.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-18.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-18.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-18.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div></div></h2></div></div><div class="slides-wrapper"><div id="slide20" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 20</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-19.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-19.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-19.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-19.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-19.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div></div></h2></div></div><div class="slides-wrapper"><div id="slide21" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 21</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-20.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-20.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-20.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-20.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-20.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div></div></h2></div></div><div class="slides-wrapper"><div id="slide22" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 22</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-21.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-21.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-21.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-21.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-21.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div></div></h2></div></div><div class="slides-wrapper"><div id="slide23" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 23</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-22.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Итог JPEG – для фотографий, изображений с большим количеством градиентов и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-22.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-22.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-22.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-22.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Итог<br><p>JPEG – для фотографий, изображений с большим количеством градиентов и цветов<br>GIF</div></h2><div class="slides-content">– для маленьких рисунков, иконок, пиктограмм, полезен, когда края – четкие<br>PNG8 – когда не много цветов, четкие края, например скриншоты windows - окон<br>PNG24 – полупрозрачности, изображение без потери качества, большое количество цветов<br></div></div></div><div class="slides-wrapper"><div id="slide24" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 24</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-23.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Применение изображений в HTML align="bottom | left | middle | right" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-23.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-23.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-23.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-23.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Применение изображений в HTML<br><p><img src="/images/screenshot.png" alt="Скриншот" title="Скриншот" border="1" align="middle" width="50" height="70"><br>align="bottom</div></h2><div class="slides-content">| left | middle | right | top"<br>Заливка с помощью width или height<br>Бывает, что изображения отключены…<br>ismap, usemap<br>onAbort – только ie, onError, onLoad<br>Фоновые изображения<br><p>images.html<br></div></div></div><div class="slides-wrapper"><div id="slide25" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 25</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-24.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Гиперссылки Основа гипертекста URL scheme:scheme_specific_part :// : @ : / http://ru.wikipedia.org:80/wiki/HTTP?get#GET" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-24.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-24.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-24.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-24.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Гиперссылки<br><p>Основа гипертекста<br>URL scheme:scheme_specific_part <схема>://<логин>:<пароль>@<хост>:<порт>/<URL‐путь> http://ru.wikipedia.org:80/wiki/HTTP?get#GET <a id="GET" name="GET"></a><br>Только US-ACSII – символы<br>http://yandex.ru/yandsearch?text=%2F+%D0%BA%D0%BE%D0%B4%20%2F (/ код /)<br><a</div></h2><div class="slides-content">href="foto.jpg" target="_blank">foto</a> - ссылка с относительным адресом<br>mailto:mail@mail.ru?subject=Subject<br><p>links.html, folder1/links.html<br></div></div></div><div class="slides-wrapper"><div id="slide26" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 26</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-25.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Отношения. Мета-теги. Мы имеем дело не с документом, а с проектом, набором документов relations.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-25.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-25.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-25.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-25.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Отношения. Мета-теги.<br><p>Мы имеем дело не с документом, а с проектом, набором</div></h2><div class="slides-content">документов<br><head> <base href="http://rezonans.ru/" /> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="MediaWiki 1.16alpha-wmf" /> <meta name="keywords" content="ASCII,Ref-en,Английский язык,Соединённые Штаты Америки,Стандарт,Код,Информация,Диакритический знак,Акут,Man (Unix),Язык" /> </head><br><p>relations.html<br></div></div></div><div class="slides-wrapper"><div id="slide27" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 27</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-26.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Списки Страны Англия Швейцария Города Крокодил Гена Чебурашка relations.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-26.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-26.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-26.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-26.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Списки<br><p><ul type="square"><br> <li>Страны<br> <ul type="circle"><br> <li>Англия</li><br> <li>Швейцария</li><br> </ul><br> </li><br> <li>Города</li><br></ul><br><ol type="A" start="3"><br><br> <li>Крокодил</div></h2><div class="slides-content">Гена</li><br> <li value="6">Чебурашка</li><br></ol><br><p>relations.html<br></div></div></div><div class="slides-wrapper"><div id="slide28" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 28</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-27.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Списки определений Термин 1 Определение первого термина Термин 2 Определение второго термина lists.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-27.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-27.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-27.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-27.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Списки определений<br><p><dl><br> <dt>Термин 1</dt><br> <dd>Определение первого термина</dd><br> <dt>Термин 2</dt><br> <dd>Определение второго термина</dd><br></dl> <br><p>lists.html<br></div></h2></div></div><div class="slides-wrapper"><div id="slide29" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 29</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-28.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Формы Процесс заполнения, отправки События (controls) type=text, password, file size="30" maxlength="20" value="my name" accept="image/" forms.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-28.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-28.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-28.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-28.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Формы<br><p>Процесс заполнения, отправки<br><form action="form.php" enctype="multipart/form-data" method="POST"></form><br>События<br><input name="my_name"> (controls)<br>type=text, password, file<br>size="30" maxlength="20"</div></h2><div class="slides-content">value="my name"<br>accept="image/"<br><p>forms.html<br></div></div></div><div class="slides-wrapper"><div id="slide30" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 30</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-29.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Поля форм forms.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-29.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-29.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-29.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-29.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Поля форм<br><p><input type="checkbox" name="border" value="top" checked="checked" /> <br><input type="radio" name="border" value="top"</div></h2><div class="slides-content">checked><br><input type="submit" value="отправить" name="submit"><br><input type="reset" value="Сбросить форму"><br><input type="image" src="knopka.jpg" name="btn" /><br><input type="button" value="надпись"><br><input type="hidden" name="user" value="34tr3sdf" /><br><p>forms.html<br></div></div></div><div class="slides-wrapper"><div id="slide31" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 31</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-30.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Поля форм 2 текст texxxt accesskey, disabled, readonly Введите имя: forms.html http://trevordavis.net/play/input-vs-button/" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-30.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-30.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-30.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-30.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Поля форм 2<br><p><button type="submit" ><img src="btn.gif" alt="btn" /> текст</button><br><textarea name="longtext" rows="10"</div></h2><div class="slides-content">cols="40"></textarea><br><select name="xxx" multiple="multiple" size="5"><option selected="selected">texxxt</option></select><br>accesskey, disabled, readonly<br><label for="name-field">Введите имя:</label> <input name="name" id="name-field" /><br><fieldset><legend align="top"></legend></fieldset><br><p>forms.html<br><p>http://trevordavis.net/play/input-vs-button/<br></div></div></div><div class="slides-wrapper"><div id="slide32" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 32</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-31.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Таблицы Название таблицы 111 background, bgcolor, bordercolor, cols, height, title, nowrap colspan, rowspan , , tables.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-31.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-31.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-31.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-31.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Таблицы<br><p><table cellspacing="0" cellpadding="0" border="0" frame="below" rules="cols" width="100%"> <caption>Название таблицы</caption> <thead> <tr align="left" valign="middle"> <th>111</th> <td></td> </tr> </thead> </table><br>background, bgcolor,</div></h2><div class="slides-content">bordercolor, cols, height, title, nowrap<br>colspan, rowspan<br><tfoot>, <tbody><br><colgroup>, <col><br><p>tables.html<br></div></div></div><div class="slides-wrapper"><div id="slide33" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 33</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-32.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Фреймы Фреймы Рамки для frameset noresize, scrolling, frameborder для frame Не" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-32.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-32.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-32.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-32.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Фреймы<br><p><html><head><title>Фреймы
Рамки для frameset
noresize, scrolling, frameborder для

frame
<br><iframe height="100" width="400" src="fr1.htm">Не работают фреймы?</iframe><br>target у ссылки, <base><br><p>frames.html, iframe.html<br></div></div></div><div class="slides-wrapper"><div id="slide34" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 34</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-33.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Объекты и апплеты Вложенные object object.html, object.html http://www.i2r.ru/static/245/out_21542.shtml - Параметры object" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-33.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-33.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-33.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-33.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Объекты и апплеты<br><p><object> <param name="name" value="1" /> </object><br>Вложенные object<br><embed src="x.swf" type="application/x-shockwave-flash" /><br><p>object.html, object.html<br><p>http://www.i2r.ru/static/245/out_21542.shtml</div></h2><div class="slides-content">- Параметры object<br></div></div></div><div class="slides-wrapper"><div id="slide35" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 35</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-34.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="div и span Div – блочный Span – строчный title, dir, lang, style, class" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-34.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-34.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-34.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-34.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>div и span<br><p>Div – блочный<br>Span – строчный <br>title, dir, lang, style,</div></h2><div class="slides-content">class<br></div></div></div><div class="slides-wrapper"><div id="slide36" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 36</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-35.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="CSS 2 Стиль – это правило отображения тега Встроенные стили, стили" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-35.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-35.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-35.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-35.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>CSS 2<br><p>Стиль – это правило отображения тега<br>Встроенные стили, стили документа, внешние</div></h2><div class="slides-content">таблицы<br><link> или @import<br>@media – правило <br>/* комментарий к стилям */<br><p>css.html, css.css, css1.css<br></div></div></div><div class="slides-wrapper"><div id="slide37" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 37</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-36.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Синтаксис seceltor {property:value; property1:value1;} p {color: red; text-decoration: underline;} p {font-family:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-36.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-36.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-36.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-36.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Синтаксис<br><p>seceltor {property:value; property1:value1;}<br>p {color: red; text-decoration: underline;}<br>p {font-family: Georgia, 'Times New</div></h2><div class="slides-content">Roman', Times, serif;}<br>p {border: 1px solid red;}<br>Стиль элемента явно указан, либо унаследован, либо взят по умолчанию<br><p>css0.html<br></div></div></div><div class="slides-wrapper"><div id="slide38" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 38</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-37.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Селекторы p {} /* типовой, по тегу */ #id1 {} /*" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-37.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-37.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-37.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-37.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Селекторы<br><p>p {} /* типовой, по тегу */<br>#id1 {} /* идентификатор */<br>.class1</div></h2><div class="slides-content">{} /* по имени класса */<br>* {} /* универсальный */<br>*[align="right"] {} /* по атрибутам */<br>p#id1.class1.class2 {}<br>p:first-line {} /* псевдоэлементы */<br>div, table, .class1 {} /*групповой*/<br>ul ul{} /*контекст, наследующие*/<br>ol > li {} /*дочерний*/<br>li + li {} /*соседние*/<br><p>http://xhtml.ru/2008/01/08/css-selectors - поддерживаемые в браузерах селекторы<br><p>css2.html<br></div></div></div><div class="slides-wrapper"><div id="slide39" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 39</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-38.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Приоритеты стилей Стили !important Порядок каскадирования: По источнику ("ближе" к тегу)" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-38.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-38.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-38.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-38.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Приоритеты стилей<br><p>Стили <br>!important <br>Порядок каскадирования:<br>По источнику ("ближе" к тегу)<br>Специфичность, более узкое, точное</div></h2><div class="slides-content">определение<br>Порядок следования<br>Как правило стили приоритетнее атрибутов<br><p>агент, браузер<br><p>пользователь<br><p>разработчик<br><p>агент, браузер<br><p>разработчик<br><p>пользователь<br><p>css.html, css.css, css1.css<br></div></div></div><div class="slides-wrapper"><div id="slide40" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 40</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-39.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Специфичность a – id; b – класс, псевдокласс, аттрибут; c –" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-39.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-39.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-39.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-39.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Специфичность<br><p>a – id; b – класс, псевдокласс, аттрибут; c – имя</div></h2><div class="slides-content">тега.<br>* {} /* a=0 b=0 c=0 -> специфичность = 0 */ <br>li {} /* a=0 b=0 c=1 -> специфичность = 1 */<br>ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */ <br>ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */<br>ul ol li.red {} /* a=0 b=1 c=3 -> специфичность = 13 */<br>li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */<br>#x34y {} /* a=1 b=0 c=0 -> специфичность = 100 */<br>/* style="" -> специфичность = 1000 */<br><p>css1.html<br></div></div></div><div class="slides-wrapper"><div id="slide41" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 41</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-40.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Размеры, цвета, URL в CSS Ключевые слова, inherit url(http://localhost/1.jpg) red, #7788AA," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-40.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-40.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-40.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-40.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Размеры, цвета, URL в CSS<br><p>Ключевые слова, inherit<br>url(http://localhost/1.jpg)<br>red, #7788AA, rgb(12,11,34)<br>Размеры:<br>em — ширина</div></h2><div class="slides-content">буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.<br>px — пикселы<br>pt — пункты. Один пункт = 1/72 дюйма.<br>% — проценты<br>ex — ширина буквы x<br>in — дюймы<br>cm — сантиметры<br>mm — миллиметры<br>pc —размер в пиках. (12 пунктов).<br><p>keywords.html<br></div></div></div><div class="slides-wrapper"><div id="slide42" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 42</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-41.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Шрифты font-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-41.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-41.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-41.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-41.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Шрифты<br><p>font-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)<br>font-size:</div></h2><div class="slides-content">larger;<br>font-style: italic;<br>font-variant: small-caps;<br>font-weight: bold; (400)<br>font: [font-style || font-variant || font-weight] font-size [/line-height] font-family<br>Загрузка шрифтов, @font-face<br><p>font_css.html<br></div></div></div><div class="slides-wrapper"><div id="slide43" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 43</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-42.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Свойства текста letter-spacing: 2px; line-height: 120%; (наслед. вычисл. от родителя) text-align:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-42.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-42.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-42.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-42.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Свойства текста<br><p>letter-spacing: 2px;<br>line-height: 120%; (наслед. вычисл. от родителя)<br>text-align: right; <br>text-decoration: blink</div></h2><div class="slides-content">| line-through | overline | underline | none<br>text-ident: -5em;<br>text-transform: capitalize | lowercase | uppercase | none<br>vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты (только строк. и замещ. элементы)<br>word-spacing: 10em;<br>white-space: normal | nowrap | pre (pre в ie6 работает ☹)<br>Другие языки…<br><p>text_css.html<br></div></div></div><div class="slides-wrapper"><div id="slide44" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 44</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-43.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Контейнер строки" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-43.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-43.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-43.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-43.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Контейнер строки<br></div></h2></div></div><div class="slides-wrapper"><div id="slide45" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 45</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-44.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Свойства контейнеров Блочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств) top, right, bottom, left" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-44.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-44.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-44.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-44.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Свойства контейнеров<br><p>Блочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)<br>top,</div></h2><div class="slides-content">right, bottom, left<br></div></div></div><div class="slides-wrapper"><div id="slide46" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 46</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-45.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Горизонтальное форматирование Значение auto – заполняет всю оставшуюся ширину контейнера (margin," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-45.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-45.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-45.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-45.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Горизонтальное форматирование<br><p>Значение auto – заполняет всю оставшуюся ширину контейнера (margin, width)<br>Отрицательные</div></h2><div class="slides-content">поля<br>Сумма 7 размеров дочернего элемента = width родительского<br>Для замещающих элементов размеры auto равны реальным размерам<br>Размеры замещающих элементов изменяются пропорционально, если задавать одно из них<br><p>autowidth.html<br></div></div></div><div class="slides-wrapper"><div id="slide47" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 47</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-46.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="контейнер контейнер height=auto horis1.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-46.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-46.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-46.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-46.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>контейнер<br><p>контейнер<br><p>height=auto<br><p>horis1.html<br></div></h2></div></div><div class="slides-wrapper"><div id="slide48" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 48</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-47.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Вертикальное форматирование Высота по содержимому (auto) Или через height. Если содержимого" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-47.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-47.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-47.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-47.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Вертикальное форматирование<br><p>Высота по содержимому (auto)<br>Или через height. Если содержимого больше чем</div></h2><div class="slides-content">height – прокрутка<br>margin-top или bottom равное auto = 0<br>Высота в процентах – от блока контейнера, но…<br>Центрирование по вертикали через процентные margin и высоту блока-контейнера<br>Сворачивание полей<br>Отрицательные margin<br><p>vert1.html, vert2.html,<br>negative_margins.html<br></div></div></div><div class="slides-wrapper"><div id="slide49" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 49</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-48.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Сворачивание вертикальных полей margins.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-48.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-48.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-48.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-48.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Сворачивание вертикальных полей<br><p>margins.html<br></div></h2></div></div><div class="slides-wrapper"><div id="slide50" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 50</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-49.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Форматирование строчных элементов Многострочный строковый элемент, рамки, фон Строковый блок и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-49.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-49.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-49.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-49.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Форматирование строчных элементов<br><p>Многострочный строковый элемент, рамки, фон<br>Строковый блок и контейнер строки<br>Отступы,</div></h2><div class="slides-content">рамки и поля незамещаемых элементов не оказывают влияния на высоту строкового блока в отличии от замещаемых<br>Вспомним line-height<br>Если в строке есть замещаемый элемент, то его реальная высота, padding и margin, border влияют на высоту строкового блока<br><p>str_format.htm<br></div></div></div><div class="slides-wrapper"><div id="slide51" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 51</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-50.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Изменение представления элемента display: block | inline | inline-table | list-item" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-50.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-50.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-50.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-50.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Изменение представления элемента<br><p>display: block | inline | inline-table | list-item |</div></h2><div class="slides-content">none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inline-block<br>Пример употребления display:block<br>Пример употребления display:inline<br>display определяет только лишь представление элемента, но не его тип, не его суть<br>display: inline-block<br>Иногда значение display вычисляется в зависимости от значения свойств float или position (абс. – или table или block)<br><p>display1.html<br>display_inline_block.html<br></div></div></div><div class="slides-wrapper"><div id="slide52" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 52</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-51.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Поля По умолчанию margin=0 У некоторых элементов есть поля по умолч." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-51.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-51.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-51.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-51.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Поля<br><p>По умолчанию margin=0<br>У некоторых элементов есть поля по умолч.<br>img {margin: 1em;}<br>img</div></h2><div class="slides-content">{margin: 1em 2em 3em 4em;}<br>img {margin: 1em 2em;}<br>img {margin: 1em 2em 3em;}<br>Процентные значения от ширины родительского элемента<br>margin-left, margin-right, margin-top, margin-bottom<br>Поля строковых элементов (левое и правое)<br><p>top<br><p>bottom<br><p>right<br><p>left<br><p>margin-percent.html<br></div></div></div><div class="slides-wrapper"><div id="slide53" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 53</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-52.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Рамки Рамки внутри полей, они ограничивают фон Ширина, стиль, цвет Ширина" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-52.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-52.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-52.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-52.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Рамки<br><p>Рамки внутри полей, они ограничивают фон<br>Ширина, стиль, цвет<br>Ширина по умолч.=medium или</div></h2><div class="slides-content">none<br>Цвет по умолч.=цвет элемента<br>border-style: стиль (TRBL) или отдельно<br>border-width: thin | medium | thick | значение (TRBL) или отдельно, % - запрещены<br>Если border-style=none, то border-width=0<br>border-color: color (TRBL) или отдельно<br>Цвет рамки может = transparent<br></div></div></div><div class="slides-wrapper"><div id="slide54" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 54</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-53.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Рамки, стили рамок border-top, border-right, border-bottom, border-left: border-width || border-style ||" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-53.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-53.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-53.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-53.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Рамки, стили рамок<br><p>border-top, border-right, border-bottom, border-left: border-width || border-style || color</div></h2><div class="slides-content"><br>border: border-width || border-style || color<br>У строковых элементов тоже могут быть<br></div></div></div><div class="slides-wrapper"><div id="slide55" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 55</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-54.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Отступы padding: значение (любые меры, проценты) (TRBL) Залиты фоном Отступы не" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-54.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-54.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-54.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-54.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Отступы<br><p>padding: значение (любые меры, проценты) (TRBL)<br>Залиты фоном<br>Отступы не сворачиваются<br>% относительно ширины</div></h2><div class="slides-content">родителя (причем и верхние и нижние поля)<br>padding-top, padding-right, padding-bottom, padding-left<br>Можно применять к строковым элементам<br><p>paddings.html<br></div></div></div><div class="slides-wrapper"><div id="slide56" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 56</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-55.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Цвета, фон color: | inherit Свойство color для элементов форм background-color:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-55.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-55.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-55.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-55.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Цвета, фон <br><p>color: <цвет> | inherit<br>Свойство color для элементов форм<br>background-color: цвет</div></h2><div class="slides-content">| transparent (умолч.)<br>background-image: url(путь к файлу) | none <br>background-color + background-image<br>background-repeat: no-repeat | repeat | repeat-x | repeat-y<br><p>colors-css.html,<br>background_css.html<br></div></div></div><div class="slides-wrapper"><div id="slide57" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 57</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-56.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Фон background-position: [проценты | значение] | [left | center | right]" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-56.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-56.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-56.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-56.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Фон<br><p>background-position: [проценты | значение] | [left | center | right] ||</div></h2><div class="slides-content">[top | center | bottom] (если одно задано, второе – center)<br>background-attachment: fixed | scroll (http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html)<br>background: background-attachment || background-color || background-image || background-position || background-repeat<br><p>background_css.html,<br>background2_css.html<br></div></div></div><div class="slides-wrapper"><div id="slide58" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 58</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-57.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Перемещение, плавающая модель Рисунки, параграф с float Задание ширины обязательно Поля" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-57.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-57.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-57.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-57.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Перемещение, плавающая модель<br><p>Рисунки, параграф с float<br>Задание ширины обязательно<br>Поля не сворачиваются<br>Перемещаемый элемент</div></h2><div class="slides-content">генерирует блочный элемент<br>Правила перемещаемых элементов (стр.327)<br>Перемещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомков<br>Отрицательные поля<br>Если ширина больше – перемещаемый элемент окажется за боковым краем родителя<br>clear: both | left | none | right<br><p>float1.html, float2.html<br>float3.html, float_problem.html<br></div></div></div><div class="slides-wrapper"><div id="slide59" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 59</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-58.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Позиционирование position: absolute | fixed | relative | static static –" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-58.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-58.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-58.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-58.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Позиционирование<br><p>position: absolute | fixed | relative | static<br>static – нормальный поток<br>relative</div></h2><div class="slides-content">– смещение элемента с теми же размерами и начальными координатами<br>absolute – удаление из нормального потока. Генерация структурного блока.<br>fixed – абсолютно позиционированный элемент, но блок-контейнер – окно просмотра.<br></div></div></div><div class="slides-wrapper"><div id="slide60" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 60</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-59.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Позиционирование 2 Блок-контейнер для элементов с position = relative | static" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-59.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-59.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-59.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-59.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Позиционирование 2<br><p>Блок-контейнер для элементов с position = relative | static –</div></h2><div class="slides-content">родитель <br>Блок-контейнер для элементов с position = absolute – ближайший предок с position != static. Если ближайший предок – строковый, то контейнер – предок. Если таких элементов нет – начальный блок-контейнер<br></div></div></div><div class="slides-wrapper"><div id="slide61" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 61</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-60.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Свойства смещения top, right, bottom, left: | | auto | inherit" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-60.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-60.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-60.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-60.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Свойства смещения<br><p>top, right, bottom, left: <длина> | <процентное значение> | auto</div></h2><div class="slides-content">| inherit<br>Ширина и высота<br>min-width, min-height: <длина> | <процентное значение> | inherit<br>max-width, max-height: <длина> | <процентное значение> | none | inherit<br><p>position.html<br></div></div></div><div class="slides-wrapper"><div id="slide62" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 62</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-61.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Переполнение и отсечение содержимого overflow: visible | hidden | scroll |" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-61.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-61.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-61.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-61.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Переполнение и отсечение содержимого<br><p>overflow: visible | hidden | scroll | auto</div></h2><div class="slides-content">| inherit<br>overflow-x и overflow-y<br>clip: rect(top, right, bottom, left) | rect(Y1, X1, Y2, X2) | auto | inherit <br><p>overflow.html<br></div></div></div><div class="slides-wrapper"><div id="slide63" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 63</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-62.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Видимость элементов visibility: visible | hidden | collapse | inherit visibility.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-62.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-62.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-62.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-62.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Видимость элементов<br><p>visibility: visible | hidden | collapse | inherit<br><p>visibility.html<br></div></h2></div></div><div class="slides-wrapper"><div id="slide64" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 64</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-63.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Абсолютное позиционирование Абсолютное позиционирование относительно… Перекрытие элементов Размеры и размещение left" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-63.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-63.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-63.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-63.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Абсолютное позиционирование<br><p>Абсолютное позиционирование относительно…<br>Перекрытие элементов<br>Размеры и размещение <br>left + margin-left +</div></h2><div class="slides-content">border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = ширина блока-контейнера<br>Значение auto<br>right или bottom компенсируют, если все свойства заданы<br><p>position_abs.html<br></div></div></div><div class="slides-wrapper"><div id="slide65" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 65</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-64.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Размещение по оси z z-index: число | auto Может быть отрицательным" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-64.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-64.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-64.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-64.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Размещение по оси z<br><p>z-index: число | auto<br>Может быть отрицательным<br>Локальный контекст занесения</div></h2><div class="slides-content">в стек<br><p>окно<br><p>А<br><p>Б<br><p>z-index.html<br></div></div></div><div class="slides-wrapper"><div id="slide66" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 66</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-65.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Фиксированное позиционирование Относительно окна браузера Удобно, например, для баннеров или для меню position_fixed.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-65.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-65.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-65.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-65.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Фиксированное позиционирование<br><p>Относительно окна браузера<br>Удобно, например, для баннеров или для меню<br><p>position_fixed.html<br></div></h2></div></div><div class="slides-wrapper"><div id="slide67" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 67</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-66.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Относительное позиционирование Смещение относительно текущего положения position_relative.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-66.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-66.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-66.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-66.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Относительное позиционирование<br><p>Смещение относительно текущего положения<br><p>position_relative.html<br></div></h2></div></div><div class="slides-wrapper"><div id="slide68" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 68</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-67.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Верстка таблиц Объединять ячейки через CSS нельзя У ячеек нет полей Свойство display tables2.html" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-67.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-67.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-67.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-67.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Верстка таблиц<br><p>Объединять ячейки через CSS нельзя<br>У ячеек нет полей<br><p>Свойство display<br><p>tables2.html<br></div></h2></div></div><div class="slides-wrapper"><div id="slide69" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 69</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-68.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Таблицы. Продолжение display: inline-table – таблица строкового уровня (типа inline-block) Значения" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-68.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-68.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-68.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-68.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Таблицы. Продолжение<br><p>display: inline-table – таблица строкового уровня (типа inline-block)<br>Значения можно присвоить</div></h2><div class="slides-content">любым элементам и сделать на основе них таблицу<br>Анонимные объекты таблицы<br><table> <td>Name:</td> <td><input type="text"></td> </table><br><p>tables2.html<br></div></div></div><div class="slides-wrapper"><div id="slide70" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 70</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-69.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Таблицы. Продолжение Слои таблицы caption-side: top | bottom border-collapse: collapse |" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-69.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-69.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-69.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-69.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Таблицы. Продолжение<br><p>Слои таблицы<br>caption-side: top | bottom<br>border-collapse: collapse | separate | inherit<br>border-spacing: <длина гор.></div></h2><div class="slides-content"><длина верт.>? | inherit<br>empty-cells: show | hide | inherit<br><p>tables3.html<br></div></div></div><div class="slides-wrapper"><div id="slide71" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 71</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-70.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Сливающиеся рамки ячеек Если display: table | inline-table у элемента не" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-70.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-70.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-70.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-70.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Сливающиеся рамки ячеек<br><p>Если display: table | inline-table у элемента не может</div></h2><div class="slides-content">быть отступов, только поля<br>Рамки могут применяться к таблице, ячейкам, строкам, группам строк, столбцам и группам столбцов<br>Между рамками ячеек не может быть никаких промежутков; рамки сливаются и центрируются<br><p>tables3.html<br></div></div></div><div class="slides-wrapper"><div id="slide72" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 72</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-71.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Размеры таблиц Ширина table-layout: auto | fixed | inherit Скорость рендера" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-71.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-71.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-71.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-71.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Размеры таблиц<br><p>Ширина<br>table-layout: auto | fixed | inherit<br>Скорость рендера с фиксированной шириной</div></h2><div class="slides-content">больше<br>Если сумма ширин столбцов больше ширины таблицы, то берется первое<br>Высота: или заданная или как сумма высот строк<br>Вертикальное выравнивание – не то же самое что и для строковых элементов<br><p>tables4.html<br></div></div></div><div class="slides-wrapper"><div id="slide73" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 73</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-72.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Элементы списка Управлять размещением сложно list-style-position: inside | outside – вне" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-72.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-72.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-72.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-72.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Элементы списка<br><p>Управлять размещением сложно<br>list-style-position: inside | outside – вне содержимого или</div></h2><div class="slides-content">как строковый маркер в начале содержимого<br>list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none<br>list-style-image: none | url('путь к файлу')<br>list-style: list-style-type || list-style-position || list-style-image<br><p>lists_css.html<br></div></div></div><div class="slides-wrapper"><div id="slide74" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 74</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-73.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Генерируемое содержимое Например маркеры списка… a[href]:before {content: "(link)";} Ограничения на display" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-73.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-73.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-73.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-73.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Генерируемое содержимое<br><p>Например маркеры списка…<br>a[href]:before {content: "(link)";}<br>Ограничения на display<br>content: строка | attr(атрибут)</div></h2><div class="slides-content">| open-quote | close-quote | no-open-quote | no-close-quote | url }<br>Теги недопустимы<br>Генерируемые кавычки<br>Счетчики <br>counter-reset и counter-increment<br><p>css_gen_content.html<br>css_gen_content2.html<br></div></div></div><div class="slides-wrapper"><div id="slide75" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 75</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-74.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Курсоры cursor: [[ ,]* [auto | default | pointer | crosshair" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-74.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-74.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-74.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-74.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Курсоры<br><p>cursor: [[<uri>,]* [auto | default | pointer | crosshair | move</div></h2><div class="slides-content">| e-resize | ne-resize | nw-resize | n-resize | seresize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit<br>a[href] {cursor: pointer;}<br><p>cursors.html<br></div></div></div><div class="slides-wrapper"><div id="slide76" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 76</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-75.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Курсоры" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-75.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-75.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-75.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-75.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Курсоры<br></div></h2></div></div><div class="slides-wrapper"><div id="slide77" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 77</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-76.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Контуры Ну участвуют в потоке документа Могут употребляться вместе с рамками" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1365285/slide-76.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1365285/slide-76.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1365285/slide-76.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1365285/slide-76.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Контуры<br><p>Ну участвуют в потоке документа<br>Могут употребляться вместе с рамками<br>outline-style: none |</div></h2><div class="slides-content">dotted | dashed | solid | double | groove | ridge | inset | outset | inherit (TRBL – нет)<br>outline-width: thin | medium | thick | <длина> | inherit<br>outline-color: <цвет> | invert | inherit<br>outline: [ <outline-color> || <outline-style> || <outline-width> ] | inherit<br><p>outline.html<br></div></div></div><div class="slides-wrapper"></div></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><button class="download-btn" type="submit">Скачать</button></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/algebra/mezhdunarodnopravovoe-regulirovanie-truda-1" class="navigation-link">Международно-правовое регулирование труда</a></div><div class="navigation-item"><div>Следующая -</div><a href="/algebra/osnovnye-sredstva-vba" class="navigation-link">Основные средства VBA</a></div></div></div></div><div class="item-layoutRelated"><div class="section"><div></div></div></div></div><div class="item-layout"><div class="related"><h2 class="related-header">Похожие презентации</h2><div class="related-wrapper"><div class="related-item"><a href="/algebra/89799-prezentaciya-na-temu-quotendokrinnaya-regulyaciya-beremennostiquot--skachat-prezentacii-po-medicine" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1213720/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1213720/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1213720/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1213720/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1213720/slide-0.jpg 1440w" class="slides-image related-itemImage"> Презентация на тему "Эндокринная регуляция беременности" - скачать презентации по Медицине</a></div><div class="related-item"><a href="/algebra/upravlenie-kapitalnym-stroitelstvom-lekciya-11" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1375645/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1375645/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1375645/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1375645/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1375645/slide-0.jpg 1440w" class="slides-image related-itemImage"> Управление капитальным строительством. (Лекция 11)</a></div><div class="related-item"><a href="/algebra/konstruktivnye-osobennosti-szhatyx-zhelezobetonnyx-elementov" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1373047/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1373047/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1373047/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1373047/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1373047/slide-0.jpg 1440w" class="slides-image related-itemImage"> Конструктивные особенности сжатых железобетонных элементов</a></div><div class="related-item"><a href="/algebra/portret-v-izobrazitelnom-iskusstve-xx-veka" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1310876/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1310876/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1310876/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1310876/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1310876/slide-0.jpg 1440w" class="slides-image related-itemImage"> Портрет в изобразительном искусстве XX века</a></div><div class="related-item"><a href="/algebra/avtomobilyder-men-traktorlardy-tegheu-sh-gh-yeler-" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1344358/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1344358/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1344358/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1344358/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1344358/slide-0.jpg 1440w" class="slides-image related-itemImage"> Автомобильдер мен тракторлардың тежеуіш жүйелері</a></div><div class="related-item"><a href="/algebra/kakoj-vid-sporta-luchshe-prezentaciyu-vypolnila-vetrinskaya-ea-uchitel-nachalnyx-klassov-mou-sosh-3-pnikel-murmanskoj-obl" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1186062/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1186062/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1186062/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1186062/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1186062/slide-0.jpg 1440w" class="slides-image related-itemImage"> Какой вид спорта лучше? Презентацию выполнила Ветринская Е.А. Учитель начальных классов МОУ СОШ №3 п.Никель Мурманской обл.</a></div><div class="related-item"><a href="/algebra/ukra-nsyk-mecenati-rodina-tereschenko" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1429062/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1429062/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1429062/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1429062/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1429062/slide-0.jpg 1440w" class="slides-image related-itemImage"> Українські меценати. Родина терещенко</a></div><div class="related-item"><a href="/algebra/vymyshlennye-religii-v-kompyuternyx-igrax" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1315516/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1315516/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1315516/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1315516/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1315516/slide-0.jpg 1440w" class="slides-image related-itemImage"> Вымышленные религии в компьютерных играх</a></div><div class="related-item"><a href="/algebra/xristianstvo-pravoslavie-chast-ii-pravoslavnyj-xram-1-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1489576/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1489576/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1489576/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1489576/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1489576/slide-0.jpg 1440w" class="slides-image related-itemImage"> Христианство. Православие. Часть II. Православный храм - 1</a></div><div class="related-item"><a href="/algebra/urok-po-teme-bogi-drevnix-slavyan-3-klass-programma-nachalnaya-shkola-xxi-veka" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1369515/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1369515/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1369515/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1369515/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1369515/slide-0.jpg 1440w" class="slides-image related-itemImage"> Урок по теме «Боги древних славян» 3 класс (Программа «Начальная школа XXI века»)</a></div><div class="related-item"><a href="/algebra/prezentaciya-quotbarokko-tvorchestvo-l-berniniquot--skachat-prezentacii-po-mxk" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1273936/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1273936/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1273936/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1273936/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1273936/slide-0.jpg 1440w" class="slides-image related-itemImage"> Урок МХК 9 класс Учитель МХК МОУ СОШ № 4 с. Малые Ягуры Адоньева Д. Н. </a></div><div class="related-item"><a href="/algebra/ansambl-afinskogo-akropolya-greciya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1426435/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1426435/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1426435/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1426435/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1426435/slide-0.jpg 1440w" class="slides-image related-itemImage"> Ансамбль Афинского Акрополя. Греция</a></div><div class="related-item"><a href="/algebra/vybor-terapevticheskoj-taktiki-pri-xronicheskoj-bolezni-pochek-krasnova-tn" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1272081/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1272081/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1272081/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1272081/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1272081/slide-0.jpg 1440w" class="slides-image related-itemImage"> ВЫБОР ТЕРАПЕВТИЧЕСКОЙ ТАКТИКИ ПРИ ХРОНИЧЕСКОЙ БОЛЕЗНИ ПОЧЕК КРАСНОВА Т.Н. </a></div><div class="related-item"><a href="/algebra/asinxronnye-dvigateli-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1456468/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1456468/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1456468/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1456468/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1456468/slide-0.jpg 1440w" class="slides-image related-itemImage"> Асинхронные двигатели</a></div><div class="related-item"><a href="/algebra/shkola-nauchnogo-menedzhmenta-f-tejlora-petrova-m-zedeev-a" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1230210/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1230210/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1230210/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1230210/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1230210/slide-0.jpg 1440w" class="slides-image related-itemImage"> Школа научного менеджмента Ф. Тейлора Петрова М. Зедеев А.</a></div><div class="related-item"><a href="/algebra/christlich-demokratische-union-deutschlands-e0-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1368077/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1368077/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1368077/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1368077/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1368077/slide-0.jpg 1440w" class="slides-image related-itemImage"> Christlich Demokratische Union Deutschlands</a></div><div class="related-item"><a href="/algebra/sudebnaya-ritorika-taktika-priemy-osobennosti" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1324950/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1324950/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1324950/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1324950/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1324950/slide-0.jpg 1440w" class="slides-image related-itemImage"> Судебная риторика: тактика, приемы, особенности</a></div><div class="related-item"><a href="/algebra/radiostanciya-baklan-20-" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1481754/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1481754/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1481754/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1481754/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1481754/slide-0.jpg 1440w" class="slides-image related-itemImage"> Радиостанция Баклан 20</a></div><div class="related-item"><a href="/algebra/prezentaciya-menezhment-osobennosti-komand" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1191469/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1191469/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1191469/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1191469/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1191469/slide-0.jpg 1440w" class="slides-image related-itemImage"> Презентация менежмент ОСОБЕННОСТИ КОМАНД</a></div><div class="related-item"><a href="/algebra/pascal-fajly" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1299064/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1299064/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1299064/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1299064/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1299064/slide-0.jpg 1440w" class="slides-image related-itemImage"> Pascal Файлы </a></div><div class="related-item"><a href="/algebra/--168" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1421640/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1421640/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1421640/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1421640/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1421640/slide-0.jpg 1440w" class="slides-image related-itemImage"> 文化全景练习</a></div><div class="related-item"><a href="/algebra/greciya-gorod-kavala-festival-cosmopolis-18-25-iyulya-2016-goda" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1384603/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1384603/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1384603/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1384603/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1384603/slide-0.jpg 1440w" class="slides-image related-itemImage"> Греция, город Кавала Фестиваль Cosmopolis 18 – 25 июля 2016 года</a></div><div class="related-item"><a href="/algebra/olga-alekseevna-zajceva" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1339982/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1339982/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1339982/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1339982/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1339982/slide-0.jpg 1440w" class="slides-image related-itemImage"> Ольга Алексеевна Зайцева</a></div><div class="related-item"><a href="/algebra/teoriya-videomontazha" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1453089/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1453089/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1453089/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1453089/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1453089/slide-0.jpg 1440w" class="slides-image related-itemImage"> Теория видеомонтажа</a></div><div class="related-item"><a href="/algebra/sootnoshenie-konstitucionnyx-polozhenij-o-svobode-predprinimatelskoj-i-inoj-ekonomicheskoj-deyatelnosti-s-normami-ugolovnogo-zak-d0" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1223967/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1223967/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1223967/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1223967/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1223967/slide-0.jpg 1440w" class="slides-image related-itemImage"> Соотношение конституционных положений о свободе предпринимательской и иной экономической деятельности с нормами уголовного зак</a></div><div class="related-item"><a href="/algebra/shest-porokov-razrushayushhix-bxakti" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1368937/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1368937/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1368937/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1368937/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1368937/slide-0.jpg 1440w" class="slides-image related-itemImage"> Шесть пороков, разрушающих бхакти</a></div><div class="related-item"><a href="/algebra/prezentaciya-osnovnye-paradigmy-politiki-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1224861/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1224861/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1224861/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1224861/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1224861/slide-0.jpg 1440w" class="slides-image related-itemImage"> Презентация Основные парадигмы политики</a></div><div class="related-item"><a href="/algebra/tablichka-na-stol-tolko-dlya-ci-dilerov-" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1483098/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1483098/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1483098/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1483098/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1483098/slide-0.jpg 1440w" class="slides-image related-itemImage"> Табличка на стол (только для CI Дилеров)</a></div></div></div></div></div></div></div></main><footer class="footer"><div class="layout"><div class="footer-text">Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.</div><div class="footer-contacts"><svg class="footer-contactsIcon" viewBox="0 0 27 26" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons.svg#contacts"></use></svg> Обратная связь</div><div class="footer-text"><a href="/page/dlyapravoobladatelei">Для правообладателей</a></div><div class="footer-contactsEmail"> Email: <span class="footer-contactsShow">Нажмите что бы посмотреть</span></div></div></footer></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:a,logo_image_width:p,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:d,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:x,footer:y,dark_theme:d,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D},colors:{header_text:j,header_bg:E,accent:F}},social:G}},item:{result:{id:1365285,name:"HTML+CSS, верстка",category:"Алгебра",count:78,jpg:"jpg\u002F1365285",hits:79,download:k,h1:a,meta:{h1:"HTML+CSS, верстка ",title:"HTML+CSS, верстка презентация",description:"HTML+CSS, верстка - Алгебра, презентация, доклад, проект, конспект",keywords:"HTML+CSS, верстка, Алгебра, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс",download_link:a},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему HTML+CSS, верстка, из раздела: Алгебра.  Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EКороткое введение\u003Cbr\u003E\u003Cp\u003EПоследний стандарт HTML – версия 5\u003Cbr\u003EXHML – переработанный HTML в соответствии со стандартом XML\u003Cbr\u003EСтандарты неоднозначны, не все моменты регламентированы \u003Cbr\u003EПридерживайтесь стандартов, осторожнее с нестандартными решениями\u003Cbr\u003E\u003Cbr\u003E \u003Cp\u003E\u003C!DOCTYPE HTML\u003E\u003Cbr\u003E\u003Chtml lang=\"ru-ru\"\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EЗаготовка\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Clink rel=\"stylesheet\" href=\"css\u002Fstyle.css\"\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cheader\u003E\u003C\u002Fheader\u003E\u003Cbr\u003E \u003Cfooter\u003E\u003C\u002Ffooter\u003E\u003Cbr\u003E \u003Cscript src=\"https:\u002F\u002Fcode.jquery.com\u002Fjquery-3.2.1.min.js\"\u003E\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E",texts:["\u003Cp\u003EHTML+CSS (верстка)\u003Cbr\u003E","\u003Cp\u003EКороткое введение\u003Cbr\u003E\u003Cp\u003EПоследний стандарт HTML – версия 5\u003Cbr\u003EXHML – переработанный HTML в соответствии со стандартом XML\u003Cbr\u003EСтандарты неоднозначны, не все моменты регламентированы \u003Cbr\u003EПридерживайтесь стандартов, осторожнее с нестандартными решениями\u003Cbr\u003E","\u003Cp\u003E\u003C!DOCTYPE HTML\u003E\u003Cbr\u003E\u003Chtml lang=\"ru-ru\"\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EЗаготовка\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Clink rel=\"stylesheet\" href=\"css\u002Fstyle.css\"\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cheader\u003E\u003C\u002Fheader\u003E\u003Cbr\u003E \u003Cfooter\u003E\u003C\u002Ffooter\u003E\u003Cbr\u003E \u003Cscript src=\"https:\u002F\u002Fcode.jquery.com\u002Fjquery-3.2.1.min.js\"\u003E\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E Привет, Мир!\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EЭлементы и теги\u003Cbr\u003E\u003Cназвание_тега\u003E\u003Cbr\u003E\u003Cназвание_тега\u003Eсодержание тега\u003C\u002Fназвание_тега\u003E\u003Cbr\u003E\u003Cp\u003EТекст абзаца\u003C\u002Fp\u003E\u003Cbr\u003EHTML – это прежде всего содержание, данные. \r\nHTML, как правило, только лишь советует как отображать документы.\u003Cbr\u003E","\u003Cp\u003EРедакторы\u003Cbr\u003E\u003Cp\u003EWYSIWYG или текстовые процессоры\u003Cbr\u003EWebStorm\u003Cbr\u003ESublime\u003Cbr\u003EAtom\u003Cbr\u003ENotepad++\u003Cbr\u003EMicrosoft Word!?\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EБраузеры\u003Cbr\u003E\u003Cp\u003EInternet Explorer\u003Cbr\u003EEdge\u003Cbr\u003EFirefox\u003Cbr\u003EOpera\u003Cbr\u003ESafari\u003Cbr\u003EChrome\u003Cbr\u003EYandex\u003Cbr\u003EVivaldi\u003Cbr\u003E","\u003Cp\u003EДругие инструменты\u003Cbr\u003E\u003Cp\u003EFirebug – не заменим для разработки и отладки HTML, CSS, Javascript\u003Cbr\u003EPixel Perfect – плагин \r\nдля подложки рисунка\r\nдизайна при верстке\u003Cbr\u003E\u003Cbr\u003EIE Developer Toolbar,\u003Cbr\u003EIETester, \u003Cbr\u003EDebugBar for IETester \u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EТеги, атрибуты. Блочные и строковые элементы\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E, \u003Chead\u003E, \u003Ctitle\u003E\u003Cbr\u003E\u003Cbody bgcolor=\"#A0BEC4\" onload=\"alert('Loaded');\"\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C!-- комментарий --\u003E\u003Cbr\u003EСемантика, логичность кода\r\n(\u003Cstrong\u003E, \u003Cem\u003E, \u003Cblockquote\u003E, \u003Ccode\u003E, …)\u003Cbr\u003EСпецсимволы: < > …\u003Cbr\u003E\u003Cp\u003E, \u003Ch1\u003E, \u003Ch2\u003E, \u003Ch3\u003E, …, \u003Cbr\u003E, \u003Chr\u003E\u003Cbr\u003E\u003Ca href=\"url\"\u003Eтекст\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cimg src=\"url\" title=\"текст\"\u003E\u003Cbr\u003EВложенность тегов\u003Cbr\u003E\u003Cp\u003Etest.html\u003Cbr\u003E","\u003Cp\u003EОбработка ошибок, DTD\u003Cbr\u003E\u003Cp\u003EОтсутствующие теги – плохая практика\r\n\u003Cp\u003EПервый абзац \u003Cp\u003EВторой абзац \u003Ch2\u003EЗаголовок\u003Cbr\u003EИгнорирование лишних тегов \r\n \u003Cp\u003EПервый абзац \u003Cp\u003E\u003Cp\u003EВторой абзац \u003Cuktag\u003E\u003Cbr\u003EXHTML – намного строже\u003Cbr\u003E - не правильно, \u003Cbr \u002F\u003E - правильно\u003Cbr\u003EРегистр символов в названии тегов\u003Cbr\u003E\u003Cb\u003Eтекст \u003Ci\u003Eтекст \u003C\u002Fb\u003Eтекст\u003C\u002Fi\u003E - не правильно\u003Cbr\u003EОбязательные теги, например \u003Chtml\u003E\u003Cbr\u003EИнструменты проверки кода на ошибки: HTML – валидатор\u003Cbr\u003E\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Strict\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-strict.dtd\"\u003E\u003Cbr\u003E\u003Cp\u003Eerror.html, error2.html\u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EТекст, абзацы, перевод строки\u003Cbr\u003EЛишние пробельные символы не учитываются\u003Cbr\u003E\u003Cp align=\"left\" class=\"log\" lang=\"ru\" id=\"loginfo\" style=\"color:blue\" title=\"Некоторая статистическая информация\"\u003EСкачано 10Кб\u003C\u002Fp\u003E\u003Cbr\u003EЗаголовки, значение заголовков\u003Cbr\u003E и \u003Cnobr\u003E — все браузеры поддерживают, но…\u003Cbr\u003E\u003Cpre\u003E — блок предварительно форматированного текста (все пробелы, переводы строк, и т.д., монош. шрифт)\u003Cbr\u003EФизическая и логическая разметка\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Etext.html\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EНемного терминов\u003Cbr\u003EНазвание шрифта, семейство (serif, \r\nsans-serif, monospace…)\u003Cbr\u003EРазмер\u003Cbr\u003EЦвет\u003Cbr\u003EМежсимвольное \r\nрасстояние\u003Cbr\u003EКурсив, жирность\u003Cbr\u003E\u003Cfont size=5 color=\"#FFFFFF\" face=\"Courier, Arial\"\u003E\r\nБ\u003C\u002Ffont\u003Eуква\u003Cbr\u003E","\u003Cp\u003EТеги логической разметки текста\u003Cbr\u003E\u003Cp\u003EНе гарантируется именно такое отображение\u003Cbr\u003E","\u003Cp\u003EОсновные теги физической разметки\u003Cbr\u003E\u003Cp\u003EНе гарантируется именно такое отображение\u003Cbr\u003EСодержимое вышеупомянутых тегов – любые элементы допустимые в тексте.\u003Cbr\u003EУпотребляться могут везде, где применяются элементы, относящиеся к тексту.\u003Cbr\u003E","\u003Cp\u003EЦитаты, адреса\u003Cbr\u003E\u003Cp\u003E\u003Cblockquote\u003E и \u003Cq\u003E — цитаты (длинная и короткая)\r\n\u003Cblockquote cite=\"http:\u002F\u002Flib.ru\u002F\" lang=\"en\" style=\"color:green;\"\u003EДлииинная цитата\u003C\u002Fblockquote\u003E\u003Cbr\u003E\u003Caddress\u003EАдрес\u003C\u002Faddress\u003E - адрес\u003Cbr\u003E","\u003Cp\u003EЛинейки \u003Cbr\u003E\u003Cp\u003E\u003Chr align=\"center\" color=\"#000000\" size=\"3\" width=\"50%\"\u003E\u003Cbr\u003EИспользование атрибутов не рекомендуется\u003Cbr\u003EЧасто используется для логического отделения информационных блоков\u003Cbr\u003E\u003Cp\u003Eline.html\u003Cbr\u003E","\u003Cp\u003EИзображения в документе HTML\u003Cbr\u003E\u003Cp\u003EФормат? Все зависит от браузеров, в HTML нет спецификаций\u003Cbr\u003EФормат GIF\u003Cbr\u003Eсжатие \"без потерь\"\u003Cbr\u003E256 цветов максимум\u003Cbr\u003Eчересстрочный (всплывающий) и нормальный формат\u003Cbr\u003Eпрозрачность\u003Cbr\u003Eанимация\u003Cbr\u003E","\u003Cp\u003EФормат JPEG\u003Cbr\u003E24 битная палитра (16 млн цветов)\u003Cbr\u003Eпотеря качества рисунка\u003Cbr\u003EФормат PNG\u003Cbr\u003Eцветовые схемы:\u003Cbr\u003Etruecolor\u003Cbr\u003Egrayscale\u003Cbr\u003Eиндексированная палитра (GIF-подобная) – PNG-8\u003Cbr\u003Eальфа канал на 254 уровня\u003Cbr\u003Eулучшенное сжатие без потерь\u003Cbr\u003Eдвухмерное чередование\u003Cbr\u003Eгамма-коррекция\u003Cbr\u003EФормат MNG\u003Cbr\u003E",a,a,a,a,"\u003Cp\u003EИтог\u003Cbr\u003E\u003Cp\u003EJPEG – для фотографий, изображений с большим количеством градиентов и цветов\u003Cbr\u003EGIF – для маленьких рисунков, иконок, пиктограмм, полезен, когда края – четкие\u003Cbr\u003EPNG8 – когда не много цветов, четкие края, например скриншоты windows - окон\u003Cbr\u003EPNG24 – полупрозрачности, изображение без потери качества, большое количество цветов\u003Cbr\u003E","\u003Cp\u003EПрименение изображений в HTML\u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"\u002Fimages\u002Fscreenshot.png\" alt=\"Скриншот\" title=\"Скриншот\" border=\"1\" align=\"middle\" width=\"50\" height=\"70\"\u003E\u003Cbr\u003Ealign=\"bottom | left | middle | right | top\"\u003Cbr\u003EЗаливка с помощью width или height\u003Cbr\u003EБывает, что изображения отключены…\u003Cbr\u003Eismap, usemap\u003Cbr\u003EonAbort – только ie, onError, onLoad\u003Cbr\u003EФоновые изображения\u003Cbr\u003E\u003Cp\u003Eimages.html\u003Cbr\u003E","\u003Cp\u003EГиперссылки\u003Cbr\u003E\u003Cp\u003EОснова гипертекста\u003Cbr\u003EURL \r\nscheme:scheme_specific_part\r\n\u003Cсхема\u003E:\u002F\u002F\u003Cлогин\u003E:\u003Cпароль\u003E@\u003Cхост\u003E:\u003Cпорт\u003E\u002F\u003CURL‐путь\u003E\r\nhttp:\u002F\u002Fru.wikipedia.org:80\u002Fwiki\u002FHTTP?get#GET\r\n\u003Ca id=\"GET\" name=\"GET\"\u003E\u003C\u002Fa\u003E\u003Cbr\u003EТолько US-ACSII – символы\u003Cbr\u003Ehttp:\u002F\u002Fyandex.ru\u002Fyandsearch?text=%2F+%D0%BA%D0%BE%D0%B4%20%2F (\u002F код \u002F)\u003Cbr\u003E\u003Ca href=\"foto.jpg\" target=\"_blank\"\u003Efoto\u003C\u002Fa\u003E - ссылка с относительным адресом\u003Cbr\u003Emailto:mail@mail.ru?subject=Subject\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Elinks.html, folder1\u002Flinks.html\u003Cbr\u003E","\u003Cp\u003EОтношения. Мета-теги.\u003Cbr\u003E\u003Cp\u003EМы имеем дело не с документом, а с проектом, набором документов\u003Cbr\u003E\u003Chead\u003E\r\n\u003Cbase href=\"http:\u002F\u002Frezonans.ru\u002F\" \u002F\u003E\r\n\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"style.css\" \u002F\u003E\r\n\u003Cmeta http-equiv=\"Content-Type\" content=\"text\u002Fhtml; charset=utf-8\" \u002F\u003E\r\n\u003Cmeta name=\"generator\" content=\"MediaWiki 1.16alpha-wmf\" \u002F\u003E\r\n\u003Cmeta name=\"keywords\" content=\"ASCII,Ref-en,Английский язык,Соединённые Штаты Америки,Стандарт,Код,Информация,Диакритический знак,Акут,Man (Unix),Язык\" \u002F\u003E\r\n\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cp\u003Erelations.html\u003Cbr\u003E","\u003Cp\u003EСписки\u003Cbr\u003E\u003Cp\u003E\u003Cul type=\"square\"\u003E\u003Cbr\u003E\t\u003Cli\u003EСтраны\u003Cbr\u003E\t\t\u003Cul type=\"circle\"\u003E\u003Cbr\u003E\t\t\t\u003Cli\u003EАнглия\u003C\u002Fli\u003E\u003Cbr\u003E\t\t\t\u003Cli\u003EШвейцария\u003C\u002Fli\u003E\u003Cbr\u003E\t\t\u003C\u002Ful\u003E\u003Cbr\u003E\t\u003C\u002Fli\u003E\u003Cbr\u003E\t\u003Cli\u003EГорода\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Ful\u003E\u003Cbr\u003E\u003Col type=\"A\" start=\"3\"\u003E\u003Cbr\u003E\u003C!-- A, a, I, i, 1 --\u003E\u003Cbr\u003E\t\u003Cli\u003EКрокодил Гена\u003C\u002Fli\u003E\u003Cbr\u003E\t\u003Cli value=\"6\"\u003EЧебурашка\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Fol\u003E\u003Cbr\u003E\u003Cp\u003Erelations.html\u003Cbr\u003E","\u003Cp\u003EСписки определений\u003Cbr\u003E\u003Cp\u003E\u003Cdl\u003E\u003Cbr\u003E\t\u003Cdt\u003EТермин 1\u003C\u002Fdt\u003E\u003Cbr\u003E\t\u003Cdd\u003EОпределение первого термина\u003C\u002Fdd\u003E\u003Cbr\u003E\t\u003Cdt\u003EТермин 2\u003C\u002Fdt\u003E\u003Cbr\u003E\t\u003Cdd\u003EОпределение второго термина\u003C\u002Fdd\u003E\u003Cbr\u003E\u003C\u002Fdl\u003E\r\n\u003Cbr\u003E\u003Cp\u003Elists.html\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003EПроцесс заполнения, отправки\u003Cbr\u003E\u003Cform action=\"form.php\" enctype=\"multipart\u002Fform-data\" method=\"POST\"\u003E\u003C\u002Fform\u003E\u003Cbr\u003EСобытия\u003Cbr\u003E\u003Cinput name=\"my_name\"\u003E (controls)\u003Cbr\u003Etype=text, password, file\u003Cbr\u003Esize=\"30\" maxlength=\"20\" value=\"my name\"\u003Cbr\u003Eaccept=\"image\u002F*\"\u003Cbr\u003E\u003Cp\u003Eforms.html\u003Cbr\u003E","\u003Cp\u003EПоля форм\u003Cbr\u003E\u003Cp\u003E\u003Cinput type=\"checkbox\" name=\"border\" value=\"top\" checked=\"checked\" \u002F\u003E \u003Cbr\u003E\u003Cinput type=\"radio\" name=\"border\" value=\"top\" checked\u003E\u003Cbr\u003E\u003Cinput type=\"submit\" value=\"отправить\" name=\"submit\"\u003E\u003Cbr\u003E\u003Cinput type=\"reset\" value=\"Сбросить форму\"\u003E\u003Cbr\u003E\u003Cinput type=\"image\" src=\"knopka.jpg\" name=\"btn\" \u002F\u003E\u003Cbr\u003E\u003Cinput type=\"button\" value=\"надпись\"\u003E\u003Cbr\u003E\u003Cinput type=\"hidden\" name=\"user\" value=\"34tr3sdf\" \u002F\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Eforms.html\u003Cbr\u003E","\u003Cp\u003EПоля форм 2\u003Cbr\u003E\u003Cp\u003E\u003Cbutton type=\"submit\" \u003E\u003Cimg src=\"btn.gif\" alt=\"btn\" \u002F\u003E текст\u003C\u002Fbutton\u003E\u003Cbr\u003E\u003Ctextarea name=\"longtext\" rows=\"10\" cols=\"40\"\u003E\u003C\u002Ftextarea\u003E\u003Cbr\u003E\u003Cselect name=\"xxx\" multiple=\"multiple\" size=\"5\"\u003E\u003Coption selected=\"selected\"\u003Etexxxt\u003C\u002Foption\u003E\u003C\u002Fselect\u003E\u003Cbr\u003Eaccesskey, disabled, readonly\u003Cbr\u003E\u003Clabel for=\"name-field\"\u003EВведите имя:\u003C\u002Flabel\u003E\r\n\u003Cinput name=\"name\" id=\"name-field\" \u002F\u003E\u003Cbr\u003E\u003Cfieldset\u003E\u003Clegend align=\"top\"\u003E\u003C\u002Flegend\u003E\u003C\u002Ffieldset\u003E\u003Cbr\u003E\u003Cp\u003Eforms.html\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Ftrevordavis.net\u002Fplay\u002Finput-vs-button\u002F\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003E\u003Ctable cellspacing=\"0\" cellpadding=\"0\" border=\"0\" frame=\"below\" rules=\"cols\" width=\"100%\"\u003E\r\n\u003Ccaption\u003EНазвание таблицы\u003C\u002Fcaption\u003E\r\n\u003Cthead\u003E\r\n\u003Ctr align=\"left\" valign=\"middle\"\u003E\r\n\u003Cth\u003E111\u003C\u002Fth\u003E\r\n\u003Ctd\u003E\u003C\u002Ftd\u003E\r\n\u003C\u002Ftr\u003E\r\n\u003C\u002Fthead\u003E\r\n\u003C\u002Ftable\u003E\u003Cbr\u003Ebackground, bgcolor, bordercolor, cols, height, title, nowrap\u003Cbr\u003Ecolspan, rowspan\u003Cbr\u003E\u003Ctfoot\u003E, \u003Ctbody\u003E\u003Cbr\u003E\u003Ccolgroup\u003E, \u003Ccol\u003E\u003Cbr\u003E\u003Cp\u003Etables.html\u003Cbr\u003E","\u003Cp\u003EФреймы\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Chead\u003E\u003Ctitle\u003EФреймы\u003C\u002Ftitle\u003E\u003C\u002Fhead\u003E\r\n\u003Cframeset rows=\"30%, *\"\u003E\r\n\u003Cframe src=\"fr1.htm\" \u003E\u003C\u002Fframe\u003E\r\n\u003Cframe src=\"fr2.htm\"\u003E\u003C\u002Fframe\u003E\r\n\u003C\u002Fframeset\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003EРамки для frameset\u003Cbr\u003Enoresize, scrolling, frameborder для frame\u003Cbr\u003E\u003Cnoframes\u003E\u003Cbr\u003E\u003Ciframe height=\"100\" width=\"400\" src=\"fr1.htm\"\u003EНе работают фреймы?\u003C\u002Fiframe\u003E\u003Cbr\u003Etarget у ссылки, \u003Cbase\u003E\u003Cbr\u003E\u003Cp\u003Eframes.html, iframe.html\u003Cbr\u003E","\u003Cp\u003EОбъекты и апплеты\u003Cbr\u003E\u003Cp\u003E\u003Cobject\u003E\r\n\u003Cparam name=\"name\" value=\"1\" \u002F\u003E\r\n\u003C\u002Fobject\u003E\u003Cbr\u003EВложенные object\u003Cbr\u003E\u003Cembed src=\"x.swf\" type=\"application\u002Fx-shockwave-flash\" \u002F\u003E\u003Cbr\u003E\u003Cp\u003Eobject.html, object.html\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fwww.i2r.ru\u002Fstatic\u002F245\u002Fout_21542.shtml - Параметры object\u003Cbr\u003E","\u003Cp\u003Ediv и span\u003Cbr\u003E\u003Cp\u003EDiv – блочный\u003Cbr\u003ESpan – строчный \u003Cbr\u003Etitle, dir, lang, style, class\u003Cbr\u003E","\u003Cp\u003ECSS 2\u003Cbr\u003E\u003Cp\u003EСтиль – это правило отображения тега\u003Cbr\u003EВстроенные стили, стили документа, внешние таблицы\u003Cbr\u003E\u003Clink\u003E или @import\u003Cbr\u003E@media – правило \u003Cbr\u003E\u002F* комментарий к стилям *\u002F\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ecss.html, css.css, css1.css\u003Cbr\u003E","\u003Cp\u003EСинтаксис\u003Cbr\u003E\u003Cp\u003Eseceltor {property:value; property1:value1;}\u003Cbr\u003Ep {color: red; text-decoration: underline;}\u003Cbr\u003Ep {font-family: Georgia, 'Times New Roman', Times, serif;}\u003Cbr\u003Ep {border: 1px solid red;}\u003Cbr\u003EСтиль элемента явно указан, либо унаследован, либо взят по умолчанию\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ecss0.html\u003Cbr\u003E","\u003Cp\u003EСелекторы\u003Cbr\u003E\u003Cp\u003Ep {} \u002F* типовой, по тегу *\u002F\u003Cbr\u003E#id1 {} \u002F* идентификатор *\u002F\u003Cbr\u003E.class1 {} \u002F* по имени класса *\u002F\u003Cbr\u003E* {} \u002F* универсальный *\u002F\u003Cbr\u003E*[align=\"right\"] {} \u002F* по атрибутам *\u002F\u003Cbr\u003Ep#id1.class1.class2 {}\u003Cbr\u003Ep:first-line {} \u002F* псевдоэлементы *\u002F\u003Cbr\u003Ediv, table, .class1 {} \u002F*групповой*\u002F\u003Cbr\u003Eul ul{} \u002F*контекст, наследующие*\u002F\u003Cbr\u003Eol \u003E li {} \u002F*дочерний*\u002F\u003Cbr\u003Eli + li {} \u002F*соседние*\u002F\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fxhtml.ru\u002F2008\u002F01\u002F08\u002Fcss-selectors - поддерживаемые в браузерах селекторы\u003Cbr\u003E\u003Cp\u003Ecss2.html\u003Cbr\u003E","\u003Cp\u003EПриоритеты стилей\u003Cbr\u003E\u003Cp\u003EСтили \r\n\u003Cbr\u003E!important\r\n\u003Cbr\u003EПорядок каскадирования:\u003Cbr\u003EПо источнику (\"ближе\" к тегу)\u003Cbr\u003EСпецифичность, более узкое, точное определение\u003Cbr\u003EПорядок следования\u003Cbr\u003EКак правило стили приоритетнее атрибутов\u003Cbr\u003E\u003Cp\u003Eагент, браузер\u003Cbr\u003E\u003Cp\u003Eпользователь\u003Cbr\u003E\u003Cp\u003Eразработчик\u003Cbr\u003E\u003Cp\u003Eагент, браузер\u003Cbr\u003E\u003Cp\u003Eразработчик\u003Cbr\u003E\u003Cp\u003Eпользователь\u003Cbr\u003E\u003Cp\u003Ecss.html, css.css, css1.css\u003Cbr\u003E","\u003Cp\u003EСпецифичность\u003Cbr\u003E\u003Cp\u003Ea – id; b – класс, псевдокласс, аттрибут; c – имя тега.\u003Cbr\u003E* {} \u002F* a=0 b=0 c=0 -\u003E специфичность = 0 *\u002F \u003Cbr\u003Eli {} \u002F* a=0 b=0 c=1 -\u003E специфичность = 1 *\u002F\u003Cbr\u003Eul li {} \u002F* a=0 b=0 c=2 -\u003E специфичность = 2 *\u002F \u003Cbr\u003Eul ol+li {} \u002F* a=0 b=0 c=3 -\u003E специфичность = 3 *\u002F\u003Cbr\u003Eul ol li.red {} \u002F* a=0 b=1 c=3 -\u003E специфичность = 13 *\u002F\u003Cbr\u003Eli.red.level {} \u002F* a=0 b=2 c=1 -\u003E специфичность = 21 *\u002F\u003Cbr\u003E#x34y {} \u002F* a=1 b=0 c=0 -\u003E специфичность = 100 *\u002F\u003Cbr\u003E\u002F* style=\"\" -\u003E специфичность = 1000 *\u002F\u003Cbr\u003E\u003Cp\u003Ecss1.html\u003Cbr\u003E","\u003Cp\u003EРазмеры, цвета, URL в CSS\u003Cbr\u003E\u003Cp\u003EКлючевые слова, inherit\u003Cbr\u003Eurl(http:\u002F\u002Flocalhost\u002F1.jpg)\u003Cbr\u003Ered, #7788AA, rgb(12,11,34)\u003Cbr\u003EРазмеры:\u003Cbr\u003Eem — ширина буквы m в настоящем шрифте. Например, \r\np {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.\u003Cbr\u003Epx — пикселы\u003Cbr\u003Ept — пункты. Один пункт = 1\u002F72 дюйма.\u003Cbr\u003E% — проценты\u003Cbr\u003Eex — ширина буквы x\u003Cbr\u003Ein — дюймы\u003Cbr\u003Ecm — сантиметры\u003Cbr\u003Emm — миллиметры\u003Cbr\u003Epc —размер в пиках. (12 пунктов).\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ekeywords.html\u003Cbr\u003E","\u003Cp\u003EШрифты\u003Cbr\u003E\u003Cp\u003Efont-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)\u003Cbr\u003Efont-size: larger;\u003Cbr\u003Efont-style: italic;\u003Cbr\u003Efont-variant: small-caps;\u003Cbr\u003Efont-weight: bold; (400)\u003Cbr\u003Efont: [font-style || font-variant || font-weight] font-size [\u002Fline-height] font-family\u003Cbr\u003EЗагрузка шрифтов, @font-face\u003Cbr\u003E\u003Cp\u003Efont_css.html\u003Cbr\u003E","\u003Cp\u003EСвойства текста\u003Cbr\u003E\u003Cp\u003Eletter-spacing: 2px;\u003Cbr\u003Eline-height: 120%; (наслед. вычисл. от родителя)\u003Cbr\u003Etext-align: right; \u003Cbr\u003Etext-decoration: blink | line-through | overline | underline | none\u003Cbr\u003Etext-ident: -5em;\u003Cbr\u003Etext-transform: capitalize | lowercase | uppercase | none\u003Cbr\u003Evertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты\r\n(только строк. и замещ. элементы)\u003Cbr\u003Eword-spacing: 10em;\u003Cbr\u003Ewhite-space: normal | nowrap | pre (pre в ie6 работает ☹)\u003Cbr\u003EДругие языки…\u003Cbr\u003E\u003Cp\u003Etext_css.html\u003Cbr\u003E","\u003Cp\u003EКонтейнер строки\u003Cbr\u003E","\u003Cp\u003EСвойства контейнеров\u003Cbr\u003E\u003Cp\u003EБлочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003Etop, right, bottom, left\u003Cbr\u003E","\u003Cp\u003EГоризонтальное форматирование\u003Cbr\u003E\u003Cp\u003EЗначение auto – заполняет всю оставшуюся ширину контейнера (margin, width)\u003Cbr\u003EОтрицательные поля\u003Cbr\u003EСумма 7 размеров дочернего элемента = width родительского\u003Cbr\u003EДля замещающих элементов размеры auto равны реальным размерам\u003Cbr\u003EРазмеры замещающих элементов изменяются пропорционально, если задавать одно из них\u003Cbr\u003E\u003Cp\u003Eautowidth.html\u003Cbr\u003E","\u003Cp\u003Eконтейнер\u003Cbr\u003E\u003Cp\u003Eконтейнер\u003Cbr\u003E\u003Cp\u003Eheight=auto\u003Cbr\u003E\u003Cp\u003Ehoris1.html\u003Cbr\u003E","\u003Cp\u003EВертикальное форматирование\u003Cbr\u003E\u003Cp\u003EВысота по содержимому (auto)\u003Cbr\u003EИли через height. Если содержимого больше чем height – прокрутка\u003Cbr\u003Emargin-top или bottom равное auto = 0\u003Cbr\u003EВысота в процентах – от блока контейнера, но…\u003Cbr\u003EЦентрирование по вертикали через процентные margin и высоту блока-контейнера\u003Cbr\u003EСворачивание полей\u003Cbr\u003EОтрицательные margin\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Evert1.html, vert2.html,\u003Cbr\u003Enegative_margins.html\u003Cbr\u003E","\u003Cp\u003EСворачивание вертикальных полей\u003Cbr\u003E\u003Cp\u003Emargins.html\u003Cbr\u003E","\u003Cp\u003EФорматирование строчных элементов\u003Cbr\u003E\u003Cp\u003EМногострочный строковый элемент, рамки, фон\u003Cbr\u003EСтроковый блок и контейнер строки\u003Cbr\u003EОтступы, рамки и поля незамещаемых элементов не оказывают влияния на высоту строкового блока в отличии от замещаемых\u003Cbr\u003EВспомним line-height\u003Cbr\u003EЕсли в строке есть замещаемый элемент, то его реальная высота, padding и margin, border влияют на высоту строкового блока\u003Cbr\u003E\u003Cp\u003Estr_format.htm\u003Cbr\u003E","\u003Cp\u003EИзменение представления элемента\u003Cbr\u003E\u003Cp\u003Edisplay: block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inline-block\u003Cbr\u003EПример употребления display:block\u003Cbr\u003EПример употребления display:inline\u003Cbr\u003Edisplay определяет только лишь представление элемента, но не его тип, не его суть\u003Cbr\u003Edisplay: inline-block\u003Cbr\u003EИногда значение display вычисляется в зависимости от значения свойств float или position (абс. – или table или block)\u003Cbr\u003E\u003Cp\u003Edisplay1.html\u003Cbr\u003Edisplay_inline_block.html\u003Cbr\u003E","\u003Cp\u003EПоля\u003Cbr\u003E\u003Cp\u003EПо умолчанию margin=0\u003Cbr\u003EУ некоторых элементов есть поля по умолч.\u003Cbr\u003Eimg {margin: 1em;}\u003Cbr\u003Eimg {margin: 1em 2em 3em 4em;}\u003Cbr\u003Eimg {margin: 1em 2em;}\u003Cbr\u003Eimg {margin: 1em 2em 3em;}\u003Cbr\u003EПроцентные значения от ширины родительского элемента\u003Cbr\u003Emargin-left, margin-right, margin-top, margin-bottom\u003Cbr\u003EПоля строковых элементов (левое и правое)\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Etop\u003Cbr\u003E\u003Cp\u003Ebottom\u003Cbr\u003E\u003Cp\u003Eright\u003Cbr\u003E\u003Cp\u003Eleft\u003Cbr\u003E\u003Cp\u003Emargin-percent.html\u003Cbr\u003E","\u003Cp\u003EРамки\u003Cbr\u003E\u003Cp\u003EРамки внутри полей, они ограничивают фон\u003Cbr\u003EШирина, стиль, цвет\u003Cbr\u003EШирина по умолч.=medium или none\u003Cbr\u003EЦвет по умолч.=цвет элемента\u003Cbr\u003Eborder-style: стиль (TRBL) или отдельно\u003Cbr\u003Eborder-width: thin | medium | thick | значение (TRBL) или отдельно, % - запрещены\u003Cbr\u003EЕсли border-style=none, то border-width=0\u003Cbr\u003Eborder-color: color (TRBL) или отдельно\u003Cbr\u003EЦвет рамки может = transparent\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EРамки, стили рамок\u003Cbr\u003E\u003Cp\u003Eborder-top, border-right, border-bottom, border-left: border-width || border-style || color \u003Cbr\u003Eborder: border-width || border-style || color\u003Cbr\u003EУ строковых элементов тоже могут быть\u003Cbr\u003E","\u003Cp\u003EОтступы\u003Cbr\u003E\u003Cp\u003Epadding: значение (любые меры, проценты) (TRBL)\u003Cbr\u003EЗалиты фоном\u003Cbr\u003EОтступы не сворачиваются\u003Cbr\u003E% относительно ширины родителя (причем и верхние и нижние поля)\u003Cbr\u003Epadding-top, padding-right, padding-bottom, padding-left\u003Cbr\u003EМожно применять к строковым элементам\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Epaddings.html\u003Cbr\u003E","\u003Cp\u003EЦвета, фон \u003Cbr\u003E\u003Cp\u003Ecolor: \u003Cцвет\u003E | inherit\u003Cbr\u003EСвойство color для элементов форм\u003Cbr\u003Ebackground-color: цвет | transparent (умолч.)\u003Cbr\u003Ebackground-image: url(путь к файлу) | none \u003Cbr\u003Ebackground-color + background-image\u003Cbr\u003Ebackground-repeat: no-repeat | repeat | repeat-x | repeat-y\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ecolors-css.html,\u003Cbr\u003Ebackground_css.html\u003Cbr\u003E","\u003Cp\u003EФон\u003Cbr\u003E\u003Cp\u003Ebackground-position: [проценты | значение] | [left | center | right] || [top | center | bottom]\r\n(если одно задано, второе – center)\u003Cbr\u003Ebackground-attachment: fixed | scroll\r\n (http:\u002F\u002Fwww.meyerweb.com\u002Feric\u002Fcss\u002Fedge\u002Fcomplexspiral\u002Fglassy.html)\u003Cbr\u003Ebackground: background-attachment || background-color || background-image || background-position || background-repeat\u003Cbr\u003E\u003Cp\u003Ebackground_css.html,\u003Cbr\u003Ebackground2_css.html\u003Cbr\u003E","\u003Cp\u003EПеремещение, плавающая модель\u003Cbr\u003E\u003Cp\u003EРисунки, параграф с float\u003Cbr\u003EЗадание ширины обязательно\u003Cbr\u003EПоля не сворачиваются\u003Cbr\u003EПеремещаемый элемент генерирует блочный элемент\u003Cbr\u003EПравила перемещаемых элементов (стр.327)\u003Cbr\u003EПеремещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомков\u003Cbr\u003EОтрицательные поля\u003Cbr\u003EЕсли ширина больше – перемещаемый элемент окажется за боковым краем родителя\u003Cbr\u003Eclear: both | left | none | right\u003Cbr\u003E\u003Cp\u003Efloat1.html, float2.html\u003Cbr\u003Efloat3.html, float_problem.html\u003Cbr\u003E","\u003Cp\u003EПозиционирование\u003Cbr\u003E\u003Cp\u003Eposition: absolute | fixed | relative | static\u003Cbr\u003Estatic – нормальный поток\u003Cbr\u003Erelative – смещение элемента с теми же размерами и начальными координатами\u003Cbr\u003Eabsolute – удаление из нормального потока.\r\nГенерация структурного блока.\u003Cbr\u003Efixed – абсолютно позиционированный элемент, но блок-контейнер – окно просмотра.\u003Cbr\u003E","\u003Cp\u003EПозиционирование 2\u003Cbr\u003E\u003Cp\u003EБлок-контейнер для элементов с position = relative | static – родитель \u003Cbr\u003EБлок-контейнер для элементов с position = absolute – ближайший предок с position != static. Если ближайший предок – строковый, то контейнер – предок. Если таких элементов нет – начальный блок-контейнер\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСвойства смещения\u003Cbr\u003E\u003Cp\u003Etop, right, bottom, left: \u003Cдлина\u003E | \u003Cпроцентное значение\u003E | auto | inherit\u003Cbr\u003EШирина и высота\u003Cbr\u003Emin-width, min-height: \u003Cдлина\u003E | \u003Cпроцентное значение\u003E | inherit\u003Cbr\u003Emax-width, max-height: \u003Cдлина\u003E | \u003Cпроцентное значение\u003E | none | inherit\u003Cbr\u003E\u003Cp\u003Eposition.html\u003Cbr\u003E","\u003Cp\u003EПереполнение и отсечение содержимого\u003Cbr\u003E\u003Cp\u003Eoverflow: visible | hidden | scroll | auto | inherit\u003Cbr\u003Eoverflow-x и overflow-y\u003Cbr\u003Eclip: rect(top, right, bottom, left) | rect(Y1, X1, Y2, X2) | auto | inherit \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Eoverflow.html\u003Cbr\u003E","\u003Cp\u003EВидимость элементов\u003Cbr\u003E\u003Cp\u003Evisibility: visible | hidden | collapse | inherit\u003Cbr\u003E\u003Cp\u003Evisibility.html\u003Cbr\u003E","\u003Cp\u003EАбсолютное позиционирование\u003Cbr\u003E\u003Cp\u003EАбсолютное позиционирование относительно…\u003Cbr\u003EПерекрытие элементов\u003Cbr\u003EРазмеры и размещение \u003Cbr\u003Eleft + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = ширина блока-контейнера\u003Cbr\u003EЗначение auto\u003Cbr\u003Eright или bottom компенсируют, если все свойства заданы\u003Cbr\u003E\u003Cp\u003Eposition_abs.html\u003Cbr\u003E","\u003Cp\u003EРазмещение по оси z\u003Cbr\u003E\u003Cp\u003Ez-index: число | auto\u003Cbr\u003EМожет быть отрицательным\u003Cbr\u003EЛокальный контекст \r\nзанесения в стек\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Eокно\u003Cbr\u003E\u003Cp\u003EА\u003Cbr\u003E\u003Cp\u003EБ\u003Cbr\u003E\u003Cp\u003Ez-index.html\u003Cbr\u003E","\u003Cp\u003EФиксированное позиционирование\u003Cbr\u003E\u003Cp\u003EОтносительно окна браузера\u003Cbr\u003EУдобно, например, для баннеров или для меню\u003Cbr\u003E\u003Cp\u003Eposition_fixed.html\u003Cbr\u003E","\u003Cp\u003EОтносительное позиционирование\u003Cbr\u003E\u003Cp\u003EСмещение относительно текущего положения\u003Cbr\u003E\u003Cp\u003Eposition_relative.html\u003Cbr\u003E","\u003Cp\u003EВерстка таблиц\u003Cbr\u003E\u003Cp\u003EОбъединять ячейки через CSS нельзя\u003Cbr\u003EУ ячеек нет полей\u003Cbr\u003E\u003Cp\u003EСвойство display\u003Cbr\u003E\u003Cp\u003Etables2.html\u003Cbr\u003E","\u003Cp\u003EТаблицы. Продолжение\u003Cbr\u003E\u003Cp\u003Edisplay: inline-table – таблица строкового уровня (типа inline-block)\u003Cbr\u003EЗначения можно присвоить любым элементам и сделать на основе них таблицу\u003Cbr\u003EАнонимные объекты таблицы\u003Cbr\u003E\u003Ctable\u003E\r\n\u003Ctd\u003EName:\u003C\u002Ftd\u003E\r\n\u003Ctd\u003E\u003Cinput type=\"text\"\u003E\u003C\u002Ftd\u003E\r\n\u003C\u002Ftable\u003E\u003Cbr\u003E\u003Cp\u003Etables2.html\u003Cbr\u003E","\u003Cp\u003EТаблицы. Продолжение\u003Cbr\u003E\u003Cp\u003EСлои таблицы\u003Cbr\u003Ecaption-side: top |\r\nbottom\u003Cbr\u003Eborder-collapse:\r\ncollapse | separate |\r\n inherit\u003Cbr\u003Eborder-spacing: \u003Cдлина гор.\u003E \u003Cдлина верт.\u003E? | inherit\u003Cbr\u003Eempty-cells: show | hide | inherit\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Etables3.html\u003Cbr\u003E","\u003Cp\u003EСливающиеся рамки ячеек\u003Cbr\u003E\u003Cp\u003EЕсли display: table | inline-table у элемента не может быть отступов, только поля\u003Cbr\u003EРамки могут применяться к таблице, ячейкам, строкам, группам строк, столбцам и группам столбцов\u003Cbr\u003EМежду рамками ячеек не может быть никаких промежутков; рамки сливаются и центрируются\u003Cbr\u003E\u003Cp\u003Etables3.html\u003Cbr\u003E","\u003Cp\u003EРазмеры таблиц\u003Cbr\u003E\u003Cp\u003EШирина\u003Cbr\u003Etable-layout: auto | fixed | inherit\u003Cbr\u003EСкорость рендера с фиксированной шириной больше\u003Cbr\u003EЕсли сумма ширин столбцов больше ширины таблицы, то берется первое\u003Cbr\u003EВысота: или заданная или как сумма высот строк\u003Cbr\u003EВертикальное выравнивание – не то же самое что и для строковых элементов\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Etables4.html\u003Cbr\u003E","\u003Cp\u003EЭлементы списка\u003Cbr\u003E\u003Cp\u003EУправлять размещением сложно\u003Cbr\u003Elist-style-position: inside | outside – вне содержимого или как строковый маркер в начале содержимого\u003Cbr\u003Elist-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none\u003Cbr\u003Elist-style-image: none | url('путь к файлу')\u003Cbr\u003Elist-style: list-style-type || list-style-position || list-style-image\u003Cbr\u003E\u003Cp\u003Elists_css.html\u003Cbr\u003E","\u003Cp\u003EГенерируемое содержимое\u003Cbr\u003E\u003Cp\u003EНапример маркеры списка…\u003Cbr\u003Ea[href]:before {content: \"(link)\";}\u003Cbr\u003EОграничения на display\u003Cbr\u003Econtent: строка | attr(атрибут) | open-quote | close-quote | no-open-quote | no-close-quote | url }\u003Cbr\u003EТеги недопустимы\u003Cbr\u003EГенерируемые кавычки\u003Cbr\u003EСчетчики \u003Cbr\u003Ecounter-reset и counter-increment\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ecss_gen_content.html\u003Cbr\u003Ecss_gen_content2.html\u003Cbr\u003E","\u003Cp\u003EКурсоры\u003Cbr\u003E\u003Cp\u003Ecursor: [[\u003Curi\u003E,]* [auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | seresize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit\u003Cbr\u003Ea[href] {cursor: pointer;}\u003Cbr\u003E\u003Cp\u003Ecursors.html\u003Cbr\u003E","\u003Cp\u003EКурсоры\u003Cbr\u003E","\u003Cp\u003EКонтуры\u003Cbr\u003E\u003Cp\u003EНу участвуют в потоке документа\u003Cbr\u003EМогут употребляться вместе с рамками\u003Cbr\u003Eoutline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit (TRBL – нет)\u003Cbr\u003Eoutline-width: thin | medium | thick | \u003Cдлина\u003E | inherit\u003Cbr\u003Eoutline-color: \u003Cцвет\u003E | invert | inherit\u003Cbr\u003Eoutline: [ \u003Coutline-color\u003E || \u003Coutline-style\u003E || \u003Coutline-width\u003E ] | inherit\u003Cbr\u003E\u003Cp\u003Eoutline.html\u003Cbr\u003E",a],href:"\u002Falgebra\u002Fhtmlcss-verstka",href_category:"\u002Falgebra",date:1662519227,related:[{id:1213720,name:"Презентация на тему \"Эндокринная регуляция беременности\" - скачать презентации по Медицине",href:"\u002Falgebra\u002F89799-prezentaciya-na-temu-quotendokrinnaya-regulyaciya-beremennostiquot--skachat-prezentacii-po-medicine",jpg:"jpg\u002F1213720"},{id:1375645,name:"Управление капитальным строительством. (Лекция 11)",href:"\u002Falgebra\u002Fupravlenie-kapitalnym-stroitelstvom-lekciya-11",jpg:"jpg\u002F1375645"},{id:1373047,name:"Конструктивные особенности сжатых железобетонных элементов",href:"\u002Falgebra\u002Fkonstruktivnye-osobennosti-szhatyx-zhelezobetonnyx-elementov",jpg:"jpg\u002F1373047"},{id:1310876,name:"Портрет в изобразительном искусстве XX века",href:"\u002Falgebra\u002Fportret-v-izobrazitelnom-iskusstve-xx-veka",jpg:"jpg\u002F1310876"},{id:1344358,name:"Автомобильдер мен тракторлардың тежеуіш жүйелері",href:"\u002Falgebra\u002Favtomobilyder-men-traktorlardy-tegheu-sh-gh-yeler-",jpg:"jpg\u002F1344358"},{id:1186062,name:"Какой вид спорта лучше? Презентацию выполнила Ветринская Е.А. Учитель начальных классов МОУ СОШ №3 п.Никель Мурманской обл.",href:"\u002Falgebra\u002Fkakoj-vid-sporta-luchshe-prezentaciyu-vypolnila-vetrinskaya-ea-uchitel-nachalnyx-klassov-mou-sosh-3-pnikel-murmanskoj-obl",jpg:"jpg\u002F1186062"},{id:1429062,name:"Українські меценати. Родина терещенко",href:"\u002Falgebra\u002Fukra-nsyk-mecenati-rodina-tereschenko",jpg:"jpg\u002F1429062"},{id:1315516,name:"Вымышленные религии в компьютерных играх",href:"\u002Falgebra\u002Fvymyshlennye-religii-v-kompyuternyx-igrax",jpg:"jpg\u002F1315516"},{id:1489576,name:"Христианство. Православие. Часть II. Православный храм - 1",href:"\u002Falgebra\u002Fxristianstvo-pravoslavie-chast-ii-pravoslavnyj-xram-1-1",jpg:"jpg\u002F1489576"},{id:1369515,name:"Урок по теме «Боги древних славян» 3 класс (Программа «Начальная школа XXI века»)",href:"\u002Falgebra\u002Furok-po-teme-bogi-drevnix-slavyan-3-klass-programma-nachalnaya-shkola-xxi-veka",jpg:"jpg\u002F1369515"},{id:1273936,name:" \r\n Урок МХК 9 класс Учитель МХК МОУ СОШ № 4 с. Малые Ягуры Адоньева Д. Н. ",href:"\u002Falgebra\u002Fprezentaciya-quotbarokko-tvorchestvo-l-berniniquot--skachat-prezentacii-po-mxk",jpg:"jpg\u002F1273936"},{id:1426435,name:"Ансамбль Афинского Акрополя. Греция",href:"\u002Falgebra\u002Fansambl-afinskogo-akropolya-greciya",jpg:"jpg\u002F1426435"},{id:1272081,name:" \r\n ВЫБОР ТЕРАПЕВТИЧЕСКОЙ ТАКТИКИ ПРИ ХРОНИЧЕСКОЙ БОЛЕЗНИ ПОЧЕК КРАСНОВА Т.Н. ",href:"\u002Falgebra\u002Fvybor-terapevticheskoj-taktiki-pri-xronicheskoj-bolezni-pochek-krasnova-tn",jpg:"jpg\u002F1272081"},{id:1456468,name:"Асинхронные двигатели",href:"\u002Falgebra\u002Fasinxronnye-dvigateli-1",jpg:"jpg\u002F1456468"},{id:1230210,name:"Школа научного менеджмента Ф. Тейлора Петрова М. Зедеев А.",href:"\u002Falgebra\u002Fshkola-nauchnogo-menedzhmenta-f-tejlora-petrova-m-zedeev-a",jpg:"jpg\u002F1230210"},{id:1368077,name:"Christlich Demokratische Union Deutschlands",href:"\u002Falgebra\u002Fchristlich-demokratische-union-deutschlands-e0-2",jpg:"jpg\u002F1368077"},{id:1324950,name:"Судебная риторика: тактика, приемы, особенности",href:"\u002Falgebra\u002Fsudebnaya-ritorika-taktika-priemy-osobennosti",jpg:"jpg\u002F1324950"},{id:1481754,name:"Радиостанция Баклан 20",href:"\u002Falgebra\u002Fradiostanciya-baklan-20-",jpg:"jpg\u002F1481754"},{id:1191469,name:"Презентация менежмент ОСОБЕННОСТИ КОМАНД",href:"\u002Falgebra\u002Fprezentaciya-menezhment-osobennosti-komand",jpg:"jpg\u002F1191469"},{id:1299064,name:"Pascal Файлы ",href:"\u002Falgebra\u002Fpascal-fajly",jpg:"jpg\u002F1299064"},{id:1421640,name:"文化全景练习",href:"\u002Falgebra\u002F--168",jpg:"jpg\u002F1421640"},{id:1384603,name:"Греция, город Кавала Фестиваль Cosmopolis 18 – 25 июля 2016 года",href:"\u002Falgebra\u002Fgreciya-gorod-kavala-festival-cosmopolis-18-25-iyulya-2016-goda",jpg:"jpg\u002F1384603"},{id:1339982,name:"Ольга Алексеевна Зайцева",href:"\u002Falgebra\u002Folga-alekseevna-zajceva",jpg:"jpg\u002F1339982"},{id:1453089,name:"Теория видеомонтажа",href:"\u002Falgebra\u002Fteoriya-videomontazha",jpg:"jpg\u002F1453089"},{id:1223967,name:"Соотношение конституционных положений о свободе предпринимательской и иной экономической деятельности с нормами уголовного зак",href:"\u002Falgebra\u002Fsootnoshenie-konstitucionnyx-polozhenij-o-svobode-predprinimatelskoj-i-inoj-ekonomicheskoj-deyatelnosti-s-normami-ugolovnogo-zak-d0",jpg:"jpg\u002F1223967"},{id:1368937,name:"Шесть пороков, разрушающих бхакти",href:"\u002Falgebra\u002Fshest-porokov-razrushayushhix-bxakti",jpg:"jpg\u002F1368937"},{id:1224861,name:"Презентация Основные парадигмы политики",href:"\u002Falgebra\u002Fprezentaciya-osnovnye-paradigmy-politiki-1",jpg:"jpg\u002F1224861"},{id:1483098,name:"Табличка на стол (только для CI Дилеров)",href:"\u002Falgebra\u002Ftablichka-na-stol-tolko-dlya-ci-dilerov-",jpg:"jpg\u002F1483098"}],navigation:{next:"\u002Falgebra\u002Fosnovnye-sredstva-vba",next_name:"Основные средства VBA",prev:"\u002Falgebra\u002Fmezhdunarodnopravovoe-regulirovanie-truda-1",prev_name:"Международно-правовое регулирование труда"}}},categories:{result:[{id:k,ordering:c,name:"Разное",pseudoname:"uncategorized"},{id:144,ordering:c,name:"Бизнес и предпринимательство",pseudoname:"biznes-i-predprinimatelstvo"},{id:146,ordering:c,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:c,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:c,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:c,name:"Спорт",pseudoname:"sport"},{id:154,ordering:c,name:"Армия",pseudoname:"armiya"},{id:156,ordering:c,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:c,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:c,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:c,name:"Черчение",pseudoname:"cherchenie"},{id:166,ordering:c,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:k,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:"Информатика",pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:h,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:H,SITE_HOST:"vseprezentacii.com",SITE_LANG:I,API_BASE_URL:"https:\u002F\u002Fvseprezentacii.com\u002Fapi\u002F",pwaManifest:{name:H,short_name:a,description:a,lang:I,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.6bbe8d3f.png",type:b,sizes:J,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.6bbe8d3f.png",type:b,sizes:J,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.6bbe8d3f.png",type:b,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.6bbe8d3f.png",type:b,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.6bbe8d3f.png",type:b,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.6bbe8d3f.png",type:b,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.6bbe8d3f.png",type:b,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.6bbe8d3f.png",type:b,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.6bbe8d3f.png",type:b,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.6bbe8d3f.png",type:b,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.6bbe8d3f.png",type:b,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.6bbe8d3f.png",type:b,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.6bbe8d3f.png",type:b,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.6bbe8d3f.png",type:b,sizes:P,purpose:g}]},yandexMetrika:{id:"94843251",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:c,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:a,logo_image_width:p,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:d,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:x,footer:y,dark_theme:d,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D},colors:{header_text:j,header_bg:E,accent:F}},social:G,token:a}}}}("","image\u002Fpng",0,true,false,"any","maskable",11,"h2","#ffffff",1,"Презентации, проекты в PowerPoint","Презентации в PowerPoint","Презентации, проекты, доклады в PowerPoint ","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект, скачать",28,32,"VsePrezentacii.com",720,480,"6LdGr9gnAAAAAKdcDqFL5n46upSHwwYHs5ccQSJh","3212391","abusetheslide@ya.ru","Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.","\u003Ca href=\"\u002Fpage\u002Fdlyapravoobladatelei\"\u003EДля правообладателей\u003C\u002Fa\u003E","div","images_before","category","both",77,"#333333","#8a8888","\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","VsePrezentacii","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.08fba208.js" crossorigin></script></body> </html>

HTML+CSS, верстка

Содержание

Короткое введениеПоследний стандарт HTML – версия 5XHML – переработанный HTML в

Заготовка <br>

Привет, Мир!

Элементы и теги<название_тега><название_тега>содержание тегаТекст абзацаHTML – это прежде всего содержание, данные.

РедакторыWYSIWYG или текстовые процессорыWebStormSublimeAtomNotepad++Microsoft Word!?

БраузерыInternet ExplorerEdgeFirefoxOperaSafariChromeYandexVivaldi

Другие инструментыFirebug – не заменим для разработки и отладки HTML, CSS,