Каскадные таблицы стилей представляют собой способ форматирования макета страницы: текста, шрифтов, изображений и почти все, что вы располагаете на странице.

Разберём приведённый выше пример подробнее. Этот блок был создан с использованием каскадных таблиц стилей. Если Вы посмотрите HTML код страницы, то в head онаружите объявление стилей, которое задаёт их для данного блока.

<STYLE TYPE=»text/css»>

.box1 { width:370px; border-style:solid; border-color:lightgreen; text-align:left; font-family:Arial; background-color:skyblue; color:red; position: relative; left:40px; top:10px }

</STYLE>

CSS форматирование позволяет Вам расположить любой выбранный вами объект в любом месте страницы. В данном примере расположение блока было задано при помощи position: relative; left:140px; top:30px. Эта строчка CSS стиля сообщила браузеру, где конкретно должен находиться блок по отношению к вышестоящим объектам. Также были применены ещё ряд CSS форматирований: начиная от цвета заднего фона.

Каскадные таблицы стилей представляют собой способ форматирования макета страницы, текста, шрифтов, изображений и почти все, что вы положили на странице. Как вы видели выше, они позволяют атрибуту postition установить расположение блока на странице точно в пикселях. Кроме того, если стиль объявлен в head раздел страницы, стиль объявляет изменения стиля на всей странице для каждого элемента, имеющего указанный атрибут. Мы доберемся до подробностей в последующие учебных материалах, но вот общая идея:

Допустим, вы создали стиль для заголовка тега, <H3>. В свой стиль, вы определяете цвет ваших H3 тегов красным. Теперь, если у вас есть 10 H3 тегов на странице, и вы решите, что теперь ваш тег Н3 должен быть синего цвета, вам больше не нужно изменять цвет шрифта для каждого отдельного выбранного тега. Все, что вам нужно сделать, это изменить стиль вашего H3 тега или любого другого, который должен быть изменён с красного цвета в синий. Изменение стиля затронет настройки всех ваши тегов H3, и они теперь будут все синего вместо красного. Точно также изменения вносимые во внешние стили будут распространяться на все страницы сайта на которых есть ссылка на CSS файл и в которых есть элемент, к которому были применены изменения.

От сюда следует, что использование внешней таблицы стилей более удобно. Изменение свойств стиля во внешних стилях теперь будет настраивать каждую страницу, который использует эту таблицу стилей, так что вы можете избежать редактирования каждой страницы индивидуально!

Читайте о том, что такое локализация сайтов.