Как создать внешнюю таблицу стилей

Использование CSS Site Wide

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

HTML всегда был тем, что обеспечивает сайт своей структурой. В первые дни Интернета, HTML также содержал информацию о стиле. Такие элементы, как тег, были засорены в HTML-коде, добавляя информацию о внешнем виде и ощущениях вместе со структурной информацией. Движение веб-стандартов подтолкнуло нас изменить эту практику и вместо этого перенести всю информацию о стиле в CSS или каскадные таблицы стилей. Чтобы сделать этот шаг дальше, текущие рекомендации заключаются в том, что вы используете то, что называется «внешней таблицей стилей», для нужд вашего веб-сайта.

Преимущества и недостатки внешних таблиц стилей

Одна из лучших особенностей каскадных таблиц стилей заключается в том, что вы можете использовать их для обеспечения согласованности всего сайта. Самый простой способ сделать это – связать или импортировать внешнюю таблицу стилей. Если вы используете одну и ту же внешнюю таблицу стилей для каждой страницы вашего сайта, вы можете быть уверены, что все страницы будут иметь одинаковый стиль. Вы также можете упростить внесение изменений в будущем. Поскольку каждая страница использует одну и ту же внешнюю таблицу стилей, любое изменение этой таблицы повлияет на каждую страницу сайта. Это намного лучше, чем менять каждую страницу индивидуально!

преимущества

  • Вы можете контролировать внешний вид нескольких документов одновременно.
    • Это особенно полезно, если вы работаете с командой людей для создания вашего веб-сайта. Многие правила стиля могут быть трудны для запоминания, и, хотя у вас может быть печатное руководство по стилю, неэффективно и утомительно непрерывно перелистывать его, чтобы определить, должен ли пример текста быть написан шрифтом Arial в 12 пунктов или курьером в 14 пунктов. Имея все в одном месте, и поскольку в этом месте вы также вносите изменения, вы можете значительно облегчить обслуживание.
  • Вы можете создавать классы стилей, которые затем можно использовать для множества различных элементов HTML.
    • Если вы часто используете определенный стиль шрифта для акцентирования различных вещей на своей странице, вы можете использовать атрибут класса, который вы установили в своей таблице стилей, чтобы получить этот внешний вид, вместо того, чтобы определять конкретный стиль для каждого экземпляра акцент.
  • Вы можете легко сгруппировать стили, чтобы повысить эффективность.
    • Все методы группировки, доступные для CSS, можно использовать во внешних таблицах стилей, что дает вам больше контроля и гибкости на ваших страницах.

Недостатки

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

Как создать

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

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

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

  1. Соединение
    1. Чтобы связать таблицу стилей, вы используете тег HTML. У него есть атрибуты rel , тип и href . Атрибут rel сообщает, что вы связываете (в данном случае таблицу стилей), тип определяет MIME-тип для браузера, а href – это путь к файлу .css.
  2. Импорт
    1. Вы будете использовать импортированную таблицу стилей в таблице стилей на уровне документа, чтобы можно было импортировать атрибуты внешней таблицы стилей, не теряя при этом никаких специфичных для документа. Вы вызываете его аналогично вызову связанной таблицы стилей, только она должна вызываться в объявлении стиля на уровне документа. Вы можете импортировать столько внешних таблиц стилей, сколько вам нужно для поддержки вашего веб-сайта.

Оригинальная статья Дженнифер Крынин. Под редакцией Джереми Жирар 8/8/17

Оцените статью
Solutics.ru
Добавить комментарий