{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS расшифровывается как «Cascading Style Sheets», что в переводе означает «Каскадные таблицы стилей». Используется для оформления веб-страниц. Если в HTML-коде находится содержимое (то, что покажет браузер), то CSS определяет его оформление (то, как браузер это покажет). Прелесть CSS в том, что с помощью одного стиля можно оформить сразу все однотипные элементы страницы или целого сайта (сразу все ссылки, абзацы, списки). CSS-стилем вы один раз определяете, как должен выглядеть тот или иной элемент, например, картинки, и они меняют свое оформление сразу во всех документах. Чтобы изменить форматирование текста по всему сайту, вам достаточно изменить CSS-код всего один раз.","type":"unstyled","key":"5ir6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные элементы CSS","type":"header-two","key":"e6qsk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как HTML состоит из тегов , атрибутов и значений, так и CSS состоит из своих собственных элементов. Суть конструкций CSS можно объяснить так: «Указать, какой элемент страницы оформить, и указать, как его оформлять». Вот составляющие конструкции CSS.","type":"unstyled","key":"cb1i8"},{"data":{"image":{"id":"606577e0d5b01e213485230c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e9c5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Селектор . Идентификатор, который указывает браузеру, к какому именно элементу страницы применить оформление. Благодаря ему обозреватель «понимает», что стиль предназначен, например, для оформления списков или таблиц.","type":"unordered-list-item","key":"3dc7e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Блок объявления стилей . Пишется после селектора и заключается в фигурные скобки. В нём задаётся стиль элемента (его оформление). Блок объявления стилей состоит из двух частей.","type":"unordered-list-item","key":"18f35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Свойство . Аналог атрибута в HTML. Определяет, какое именно свойство оформления будет изменено.","type":"unordered-list-item","key":"7eu1q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Значение . Задаётся свойству через двоеточие и определяет, как именно свойство будет изменено.","type":"unordered-list-item","key":"3k0b2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свойств и значений в блоке объявления стилей может быть несколько, в таком случае они перечисляются через точку с запятой.","type":"unstyled","key":"6houk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типы селекторов","type":"header-two","key":"e6th7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В зависимости от того, свойства каких элементов страницы они определяют, селекторы бывают разных типов.","type":"unstyled","key":"dmdim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"},{"length":18,"offset":105,"style":"BOLD"}],"text":"Универсальный . Задаёт правила всем элементам страницы, для которых не установлены другие правила.\nКод * {font-size: 14px;} устанавливает размер шрифта 14 пикселей всем элементам документа, для которых не заданы другие правила с помощью других селекторов.","type":"unordered-list-item","key":"6vu8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":182,"style":"BOLD"},{"length":2,"offset":186,"style":"BOLD"},{"length":2,"offset":191,"style":"BOLD"},{"length":2,"offset":210,"style":"BOLD"},{"length":13,"offset":214,"style":"BOLD"},{"length":9,"offset":325,"style":"BOLD"}],"text":"Тега. Этот тип селектора задаёт правила форматирования для содержимого определённого HTML-тега. Название селектора совпадает с именем дескриптора, только пишется без угловых скобок: p , h1 , ul .\nНапример, код h2 {color: red;} устанавливает зелёный цвет текста для всех заголовков второго уровня, то есть содержимого тегов

.","type":"unordered-list-item","key":"esjts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Атрибута . С помощью этой группы селекторов можно определить стиль оформления содержимого всех тегов, которым задан определённый атрибут. Селекторы можно задавать более точно, указывая не только имя атрибута, но и присвоенное ему значение, а также название содержащего его тега. Этим можно пользоваться, чтобы делать оформление более индивидуальным.","type":"unordered-list-item","key":"bl6b2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":5,"offset":310,"style":"BOLD"}],"text":"Класса . Вид селекторов на случай, когда нужно по-разному оформить содержимое тегов одного типа. Например, ссылки в нижней части сайта вы хотите сделать красными, тогда как все остальные должны оставаться синими, как и были. Чтобы применить правила класса к элементу сайта, нужно указать имя класса в атрибуте class соответствующего тега.","type":"unordered-list-item","key":"cav2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":30,"style":"BOLD"}],"text":"Предположим, с помощью класса step отдельным элементам нужно задать отступ слева в 15 пикселей.","type":"unstyled","key":"gdui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS-код будет таким:","type":"unstyled","key":"djs3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"step {margin-left: 15px;}","type":"unstyled","key":"at0ia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML-код, который привяжет элемент к правилу, будет следующим:","type":"unstyled","key":"dqu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Текст с отступом

","type":"unstyled","key":"2ktpd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"},{"length":2,"offset":52,"style":"BOLD"}],"text":"Идентификатора . Используется совместно с атрибутом id HTML-тега и используется, когда свойства нужно задать единственному элементу. В отличие от селектора класса, перед именем которого ставится точка, пишется через «решётку»:","type":"unordered-list-item","key":"1b62e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#exclusive {color:orange;}","type":"unstyled","key":"7jeei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Контекстный . В HTML одни теги часто находятся внутри других, и контекстные селекторы помогают задать правила как раз на такой случай. С помощью них, например, можно отформатировать элементы внутри нумерованных списков или курсивный текст внутри абзацев:","type":"unordered-list-item","key":"d7k7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p i {fint-family: Century;}","type":"unstyled","key":"2f771"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Остальные группы селекторов основаны на совмещении перечисленных типов, а также на принципе наследования, когда дочерний элемент берёт свойства родительского.","type":"unstyled","key":"8h95c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":105,"style":"BOLD"}],"text":"Комбинировать и группировать селекторы удобно во многих ситуациях. Например, чтобы задать правила класса step только для ссылок, нужно указать оба селектора через точку (сначала тег, потом класс):","type":"unstyled","key":"603i9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"a.step {margin-left: 15px;}","type":"unstyled","key":"5jm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как подключить CSS к HTML-странице?","type":"header-two","key":"1rit8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заставить инструменты создания сайтов взаимодействовать друг с другом можно несколькими способами. По методу добавления стили делятся на следующие категории.","type":"unstyled","key":"b37dr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Встроенные стили","type":"header-three","key":"59i8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":63,"style":"BOLD"}],"text":"Задаются в документе прямо внутри HTML-тега с помощью атрибута style . Имеют наивысший приоритет. Это значит, что если для одного и того же элемента задано разное оформление, то предпочтение будет отдано правилу, которое прописано внутри тега. Селектор для встроенного стиля не нужен, так как связь стиля и тега очевидна — оформление тега в нём и задано.","type":"unstyled","key":"2k7bl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":61,"style":"BOLD"}],"text":"Следующий код задаёт размер и цвет шрифта тексту внутри тега

:","type":"unstyled","key":"aot49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Текст, оформленный с помощью внутреннего стиля.

","type":"unstyled","key":"9vvgo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Глобальные стили","type":"header-three","key":"cth75"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":15,"style":"BOLD"},{"length":6,"offset":52,"style":"BOLD"}],"text":"Задаются тегом \n\n…\n","type":"unstyled","key":"gdsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Связанные стили","type":"header-three","key":"c2sr5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":183,"style":"BOLD"}],"text":"Самые удобные, потому что с их помощью можно легко оформить в едином стиле целый сайт. Связанный стиль подразумевает, что всё CSS-оформление находится в отдельном файле с расширением .css .","type":"unstyled","key":"epb5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Такой подход удобен ещё и тем, что он отделяет правила оформления страниц от их содержимого, CSS-код можно легко менять, не вмешиваясь в HTML-файлы, а принцип разделения кода очень важен, особенно в больших проектах.","type":"unstyled","key":"aosmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":70,"style":"BOLD"},{"length":6,"offset":103,"style":"BOLD"}],"text":"Чтобы связать правила из CSS-файла с HTML-страницей, используется тег , добавленный в контейнер , и его атрибуты.","type":"unstyled","key":"fh577"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":41,"style":"BOLD"}],"text":"Вот строка, связывающая правила из файла mystyle.css с HTML-страницей:","type":"unstyled","key":"cafhn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"","type":"unstyled","key":"4a590"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":17,"offset":72,"style":"BOLD"}],"text":"rel=\"stylesheet\" определяет, что тег ссылается на файл таблицы стилей, href=\"mysyle.css\" задаёт его адрес. Правила адресации такие же, как у обычных ссылок – путь может быть абсолютным, относительным и т. д.","type":"unstyled","key":"ech3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Импортированные стили","type":"header-three","key":"ckqc4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":18,"style":"BOLD"}],"text":"С помощью команды @import можно добавить стили из CSS-файла в текущую таблицу. Это может потребоваться, например, если вы хотите дополнить индивидуальное оформление документа, заданное с помощью глобальных стилей, универсальными правилами из отдельного файла. Со встроенными стилями метод использовать нельзя.","type":"unstyled","key":"c5oe9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":46,"style":"BOLD"}],"text":"Код ниже импортирует в документ таблицу файла any.css , которая находится в папке с редактируемым HTML-документом:","type":"unstyled","key":"5g9v0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@import url(any.css);","type":"unstyled","key":"a0ij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":53,"style":"BOLD"}],"text":"Команда прописывается строкой ниже открывающего тега ","type":"unstyled","key":"dknkv"},{"data":{"image":{"id":"606577fc94673832dc93b410"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4cmnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6s47o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1ab0u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"qowC5kiJqL1uyClQ003j"}],"entityMap":{}},"mentions":[]}