Основы работы с XHTML и CSS
Оформление тегов <span> и <div>
Оформление тегов <span> и <div> не должно выполняться с помощью простых селекторов во встроенной таблице стилей. Эти теги часто появляются на странице несколько раз, чтобы выделить и оформить различные части текста и различные наборы элементов страницы, которые обычно требуют различного оформления. Поэтому невозможно связать один определенный стиль с этими тегами, не ограничивая их гибкость в оформлении других фрагментов текста или разделов, которые требуют отличающегося оформления. Другими словами, не применяйте кодирование следующих простых селекторов во встроенных таблицах стилей.
<style type="text/css"> div {property:value} span {property:value} </style>
Листинг 3.38. Избегайте использования простых селекторов для тегов <div> и <span> (html, txt)
Однако, используя селекторы ID с этими тегами, можно применять различное оформление для различных тегов <span> и <div>, не связывая их с одним определенным стилем.
В следующем примере двум параграфам задают один и тот же стиль, помещая их внутри тега <div>, для которого задается специальное оформление. Это оформление влияет только на этот единственный раздел с помощью своего уникального селектора ID. Оформление других разделов не затрагивается, так как они не имеют этого значения id. В то же самое время два тега <span>, получают свое уникальное оформление через свои уникальные значения id, оставляя незатронутым все остальное оформление охваченного тегами <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>
Листинг 3.39. Использование селекторов ID для оформления отдельных тегов <div> и <span> (html, txt)
