Встроенные теги <style> против встроенных свойств css

Каков предпочтительный метод настройки свойств CSS?

Свойства встроенного стиля:

<div style="width:20px;height:20px;background-color:#ffcc00;"></div>

Свойства стиля в тегах <style>...</style>:

<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div>

Ответ 1

Правила стиля можно прикреплять, используя:

Внешние файлы
Теги стиля страницы
Атрибут Inline Style

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

может быть кэширован браузерами для производительности; и
намного легче поддерживать для перспективы развития.

Однако ваш вопрос задает вопрос о тегах style и встроенных стилях. Предпочитаете использовать тег style, в этом случае, потому что он:

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

Встроенные элементы влияют только на их соответствующий элемент.

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

Прочитайте CSS: Specificity Wars для интересного взгляда на эту тему.

Я надеюсь, что это поможет!

Ответ 2

Здесь один аспект, который может регулировать разницу:

Если вы изменяете стиль элемента в JavaScript, вы влияете на встроенный стиль. Если там уже есть стиль, вы переписываете его навсегда. Но если стиль был определен во внешнем листе или в теге <style>, тогда установка встроенного в "" восстанавливает стиль из этого источника.

Ответ 3

Чтобы ответить на ваш прямой вопрос: ни один из них не является предпочтительным. Используйте отдельный файл.

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

Вложенный блок <style> не рекомендуется, поскольку вы теряете способность браузера кэшировать таблицу стилей на нескольких страницах вашего сайта.

Итак, по возможности, вы должны поместить свои стили в отдельный файл CSS.

Ответ 4

Это зависит.

Главное, чтобы избежать повторного кода.

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

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

Ответ 5

С точки зрения ремонтопригодности гораздо проще управлять одним элементом в одном файле, чем управлять несколькими элементами в возможно нескольких файлах.

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

При использовании встроенного стиля, который будет переопределять любые установленные внешние свойства.

Ответ 6

Вы можете установить CSS, используя три разных способа, как указано ниже: -

1.External style sheet
2.Internal style sheet
3.Inline style

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

Использование примера может быть: -

<head>
    <link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>

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

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

Ответ 7

В любом случае предпочтительнее использовать класс .myclass{} и идентификатор #myclass{}, поэтому используйте выделенный CSS файл или тег <style></style> в html. Встроенный стиль хорош, чтобы динамически изменять параметр css с помощью javascript.

Ответ 8

Могут быть разные причины для выбора одного пути друг за другом.

Если вам нужно указать css для элементов, которые сгенерированы программно (например, для изменения css для изображений разных размеров), он может быть более удобным для использования встроенным css.
Если какой-либо css действителен только для текущей страницы, лучше использовать тег script, чем отдельный .css файл. Хорошо, если браузеру не нужно делать слишком много HTTP-запросов.

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

Ответ 9

Я согласен с представлением большинства о том, что предпочтительными являются внешние таблицы стилей.

Однако, вот некоторые практические исключения:

Динамические фоновые изображения. CSS stylesheets являются статическими файлами, поэтому вам нужно использовать встроенный стиль для добавления динамического (из базы данных, CMS и т.д.) Стиля background-image.
Если элемент должен быть скрыт при загрузке страницы, использование внешней таблицы стилей для этого нецелесообразно, так как всегда будет некоторая задержка перед обработкой таблицы стилей, и элемент будет виден до тех пор, пока это не произойдет. style="display: none;" - лучший способ достичь этого.
Если приложение будет предоставлять пользователю тонкий контроль над определенным значением CSS, например. цвет текста, тогда может потребоваться добавить это к встроенным элементам style или к блокам <style></style>. Например. style="color:#{{ page.color }}", или <style> p.themed { color: #{{ page.color }}; }</style>