{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При разработке сайтов необходимо не только выстроить структуру, но и оформить согласно разработанному макету. В этом нам помогает специальная технология CSS(Cascading Style Sheets) - каскадная таблица стилей.","type":"unstyled","key":"9deqj"},{"data":{"image":{"id":"5fe4964eb28ab778a7541633"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e1puf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое CSS?","type":"header-three","key":"7bu91"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каскадная таблица стилей CSS - код, который используется для стилизации веб-страницы. Обычно CSS-стили используются для документов формата HTML и XHTML, но так же могут применяться и для любого вида XML-документа.","type":"unstyled","key":"9551k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каскадные таблицы описывают правила форматирования элементов посредством свойств и их значений. На каждый элемент используются свои правила стилей, остальные не будут применяться и оказывать никакого влияния.","type":"unstyled","key":"evjr8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проще говоря, если вы хотите сделать текст жирным или покрасить его в красный цвет или разместить элемент на странице по своему, то вам поможет CSS.","type":"unstyled","key":"50db4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте рассмотрим на примере.","type":"unstyled","key":"6i34b"},{"data":{"image":{"id":"5fe4961ffc74c84ded1b1ec0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8tn0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для каждого абзаца заданы свои стили для шрифтов. В первом мы установили жирный шрифт, во втором стандартная жирность шрифта, а в третьем мы установили цвет шрифта.","type":"unstyled","key":"fud5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберем подробнее одно из стилевых правил:","type":"unstyled","key":"14cc6"},{"data":{"image":{"id":"5fe4960ffc74c84ded1afeae"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"an1aj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p - селектор","type":"unstyled","key":"27c6n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-weight - свойство","type":"unstyled","key":"dvv5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"bold - значение","type":"unstyled","key":"2rqg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color - свойство","type":"unstyled","key":"ljn1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"brown - значение","type":"unstyled","key":"b0fih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Согласно принятому синтаксису каждое стилевое правило нужно заключать в фигурные скобки, после указанного селектора.","type":"unstyled","key":"dknu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Виды таблиц стилей","type":"header-two","key":"23h10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существует несколько вариантов использования таблиц стилей, так мы рассмотрим Внешнюю таблицу стилей, Внутренние стили, Встроенные стили и правило @import.","type":"unstyled","key":"d8iug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Внешняя таблица стилей.","type":"unstyled","key":"77kpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это отдельный текстовый файл с расширением .css в котором содержится набор стилей элементов. Содержимое файла состоит только из стилевых правил и подключается к файлу html посредством тега . Тег располагается внутри раздела . Также необходимо указать и тип ссылки rel=”stylesheet”.","type":"unstyled","key":"9q8k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример: ","type":"unstyled","key":"bcoqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Внутренние стили.","type":"unstyled","key":"9206v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данный вид оформления используется не как ссылка на файл, а напрямую в разделе . Для указания стилей используется специальный тег . Приоритет стилей в данном случае будет выше у внутренних стилей над внешними, однако у встроенных приоритет над предыдущими выше.","type":"unstyled","key":"agqkp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте рассмотрим на примере:","type":"unstyled","key":"durfd"},{"data":{"image":{"id":"5fe494ec40c4c261394a19ff"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2pduc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Встроенные стили","type":"unstyled","key":"3cv2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Встроенные стили прописываются напрямую в теге элемента с помощью атрибута style.","type":"unstyled","key":"5mdu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим пример встроенных стилей:","type":"unstyled","key":"djrp0"},{"data":{"image":{"id":"5fe494d4b28ab778a7510ffe"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"esvk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Правило @import","type":"unstyled","key":"c41kr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Позволит загрузить внешнюю(ие) таблицу(ы) стилей. Правило необходимо указать либо в отдельном css файле, либо в разделе перед всеми остальными правилами.","type":"unstyled","key":"dgl7s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"93t8p"},{"data":{"image":{"id":"5fe494a19fa5af00d1682a84"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eqb66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Резюмируем","type":"header-three","key":"1d34q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом обзоре мы рассмотрели что такое CSS(каскадная таблица стилей), как выглядят стилевые правила и как их можно подключить к нашему html документу. В следующей части мы разберем какие бывают селекторы и подробнее рассмотрим несколько популярных стилевых правил.","type":"unstyled","key":"71jb5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"6JZqqcJk8BhFyitulWiU"}],"entityMap":{}},"mentions":[]}