Оформление тегов <span> и <div> не должно выполняться с помощью простых селекторов во встроенной таблице стилей. Эти теги часто появляются на странице несколько раз, чтобы выделить и оформить различные части текста и различные наборы элементов страницы, которые обычно требуют различного оформления. Поэтому невозможно связать один определенный стиль с этими тегами, не ограничивая их гибкость в оформлении других фрагментов текста или разделов, которые требуют отличающегося оформления. Другими словами, не применяйте кодирование следующих простых селекторов во встроенных таблицах стилей.
Пример 25.38. Избегайте использования простых селекторов для тегов <div> и <span>
<style type="text/css">
div {property:value}
span {property:value}
</style>
Однако, используя селекторы ID с этими тегами, можно применять различное оформление для различных тегов <span> и <div>, не связывая их с одним определенным стилем.
В следующем примере двум параграфам задают один и тот же стиль, помещая их внутри тега <div>, для которого задается специальное оформление. Это оформление влияет только на этот единственный раздел с помощью своего уникального селектора ID. Оформление других разделов не затрагивается, так как они не имеют этого значения id. В то же самое время два тега <span>, получают свое уникальное оформление через свои уникальные значения id, оставляя незатронутым все остальное оформление охваченного тегами <span> текста.
Пример 25.39. Использование селекторов ID для оформления отдельных тегов <div> и <span>
<style type="text/css">
div#Justify {text-align:justify}
span#Red {color:red}
span#Blue {color:blue}
</style>
<div id="Justify">
<p>Этот параграф оформляется наследованием оформления своего
контейнерного раздела, который форматируется с помощью <span
id="Red">"Justify"</span> style.</p>
<p>Это параграф также оформляется наследованием оформления своего
контейнерного раздела. Кроме того, к одному из его слов применяется
оформление <span
id="Blue">"Blue"</span></p>
</div>