Простота применения

Если сила CSS не убедила вас, примите во внимание следующее: таблицы стилей могут существенно сократить объем работы разработчика веб-страниц. Во первых, таблицы стилей концентрируют команды, реализующие визуальные эффекты, в одном легкодоступном месте, а не разбрасывают их по всему документу. В качестве примера предположим, что в документе все заголовки h2 должны быть фиолетовыми. Работая с HTML, можно поместить тег font в каждый заголовок:

Это фиолетовый!



Это должно быть сделано для каждого заголовка второго уровня. Если в документе 40 заголовков, то надо вставить 40 элементов font, по одному для каждого заголовка! Слишком много труда требует один не большой эффект. Предположим, что вы вставили все эти элементы font. Вы закончили, вы счастливы, а затем решаете (или начальник решает за вас), что заголовки h2 должны быть темно-зелеными, а не фиолетовыми. Надо возвращаться назад и вновь заменять каждый из элементов font. Конечно, можно обратиться к командам поиска и замены, поскольку заголовки являются единственным текстом фиолетового цвета в вашем документе. Но если вы ввели и другие элементы font фиолетового цвета, вы не можете применить автоматический поиск и замену, потому что тогда будут изменены и эти элементы.

Вместо этого намного лучше было бы иметь одно правило:

h2 {color: purple;}

Его не только намного быстрее набрать на клавиатуре, но и намного
проще изменять.


Для перехода от фиолетового цвета к темно-зеленому
достаточно изменить одноединственное правило.

Вернемся к нагруженному стилями элементу h1 из предыдущего раздела:

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline;
background: yellow;}

Может показаться, что написать это правило намного сложнее, чем HTML, но представьте, что на странице расположена дюжина элементов h2, которые должны выглядеть так же, как h1. Сколько разметки потребуется для этих 12 элементов h2? Много. А применяя CSS, достаточно сделать следующее:

h1, h2 {color: maroon; font: italic 2em Times, serif;
text-decoration: underline; background: yellow;}

Теперь стили применены и к элементам h1, и к элементам h2, а понадобилось для этого всего лишь три дополнительных нажатия на клавиши. Если вы хотите изменить вид элементов h1 и h2, преимущества CSS даже еще более ощутимы. Представьте, сколько времени понадобилось бы, чтобы изменить разметку HTML для элементов h1 и h2, по сравнению с внесением следующих изменений в предыдущие стили:

h1, h2 {color: navy; font: bold 2em Helvetica, sans-serif;
text-decoration: underline overline; background: silver;}

Если бы продолжительность каждого из этих двух подходов фиксировалась с помощью секундомера, держу пари, что разбирающийся в CSS автор без труда обогнал бы приверженца HTML.


Кроме того, большинство правил CSS сосредоточиваются в документе в одном месте. Можно распределить их по всему документу, группируя в ассоциированные стили или отдельные элементы, но как правило, намного эффективнее поместить все стили в одну таблицу стилей. Это позволяет разрабатывать (или изменять) внешний вид всего документа в одном месте.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Альтернативные таблицы стилей
Атрибуты
Богатство стилей
Веб спускается с Олимпа
Действительные правила стилей

Вернуться в раздел: CSS / 1. CSS и документы