{"draftJsState":{"blocks":[{"data":{"image":{"id":"65f97cda363713630e488498"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3hjqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS (Cascading Style Sheets) - это язык стилей, используемый для описания внешнего вида документа, написанного на языке разметки, таком как HTML. CSS описывает, как элементы должны отображаться на экране, на бумаге, в речи или на других медиа.","type":"unstyled","key":"cfms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Синтаксис CSS","type":"header-two","key":"4n7iv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стиль CSS состоит из списка правил. Каждое правило или набор правил состоит из одного или нескольких селекторов и блока деклараций. Например:","type":"unstyled","key":"2oe7e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"CSS","type":"unstyled","key":"blht9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"ITALIC"}],"text":"h1 {\n color: blue;\n font-size: 12px;\n}","type":"unstyled","key":"8q64a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"qs0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":16,"style":"BOLD"},{"length":5,"offset":35,"style":"BOLD"},{"length":9,"offset":43,"style":"BOLD"},{"length":4,"offset":71,"style":"BOLD"},{"length":4,"offset":78,"style":"BOLD"}],"text":"В этом примере, h1 - это селектор, color и font-size - это свойства, а blue и 12px - это значения этих свойств.","type":"unstyled","key":"78lnb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применение CSS","type":"header-two","key":"f0oc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS можно применять к HTML следующими тремя способами:","type":"unstyled","key":"bknuo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":6,"offset":114,"style":"BOLD"}],"text":"Внешний CSS: Стили задаются в отдельном файле CSS, который затем подключается к HTML-документу с помощью элемента .","type":"ordered-list-item","key":"4ph30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML","type":"unstyled","key":"edgh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"f4rh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eigbf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"},{"length":7,"offset":83,"style":"BOLD"},{"length":6,"offset":98,"style":"BOLD"}],"text":"Внутренний CSS: Стили задаются непосредственно в HTML-документе с помощью элемента ","type":"unstyled","key":"5ngcq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"fiacb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6n23s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"},{"length":5,"offset":81,"style":"BOLD"}],"text":"Встроенный CSS: Стили применяются непосредственно к элементам с помощью атрибута style.","type":"ordered-list-item","key":"3lt6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML","type":"unstyled","key":"8jgt7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"ITALIC"}],"text":"

This is a Blue Heading

","type":"unstyled","key":"273pf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"70t7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фишки CSS","type":"header-two","key":"31e4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Селекторы: CSS предоставляет множество различных типов селекторов, позволяющих выбирать элементы по их имени тега, классу, идентификатору, атрибуту и т.д.","type":"ordered-list-item","key":"7liq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"},{"length":6,"offset":55,"style":"BOLD"},{"length":6,"offset":63,"style":"BOLD"},{"length":7,"offset":72,"style":"BOLD"},{"length":8,"offset":164,"style":"BOLD"},{"length":7,"offset":175,"style":"BOLD"}],"text":"Псевдоклассы и псевдоэлементы: Псевдоклассы, такие как :hover, :focus и :active, позволяют стилизовать элементы в определенном состоянии. Псевдоэлементы, такие как ::before и ::after, позволяют вставлять и стилизовать контент в определенных частях элемента.","type":"ordered-list-item","key":"967ip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Медиазапросы: Медиазапросы позволяют применять разные стили в зависимости от характеристик устройства, таких как ширина экрана или разрешение.","type":"ordered-list-item","key":"9bcnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Анимации и переходы: CSS предоставляет возможности для создания анимаций и переходов, позволяя элементам плавно изменять свои свойства со временем.","type":"ordered-list-item","key":"e5qsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Flexbox и Grid: Это современные методы макетирования в CSS, которые предоставляют гибкие и мощные инструменты для создания сложных макетов.","type":"ordered-list-item","key":"14bhq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надеюсь, это введение в CSS будет полезным для вас. Удачи в изучении CSS!","type":"unstyled","key":"di2uc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"t6dTy1uiybalJsurpFsV"}],"entityMap":{}},"mentions":[]}