{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-two","key":"7j9r5"},{"data":{"image":{"id":"609be388c6446324a3140f2b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6eckt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":70,"offset":0,"style":"BOLD"}],"text":"Я продолжаю цикл статей по созданию собственного веб-сайта в ОС Убунту","type":"header-three","key":"5jo9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dd4iu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"BOLD"},{"length":1,"offset":114,"style":"BOLD"}],"text":"Итак, в прошлый раз мы остановились на изучении тегов

- заголовок,
- параграф, . Ссылка на начало:","type":"header-three","key":"6ifjg"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":16,"offset":0}],"inlineStyleRanges":[],"text":"HTML/CSS Часть 3","type":"unstyled","key":"se7j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"},{"length":195,"offset":20,"style":"BOLD"}],"text":"Рассмотрим тег div. Этим тегом ограничивается ширина контента. Познакомимся с ним на практике написав длинный контент на нашей странице. Для этого между открывающим и закрывающим тегом параграф напишем например это: ","type":"unstyled","key":"e62qu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"Продолжаем изучать HTML. Мы уже изучили теги заголовка. И теги параграфа. Так же мы научились выделять текст тегом strong\"","type":"unstyled","key":"19ie"},{"data":{"image":{"id":"609beb04b3e6cf094434aec0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e5c0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":81,"offset":0,"style":"BOLD"}],"text":"Сделаем отступ и снова открывающим и закрывающим тегом параграф напишем например:","type":"unstyled","key":"d1gdb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"Теперь же изучим тег div и затронем базовый синтаксис CSS\"","type":"unstyled","key":"c6o58"},{"data":{"image":{"id":"609beb42ef1b79760d51985a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"18tj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"},{"length":24,"offset":25,"style":"BOLD"},{"length":33,"offset":56,"style":"BOLD"},{"length":24,"offset":95,"style":"BOLD"}],"text":"Теперь после тега поставим открывающий тег
и в конце после закрывающего тега
поставим закрывающий тег
:","type":"unstyled","key":"8dtfm"},{"data":{"image":{"id":"609bee8fb18ab1285612e000"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f2jmi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":82,"offset":0,"style":"BOLD"}],"text":"Теперь сохраним изменения комбинацией CTRL+S и откроем файл index.html браузером:","type":"unstyled","key":"46qnm"},{"data":{"image":{"id":"609befa367816d3c0deac595"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bqiao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6qau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":169,"offset":0,"style":"BOLD"},{"length":15,"offset":174,"style":"BOLD"},{"length":16,"offset":196,"style":"BOLD"}],"text":"Теперь же попробуем изменить ширину блока. Что бы повлиять на ширину блока существует CSS. С помощью CSS можно оформить страницу как угодно. Для этого надо добавить тегу div так называемый class. Пишется это так:
","type":"unstyled","key":"cqefj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":8,"offset":29,"style":"BOLD"},{"length":21,"offset":60,"style":"BOLD"}],"text":"Назовем наш class \"content\". Вот так:
и сохраним изменения:","type":"unstyled","key":"4ph6e"},{"data":{"image":{"id":"609bf1f4c6446324a34689d0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"d0a8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":90,"offset":0,"style":"BOLD"},{"length":46,"offset":95,"style":"BOLD"},{"length":61,"offset":142,"style":"BOLD"}],"text":"Если опять открыть файл через браузер то изменений не будет так как мы ещё не указали тегу div с классом контент как себя вести. Для того что бы указать классу контент стиль надо ввести следующую запись:","type":"unstyled","key":"dqeq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"},{"length":21,"offset":23,"style":"BOLD"},{"length":15,"offset":50,"style":"BOLD"}],"text":"Введём новый тег style под закрывающим тегом div. Пишется он так: ","type":"unstyled","key":"aklk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"qlgm"},{"data":{"image":{"id":"609bf41c5206392afbfbae0d"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3fsv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":1,"style":"BOLD"},{"length":68,"offset":45,"style":"BOLD"}],"text":" Между открывающим и закрывающим тегом style будем писать наш CSS. Туда на скриншоте указывает красная стрелочка.","type":"unstyled","key":"fjefu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Для этого напишем .content{}","type":"unstyled","key":"2c5qb"},{"data":{"image":{"id":"609bf532b3e6cf0944560bb4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e9llg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"В скобках напишем ширину блока. Пишется это так:","type":"unstyled","key":"9laib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"},{"length":38,"offset":59,"style":"BOLD"}],"text":"В скобки наводим курсор и жмем ENTER и далее пишем width:; И дадим ширину триста пикселей написав width: 300px; ","type":"unstyled","key":"8meeq"},{"data":{"image":{"id":"609bf8705206392afb0ab0a3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fkkar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3a1s7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"И так вкратце что же было написано? ","type":"unstyled","key":"d6eaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":29,"offset":20,"style":"BOLD"}],"text":"Точка перед content означает обращение к классу. ","type":"unstyled","key":"9v07p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":8,"style":"BOLD"}],"text":"content это имя класса.","type":"unstyled","key":"ck3g4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":2,"style":"BOLD"}],"text":"{ это начало условий.","type":"unstyled","key":"vfef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":2,"style":"BOLD"}],"text":"} это окончание условий.","type":"unstyled","key":"cqcs2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":5,"style":"BOLD"}],"text":"width это ширина блока.","type":"unstyled","key":"duu23"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":9,"style":"BOLD"}],"text":": 300px; это окончание условий.","type":"unstyled","key":"avm7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":73,"offset":0,"style":"BOLD"}],"text":"Теперь сохраним изменения и посмотрим на результат открыв файл браузером:","type":"unstyled","key":"fpprn"},{"data":{"image":{"id":"609bf9019be82c4728a3a6a7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2fooa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"BOLD"}],"text":"Как видно, теперь контент стал шириной в триста пикселей.","type":"unstyled","key":"3ff93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":0,"style":"BOLD"}],"text":"Теперь попробуем через CSS немного разукрасить блок.","type":"unstyled","key":"4shrl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"},{"length":7,"offset":28,"style":"BOLD"},{"length":49,"offset":54,"style":"BOLD"}],"text":"Для этого под width: 300px; напишем background-color: и после многоточия напишем нужный цвет. Например green; ","type":"unstyled","key":"am5r5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":100,"offset":6,"style":"BOLD"}],"text":"green это название цвета. Обязательно после того как пишем какой-либо стиль, надо ставить точку с запятой.","type":"unstyled","key":"2tqpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"BOLD"}],"text":"Теперь сохраним изменения и посмотрим на результат:","type":"unstyled","key":"a2hgq"},{"data":{"image":{"id":"609bfa9b7e2ff42cbfe0f449"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"54m6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":"Теперь наш фоновый блок с контентом стал зелёного цвета.","type":"unstyled","key":"en1rq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Теперь рассмотрим тег ","type":"unstyled","key":"85dnq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":74,"offset":0,"style":"BOLD"}],"text":"При помощи этого тега можно будет изменить цвета слов. Для этого напишем: ","type":"unstyled","key":"7a422"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":27,"style":"BOLD"},{"length":32,"offset":63,"style":"BOLD"},{"length":20,"offset":121,"style":"BOLD"},{"length":7,"offset":155,"style":"BOLD"}],"text":" Мы уже изучили теги заголовка. Далее удалить ранее написанное background-color: green; и под скобкой после width: 300px; напишем .color_world{}","type":"unstyled","key":"99qv6"},{"data":{"image":{"id":"609bfda01a7ddc2393300c00"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cut92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"И в скобках напишем color: red; ","type":"unstyled","key":"8ar2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":4,"style":"BOLD"}],"text":"red это означает красный цвет. ","type":"unstyled","key":"48uiq"},{"data":{"image":{"id":"609bfe4867816d3c0d19fca7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6dc4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":64,"offset":0,"style":"BOLD"}],"text":"Теперь сохраним изменения и посмотрим в браузере что получилось:","type":"unstyled","key":"1gk2g"},{"data":{"image":{"id":"609bfea067816d3c0d1b09ce"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fmrll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"BOLD"}],"text":"Как видно слова \"Мы уже изучили теги заголовка.\" выделились красным цветом.","type":"unstyled","key":"cf71l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"В следующей статье мы рассмотрим теги
и
:","type":"header-two","key":"crpa2"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":16,"offset":0}],"inlineStyleRanges":[],"text":"HTML/CSS Часть 5","type":"unstyled","key":"8r2ck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ese3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a72qs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7v6rc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1s04l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f62ju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fou9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a9iut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aual"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eqe6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bu95f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dmlvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5jeck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8o2q9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"93rsi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f4jtb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ev06h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"abjp8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f8po9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a3mmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fg2f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"endlk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"abpdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d0vf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2gk45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"545id"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"47evq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d8hv5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"15p8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fqs49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"crRKv8dZ8WxRDy2u9CKM"}],"entityMap":{"0":{"data":{"url":"https://zen.yandex.ru/media/id/60573e88d0633646840d1480/htmlcss-chast-3-tegi-h1-zagolovok-p-paragraf-strong-60994342b8f34b04d26133b3"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://zen.yandex.ru/media/id/60573e88d0633646840d1480/htmlcss-chast-5-tegi-ul-i-li-60a10cb2106dc30e5457ccc8"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}