Xiper

Встроенные стили

Автор: Александр Головко Дата публикации:

Итак, ты уже знаешь, что 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.