Прежде чем перейти к каскадным таблицам стилей, рассмотрим струк¬туру кода HTML:
div class="newsTickerContainer">

- ,

вшний элемент очень важен, потому что, во-первых, он содер-1 в себе все части виджета, а во-вторых, потому что это область про¬смотра заголовков новостей. Это поле вмещает в себя все компоненты швджета, поэтому оно должно быть очень широким, но данные не долж¬ны отображаться, пока не попадут в видимую область. В связи с этим необходимо определить значение свойства overflow в таблице стилей:
.newslickerContainer { overflow: hidden; . position: relative; С background-color: silver; height: 20px; width: 100%; padding-top: 2px;
Если свойство overflow содержит значение hidden, то содержимое эле¬мента не отображается. Кроме того, значение relative в свойстве posi¬tion обеспечит движение бегущей строки относительно newsTickerCon-tainer, а не относительно самого тела документа. Все остальные свой¬ства CSS можете установить по своему вкусу. В данном примере допол¬нительно определены высота, ширина и цвет фона.
Следующий элемент - это бегущая строка, содержащая все заголовки новостей, добавленные в виджет. Это элемент с абсолютным позиционированием, что позволяет двигать его с помощью JavaScript:
Единственное обязательное свойство - это position. Если его не ] вить должным образом, бегущая строка не будет перемещат остальные свойства CSS данного элемента можете установить и ветствии со своими предпочтениями.
Последние два элемента каскадных таблиц стилей - это классы t ления гиперссылок: newsTicker-feedTitle и newsTicker-feedltem. предназначен для оформления гиперссылок на сайты новостей, ни одно из перечисленных свойств класса не является обязат они устанавливаются таким образом, чтобы заголовки групп то отличались от всех остальных ссылок:
.newsTicker-feedTitle { margin: Орх брх Орх брх; font-weight: bold; color: black; text-decoration: none;

Справа и слева заголовки групп новостей отделяются от других i ссылок пространством шириной шесть пикселов. Текст гипе выводится жирным шрифтом черного цвета без подчеркива еще больше уменьшает сходство заголовка группы новостей с < ными гиперссылками.
Заголовки новостей были окружены пустым пространством четыре пиксела, благодаря чему их уже ни с чем не спутаешь, i по-прежнему вызывают у пользователя ассоциации с гиперссь
.newsTicker-feedltem { padding: 4рх;
Вся прелесть CSS состоит в том, что они позволяют изменять i вид страницы или виджета, не изменяя текст самого документа | шинстве случаев). Поэкспериментируйте с настройками свойс сов CSS, чтобы найти свой стиль оформления виджета, который] нировал бы с вашими веб-страницами.