{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добрый день. В это статье рассмотрим варианты как добавить разметку CSS в ваш сайт. ","type":"unstyled","key":"7b5a4"},{"data":{"image":{"id":"64df29cae4ad755a460058a6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4ggcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bhnr9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS - это каскадная таблица стилей и , говоря простым языком, нужна для того, чтобы структурировать блоки на сайте, применять различные шрифты к тексту, делать различные отступы между блоками, применять различные цвета к блокам и т.д. Если не использовать CSS, то текст на сайте и блоки будут серыми и невзрачными и это оттолкнет посетителей от вашего сайта.","type":"unstyled","key":"18r21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так же CSS позволяет применять различные разметки страницы под различные экраны устройств. Например, на большом экране Ваш сайт будет выглядеть иначе чем на экранах мобильных устройств.","type":"unstyled","key":"f26jv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как правило, основной css файл подключается в теге head в самом верху основной страницы вашего сайта.","type":"unstyled","key":"57fj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим файл test.html в любом месте вашего компьютера с таким содержимым:","type":"unstyled","key":"cmjrj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n \n \n \n \n","type":"blockquote","key":"bmqpu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тут, как раз, в теге head и прописывается ссылка на наш файл style.css. Создадим рядом с файлом test.html наш файл style.css и внесем в него такой текст:","type":"unstyled","key":"avhgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {","type":"blockquote","key":"1vgsn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: red;","type":"blockquote","key":"99ajm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"4ug8e"},{"data":{"image":{"id":"64df278c72283b41bf761eb5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключение CSS к сайту","type":"atomic:image","key":"1s6ls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вся наша страница окрасится в красный цвет, значит файл style.css успешно подключен и работает.","type":"unstyled","key":"50n5d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так же бывают случаи, когда мы не хотим подключать отдельный файл стилей, и нужно использовать стиль для отдельного объекта. Тогда делаем так:","type":"unstyled","key":"5l9tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n \n \n \n \n","type":"blockquote","key":"3veo2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы увидим, что страница так же будет иметь красный фон, а значит все работает.","type":"unstyled","key":"4ka4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так же можно в тег head вставить тег style и внутри описывать стили. Делается так:","type":"unstyled","key":"56rbd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n \n \n \n \n","type":"blockquote","key":"9cuoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И все так же будет работать. Но рекомендую использовать первый вариант с подключением CSS отдельным файлом. ","type":"unstyled","key":"7rd5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"606ad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"78kt0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cqvo3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"O20nCr3KQLu1lvNYB9IZ"}],"entityMap":{}},"mentions":[]}