Встроенные стили
Дата публикации: 26.12.2010
Итак, ты уже знаешь, что CSS состоит из правил, задающих отображение различных HTML элементов. В статье Анатомия CSS мы договаривались рассматривать CSS просто, как отдельный фрагмент текста. Теперь же пришло время ответить на очень важный вопрос. Допустим, у меня есть HTML страничка и набор CSS правил. Как же это все соединить? Другими словами, как объяснить браузеру, что какие-нибудь стили должны применяться к определенным HTML-файлам?
На самом деле есть целых три варианта как это сделать. Можно использовать внешние таблицы стилей, вложенные таблицы стилей и встроенные стили. Последнему варианту и посвящена данная статья.
Внедряем CSS непосредственно в HTML тег
Это называется встроенный стиль. Для реализации вчстроенного стиля используется специальный атрибут style. Этот атрибут присутствует у всех HTML тегов, кроме тех, которые располагаются вне элемента body. В качестве значения этого атрибута записываем стили для данного конкретного элемента.
Например, зададим разные цвета шрифта для двух абзацев текста:
<p style="color:#0f0">Этот текст сделаю зеленым.</p> <p style="color:#FF3300; font-weight:bold">А этот — красным. И полужирным — чтоб продемонстрировать установку нескольких свойств.</p>
На примере хорошо видно, что с таким способом далеко не уедешь.
Во-первых, бросается в глаза, что так можно задавать только отдельные объявления конкретным элементам. Почему это неудобно?
- таблица стилей оказывается разбита и разбросана по всему HTML файлу, а это уничтожает большую часть преимуществ от ее применения (оформление опять будет cмешано с содержанием, искать и править такие стили долго и неудобно);
- не получится написать общие определения вида «всем абзацам — 12 шрифт». Каждый элемент нужно стилизовать отдельно (это долго, нудно и получим массу повторяющегося кода);
Во-вторых, обычно, очень удобно применять одни и те же стили к целой группе HTML-страниц. В данном случае это сделать просто нереально!
В-третьих, таким способом не получится задать стили для псевдоклассов и псевдоэлементов.
Ну и напоследок еще одно мелкое неудобство. Значение атрибута style берется в кавычки. Значит нужно дополнительно отслеживать, чтобы кавычки, встречающиеся в стилях, были другого типа, чтоб не запутать браузеры. Например:
<div style="font-family:Georgia, 'Times New Roman', Times, serif">Так правильно.</div> <div style='font-family:Georgia, "Times New Roman", Times, serif'>И так тоже все в порядке.</div> <div style="font-family:Georgia, "Times New Roman", Times, serif">А так писать нельзя!.</div> <div style='font-family:Georgia, 'Times New Roman', Times, serif'>И вот так тоже нельзя!.</div>
Благодаря синей подсветке кода, тут хорошо видно, что браузер просто не сможет отличить открывающую кавычку от закрывающей, и фактическое значение атрибута style сильно укоротится. А ведь дальше могли идти еще какие-то очень важные свойства, которые браузер проигнорирует!
Надеюсь, я тебя убедил, что такой способ состыковки HTML и CSS только немногим лучше, чем прямое использование атрибутов оформления для тегов.
Когда это можно использовать?
Тем не менее, иногда, все-таки приходиться применять и такой способ задания стилей. Это бывает удобно, когда конкретный стиль должен задаваться программно. Очень показательный пример рассмотрен в статье Верстка рейтингов. Там предлагается использовать вот такой код:
<div id="productRate"> <div style="width: 60%"></div> </div>
Программеру не составит труда подставить нужный width.
Похожий пример — когда нужно сделать так, чтобы пользователь через админку менял, например, фоновый рисунок какого-либо элемента. Если тег img по смыслу не подходит — прямая дорога использовать атрибут style:
<div style="background:url(back.png)"></div>
Еще один вариант очень часто встречается на практике. Такое использование встроенного стиля удобно именно в процессе работы над сайтом. Предположим, на сайте есть ряд скрытых элементов, например, всплывающих окошек. В таблице стилей для всех их задаем общее правило display:none (скрываем окошки), а для одного конкретного окошка, с которым сейчас работаем (или которое демонстрируем заказчику) прямо в HTML прописываем display:block (показать окошко).
<div class="popup" style="display:block">Это надпись в всплывающем окошке</div>
Это быстро и удобно!
Резюме
Внедрение CSS непосредственно в элемент HTML не самый прогрессивный способ. Благодаря его недостаткам область применения сильно ограничена. Зато в ситуацях, когда стиль конкретного элемента задается или изменяется программно — смело используй атрибут style.