{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы поговорим о CSS, мощном инструменте, который позволяет создавать красивые и стильные веб-страницы, делая их привлекательными для пользователей и обеспечивая качественный пользовательский опыт","type":"unstyled","key":"6b45c"},{"data":{"image":{"id":"665f088ad03e8f12ec29607a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eg6tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основная задача CSS — отделить содержимое веб-страницы от ее визуального оформления. Это позволяет легко изменять стиль страницы без необходимости изменения самого содержимого. Например, если вы хотите изменить цвет заголовков на странице, вам не нужно менять каждый заголовок отдельно — достаточно изменить один раз в таблице стилей.","type":"unstyled","key":"ftc4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое CSS","type":"header-two","key":"5j7nb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS (Cascading Style Sheets) — это один из основных инструментов веб-разработки, который играет ключевую роль в создании красивых и функциональных веб-страниц. Он позволяет задавать стили, оформление и внешний вид элементов на странице, делая ее привлекательной и удобной для пользователей.","type":"unstyled","key":"2cg7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разработчики могут структурировать содержимое страницы с использованием HTML, а затем применять стили и дизайн с помощью CSS. Это дает возможность изменять внешний вид страницы, не затрагивая ее содержимое, что делает процесс обновления и изменения дизайна более эффективным и гибким.","type":"unstyled","key":"lhl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS позволяет управлять различными аспектами дизайна, такими как цвета, шрифты, размеры, отступы, рамки, фоны и многое другое. С помощью CSS можно создавать адаптивные дизайны, которые могут корректно отображаться на различных устройствах и экранах, обеспечивая удобство и уникальность пользовательского опыта.","type":"unstyled","key":"2tb60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Другим важным аспектом CSS является его способность к наследованию и каскадированию стилей. Это означает, что стили, примененные к одному элементу, могут наследоваться другими элементами на странице, что упрощает управление стилями и обеспечивает единообразный внешний вид.","type":"unstyled","key":"8eqq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS и HTML","type":"header-two","key":"f8biu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основное различие между HTML и CSS заключается в их назначении: HTML определяет структуру и содержимое страницы, а CSS отвечает за стиль и внешний вид. Эти два языка взаимодействуют между собой, позволяя разработчикам создавать уникальный и красивый дизайн для веб-страниц.","type":"unstyled","key":"9t5ed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS и JavaScript","type":"header-two","key":"eptvp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS по-прежнему отвечает за стиль и внешний вид веб-страницы, а JavaScript — за интерактивность и функциональность. Хотя они работают в тесном взаимодействии, выполняя различные задачи, их сочетание позволяет создавать современные и уникальные веб-страницы, которые сочетают в себе красоту дизайна и функциональность.","type":"unstyled","key":"fnntl"},{"data":{"image":{"id":"665f088ad03e8f12ec29607b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dc2dr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как работает CSS","type":"header-two","key":"c4bga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS обладает широким спектром возможностей, которые позволяют создавать разнообразные стили и эффекты на веб-страницах. Вот лишь некоторые из возможностей CSS:","type":"unstyled","key":"2polh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Изменение цветов и шрифтов","type":"header-two","key":"9m5li"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS позволяет задавать различные цвета, шрифты, размеры и стили текста на странице.","type":"unstyled","key":"93kj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Макет страницы","type":"header-two","key":"op0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS позволяет определять сетку и расположение элементов на странице, управлять отступами, полями и размерами.","type":"unstyled","key":"1j8k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Фоны и изображения","type":"header-two","key":"bfl8b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS позволяет устанавливать фоны, изображения и другие графические эффекты на странице.","type":"unstyled","key":"f4c50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Анимации и переходы","type":"header-two","key":"f5541"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS позволяет создавать анимации, переходы и прочие визуальные эффекты для улучшения пользовательского опыта.","type":"unstyled","key":"1suui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Адаптивный дизайн","type":"header-two","key":"egqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS позволяет создавать адаптивные стили, которые подстраиваются под различные экраны и устройства.","type":"unstyled","key":"dk9tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS состоит из набора правил, которые определяют стиль и внешний вид элементов на странице. Каждое правило состоит из селектора и объявления.","type":"unstyled","key":"fclm0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Селекторы","type":"header-two","key":"5b7rk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Селекторы указывают на элементы на странице, к которым будут применяться стили. Например, селектор “h1” указывает на заголовки первого уровня.","type":"unstyled","key":"13ra5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Объявления","type":"header-two","key":"11mpc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объявления содержат свойства и их значения, которые будут применены к выбранным элементам. Например, свойство “color: blue;” задает синий цвет текста.","type":"unstyled","key":"bgr67"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS работает по принципу каскадирования и наследования стилей. Это означает, что если у элемента заданы несколько стилей, то они будут сочетаться и применяться к элементу в определенном порядке. Принцип каскадирования позволяет установить приоритеты стилей, используя различные способы задания стилей, такие как инлайновые стили, внутренние стили, и внешние таблицы стилей.","type":"unstyled","key":"5quat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS также поддерживает наследование стилей, что означает, что свойства, заданные у элемента, могут быть унаследованы дочерними элементами. Это упрощает управление ими на странице и делает код более консистентным и легким для поддержки и развития.","type":"unstyled","key":"13l49"},{"data":{"image":{"id":"665f088ad03e8f12ec29607c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"d6344"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типы CSS","type":"header-two","key":"b99tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внешний стиль CSS","type":"header-two","key":"8qfcb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Предполагает использование внешних таблиц стилей, которые сохраняются в отдельных файлах с расширением .css. Эти файлы содержат все правила CSS, которые определяют оформление веб-страницы, такие как цвета, шрифты, размеры, отступы и многое другое. Для подключения внешнего стиля CSS к HTML-документу используется тег внутри секции .","type":"unstyled","key":"7onl0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример подключения внешнего стиля CSS:","type":"unstyled","key":"1siab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутренний стиль CSS","type":"header-two","key":"b221e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Позволяет задавать стили прямо внутри HTML-документа, используя тег в секции . Этот метод удобен в случаях, когда стили применяются только к определенному документу, и не нужно создавать отдельный файл со стилями. Внутренний стиль CSS имеет более высокий приоритет, чем внешний стиль.

Пример использования внутреннего стиля CSS: