Задумывались ли вы, почему аббревиатура CSS расшифровывается, как "каскадные таблицы стилей"? А использовали вы возможность каскадности этих самых таблиц? Если нет, то данная статья как раз для вас.
Самый простой способ задать стиль для HTML-элемента, это указать параметр ID, а затем описать в файле стиля оформление для данного элемента. Такой вариант работает, предоставляет определенные преимущества. Например, все элементы, ведущие на главную страницу сайта, будут иметь одинаковое оформление - это хорошо. Но когда вы используете сложное HTML-форматирование страницы, практически каждому HTML-тегу придется задавать значение ID. Это в свою очередь будет увеличивать размер Web-страницы (смотрите статью Оптимальный размер Web-страниц), существенно снижать читабельность кода. А когда через какое-то длительное время вы попытаетесь обновить страницы или изменить ее, то столкнетесь с проблемой избыточного использования параметров ID у тегов.
Аналогичная ситуация возникает и при использовании параметра CLASS. Таким образом, получается, что использовать параметры ID и CLASS для создания уникального оформления всех элементов HTML-страницы в конечном счете ведет к ухудшению понимания страницы. Вам, как Web-мастеру, придется постоянно отвлекаться от контента страницы на добавление этих параметров и их описаний в CSS-файле.
Поэтому стоит использовать свойство каскадности данных таблиц? Да только потому, что вы избавитесь от многочисленных параметров ID и CLASS. Это приведет к тому, что ваши Web-страницы станут более простыми, элегантными и главное меньше по размеру. А что самое главное, так это то, что они останутся такими же по оформлению.
Самым наглядным примером, где можно использовать свойство каскадности, является исходный код. Допустим, мы имеем некий исходный код на каком-то языке программирования (чтобы не отходить далеко от темы разработки сайтов, возьмем HTML-код). Данный код нам необходимо вывести на страницу, для этого обрамляем данный код тегами <CODE><PRE>. Теперь весь код будет отображаться в браузере моноширинным шрифтом (по умолчанию для многих браузеров - это шрифт Courier New). Учитывая, то что мы используем тег <PRE>, то нам не нужно дополнительно форматировать исходный код, помещаемый на страницу, добавляя тег <BR />.
Но в этом коде мы хотим, чтобы определенный элементы отображались так, как они отображаются в редакторе Quick Page, то есть использовалось форматирование текста, а также его цветовое выделение. Допустим, мы хотим отобразить на странице следующий код (со всем его оформлением):
<TABLE BORDER="1">
<TR>
<TD>1.1</TD>
<TD>1.2</TD>
<TD>1.3</TD>
</TR>
<TR>
<TD>2.1</TD>
<TD>2.2</TD>
<TD>2.3</TD>
</TR>
<TR>
<TD>3.1</TD>
<TD>3.2</TD>
<TD>3.3</TD>
</TR>
<TR>
<!-- Длинная ячейка -->
<TD COLSPAN="3">4</TD>
</TR>
</TABLE>
Для того, чтобы вы поняли эффективность использования свойства каскадности, приведем пример без использования данного свойства (сугубо для сравнения).
<STYLE>
#tag {
text-decoration : none;
font-weight : bold;
font-style : normal;
color : green;
}
#comment {
text-decoration : none;
font-weight : normal;
font-style : italic;
color : navy;
}
#text {
text-decoration : none;
font-weight : normal;
font-style : normal;
color : blue;
}
</STYLE>
<A ID="tag"><TABLE BORDER="1"></A>
<A ID="tag"><TR></A>
<A ID="tag"><TD><A ID="text">1.1</A><A ID="tag"></TD></A>
<A ID="tag"><TD><A ID="text">1.2</A><A ID="tag"></TD></A>
<A ID="tag"><TD><A ID="text">1.3</A><A ID="tag"></TD></A>
<A ID="tag"></TR></A>
<A ID="tag"><TR></A>
<A ID="tag"><TD><A ID="text">2.1</A><A ID="tag"></TD></A>
<A ID="tag"><TD><A ID="text">2.2</A><A ID="tag"></TD></A>
<A ID="tag"><TD><A ID="text">2.3</A><A ID="tag"></TD></A>
<A ID="tag"></TR></A>
<A ID="tag"><TR></A>
<A ID="tag"><TD><A ID="text">3.1</A><A ID="tag"></TD></A>
<A ID="tag"><TD><A ID="text">3.2</A><A ID="tag"></TD></A>
<A ID="tag"><TD><A ID="text">3.3</A><A ID="tag"></TD></A>
<A ID="tag"></TR></A>
<A ID="tag"><TR></A>
<A ID="comment"><!-- Длинная ячейка --></A>
<A ID="tag"><TD COLSPAN="3"><A ID="text">4</A><A ID="tag"></TD></A>
<A ID="tag"></TR></A>
<A ID="tag"></TABLE></A>
Посмотрите сколько тегов <A>, которые используют параметр ID. Много! Согласитесь, что данный код вам будет очень сложно отредактировать и изменить в дальнейшем. Поэтому сейчас приведем этот же код, но который использует свойство каскадности стилевых таблиц.
<STYLE>
CODE B {
text-decoration : none;
font-weight : bold;
font-style : normal;
color : green;
}
CODE I {
text-decoration : none;
font-weight : normal;
font-style : italic;
color : navy;
}
CODE {
text-decoration : none;
font-weight : normal;
font-style : normal;
color : blue;
}
</STYLE>
<B><TABLE BORDER="1"></B>
<B><TR></B>
<B><TD></B>1.1<B></TD></B>
<B><TD></B>1.2<B></TD></B>
<B><TD></B>1.3<B></TD></B>
<B></TR></B>
<B><TR></B>
<B><TD></B>2.1<B></TD></B>
<B><TD></B>2.2<B></TD></B>
<B><TD></B>2.3<B></TD></B>
<B></TR></B>
<B><TR></B>
<B><TD></B>3.1<B></TD></B>
<B><TD></B>3.2<B></TD></B>
<B><TD></B>3.3<B></TD></B>
<B></TR></B>
<B><TR></B>
<I><!-- Длинная ячейка --></I>
<B><TD COLSPAN="3"></B>4<B></TD></B>
<B></TR></B>
<B></TABLE></B>
Код стал компактнее, меньше, а главное его проще редактировать. Еще одним положительным моментом при использовании свойства каскадности стилевых таблиц является то, что используя каскад (например, CODE B) мы задаем тегу <B> определенные параметры, которые будут к нему применены только в том случае, если данный тег находится внутри тега <CODE>.
Теперь приведем более простой пример:
<STYLE>
B {
color : red;
}
CODE B {
color : green;
}
SPAN B {
color : navy;
}
#span1 B {
text-decoration : underline;
color : cornflowerblue;
}
#span2 B {
color : gray;
}
</STYLE>
<B>Quick Page</B>
<CODE><B>Quick Page</B></CODE>
<SPAN><B>Quick Page</B></SPAN>
<SPAN ID="span1"><B>Quick Page</B></SPAN>
<SPAN ID="span2"><B>Quick Page</B></SPAN>
А вот данный пример, как его видит посетитель вашей страницы:
Quick Page
Quick Page
Quick Page
Quick Page
Quick Page
Видите всю простоту и элегантность файла стиля, кода страницы. А ведь вам никто не запрещает использовать структурную каскадность, создавая многокаскадные таблицы стилей; каждый следующий уровень которой будет перекрывать параметры предыдущего уровня.
<STYLE>
B {
color : red;
}
CODE B {
color : green;
}
CODE SPAN B {
color : navy;
}
SPAN CODE B {
color : gray;
}
</STYLE>
<B>Quick Page</B>
<CODE><B>Quick Page</B></CODE>
<CODE><SPAN><B>Quick Page</B></SPAN></CODE>
<SPAN><CODE><B>Quick Page</B></CODE></SPAN>
Конечно, данная статья не может дать вам полноценных и профессиональных знаний по свойству каскадности CSS-файлов, но общий принцип и правила работы будут вам понятны. Главное, это то, что вы теперь знаете как использовать свойство каскадности CSS-таблиц для улучшения читабельности Web-страницы и сокращения ее размеров. Используя информацию данной статьи вы можете сейчас же перевооружить ваши готовые Web-страницы, а в дальнейшем изначально разрабатывать Web-страницы, используя свойство каскадности CSS-таблиц.