{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b787s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В начале карьеры веб‑разработчика рано или поздно придется разбираться с оформлением сайтов. Подключение CSS к HTML может показаться пугающим, но на деле это совсем несложно.","type":"unstyled","key":"6ntsq"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":32,"offset":81}],"inlineStyleRanges":[],"text":"Хотите не просто верстать страницы, а создавать полноценные веб‑приложения? Курс «Python разработка web‑проектов» научит и фронтенду, и бэкенду.","type":"unstyled","key":"a8bi5"},{"data":{"image":{"id":"693ad90c7e27d11380f0d77d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1af13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML и CSS: основа основ","type":"header-two","key":"d294k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте представим сайт в виде дома. HTML – это его несущие конструкции, стены и перекрытия. Он определяет, где будет располагаться заголовок, где – навигационное меню, а где – основной контент. Без HTML браузер не поймет, как именно отображать различные элементы страницы.","type":"unstyled","key":"p0ma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS – это отделочные работы и дизайн интерьера. Он отвечает за цветовую гамму, типографику, расположение элементов и визуальные эффекты. Без CSS даже самый продуманный HTML-каркас будет выглядеть как недостроенный объект.","type":"unstyled","key":"fav3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычная HTML-разметка без применения стилей:","type":"unstyled","key":"61him"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"ITALIC"}],"text":"html","type":"unstyled","key":"1rjum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"}],"text":"

Главный заголовок страницы

","type":"unstyled","key":"7lte6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"ITALIC"}],"text":"

Здесь находится","type":"unstyled","key":"d407d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"ITALIC"}],"text":"описание нашего продукта

","type":"unstyled","key":"c61ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"4esa7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тот же код после подключения CSS:","type":"unstyled","key":"21hu8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"ITALIC"}],"text":"html","type":"unstyled","key":"29mek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"2pop5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"5fl2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"5vm4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"3rdu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"5rcoq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"6hbq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плюсы такого подхода:","type":"unstyled","key":"b69kp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Не нужно прыгать между файлами – все перед глазами","type":"unstyled","key":"69nil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Не придется следить за кучей дополнительных документов","type":"unstyled","key":"btlbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Идеально для быстрого старта с небольшими проектами","type":"unstyled","key":"175fj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но есть и минусы:","type":"unstyled","key":"f7ctu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Когда проект растет, код превращается в беспорядок","type":"unstyled","key":"8hfkq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Сложно сделать так, чтобы все страницы выглядели одинаково","type":"unstyled","key":"7hd5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Готовые стили почти невозможно использовать еще раз","type":"unstyled","key":"73mpp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внешние CSS-файлы – выбор профи","type":"header-two","key":"a4pq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так работают все опытные разработчики.","type":"unstyled","key":"8hbtm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте: у вас сайт на 20 страниц. Если хранить стили в каждом HTML-файле, придется 20 раз копировать один и тот же код. Захотел поменять цвет – иди правь все 20 файлов.","type":"unstyled","key":"eq9ao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь решение: заводишь один файл styles.css, прописываешь в нем все стили – и все сразу меняется на всех страницах:","type":"unstyled","key":"6en4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"ITALIC"}],"text":"html","type":"unstyled","key":"16o97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"ITALIC"}],"text":"/* Основные стили сайта */","type":"unstyled","key":"1t4b8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":272,"offset":0,"style":"ITALIC"}],"text":".body { font-family: 'Roboto', sans-serif; line-height: 1.6; color: #333; }\n.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }\n.btn { display: inline-block; padding: 12px 24px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; }","type":"unstyled","key":"cre9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И подключаете его во всех HTML-файлах:","type":"unstyled","key":"dg7hu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"ITALIC"}],"text":"html","type":"unstyled","key":"1r4lk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"cc5rg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему это работает эффективно:","type":"unstyled","key":"7jhub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Единая точка управления всем дизайном сайта","type":"unstyled","key":"de7sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Браузер кэширует CSS-файл, ускоряя загрузку страниц","type":"unstyled","key":"9qako"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Разные специалисты могут одновременно работать над стилями и разметкой","type":"unstyled","key":"1mh76"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Легко подключать альтернативные темы оформления","type":"unstyled","key":"4sdi3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инлайн-стили: решение для единичных правок","type":"header-two","key":"1b38e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иногда возникает необходимость изменить всего один элемент на странице. Например, сделать конкретную кнопку красной вместо синей. Для таких случаев и существуют инлайн-стили:","type":"unstyled","key":"5kvgc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"ITALIC"}],"text":"html","type":"unstyled","key":"7vkgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"f5u4m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сильные стороны инлайн-стилей:","type":"unstyled","key":"ejt4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Мгновенное применение изменений","type":"unstyled","key":"57eik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Не требуют создания отдельных CSS-правил","type":"unstyled","key":"1hqc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Имеют высший приоритет применения","type":"unstyled","key":"an3ep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Риски чрезмерного использования:","type":"unstyled","key":"cc6u8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– HTML-код быстро становится нечитаемым","type":"unstyled","key":"1ek4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Сложности с последующими изменениями дизайна","type":"unstyled","key":"at9jg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Нарушается принцип разделения ответственности","type":"unstyled","key":"3p9p9"},{"data":{"image":{"id":"693ad9b15c89e2445ff22d70"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2fgrj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему правильное подключение стилей так важно","type":"header-two","key":"epdou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Грамотное подключение CSS к HTML – это не просто формальность, а необходимость для создания качественных веб-продуктов:","type":"unstyled","key":"avmec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Скорость разработки: смена цвета через правку одной строки вместо сотен.","type":"unstyled","key":"17ijg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Сопровождаемость кода становится значительно проще.","type":"unstyled","key":"edqn8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Браузеры успешно кэшируют внешние CSS-файлы, уменьшая время загрузки страниц.","type":"unstyled","key":"64k2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Командная работа упрощается: дизайнеры трудятся над стилями, а верстальщики – над разметкой.","type":"unstyled","key":"9o9fu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Тегированная и структурированная верстка улучшает показатели SEO.","type":"unstyled","key":"6a4eh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"– Масштабируемость проекта обеспечивается гибкой архитектурой стилей.","type":"unstyled","key":"ddusc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практические рекомендации","type":"header-two","key":"6gvg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Начинайте с внешних таблиц стилей – это сэкономит время в будущем.","type":"unstyled","key":"1f6d5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Используйте методологию именования классов (БЭМ, OOCSS).","type":"unstyled","key":"blp2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Организуйте CSS-файлы по логическим разделам.","type":"unstyled","key":"2dfc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Комментируйте сложные участки кода.","type":"unstyled","key":"4tej1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Выполняйте следующие шаги:","type":"unstyled","key":"44bta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Сверстайте страницу с внутренними стилями","type":"unstyled","key":"fdksj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Переведите ее на внешний CSS-файл","type":"unstyled","key":"4b80f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Добавьте инлайн-стили для отдельных элементов","type":"unstyled","key":"6l6sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Сравните, какой подход удобнее","type":"unstyled","key":"9h2vn"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":32,"offset":24}],"inlineStyleRanges":[],"text":"Хотите больше? На курсе «Python разработка web-проектов» вы научитесь создавать сложные веб-приложения, работать с базами данных и API. В итоге – диплом и готовое портфолио.","type":"unstyled","key":"7907v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-two","key":"ed4ut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-two","key":"3spt2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"j1jcufrTVq4m9XmxpBUp"}],"entityMap":{"0":{"data":{"url":"https://allcourses.io/course/razrabotka-na-python-top-academy/?utm_source=dzen&utm_medium=allcourses&erid=0000"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://allcourses.io/course/razrabotka-na-python-top-academy/?utm_source=dzen&utm_medium=allcourses&erid=0000"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}