{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"CSS можно подключить к HTML тремя основными способами:"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"1. Внешний файл (рекомендуемый способ)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Стили находятся в отдельном "},{"type":"text","marks":[{"type":"code"}],"text":".css"},{"type":"text","text":"-файле, который подключается в "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" с помощью тега "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"HTML:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"style.css:"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"type":"text","text":"p {\n color: blue;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Плюсы: порядок в коде, удобно поддерживать, много страниц могут использовать один файл."},{"type":"hardBreak"},{"type":"text","text":"Минусы: нужен отдельный файл."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"2. Внутренние стили (внутри "},{"type":"text","marks":[{"type":"code"}],"text":"\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Плюсы: удобно для небольших страниц или быстрого теста."},{"type":"hardBreak"},{"type":"text","text":"Минусы: если стилей много, код становится громоздким."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"3. Встроенные (inline-стили)"},{"type":"text","text":" — через атрибут "},{"type":"text","marks":[{"type":"code"}],"text":"style"},{"type":"text","text":" в самом теге"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Текст

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Плюсы: быстро изменить один элемент."},{"type":"hardBreak"},{"type":"text","text":"Минусы: плохая читаемость, нельзя переиспользовать, не подходит для больших проектов."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Итог"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Способ"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Где пишутся стили"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда использовать"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Внешний CSS"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"отдельный .css файл"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"нормальная разработка"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Внутренний "},{"type":"text","marks":[{"type":"code"}],"text":"

Какими способами можно подключить CSS к HTML?

Комментарии