{"draftJsState":{"blocks":[{"data":{"image":{"id":"68174389c11f387ebf44d3ef"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Авторство AI","type":"atomic:image","key":"5hcqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"ITALIC"}],"text":"Предыдущая публикация:","type":"unstyled","key":"2tk3k"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"68173a340e48ab5e564c74eb","originalUrl":"https://dzen.ru/a/aBc6NA5Iq15WTHTr","publisherId":"68172d5a8ea03f5675aae915","publisherItemId":"8266609120772890118","publisherName":"Код без границ","publisherAvatar":{"id":"681733a1ebc0f6686c4d3e49","groupId":271828,"imageName":"pub_68172d5a8ea03f5675aae915_681733a1ebc0f6686c4d3e49","namespace":"zen-logos","meta":{"mainColor":"#080000","origFormat":"PNG"}},"title":"Знакомство с HTML: структура веб-страницы","publishTime":1746608486267,"isPublisherVerified":false,"image":{"id":"68173d65eaab1b4f8c0230f6","groupId":271828,"imageName":"pub_68173a340e48ab5e564c74eb_68173d65eaab1b4f8c0230f6","namespace":"zen_doc","meta":{"mainColor":"#080808","origFormat":"JPEG"},"sizes":{"orig":{"width":1024,"height":1024},"scale_600":{"width":600,"height":600},"scale_1200":{"width":1024,"height":1024},"scale_2400":{"width":1024,"height":1024}}},"isPremium":false,"timeToReadSeconds":165,"badSeoLink":"true"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"60b34"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет, друзья! Если вы когда-либо задумывались, как сделать ваш веб-сайт красивее, то вы пришли по адресу. Сегодня мы поговорим о CSS — языке, который превращает скучные HTML-элементы в настоящие шедевры! Приготовьтесь к увлекательному путешествию в мир стилей, цветовых палитр и шрифтов.","type":"unstyled","key":"nfn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое CSS?","type":"header-three","key":"ab5jp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":5,"style":"BOLD"}],"text":"CSS (Cascading Style Sheets) — это язык стилей, который позволяет вам управлять внешним видом ваших веб-страниц. Если HTML — это скелет вашего сайта, то CSS — это его стильный наряд. Без CSS ваш сайт будет выглядеть так, как будто он только что вышел из пижамы!","type":"unstyled","key":"ccesi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как подключить CSS к HTML?","type":"header-three","key":"2294i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существует несколько способов подключить CSS к вашему HTML-документу. Давайте рассмотрим их:","type":"unstyled","key":"4l1nl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":71,"style":"ITALIC"}],"text":"Inline CSS: Это когда вы добавляете стили прямо в HTML-тег. Например:\n\n

Привет, мир!

\n\nПлюсы: быстро и удобно. Минусы: ваш HTML будет выглядеть как мозаика из стилей — не очень красиво!","type":"ordered-list-item","key":"d4fa5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":94,"style":"ITALIC"}],"text":"Internal CSS: Стили прописаны внутри `\n\n\nПлюсы: лучше организовано. Минусы: все еще не очень удобно для больших проектов.","type":"ordered-list-item","key":"fdbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":116,"style":"ITALIC"}],"text":"External CSS: Создайте отдельный файл с расширением `.css`, например `styles.css`, и подключите его к вашему HTML:\n\n\n\n\n\nПлюсы: идеальный вариант для крупных проектов. Минусы: вам придется следить за несколькими файлами, но это того стоит!","type":"ordered-list-item","key":"ed5kl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Селекторы и свойства","type":"header-three","key":"ememf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь давайте разберёмся с основами CSS. Селекторы — это то, как вы выбираете элементы, которые хотите стилизовать. Вот несколько основных типов:","type":"unstyled","key":"fcg1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Селектор по тегу: выбирает все элементы определенного типа. Например, `p` выберет все параграфы.","type":"ordered-list-item","key":"712d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Селектор по классу: выбирает элементы с определённым классом. Например, `.highlight` выберет все элементы с классом \"highlight\".","type":"ordered-list-item","key":"e7g00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Селектор по идентификатору: выбирает элемент с определённым ID. Например, `#header` выберет элемент с ID \"header\".","type":"ordered-list-item","key":"cs80e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь давайте поговорим о свойствах. Свойства — это то, что вы хотите изменить. Например, `color`, `font-size`, `background-color`. Вот пример:","type":"unstyled","key":"36kcc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1 {\ncolor: blue;\nfont-size: 24px;\nbackground-color: yellow;\n}","type":"blockquote","key":"8hetk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nМодель коробки (Box Model)","type":"header-three","key":"dvlr5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый HTML-элемент можно представить в виде коробки, и эта коробка состоит из нескольких частей: контент, паддинг (внутренний отступ), бордер (рамка) и маржин (внешний отступ).","type":"unstyled","key":"dfn12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот как это выглядит:","type":"unstyled","key":"49nqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Контент: текст или изображение внутри элемента.","type":"ordered-list-item","key":"e51ga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Паддинг: пространство между контентом и границей элемента.","type":"ordered-list-item","key":"cfd6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Бордер: рамка вокруг элемента.","type":"ordered-list-item","key":"o6io"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Маржин: пространство между элементом и другими элементами на странице.\n","type":"ordered-list-item","key":"3dkv7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете управлять каждым из этих элементов с помощью CSS, используя соответствующие свойства. Например, чтобы задать размер и цвет бордера, вы можете использовать следующие свойства:","type":"unstyled","key":"63eue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".box {\nborder: 2px solid red; /* Толщина, стиль и цвет бордера */\npadding: 10px; /* Внутренний отступ */\nmargin: 15px; /* Внешний отступ */\n}","type":"blockquote","key":"8mdn2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере у нас есть элемент с классом `.box`, который имеет красный бордер толщиной 2 пикселя, 10 пикселей паддинга внутри и 15 пикселей маржина снаружи. Это помогает создать визуальное пространство между элементами и сделать вашу страницу более аккуратной.","type":"unstyled","key":"frdir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цвета и фоны","type":"header-three","key":"53sio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цвета в CSS можно задавать несколькими способами: с помощью имен (например, `red`), шестнадцатеричных кодов (например, `#ff0000` для красного) или RGB (например, `rgb(255, 0, 0)`). А для фонов можно использовать как цвета, так и изображения:","type":"unstyled","key":"58nc5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {\nbackground-color: #f0f0f0; /* Светло-серый фон */\n}","type":"unstyled","key":"80ja3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".header {\nbackground-image: url('header-bg.jpg'); /* Фоновое изображение */\nbackground-size: cover; /* Изображение растягивается на весь элемент */\n}","type":"unstyled","key":"bjaga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шрифты и текст","type":"header-three","key":"12cqa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS позволяет вам изменять шрифты и стили текста. Вы можете использовать свойство `font-family`, чтобы выбрать шрифт, `font-size` для размера, и `font-weight` для толщины текста. Например:","type":"unstyled","key":"9sr09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1 {\nfont-family: 'Arial', sans-serif; /* Выбор шрифта */\nfont-size: 32px; /* Размер шрифта */\nfont-weight: bold; /* Жирный текст */\ncolor: navy; /* Цвет текста */\n}","type":"blockquote","key":"55ts3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\nАдаптивный дизайн","type":"header-three","key":"8mt33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не забывайте о том, что ваш сайт должен выглядеть хорошо на всех устройствах. Используйте медиа-запросы для изменения стилей в зависимости от размера экрана:","type":"unstyled","key":"b7tnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@media (max-width: 600px) {\nh1 {\nfont-size: 24px; /* Уменьшаем размер заголовка на маленьких экранах */\n}\n}","type":"blockquote","key":"9raji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"noro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот и все, друзья! Теперь вы знаете основы CSS и как стилизовать HTML-элементы. Надеюсь, вы поняли, что добавление стилей может превратить вашу веб-страницу из скучного текста в яркий и привлекательный дизайн. Не бойтесь экспериментировать и пробовать разные комбинации стилей!","type":"unstyled","key":"dtbjf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И помните, что как и в жизни, в веб-разработке нет ничего невозможного. Если что-то не получается, просто перезагрузите страницу (или, на крайний случай, ваш компьютер). Удачи в ваших начинаниях, и пусть ваши сайты всегда будут стильными и красивыми!","type":"unstyled","key":"akscq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"Следующая публикация:","type":"unstyled","key":"3c29o"},{"data":{"embedData":{"type":"yandex-zen-publication","publicationId":"68174db48c6d3504e94a3588","originalUrl":"https://dzen.ru/a/aBdNtIxtNQTpSjWI","publisherId":"68172d5a8ea03f5675aae915","publisherItemId":"8266609120772890118","publisherName":"Код без границ","publisherAvatar":{"id":"681733a1ebc0f6686c4d3e49","groupId":271828,"imageName":"pub_68172d5a8ea03f5675aae915_681733a1ebc0f6686c4d3e49","namespace":"zen-logos","meta":{"mainColor":"#080000","origFormat":"PNG"}},"title":"Введение в JavaScript: взаимодействие с пользователем","publishTime":1746781334002,"isPublisherVerified":false,"image":{"id":"68174e977ee2b2074a9ba451","groupId":271828,"imageName":"pub_68174db48c6d3504e94a3588_68174e977ee2b2074a9ba451","namespace":"zen_doc","meta":{"mainColor":"#100810","origFormat":"JPEG"},"sizes":{"orig":{"width":1024,"height":1024},"scale_600":{"width":600,"height":600},"scale_1200":{"width":1024,"height":1024},"scale_2400":{"width":1024,"height":1024}}},"isPremium":false,"timeToReadSeconds":222,"badSeoLink":"true"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"30tcq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"35h23"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ZiSK739IjkWKfz1J1M8B"}],"entityMap":{}},"mentions":[]}