Css — Особенности @import (CSS)


Содержание

Директива @import или импорт css файла

Директива @import дает нам зеленый свет на включение в свою таблицу стилей других таблиц стилей. Она должна содержать URI(Universal Resource Identifier) или проще сказать ссылку на файл импортируемой таблицы стилей.

И не забывайте, если у Вас файл импортируется из директории, например mydir — @import url(«mydir/style.css»); и в нем прописан путь к рисунку, например: background-image: url(img/elements/bgstrip.gif); то путь теперь должен быть следующим background-image: url( ../ img/elements/bgstrip.gif); т.к. style.css теперь будет смотреть из под каталога mydir .

Хорошим тоном будет подписывать импортируемые файлы рядом , например так:

В результате просмотра этой таблицы Вы поймете, как можно, и как нужно писать правильно эту директиву.

CSS: Внешняя таблица стилей

Таблицы стилей бывают двух видов — внутренние и внешние — в зависимости от того, где определены стили: непосредственно на самой странице или во внешнем файле, связанном с веб-страницей.

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

После правила @import можно добавлять обычные CSS-стили, если, например, вы хотите создать стиль, который нужно применить только к одной веб-странице, используя для форматирования остального содержимого таблицу стилей, описанную во внешнем CSS-файле:

Примечание: правило @import не обязательно должно располагаться в теге , его так же можно включать во внешние таблицы стилей.

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

Заключение. Рекомендации по CSS

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

Комментирование кода

Когда вам (или другому разработчику) приходится обращаться к CSS-таблице через продолжительное время (месяц, полгода, год и т. п.), то при взгляде на код может возникнуть вопрос: «К чему он относится? Каково его действие?». Чтобы таких вопросов не возникало либо возникало меньше, необходимо добавлять комментарии к коду. Конечно, не нужно комментировать, что делает каждое свойство. Однако описательный комментарий будет уместным, например, возле кода CSS-анимации, при взгляде на который можно не сразу понять, что он делает.

Согласитесь, небольшой комментарий способен сильно изменить картину в лучшую сторону: без него можно было бы долго гадать, что делает эта анимация и где она применяется.

Понятные имена для селекторов

У профессионала должен быть развит такой навык как умение давать хорошие имена селекторам. Как правильно придумывать названия? Первый совет: не называйте селектор, исходя из цвета или местоположения элемента. Это те вещи, которые с высокой долей вероятности могут быть изменены в ходе доработки дизайна. Клиент может прислать правки, где попросит сделать кнопку не зеленой, а голубой, и если вы уже назвали класс .green-button , возникнут проблемы: придется либо везде менять .green-button на .blue-button , либо оставить всё как есть, но потом это будет вводить вас (или другого разработчика) в заблуждение. То же самое касается привязки к местоположению: элемент .left-block вскоре может стать элементом .right-block , потому что дизайнер или заказчик так захотел. И вновь вы столкнетесь с проблемой несоответствия имени.

Так как же называть селекторы? Более правильным будет давать такие имена, которые указывают на назначение элемента либо действие стиля. Например, кнопка отмены может называться .cancel-button , форма для обратного звонка — .callback-form , всплывающее окно — .popup-window и так далее. Если вы создаете класс для выравнивания текста по центру, то будет уместным назвать его как-то вроде .text-center :

Цукерберг рекомендует:  QA Automation от первого рубля до последнего бага

Также не стоит давать селекторам бессмысленные имена вроде #b1 , .sb , .abc и т. п., поскольку потом ни вы, ни другие разработчики не сможете понять, что же означают эти загадочные названия.

Несколько классов для одного элемента

Может возникнуть ситуация, когда у вас есть набор элементов с почти одинаковыми стилями, которые отличаются лишь одной-двумя строками. К примеру, представьте, что вам нужно создать кнопку .button и использовать ее на странице три раза. Стиль всех кнопок идентичен:

Однако первая кнопка должна быть выровнена по левому краю, вторая — по центру, а третья — по правому краю. Как это сделать? Самое очевидное решение — создать дополнительные классы специально для выравнивания блочного элемента:


По сути, класс .block-left можно и не создавать, поскольку наша кнопка по умолчанию примыкает к левому краю. Итак, нужный класс теперь можно использовать в паре с классом .button :

К элементу будут применяться стили сразу от двух классов, и если вам вдруг понадобится изменить выравнивание кнопки, вы можете просто переписать класс на другой.

Группирование стилей

Если ваша таблица стилей содержит всего десяток правил, то проблем с ее восприятием не возникнет. Но в реальной жизни даже совсем небольшой проект может иметь более 500 строк CSS-кода. И если вы будете записывать все правила подряд, без разбивки на группы, вы очень скоро запутаетесь в своей же работе. Отыскать нужное правило будет сложно, поддержка такой CSS-таблицы превратится в мучение.

Если вы проходили практические уроки данного учебника, то помните, что мы делили таблицу стилей на разделы при помощи комментариев и говорили вам записывать стили в соответствующую группу.

Железных правил относительно организации групп в CSS-файле не существует. Однако есть несколько популярных приемов, которые помогут удобно сгруппировать стили:

Группируйте стили, которые относятся к определенной секции страницы. Например, стили для шапки сайта помещайте в одну группу, стили для футера — в другую, стили для навигации — в третью и т. д.

Группируйте стили, относящиеся к одной задаче. К примеру, стили для разметки размещайте в одной группе, стили для форматирования — в другой и т. д.

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

Вы можете придумать другой удобный для себя вариант оформления комментариев, главное, следите за тем, чтобы комментарий начинался с символов /* и заканчивался символами */ , и между ними не было такой же комбинации символов (во избежание ошибок).

Несколько CSS-таблиц

Когда таблица стилей расширяется до огромных размеров, становится неудобно искать и редактировать в ней стили. В этом случае удобным решением может стать разделение одной CSS-таблицы на несколько файлов. Безусловно, здесь нужно иметь чувство меры: не стоит создавать 20-40 штук файлов со стилями для каждой секции сайта (это сильно загрузит веб-сервер), однако будет разумным разъединить большие группы стилей. Например, вы можете поместить код разметки в файл layout.css , основные стили — в main.css , медиа-запросы — в media.css и т. д.

Затем понадобится подключить все эти файлы к HTML. Можно добавить каждый файл по отдельности через тег
, но есть способ получше: создайте отдельную внешнюю таблицу стилей (скажем, styles.css ), внутри которой используйте правило @import для подключения всех остальных таблиц стилей:

В принципе, это весь код, который должна содержать таблица styles.css . Подключите ее к HTML-документу (другие таблицы подключать этим образом не нужно):

Теперь, когда веб-страница будет загружаться, браузер загрузит файл styles.css , который, в свою очередь, скажет браузеру загрузить три остальные таблицы стилей.

Препроцессоры CSS

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

Среди преимуществ препроцессоров стоит выделить:

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

Добавление префиксов. В нашем учебнике мы не раз упоминали о необходимости дописывать префиксы производителей к некоторым свойствам. Препроцессор CSS избавит вас от необходимости делать это и добавит все необходимые вендорные префиксы сам.

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

Самые распространенные препроцессоры


, а на другой — тег

Существуют и другие модели организации кода: BEM, SMACSS, Atomic CSS и т. д. У каждого из этих подходов есть свои преимущества и недостатки. Какой из них выбрать — решать вам как разработчику, опираясь на собственный опыт и предпочтения. Кроме того, ничто не мешает вам выработать свой способ организации CSS. Быть может, именно придуманный вами вариант позволит веб-разработке подняться на новый уровень!

Завершение

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

CSS-club – настройка внешнего вида сайта

Будьте готовы переписывать уже существующие стили и сталкиваться со свойствами с прописанным !important . К примеру:

Цукерберг рекомендует:  Linux - Программирование на C# в Linux.

По умолчанию все ваши правила оборачиваются в медиа-запрос:
Отменяется добавлением своего медиа-запроса (даже пустого).

Подстрока script будет вырезаться где бы она не находилась – будь то название вашего фонового изображения или же названия класса. К примеру .description .

К примеру, в MIME-типе нужно заменить data:image/png; на data\:image/png; .

Обычная строка @charset «UTF-8»; сломает идущее следом правило.

  • @import встаивается в стиль
    Все @import’ы автоматически скачиваются на сервер Шикимори и встраиваются в готовый пользовательский стиль в открытом виде вне медиа-запроса, которым оборачиваются другие правила. Пример:
  • @import можно писать где угодно
    Из-за предыдущей особенности вы можете указывать @import там, где вам будет удобнее.
  • @import можно делать напрямую с гитхаба
    Опять же из-за первой особенности @import не требует жесткой привязки к content-type импортируемого стиля: просто указывайте ссылку на raw.githubusercontent.com !
  • Эта информация для авторов стилей!
    Стили по ссылке из import загружаются лишь один раз и кешируются сайтом. Из-за этого, изменяя импортируемый стиль, вы не увидите изменений на Шикимори: чтобы они отобразились, вам потребуется вручную сбросить кеш. Сделать это можно на странице /tests/reset_styles_cache – в поле ввода укажите ссылку на загружаемый стиль и нажмите кнопку «Submit».

    Сброс кеша необходимо делать после обновления стилей. Сделав сброс кеша один раз, изменения увидят все пользователи импортирующие ваш стиль.

    CSS import or multiple CSS files

    I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes.

    I have created a test page:


    File: /css/main.css

    and now the file: /css/site_header.css:

    When I use the above code, the site_header div does not have any formatting/background. When I remove the link line from the HTML doc for site_header.css and instead use an @import url(«/css/site_header.css»); in my main.css file, the same results — nothing gets rendered for for the same div.

    Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine.

    So I am wondering if having multiple css files is somehow not working. or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.

    СSS Особенности

    В чем особенности?

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

    Подумайте о специфике как о балле / ранге, который определяет, какие объявления стиля в конечном итоге применяются к элементу.

    Всеобщий селектор ( * имеет низкую характерность, а id селекторы высокую конкретность!

    Примечание: Особенность — это распространенная причина, почему ваши CSS правила не применяются к некоторым элементам, хотя вы думаете, что они должны применяться.

    Иерархия особенности

    Каждый селектор имеет свое место в иерархии. Есть четыре категории, определяющие уровень особенности селектора:

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

    Идентификатор — это уникальный идентификатор элементов страницы, таких как, #navbar .

    Классы, атрибуты и псевдо-классы — Эти категории включают .класс [атрибут] и псевдо-классы как например :hover , :focus и т.д..

    Элементы и псевдо-элементы — Эта категория включает элемент имена и псевдо-элементы, как например h1 , div , :before и :after .

    Как рассчитать особенности?

    Запомните, как рассчитать особенности!

    Начните с 0, добавьте 1000 атрибутов для стиля, добавить 100 для каждого идентификатора, добавить 10 для каждого атрибута класса или псевдокласс, добавьте 1 для каждого имени элемента или псевдо-элемента.

    Рассмотрим следующие три фрагмента кода:

    Пример

    Заголовок


    Особенность A — 1 (один элемент)
    Особенность Б — 101 (одна ссылка ID и один элемент)
    Особенность C — 1000 (встроенный стиль)

    Правила особенности

    Равная особенность: последним пунктам правил — Если одно и то же правило записывается дважды во внешнюю таблицу стилей, то нижнее правило в таблице стилей ближе к элементу, будет применяться, и поэтому оно будет работать:

    Пример

    Последнее правило применяется всегда.

    ID селекторы имеют более высокую специфичность, чем селекторы атрибутов — Посмотрите на следующие три строки кода:

    Пример

    Первое правило является более конкретным, чем два других, оно будет применяться.

    Контекстные селекторы являются более конкретными, чем селектор одного элемента — Внедренная таблица стилей расположена ближе к элементу, для которого требуется применить стиль:

    Пример

    В HTML файле:

    Будет применяться последнее правило.

    Селектор класс превосходит любое количество селекторов элементов — селектор класса, например: .intro выигрывает у h1 , p , div и т.д.:

    Пример

    Универсальный селектор и наследуемые значения имеют спецификацию 0 — * , body* и подобное имеют нулевую специфичность. Унаследованные значения также имеют спецификацию 0 .

    @import

    Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import .

    Синтаксис ?

    В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

    Табл. 1. Типы носителей и их описание

    Тип Описание
    all Все типы. Это значение используется по умолчанию.
    print Печатающие устройства вроде принтера.
    screen Экран монитора.

    Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.

    Обозначения

    Описание Пример
    Указывает тип значения.
    A && B Значения должны выводиться в указанном порядке. &&
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    [ ] Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [, ]*
    + Повторять один или больше раз. +
    ? Указанный тип, слово или группа не является обязательным. inset?
    Повторять не менее A, но не более B раз.
    # Повторять один или больше раз через запятую. #

    ×


    Значения

    В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.

    Пример

    Примечание

    Браузер Internet Explorer до версии 7 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.

    Спецификация ?

    Спецификация Статус
    Media Queries Рекомендация
    CSS Level 2 (Revision 1) Рекомендация
    CSS Level 1 Рекомендация

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

    ×

    Браузеры ?

    5.5 12 1 5 1 1

    Браузеры

    В таблице браузеров применяются следующие обозначения.

    • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
    • — свойство браузером не воспринимается и игнорируется;
    • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

    Число указывает версию браузера, начиная с которой свойство поддерживается.

    Импорт CSS или несколько файлов CSS

    Я изначально хотел включить .css в свой HTML-документ, который загружает несколько других .css файлов, чтобы разделить некоторые куски кода для целей разработки.

    Я создал тестовую страницу:

    Файл:/css/main.css

    , а теперь файл:/css/site_header.css:


    Когда я использую приведенный выше код, div_ site_header не имеет никакого форматирования/фона. Когда я удаляю ссылку из HTML-документа для site_header.css и вместо этого использую URL-адрес @import ( «/css/site_header.css» ); в моем файле main.css, те же результаты — ничего не получается для одного и того же div.

    Теперь, когда я беру CSS-разметку из site_header.css и добавляю ее в main.css, div получает визуализированный штраф.

    Так что мне интересно, если несколько файлов css каким-то образом не работают. или, возможно, наличие этой разметки css в конце моего предыдущего css каким-то образом противоречиво, хотя я не могу найти причину, по которой это произойдет.

    Директива @import должна быть первой в вашем CSS. Как только один стиль попадет в браузер, все остальные строки импорта будут проигнорированы.

    Чтобы процитировать WC3:

    «любые правила @import должны предшествовать всем другие правила (кроме правила @charset, если имеется)»

    Следует учитывать, что каждый @import все еще вызывает HTTP-запрос, поэтому он не более эффективен, чем использование нескольких тегов ссылок. Фактически это может быть менее эффективным, поскольку импорт может быть последовательным, а не параллельным запросом. См. статью. IMO также добавляет сложности, потому что вы в конечном итоге управляете ссылками CSS в двух местах (главный тег разметки плюс 1 или более файлов CSS) по сравнению с простым списком тегов ссылок.

    Я также рекомендую, где вы можете комбинировать файлы CSS, когда ваш сайт находится в процессе производства, поскольку это уменьшит накладные расходы HTTP.

    Могу я просто сказать, что здесь есть домашнее животное, но размещать изображения, связанные с CSS файлом, в самой папке CSS, а не в /images/.

    Точка CSS — это разделение стиля и контента, и только изображения содержимого должны идти в /images/. Любые изображения, вызываемые CSS, должны быть помещены в одну и ту же директорию и называться бесконтактными, например:

    4. CSS — Подключение встроенных и внешних стилей, правила приоритета, комментарии

    Существует четыре способа подключения стилей к вашему HTML-документу. Наиболее часто используемые методы — это встроенные CSS и внешние CSS.

    Содержание

    Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса:

    Получим следующий результат:

    Атрибуты

    Атрибут Значение Описание
    type text/css Указывает язык таблицы стилей как тип содержимого (тип MIME). Обязательный атрибут.
    media screen
    tty
    tv
    projection
    handheld
    print
    braille
    aural
    all
    Указывает устройство, на котором будет отображаться документ. Значение по умолчанию — all. Необязательный атрибут.

    Встроенный CSS — атрибут стиля

    Вы можете использовать атрибут для любого HTML-элемента для определения правил стиля. Эти правила будут применяться только к данному элементу. Вот общий синтаксис:

    Атрибуты

    Атрибут Значение Описание
    style Правила стиля Значение атрибута style представляет собой комбинацию объявлений стиля, разделенных точкой с запятой (;).

    Пример

    Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса:


    Получим следующий результат:

    Внешний CSS стили — элемент

    Элемент
    может использоваться для подключения внешних CSS файлов в ваш HTML-документ.

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

    Вот общий синтаксис подключения внешнего файла CSS:

    Атрибуты

    Атрибуты ассоциируются с элементами или правилах, определенных в любом внешнем файле таблицы стилей.

  • Любое правило, определенное в тегах , переопределяет правила, определенные в любом внешнем CSS-файле.
  • Любое правило, определенное во внешнем файле таблицы стилей, имеет наименьший приоритет в CSS, а правила, определенные в этом файле, будут применяться только тогда, когда не применяются два предшествующих правила.
  • Обработка старыми браузерами

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

    Комментарии в CSS

    Вам может потребоваться добавить дополнительные комментарии в свои блоки страниц стилей. Таким образом, оформление комментариев в CSS происходит очень легко. Вы можете просто оставить свои комментарии внутри /*. это комментарий в CSS-файле. */.

    Также Вы можете использовать /*. */ как для однострочных комментариев в CSS, так и для комментирования многострочных блоков аналогично тому, как это делается на языках программирования C и C++.

    HTML Стили — CSS

    Стилизация HTML с CSS

    CSS означает каскадные таблицы стилей.

    CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.

    CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.

    CSS можно добавлять к элементам HTML тремя способами:

    • Встроенный — с помощью атрибута Style в элементах HTML
    • Internal -с помощью
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих