{"draftJsState":{"blocks":[{"data":{"image":{"id":"67c5a15bcadbe53da1696feb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bmqfi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8p2jq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эта тема посвящена всем аспектам работы с изображениями: вставке, управлению размерами, стилизации, созданию фоновых изображений и превращению изображений в ссылки.","type":"unstyled","key":"5nihe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.1. Как вставить изображение?","type":"header-two","key":"8ksd4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"f575c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Описание$ ","type":"unstyled","key":"4msge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"8u2jq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"

– указывает путь к файлу изображения.","type":"unordered-list-item","key":"dk7j2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"alt=\"Описание изображения\" – альтернативный текст, который помогает SEO и доступности.","type":"unordered-list-item","key":"f605l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"width и height: задают размеры изображения, позволяя браузеру зарезервировать место до загрузки.","type":"unordered-list-item","key":"31mom"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"jgml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оптимизируйте изображения для быстрого загрузки.","type":"unordered-list-item","key":"aqmad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всегда указывайте атрибут alt.","type":"unordered-list-item","key":"dtp8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.2. Как задать размеры и стили для изображения?","type":"header-two","key":"cun43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"653je"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Изображение\"$ \n","type":"unstyled","key":"5l8nv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"cp9f1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование CSS-класса для задания размера, рамки, отступов и внешнего вида изображения.","type":"unordered-list-item","key":"cruac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Преимущество – можно переиспользовать стиль для многих изображений.","type":"unordered-list-item","key":"e7t21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"5lct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте медиа-запросы для адаптивного масштабирования изображений.","type":"unordered-list-item","key":"4ckhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.3. Как сделать фоновое изображение?","type":"header-two","key":"4oiv8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"bkhgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

Фоновое изображение

\n","type":"unstyled","key":"c6ppu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"d5nc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"background-image: url('background.jpg'); – задаёт изображение фона.","type":"unordered-list-item","key":"1fvjl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"background-size: cover; – гарантирует, что фон покрывает всю область, сохраняя пропорции.","type":"unordered-list-item","key":"agrs3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"5vro9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучше использовать внешние CSS-стили для установки фонового изображения.","type":"unordered-list-item","key":"7kmce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно комбинировать с другими свойствами (например, background-position).","type":"unordered-list-item","key":"138ua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.4. Как сделать круглое изображение (аватар)?","type":"header-two","key":"7nlua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"ba21j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Аватар\"$ ","type":"unstyled","key":"anvai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"dp5o7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"border-radius: 50%; превращает квадратное изображение в круг.","type":"unordered-list-item","key":"20foo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важно, чтобы исходное изображение было квадратным для корректного результата.","type":"unordered-list-item","key":"echg0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"537ub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте CSS для создания круглых аватаров.","type":"unordered-list-item","key":"dlco0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экспериментируйте с различными размерами.","type":"unordered-list-item","key":"5dsqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3.5. Как сделать изображение-ссылку?","type":"header-two","key":"er6n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример кода:","type":"header-three","key":"677tf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n $\"Картинка-ссылка\"$ \n","type":"unstyled","key":"2tfql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подробный разбор:","type":"header-three","key":"70f7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обёртывание тега в тег делает изображение кликабельным.","type":"unordered-list-item","key":"acabr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это удобно для создания баннеров, кнопок и визуальных элементов, ведущих на другую страницу.","type":"unordered-list-item","key":"fo91g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Советы:","type":"header-three","key":"3ann6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверьте, чтобы ссылка соответствовала тематике изображения.","type":"unordered-list-item","key":"bv6no"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стилизация может помочь сделать изображение более привлекательным.","type":"unordered-list-item","key":"28j2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"eqXzclKYJ327ipFRTjzM"}],"entityMap":{}},"mentions":[]}