Нам вже відомо, що для того, щоб веб-сайт виглядав красиво і стильно нам необхідно попрацювати з CSS-файлом. І щоб наші стилі застосовувалися необхідно з'єднати HTML файл і файл CSS.
Існує кілька варіантів здійснення даної операції: використання таблиць вкладених стилів. таблиць зовнішніх стилів і вбудований стиль.
Сьогодні ми поговоримо саме про останньому способі.
Впровадження стилю в тег HTML
Суть даного способу полягає в тому, що необхідне оформлення ми впроваджуємо всередину тега. Для цього створено окремий атрибут - style. Даний атрибут може бути застосований до будь-якого тегу, однак тільки в рамках тіла сайту, тобто в межах body. Значення цього атрибута виступають оператори тих стилів, які необхідно застосувати до заданого елементу.
Для прикладу задамо різні розміри шрифту для двох різних абзаців тексту:
недоліки
Приклад відмінно демонструє, як таке навішування стилів засмічує код сторінки.
Також можна відзначити ще парочку недоліків застосування даної методики стилізації. Першим з них можна назвати розкид стилю по всьому документу, що в перспективі редагування ускладнить процес в рази.
Також виникнуть труднощі в оформленні великих обсягів тексту. Думаю, нікого не радує перспектива прописувати для кожного абзацу розмір шрифту, особливо якщо таких абзаців штук 40.
Ще при використанні вбудованих стилів стає неможливим застосування псевдокласів, що в значній мірі пов'язує руки веб-дизайнера.
Варто також відзначити і плутанину, яка обов'язково спливе в використанні атрибута style. Ця плутанина виникне через використання різних лапок при вписування стилів.
Для наочності розглянемо приклад нижче:
Дивлячись на викладки, надані вище, напрошується логічний висновок, що застосування вбудованих стилів пов'язані з низкою суттєвих ускладнень і незручностей.
Коли варто використовувати вбудований стиль
Незважаючи на всі недоліки, вбудований стиль був вигаданий не дарма. Веб-майстри часто звертаються до них в разі програмного надання стилю. Для прикладу подивимося на цей код
Запис потрібної ширини для цього блоку буде найпростішої операцією.
Аналогічна ситуація може виникнути при необхідності заміни фонового зображення (наприклад) користувача під роллю адміністратора. В такому випадку тег img може не підійти. Тому варто звернутися до атрибуту style:
Також програмісти часто звертаються до вбудованим стилям в процесі верстки спливаючих вікон. Найчастіше цей процес проходить наступним чином: блоку, над оформленням якого йде робота, прописується display: block, а решта вікна ховаються за допомогою display: none, щоб вони візуально не заважали роботі програміста. Ось приклад:
Використання вбудованих стилів пов'язано з рядом труднощів і незручностей, проте в процесі оформлення деяких елементів веб-майстри часто звертаються до цього методу для оптимізації своєї роботи.
Оцінок: 4 (середня 5 з 5)
