Определение стиля для специфического элемента

Любому элементу можно присвоить идентификатор ID, а затем поставить в соответствие этому элементу какой-либо стиль, используя ID.

Например:

<style>

#test {color:”#00ffff”}

</style>

Теперь можно поставить этот стиль в соответствие любому элементу:

<p ID=”test”>...</p>

<h1 ID=”test”>...</h1>

Задание 6

Откройте файл “basset4.htm” и на его основе в папке CSS подготовьте файл “basset5.htm”. Для этого из стилевой спецификации файла “basset4.htm” удалите описание стиля заголовка, а вместо него создайте специальный элемент с этими же стилевыми характеристиками и поставьте его в соответствие тегу заголовка.

Пригласите преподавателя и продемонстрируйте работающую Web-страницу.

Работа со специальными элементами

Работа со специальными элементами определяется с помощью псевдоклассов.

Псевдокласс - специальный селектор, определяющий, как выглядит HTML-элемент в определенный момент.

Например, CSS определяет псевдокласс, который устанавливает, как выглядят гиперссылки в определенные моменты времени:

a:link {color:”#ffffff”; text-decoration:”none”} ‑ не посещенные ссылки;

a:visited {color:”#red”; text-decoration:”none”} ‑ посещенные ссылки;

a:active {color:”#black”; text-decoration:”none”} ‑ активные ссылки;

a:hover {text-decoration:”underline”} - ссылка при наведении на нее фокуса.

Можно определить псевдокласс для первого символа элемента. Например, для абзаца:

p:first-letter {font-size:”24pt”}. Это удобно для задания спецэффектов выделения заглавных букв.

Задание 7

Вами при изучении гиперссылок была создана Web-страница, представленная на рис. 12. Она содержит три HTML-файла: файл, содержащий описание фреймовой структуры “frame1.htm”, файл, который загружен в левый фрейм (“panel.htm”) и файл, который загружен в правый фрейм (“home1.htm”). Эти файлы Вы сохранили в папке “Frame”. Скопируйте эти файлы в папку “CSS”. Откройте файл “panel.htm” и включите в этот файл внедренную стилевую спецификацию, определяющую вид гиперссылки в определенные моменты.

Пригласите преподавателя и продемонстрируйте работающую Web-страницу.

Все свойства таблиц стилей Вы можете посмотреть в справочнике (на компакт-диске).

Задание 8

Реорганизовать свой сайт таким образом, чтобы все описание элементов оформления было вынесено в таблицы стилей. Необходимо использовать все три вида таблиц стилей. Для этого:

1. Выделить элементы оформления, общие для всего сайта. Это может быть фон, цвет различного типа гиперссылок, параметры шрифта основного текста, заголовков и т. д. Эти элементы оформления описать с помощью внешней таблицы стилей;

2. Для определенных HTML-страниц выделить элементы оформления, характерные именно для них. Эти элементы оформления описать во внедренной таблице стилей;

3. На тех страницах, где использовались внедренные таблицы стилей, переопределить стиль некоторых элементов с помощью внутренних стилей;

4. Убедиться самому и убедить преподавателя, что внутренняя таблица стилей имеет самый высокий приоритет;

5. Включить стилевые классы в свою работу;

6. Стили для специфического элемента включить в свои таблицы стилей;

7. Использовать псевдоклассы.

Пригласите преподавателя и продемонстрируйте работающий Web-сайт.

Контрольные вопросы

1. Какие существуют методы применения каскадных таблиц стилей?

2. Нужен ли тег <STYLE> и </STYLE> при создании внешней таблицы стилей? Внедренной таблицы стилей?

3. Как связывается конкретная Web-страница с конкретной внешней таблицей стилей?

4. В чем состоит удобство использования стиля специфического элемента?

5. Какие способы определения стиля гиперссылок Вы знаете?

6. Что означает термин «иерархические» в названии «иерархические стилевые спецификации»?

7. Приоритет какого из изученных типов стилевых спецификаций самый высокий?

8. Корпоративные цвета фирмы, заказавшей Вам сайт, ‑ оливковые. Но оформление прайса продукции фирмы, согласно требованию заказчика, требует использования черно-белой гаммы. Кроме того, временно отсутствующая продукция в прайсе должна отображаться шрифтом красного цвета. Какой будет структура иерархической стилевой спецификации этого сайта?

9. Одна из страниц сайта должна быть представлена текстовой информацией. Для абзацев этой страницы необходимо предусмотреть четыре варианта оформления. Какой вариант описания стиля является оптимальным для решения этой задачи?

10. Внешняя стилевая спецификация содержит следующее правило:

P {font-size:”12pt”; font-family:”Arial”; color:”#0000ff”;}.

На одной из страниц сайта используется внедренная стилевая спецификация, которая содержит следующее правило;

P {font-size:”18pt”; font-family:”Times New Roman”;}

Каким будет цвет шрифта этой страницы?