Вбудовані теги <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>

Правила стилю можна додати, використовуючи:

• Зовнішні файли
• Теги стилів на сторінці
• Вбудований атрибут стилю

Як правило, я волію використовувати пов'язані таблиці стилів, оскільки вони:

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

Однак ваше запитання стосується конкретно styleтегів проти вбудованих стилів. styleУ цьому випадку волійте використовувати тег, оскільки він:

• забезпечує чітке відокремлення розмітки від стилю;
• виробляє чистішу розмітку HTML; і
• ефективніше із селекторами застосовувати правила до кількох елементів на сторінці, покращуючи управління, а також зменшуючи розмір сторінки.

Вбудовані елементи впливають лише на їх відповідний елемент.

Важливою відмінністю між styleтегом та вбудованим атрибутом є специфічність. Специфічність визначає, коли один стиль замінює інший. Як правило, вбудовані стилі мають вищу специфіку.

Прочитайте CSS: Specificity Wars для розважального погляду на цю тему.

Я сподіваюся, що це допоможе!

Ось один аспект, який може вирішити цю різницю:

Якщо ви змінюєте стиль елемента в JavaScript, це впливає на вбудований стиль. Якщо там уже є стиль, ви перезаписуєте його назавжди. Але якщо стиль був визначений на зовнішньому аркуші або в <style>тегу, то встановлення вбудованого ""стилю для відновлення стилю з цього джерела.

Це залежить.

Головне - уникати повторення коду.

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

Якщо ви використовуєте його лише один раз, я вважаю, що вбудований режим є нормальним.

Відповісти на ваше пряме запитання: жоден із цих варіантів не є найкращим методом. Використовуйте окремий файл.

Вбудовані стилі слід використовувати лише в крайньому випадку або встановлювати за допомогою коду Javascript. Вбудовані стилі мають найвищий рівень конкретності, тому перевизначте фактичні таблиці стилів. Це може зробити їх важко контролювати (ви також повинні уникати !importantз тієї ж причини).

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

Отже, коротко, де це можливо, ви повинні розміщувати свої стилі в окремому файлі CSS.

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

Відокремлення стилю допоможе значно полегшити вам життя, особливо коли посадові обов'язки розподіляються між різними особами. Багаторазове використання та портативність заощадить вам багато часу в дорозі.

При використанні вбудованого стилю це замінює будь-які зовнішні властивості, які встановлено.

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

Однак є кілька практичних винятків:

• Динамічні фонові зображення. Таблиці стилів CSS - це статичні файли, тому вам потрібно використовувати вбудований стиль, щоб додати динамічний (із бази даних, CMS тощо ...) background-imageстиль.

• Якщо елемент потрібно приховати під час завантаження сторінки, використання зовнішньої таблиці стилів для цього не є практичним, оскільки перед обробкою таблиці стилів завжди буде деяка затримка, і елемент буде видимим, доки цього не станеться. style="display: none;"це найкращий спосіб досягти цього.

• Якщо програма збирається дати користувачеві точний контроль над певним значенням CSS, наприклад кольором тексту, тоді може знадобитися додати це до вбудованих styleелементів або <style></style>блоків на сторінці . Наприклад style="color:#{{ page.color }}", або<style> p.themed { color: #{{ page.color }}; }</style>

Коли це можливо, переважно використовувати клас .myclass{}та ідентифікатор #myclass{}, тому використовуйте виділений css- файл або тег <style></style>у html . Вбудований стиль - це добре динамічно змінювати параметр css за допомогою JavaScript.

Причини вибору одного шляху над іншим можуть бути різні.

• Якщо вам потрібно вказати css для елементів, які генеруються програмно (наприклад, модифікуючи css для зображень різного розміру), може бути більш ремонтопридатним використання вбудованого css.
• Якщо деякий css дійсний лише для поточної сторінки, скоріше використовуйте тег сценарію, ніж окремий файл .css. Добре, якщо браузер не повинен робити занадто багато запитів http.

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

Ви можете встановити 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>

Якщо ви хочете застосувати унікальний стиль до одного документа, тоді ви можете використовувати Внутрішню таблицю стилів.

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