В какой папке файлы css. Абсолютные и относительные ссылки. Подключаем CSS к HTML

В этой части самоучителя мы познакомимся с новыми для вас терминами, которые используются при описании папок и HTML-элементов.

Примечание: папку также часто называют директорией или каталогом.

Структура сайта

Не держите все файлы в одной папке. Даже небольшими сайтами намного проще управлять, если разложить HTML документы , изображения и другие ресурсы в разные папки, создав тем самым определенную структуру расположения различных файлов. Структурируя файлы как вам удобно, вы можете выбрать для себя достаточно гибкую систему организации файлов, учитывая то, что сайт может расти, система файлов при этом будет оставаться ясной и понятной. Структуру (иерархию) каталогов, в которых располагаются различные файлы, обычно можно увидеть в виде древа. Рассмотрим в качестве примера следующее изображение.

Как вы видите, структура - это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере мы использовали всего три каталога, однако этого будет достаточно для того, чтобы описать всю необходимую информацию. Часто каталоги описывают с помощью терминов наследственных (семейных) связей. У нас есть папка под названием "Бананы", она расположена внутри папки "Фрукты". Папка "Фрукты" - это родитель каталога "Бананы", а каталог "Бананы" - ребенок (дочерний каталог) папки "Фрукты". Также у нас есть еще папка "Киви", которая является тоже ребенком каталога "Фрукты".

Чтобы вам лучше запомнить, опишем термины отдельно:

  • Дочерний каталог - это папка, над которой в иерархическом древе есть родительский каталог.
  • Родительский каталог - это папка, содержащая другой каталог.
  • Есть еще такое понятие как "корневой каталог" - это основная (главная) папка, в которой расположены все прочие каталоги и файлы.

Структура элементов

Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:

Схему, показывающую вложенность элементов, можно представить следующим образом:

  • Дочерний элемент - это элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком .
  • Родственный элемент - это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими , в примере такими элементами являются и , и <style> .</li> <li><span>Корневой элемент </span> - самый верхний элемент в иерархии (<html>), все другие элементы являются его потомками.</li> <li><span><a href="/dochernie-selektory-css-tehniki-raboty-s-dom-roditelskie.html">Родительский элемент</a> </span> - это элемент, который содержит другой элемент. Иногда его называют просто родитель .</li> <li>Потомок может являться непосредственно <a href="/javascript-kak-poluchit-elementy-roditelya-tehniki-raboty-s-dom-roditelskie.html">дочерним элементом</a>, но обычно это общее название для всех элементов, которые вложены в другие элементы, независимо от того, как глубоко они вложены, например <head>, <title>, <body>, <p> и <style> являются потомками элемента <html>.</li> </ul> <p>В этом посте я приведу пример организации стилей на типичном проекте.</p><p>Небольшое вступление, попробую объяснить актуальность проблемы и зачем это нужно.<br> Рассмотрим такую ситуацию. Разработчику ставят задачу, реализовать очередной функционал на сайте. Это допустим включает добавление новых разделов, блоков, элементов. Разработчики зачастую не доверяют чужому коду, и когда доходят до верстки, находят css-файл с названием типа main.css и дописывают в конец свои новые стили.<br> Проходит некоторое время, приходит новый разработчик, ему ставят подобную задачу, он если и пытается разобраться в стилях, то видит, что там нет никакой закономерности, и повторяет то же, что делали предыдущие.<br> Руководство ставит сроки, разрабатывается все новый и новый функционал, проект растет. В итоге css файлы превращаются в мусорку, сайт грузится дольше, появляется больше дефектов и т.д..<br> Я думаю, многим это знакомо.</p><p>Теперь поговорим непосредственно о самой структуризации стилей.<br> Держать все стили в одном файле неразумно, со временем в нем довольно сложно становится ориентироваться. Плюс на каждой странице используются около 10% правил из этого файла, а весит он не мало.<br> Гораздо оптимальнее разделять стили по логическим блокам сайта.</p><p>Так же к проекту необходимо подключить библиотеку для работы с css (LESS, SASS, SCSS). Нам понадобится работа с переменными, функциями.<br> Для уменьшения запросов на сервер необходима сборка файлов. Файлы должны склеиваться по специальной конструкции, можно, например, использовать стандартную констукцию css - import . Здесь возможно потребуется помощь разработчика для редактирования исходников выбранной вами библиотеки css.<br> Плюс, для уменьшения объема, файлы должны приходить клиенту сжатые. dotLess , например, сжимает файлы при значении <dotless minifyCss="<b>true </b>" cache="false"/> в web.config.</p><p>Каждому логическому блоку будет соответствовать отдельный css файл. Так упрощается поддержка, поиск нужных стилей, да и вообще ориентация в файлах. Все данные файлы являются исходниками, будем содержать их в папке /css/sources/. Остальные css-файлы - сборщики, они линкуются на страницы и собирают импортом исходники.<br> Допустим рассматриваемый проект это некая соцсеть, исходя из этого можно выделить следующую структуру:</p><p> /css<br> /sources <i><span> - папка для ресурсов, не выкладывается на сервер </span> </i><br> /global-vars <i><span> - файлы данной папки подключаются в каждый css-файл сборщик по мере необходимости </span> </i><br> locals.css <i><span> - глобальные переменные </span> </i><br> functions.css <i><span> - глобальные функции </span> </i><br> /common<br> reset.css <i><span> - думаю, объяснять не нужно, понятно, что за стили </span> </i><br> utils.css <i><span> - стили типа.clearfix </span> </i><br> /content<br> base.css <i><span> - основные стили для контента, а именно - h1-h6, p, буллиты для списков (ul.text, ul.dashed и т.д.), dl, dd, dt, изображения и панели в тексте (обтекание текстом), текстовые колонки и т.д. </span> </i><br> panels.css <i><span> - различные панели </span> </i><br> tables.css <i><span> - стили для таблиц в контенте (th, черезполосица) </span> </i><br> /controls<br> buttons.css <i> - виды кнопок </i><br> forms.css <i><span> - общие стили для input-полей (к примеру, <a href="/realistichnye-teni-css-vnutrennie-teni-v-css-otricatelnoe.html">внутренняя тень</a>, фокус (рамка), оформление валидационных сообщений и их скрытие по умолчанию) </span> </i><br> tabs.css <i> - табы, вкладки </i><br> system-notifications.css <i><span> - системные сообщения, как правило бывают 3-х типов: success (зеленые), failure (красные) и info (серые, синие) </span> </i><br> pager.css <i> - пейджер </i><br> banners.css <i><span> - баннеры на сайте </span> </i><br> balloons.css <i><span> - всякие баллуны, всплывающие подсказки, кастомные тултипы и т.д. </span> </i><br> /member<br> thumb.css <i><span> - аватарка пользователей </span> </i><br> card.css <i><span> - карточка пользователя (аватарка, имя, краткие данные) </span> </i><br> cards-list.css <i><span> - например, грид с карточками </span> </i><br> profile.css <i><span> - профиль пользователя </span> </i><br> /modules <i><span> - различные модули к сайту </span> </i><br> search.css<br> news-list.css<br> gifts.css<br> games.css<br> /not-auth <i><span> - для неавторизованных пользователей </span> </i><br> login.css <i><span> - форма авторизации </span> </i><br> registration.css <i><span> - форма регистрации </span> </i><br> /auth <i><span> - для авторизованных пользователей </span> </i><br> my-account.css<br> mail-system.css <i><span> - inbox сообщения, outbox и т.д. </span> </i><br> auth-menu.css <i><span> - меню навигации в авторизованной зоне </span> </i><br> my-profile.css <i><span> - просмотр своего профайла, редактирование </span> </i><br> /layouts<br> common.css<br> header.css<br> top-menu.css<br> footer.css<br> overlay.css <i><span> - например, все всплывающие поверх слои будут с затемнением 0.5 </span> </i><br> main.css <i><span> - основной сборщик, линкуется на всех мастер-страницах </span> </i><br> /layouts<br> default.css <i><span> - основной layout сайта, собирает файлы из папки /layouts, подключается на мастере с основным layout"ом </span> </i><br> popup-windows.css <i><span> - стили для popup’ов, подключается на мастер-страницах для popup окон </span> </i><br> not-auth.css <i><span> - собирает стили из папки /sources/not-auth/ </span> </i><br> auth.css <i><span> - собирает стили из папки /sources/auth/ </span> </i><br> /themes <i><span> - различные тематики сайта </span> </i><br> new-year.css<br> st-valentine.css<br> /%section-name% <i><span> - какой-нибудь <a href="/kak-otkatit-versiyu-ios-na-iphone-ipad-kak-otkatit-versiyu-ios-na-iphone.html">новый раздел</a> сайта, «сайт в сайте», характерный наличием своего подменю и т.д. </span> </i><br> /css<br> %section-name%.css<br> layout.css<br> /sources<br> menu.css</p><p>Конечно же для каждого проекта своя уникальная структура. Важен принцип разделения файлов.</p><p>Дополнительное описание к некоторым файлам:</p><p><b>main.css </b> - собирает файлы из папок:<br> /sources/global-vars<br> /sources/common<br> /sources/content<br> /sources/controls<br> /sources/member<br> /sources/modules</p><p><b>functions.css </b> - содержит глобальные функции, типа:</p><blockquote>.rounded-corners(@radius) <br>{ <br> border-radius: @radius; <br> -moz-border-radius: @radius; <br> -webkit-border-radius: @radius; <br>* behavior: url (/libs/progressive-IE.htc ) ; <br>} </blockquote><p><b>sources/layouts/common.css </b> - глобальные стили по layout"у:</p><blockquote>.columns-wrapper <br>{ <br>display : table; <br>* zoom: 1 ; <br>} <br>.columns-wrapper .column <br>{ <br>display : table-cell ; <br>* float : left ; <br>} </blockquote><p>Подключение файлов <b>not-auth.css </b> и <b>auth.css </b> зависит от состояния авторизации пользователя. Например, в asp.net это будет выглядеть так:</p><blockquote> <span>< asp:LoginView runat ="server" > <br>< AnonymousTemplate > <br>< link href ="/css/not-auth.css" rel ="stylesheet" type ="text/css" /> <br></ AnonymousTemplate > <br>< LoggedInTemplate > <br>< link href ="/css/auth.css" rel ="stylesheet" type ="text/css" /> <br></ LoggedInTemplate > <br></ asp:LoginView > </span><p>* This source code was highlighted with Source Code Highlighter . </p></blockquote><p>Хочу привести концепцию, которой, я считаю, следует держаться.<br> Новые страницы должны строиться из компонентов, «кирпичиков» - css классов. Некоторые неверно понимают данную концепцию и строят страницу из классов типа <b>mar-bottom-15 </b>, <b>float-left </b> или <b>pad-20 </b>, что тоже является большой ошибкой.<br> На всем сайте должен сохраняться единый стиль элементов, т.е. заголовок h1 на одной странице должен выглядеть так же, как и h1 на другой. Заголовки, абзацы, списки, панели, табы, пейджеры, контентные таблицы и т.д. по дизайну должны соблюдать единый стиль.<br> Перед тем как писать стили для <a href="/v-kontakte-c-vkontakte-moya-stranica-vkontakte-vhod-na-stranicu-kak.html">новой страницы</a> сайта следует проанализировать уже существующие css-файлы проекта, возможно там уже есть необходимые стили. Css файл не должен увеличиваться без необходимости.</p><p>В заключении скажу, что все описанное выше так же актуально и для JS.</p> <p>В данной статье опишу только самые необходимые папки и файлы шаблона Joomla 1.5, но планирую в дальнейшем (по мере возможности и времени) дополнять статью дополнительными описаниями.</p> <h3>Где находятся файлы шаблонов Joomla 1.5</h3> <p>Место положение папок и файлов шаблона на Вашем хостинге или сервере определить легко. Все шаблоны располагаются в <a href="/mac-os-skrinshot-okna-programmy-ostanovis-na-mgnovene-ty-prekrasna.html">специальной папке</a> <b>/templates </b> . Которая, в свою очередь, расположена в корневой папке Joomla.</p> <p>Откройте папку <b>/templates </b> . Там по умолчанию находятся папки с шаблонами: beez, ja_purity, rhuk_milkyway, system. К рассмотрению содержимого последней папки <b>system </b> я вернусь в одной из последующих статей. А пока рассмотрим содержимое папки шаблона rhuk_milkyway.</p> <h3>Список папок и файлов шаблона rhuk_milkyway</h3> <p><b>Папки: </b> <br> 1. css<br> 2. html<br> 3. images</p><p><b>Файлы: </b> <br> 1. favicon.ico<br> 2. index.html<br> 3. index.php<br> 4. params.ini<br> 5. templateDetails.xml<br> 6. template_thumbnail.png</p> <h3>Папка №1. CSS</h3> <p>В папке css содержатся файлы стилей шаблона. Здесь вы можете создавать сколько угодно файлов <a href="/razryv-stranicy-dlya-pechati-s-ispolzovaniem-css3-css-stili-dlya-pechati-o.html">стилей css</a> (если это необходимо). Конкретно в рассматриваемом шаблоне они называются: black.css, black_bg.css, blue.css, blue_bg.css, green.css, green_bg.css, ieonly.css, orange.css, orange_bg.css, red.css, red_bg.css, template.css, template_rtl.css, white.css, white_bg.css.</p> <p>Много правда? В данном случае количество стилей обусловлено тем, что предусмотрена возможность менять цветовую схему шаблона. Я обычно использую только один файл. Т.к. делая шаблон для себя не вижу смысла в таком многообразии цветовых схем.</p> <h3>Папка №2. HTML</h3> <p>Т.к. в Joomla все расширения имеют готовый для вывода <a href="/sobytie-click-na-chistom-css-bez-target-giperssylka-chto-eto-takoe-kak-sdelat.html">html код</a> с необходимой разметкой и собственными стилями, разработчики предусмотрели возможность изменить его не исправляя файлы самих расширений. Это необходимо для того, что бы при обновлении Joomla или ее расширений внесенные изменения не были потеряны. Для этого достаточно скопировать <a href="/kak-legko-podderzhivat-poryadok-na-rabochem-stole-i-mgnovenno.html">нужный файл</a> в <a href="/izobrazhenie-v-vide-giperssylki-dlya-chto-takoe-ssylka-i-kak-sdelat.html">папку html</a> и поправить его так как это необходимо Вам. Я сейчас не буду описывать подробно как это делается правильно, потому что статья не об этом:), но обязательно опишу в одной из следующих статей.</p> <h3>Папка №3. IMAGES</h3> <p>Здесь хранятся изображения шаблона.</p> <h3>Файл №1. favicon.ico</h3> <p>Это изображение размером 16х16 пикселей, которое является иконкой сайта. Отображается иконка во вкладке браузера и в некоторых <a href="/kakovy-osnovnye-programmnye-komponenty-poiskovoi-sistemy-kak-rabotaet.html">поисковых системах</a> на против Вашего сайта в выдаче по релевантным поисковым запросам.</p> <h3>Файл №2. index.html</h3> <h3>Файл №3. index.php</h3> <p>Файл предназначен для <a href="/yazyk-gipertekstovoi-razmetki-html-kratko-yazyki-gipertekstovoi-razmetki-sgml-xml.html">html разметки</a> шаблона. Здесь прописывается: где будут размещаться модули, где будет выводиться содержимое компонентов, какие файлы стилей будут подключены к шаблону, условия вывода модулей. С этим файлом придется работать больше остальных, потому что это не что иное как каркас и основа шаблона.</p> <h3>Файл №4. params.ini</h3> <p>Файл params.ini необходим для сохранения настроек Вашего шаблона. Он обязательно должен присутствовать в шаблоне с правами на запись 777.</p> <h3>Файл №5. templateDetails.xml</h3> <p>Файл templateDetails.xml несет в себе несколько <a href="/priostanovka-trikolor-poleznye-funkcii-lichnogo-kabineta.html">полезных функции</a>: используется для установки шаблона через админку Joomla; Содержит информацию о названии шаблона, авторе, дате создания, версии, лицензии и т.д.; Параметры шаблона.</p> <h3>Файл №6. template_thumbnail.png</h3> <p>Файл (изображение) показывает как выглядит шаблон. Необходимо для того что бы при распространении можно было быстро посмотреть что из себя представляет шаблон, е устанавливая его на сайт. А если он уже установлен, то он выполняет ту же функцию но из админки.</p> <p> <b>Дата публикации: </b> 2018-03-27 </p> <p><i><b>От автора: </b> работа над <a href="/nebolshoi-proekt-na-fpga-novostnoi-i-analiticheskii-portal-vremya-elektroniki-primery-oformleniya-bo.html">большими проектами</a> сопряжена со сложностью работы с большим кодом в большой команде. Слишком часто я ловил себя на том, что не следую главным принципам разработки ПО типа DRY (не повторяться), KISS (все должно быть до глупости просто) и YAGNI (вам это не понадобится). </i></p> <p>Учитывая эти проблемы, я начал использовать самые распространенные системы: OOCSS, SMACSS, ITCSS, ACSS и БЭМ - с их помощью создается приемлемая архитектура CSS.</p> <p>На самом деле, я ценю все CSS архитектуры по некоторым причинам и не хочу искать идеальную. Я пришел к выводу, что лучшее то решение, которое реально работает для всех людей, работающих над ним. Решению далеко до human-friendly, если в нем есть слабости. Иногда мы легко теряемся в техниках и забываем, что за каждой строкой кода стоит человек. То, как мы пишем и организуем код, должно быть важным средством передачи <a href="/obzory-i-poleznaya-informaciya-dlya-radiolyubitelei-avtomobilnye-racii-i-o-neobhodimosti-racii-v-avto.html">полезной информации</a> другим разработчикам, а не только <a href="/kompyuternyi-eksperiment-s-interaktivnoi-fizicheskoi-modelyu-kompyuternyi-eksperiment-kompyuternyi-e.html">техническим решением</a> проблемы.</p> <p>Из этого я делаю вывод, что установки соглашений уже недостаточно. Нужно также принять соглашение, ориентированное на пользователя. Все это значит:</p> <p>Избегайте избыточной сложности</p> <p>Объясняйте и делайте синтаксис класса легкочитаемым</p> <p>Следуйте порядку и соблюдайте чистоту</p> <p>Попробуйте создать гибкую модель, способную изменяться и развиваться, когда людям это потребуется</p> <p>Все эти мысли привели меня к тому, что я называю UFOCSS. Это значит – возвращение пользователя на главное место, предоставив ему как можно больше информации через направляющую CSS архитектуру.</p> <h3>Как расшифровывается UFOCSS?</h3> <p>Несмотря на схожесть названия, UFOCSS расшифровывается как User Friendly Oriented CSS. Это не методология пришельцев и не <a href="/zaregistrirovatsya-v-odnoklassnikah-novaya-stranica-odnoklassniki-registraciya.html">новый способ</a> представления масштабируемой и модульной CSS архитектуры. Это попытка сосредоточиться на самой «человеческой» части того, что мы уже ценим. К чему это ведет? Давайте разбираться!</p> <p>Мне кажется, что здесь нужно работать над крупным веб-проектом, где в разработке используются SCSS и PostCSS. Так CSS код можно разбить на категории и организовать в маленькие логические единицы, разделив код по множеству папок и файлов, которые ссылаются друг на друга через директиву @import. Далее билд система использует файлы и скомпилирует их в один файл стилей для продакшена и сохранит его в папку назначения.</p> <p>В общем, каталог стилей может быть таким:</p> <p><img src='https://i0.wp.com/webformyself.com/wp-content/uploads/2018/135/10.jpg' align="center" height="535" width="498" loading=lazy></p> <p>Как видите, код разбит на 2 главные папки: abstracts и modules. Это помогает поддерживать структуру папок в чистоте и порядке, не создавая дополнительные папки, которые не так уж и нужны.</p> <p>Названия папок можете выбрать какие угодно (т.е. tools для abstracts и patterns или layers для modules). Я использую соглашение о сортировке папок в алфавитном и числовом порядке. Такое соглашение действительно полезно при работе с языками, в основе которых лежит каскадирование и принципы наследования.</p> <p>Упорядочение файлов и папок в алфавитном и числовом порядке дает пользователям четкий визуальный индикатор того, что в коде идет первым, что, в свою очередь, определяется принципами специфичности.</p> <p>Если представить проект, как слоёный бисквит, то:</p> <p>вы не можете делать верхние слои, если нет первого</p> <p>когда все ингредиенты используются в равном количестве, лучше всего ощущаются ингредиенты на верхнем слое пирога (каскадирование)</p> <p>если в нижнем слое использовать много шоколадной крошки, то все остальные слои не так ощутимы, шоколад будет перебивать остальные вкусы! (специфичность)</p> <h3>Папка abstract: здесь живут инструменты</h3> <p>Первая информация, которую нужно дать – что можно считать инструментом. То есть что не генерирует правила CSS и наоборот, что является ядро стилей проекта. По этой причине я считаю, что важно отделить абстрактные инструменты – это широко распространенная практика.</p> <p>Возвращаясь к примеру с пирогом – первым шагом нужно понять, что мы будем готовить, какой дизайн и вкус будет у пирога.</p> <p>Abstracts – это ингредиенты и инструменты, необходимые для старта и ускорения разработки, как переменные, функции и миксины. Они не влияют на <a href="/aimp-3-instrukciya-po-primeneniyu-aimp-chto-eto-za-programma-i-nuzhna-li-ona-vneshnii-vid.html">внешний вид</a> и вкус пирога, но определяют способ создания и поддержки. Никому они не нужны кроме вас и вашей команды!</p> <p>Все файлы abstracts говорят сами за себя. Просто учтите, что я беру все, что нужно широко использовать из файла _variables – цвета, шрифты, grid и z-index. Я считаю, так всем легче понять, какие инструменты нам нужны.</p> <p>Например, файл z-index управляет вертикальным порядком элементов. Хорошая практика управления z-index в сложных макетах – установка нескольких Sass списков, в которых описано, в каком порядке мы хотим выводить элементы, от низшего к высшему.</p> <p>Учтите, что для создания нового контекста стека необходимо <a href="/modalnye-okna-s-razmytym-fonom-na-css3-sozda-m-vsplyvayushchee-modalnoe-okno.html">модальное окно</a>. Можно просто создать новый Sass список в файле z-index:</p> <p>$modal-elements: fields, form-controls, alerts, autocomplete-dropdown;</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>$ modal - elements : fields , form - controls , alerts , autocomplete - dropdown ; </p> </td> </tr></table><p>Этот Sass список – просто инструмент, помогающий безопасно управлять порядком стека элементов, он не генерирует CSS правила.</p> <p>Использовать этот инструмент, получить значение z-index и присвоить его всем элементам можно через Sass функцию index() внутри <a href="/korrektnaya-zapis-pdf-faila-dlya-ofsetnoi-pechati-kak-dobavit.html">корректного файла</a> module, как показано ниже:</p> <p>Modal-alerts { z-index: index($modal-elements, alerts); .... }</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>Modal - alerts { </p><p>z - index : index ($ modal - elements , alerts ) ; </p><p>. . . . </p> </td> </tr></table><p>Это лишь пример того, как абстрактные инструменты могут помочь при работе над большими проектами. После определения инструментов можно, наконец, перейти к реальному ядру проекта. Подробнее разберем Modules!</p> <p>Папка modules: здесь живут слои</p> <p>Принцип действия в соответствии с уровнями возрастающей сложности и специфичности позволяет нам добавить второй кирпичик в стену CSS – это определение слоев CSS.</p> <p>Слой abstracts, рассмотренный ранее, можно считать нулевым. После создания всех <a href="/vneshnyaya-antenna-dlya-4g-modema-svoimi-rukami-antenna-harchenko-raschet-i.html">необходимых инструментов</a> и «ингредиентов» можно начать писать стили нашего проекта через прогрессивные слои абстракции (о них ниже).</p> <p>Определение слоев абстракции поможет нам систематически создавать модульные стили, которые будут оставаться единообразными, масштабируемыми и обслуживаемыми по мере роста проекта и его изменения со временем. Поэтому я сгруппировал их в папке modules, как в SMACSS. Это дает идею коллекции шаблонов, некие части лего с разной областью применения, которые можно использовать повторно. Модули представляют собой набор правил, которые можно повторно применять в проекте – повторяющиеся и стандартизированные единицы. Они представляют реальной ядро проекта, так как именно с них начинается вывод реальных CSS правил.</p> <p>Использование префиксов для простого определения области применения класса – хорошая практика, которую принимают главные системы архитектуры CSS типа SMACSS и ITCSS. Детально о соглашении об именовании я расскажу в следующей статье, а сейчас просто учтите, что я также буду использовать префиксы в названиях файлов. Это можно достичь:</p> <p>Разработчики должны больше думать о <a href="/realnyi-otzyv-nado-li-menyat-iphone-plus-na-iphone-x-realnyi-otzyv.html">реальной функции</a> правила, это помогает определить ее место и порядок в коде</p> <p>Все точно знают, для чего используется файл</p> <p>Используемые префиксы отсортированы в алфавитном порядке. То есть они показаны в том порядке, в котором импортированы, что подчиняется принципу специфичности (сначала идет основа, затем макеты, объекты, утилиты и вендорные слои)</p> <p>Идея разделения кода CSS на отдельные слои пришла из ITCSS , чей <a href="/glava-i-problemy-klassifikacii-animacii-tipologiya-vidy-i.html">главный принцип</a> – сортировка стилей от общих к явным, от низко специфичных селекторов к более специфичным. Этот подход оказался очень полезен при работе со специфичностью – один из самых сложных <a href="/chto-takoe-flexbox-opisanie-vseh-css-svoistv-osnovnye-principy.html">принципов CSS</a>.</p> <p>Я пытаюсь упростить структуру папок, уменьшив и переименовав слои, представленные ITCSS: Settings, Tools, Generic, Elements, Objects, Components and Trumps.</p> <p>Мне удобно сгруппировать переменные, функции и миксины в один слой Abstracts, а не разбивать их между Settings и Tools</p> <p>Generic и Elements можно объединить в слой Base, так как оба включают самые базовые и низко специфичные классы</p> <p>Я предпочитаю переименовывать слой Objects в Layout – самый понятный слой, так как он используется для некосметических классов</p> <p>Components я переименую в Objects, так как этот слой можно использовать также для более атомных элементов</p> <p>Trumps используется для утилит, поэтому я просто назову слой Utility</p> <p>Если есть необходимость, вам никто не запрещает добавить дополнительный слой типа templates. Этот слой можно использовать для правил, которые уникально применяются в каких-то шаблонах. Я бы в таком случае использовал префикс _t_. Или же можно использовать следующие слои.</p> <h3>Слой bases</h3> <p>Это первый слой, который генерирует реальные CSS правила. Здесь располагаются стили reset или normalize, глобальные правила типа box-sizing и стили для текстовых HTML тегов. Я также думаю, что на этом уровне моно разместить некоторые хелпер-классы, строго относящиеся к <a href="/atributy-html-tegov-globalnye-atributy-chto-takoe-globalnye-atributy-v.html">HTML тегам</a> типа.h1, .small, .mark – это пригодится, когда между стилем и семантикой нет соответствия.</p> <p>Здесь можно разместить правила шрифтов, как показано ниже:</p> <p>h1, .h1-like { font: { family: $font-primary; weight: bold; size: 2rem; } text-transform: uppercase; ...... }</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>h1 , . h1 - like { </p><p>font : { </p><p>family : $ font - primary ; </p><p>weight : bold ; </p><p>size : 2rem ; </p><p>text - transform : uppercase ; </p><p>. . . . . . </p> </td> </tr></table><p>Я бы включил эти правила в файл _b_typography.scss. Префикс _b_ расшифровывается как base.</p> <h3>Слой layouts</h3> <p>Здесь создаются макеты проекта. Этот слой хранит классы главной сетки и другие селекторы-классы, определяющие скелет сайта. На этом этапе нас все еще не волнует косметическая сторона.</p> <p>Разберем пример карточки статьи, в которой есть изображение и текст под ним. При косметической стилизации этого объекта нам не нужно думать о его макете. Он должен хорошо работать в любом месте! То есть мы должны передать ответственность за макет на другой класс, который специально создан для этого.</p> <p>Как блок, объект карточки будет занимать всю ширину своего родителя. Если необходимо, чтобы карточка занимала только часть доступного пространства, необходимо написать другой класс, который будет отвечать исключительно за макет объекта.</p> <p>Идея разделения структуры и дизайна заимствована у OOCSS (SMACSS и ITCSS тоже принимают этот принцип). Я считаю, что его и дальше нужно придерживаться, так как он помогает разработчикам легко определять область видимости классов и повторно использовать их в любом месте.</p> <p>Один объект может иметь разные макеты, а один макет может применяться к разным объектам. Поэтому имеет смысл разделить макет и косметические классы, чтобы облегчить их повторное использование.</p> <p>Представьте, что ваш клиент хочет разместить до 6 блоков в строке. Это никак не относится к дизайну всех элементов, поэтому можно создать файл _l_columns.scss, который работает только с размещением определенных блоковых элементов.</p> <p>$min-cols: 2; $max-cols: 6; .l_columns-1 { display: grid; grid-row-gap: 30px; grid-column-gap: 30px; } @for $i from $min-cols through $max-cols { .l_columns-#{$i} { @extend .l_columns-1; grid-template-columns: repeat($i, 1fr); } }</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>$ min - cols : 2 ; </p><p>$ max - cols : 6 ; </p><p>L_columns - 1 { </p><p>display : grid ; </p><p>grid - row - gap : 30px ; </p><p>grid - column - gap : 30px ; </p><p>@ for $ i from $ min - cols through $ max - cols { </p></td></tr></table> <p>Здравствуйте, уважаемые читатели проекта «Анатомия Бизнеса». С вами вебмастер Александр! В прошлой статье мы разобрали, что такое CSS-стили и насколько огромное значение они имеют в WEB-программировании.</p> <p>Вполне очевидно, если CSS-стили оказывают существенное влияние на отображение HTML-файла, то они должны быть как-то связаны. Сегодня мы разберем четыре основных способы подключения CSS-стиля к HTML.</p> <p>Не будем откладывать дело в долгий ящик и приступим!</p> <h3><span>Подключение отдельного CSS-файла! </span></h3> <p>Один из самых удобных и <a href="/kak-ustanovit-datu-i-vremya-na-kompyutere-dvumya-prostymi-sposobami-vstavka.html">простых способов</a> подключения стилей является подключение отдельного файла со стилями. Для этого нужно при помощи <a href="/dlya-chego-prednaznachen-tekstovyi-processor-microsoft-word-i-kakova-ego.html">текстового редактора</a> notepad++ (или любого другого) создать файл с расширением.css и поместить в той же папке, что и файл, к которому мы хотим его разместить. </p> <p>После чего в HTML-файле между тегами <head> </head> разместить следующий код:</p><p> <head> <link rel="stylesheet" type="text/css" href="style.css" > </head> </p><p>Теперь давайте разберем, что все это значит: </p><p>Link # в переводе с английского обозначает «ссылка». Таким образом мы показываем браузеру, что далее у нас пойдет речь пойдет о ссылке. rel= # данным атрибутом мы показываем, какое отношение файл CSS имеет к файлу HTML. "stylesheet" # а именно то, что CSS-файл является каскадной таблицей стилей. type="text/css" # тут все просто: это указание того, что файл написан в <a href="/prakticheskaya-rabota-obrabotka-tekstovoi-informacii-chto-oznachaet.html">текстовом формате</a> и имеет расширение.css href="style.css" # это ссылка на файл с CSS-стилями. </p> <p>Как по мне, это и есть наиболее предпочтительный способ подключения стилей CSS. </p> <h3><span>Прописываем стили непосредственно в HTML-файле (первый способ)<br></span></h3> <p>Следующим способом указывания CSS-стилей является их прописывание непосредственно в HTML-документе. Выглядит это так:<br></p><p> <!DOCTYPE html> <html> <head> <title> Самый лучший Блог

    Если мы посмотрим, как будет отображаться данный HTML-документ в браузере, то увидим, что текст между тегами стал красного цвета. И используя атрибут style, мы говорим, что далее у нас идут параметры стиля отображения. Color — это селектор, отвечающий за цвет. Red — это значение данного селектора. Таким способом мы можем выделять определенным типом отображения какие-то отдельные части текста.

    Размещение каскадных таблиц стилей внутри HTML (второй способ)

    Еще одним способом подключения CSS-стилей является размещение каскадных таблиц внутри самого файла HTML. На мой взгляд, данный способ не является самым удобным, т. к. используя его, анализ кода сайта становится не очень удобным. Для того чтобы начать прописывать CSS-стили, Вам достаточно вставить в HTML-файл теги . На практике это выглядит следующим образом:

    Самый лучший Блог

    Тут пример: отображение CSS-стилей в документе HTML

    Обратите внимание на то, что внутри тега мы пишем код также по правилам CSS, используя фигурные скобки. В последующих статьях я более подробно расскажу правилах синтаксиса в CSS.

    Подключение нескольких CSS-файлов к одному HTML-документу.

    Правила HTML допускают подключение сразу нескольких файлов CSS. Многие вебмастера используют это: создают отдельные CSS-файлы для текста и для картинок. Или отдельные файлы для хедера, футтера и основного тела страницы. Давайте разберемся, как это реализовать.

    Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.

    Самый лучший Блог

    Тут пример: отображение CSS-стилей в документе HTML

    Все по аналогии с первым способом, только в данном случае мы указываем ссылки сразу на два в файла.

    Ссылка на CSS-файл внутри на файл этого же типа.

    Кроме всех выше перечисленных способов, есть способ, который позволяет внутри одного CSS-файла размещать ссылки на множество других!

    Реализуется это следующим образом:
    Во-первых, нам необходимо подключить все тем же способом хотя бы один файл CSS к Вашему коду.

    Во-вторых, в уже подключенный файл вписываем следующий код:

    @import url("style-2.css");

    Данная строка подключает к нашему файлу дополнительный файл CSS. Если у Вас возникли какие-то трудности при подключении CSS, можете задать их в комментариях.
    Как мы поняли из предыдущих двух уроков, технология CSS является мощнейшим инструментом, которым должен овладеть каждый вебмастер! Для улучшения усваивания материала я решил в конце каждого урока добавлять обучающее видео + тест на закрепление полученной информации.

    Тест на закрепление материала:

    Нам необходимо подключить CSS-файл путем размещения на него ссылки в HTML-файле. Какой способ из ниже указанных является верным?

    Вариант 1:

    Вариант 2 :

    Вариант 3:

    Вариант 4:


    Можем ли мы разместить каскады CSS непосредственно в файле HTML?