4. Внутренние стили

Последним вариантом использования стилевых таблиц является применение их к конкретному HTML-элементу при помощи атрибута STYLE, который разрешен практически для каждого элемента.

Например: <h1 style=”color:blue; font-family:arial;”>.

Задание 4

1. На web-странице proekt_townhouse.html для текста под заголовком создайте стилевые спецификации, которые опишите при помощи атрибута STYLE: имя шрифта ‑ Verdana, цвет шрифта ‑ 0000FF, размер шрифта – 10pt, начертание – полужирное.

2. Проверьте работоспособность внутреннего стиля.

3. Классы в стилевых спецификациях

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

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

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

<style>

h1.blue{color:”blue”}

h1.red{color:”red”}

h1.black{color:”black”}

</style>

Теперь при использовании тега <H1> в документе необходимо установить атрибут CLASS, чтобы указать, какой именно стиль нужно применить: <h1 class=”red”> текст </h1>.

Можно создать класс без указания имени элемента. Например: .my{color:”#00ff00”}

Применяется он тогда к разным элементам. Например:

<p class=”my”>

<h2 class=”my”>

Задание 5

1. Для страниц проектов для текста с контактными данными внизу страницы создайте три разных стилевых класса: blue, red, black.

   • Для blue: ‑ Tahoma, цвет шрифта ‑ синий, размер шрифта – 10pt.

   • Для red: имя шрифта «Tahoma», цвет шрифта красный, размер шрифта – 10pt.

   • Для black: имя шрифта «Tahoma», цвет шрифта черный, размер шрифта – 10pt.

2. Проверьте работоспособность внутреннего стиля. Результат на рис. 2.

Рис. 2. Использование стилевых классов

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

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

Например:

<style>

#test {color:”#00ffff”}

</style>

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

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

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

Задание 6

1. Для страниц проектов в таблицах с ценами проекта создайте специфический элемент для цены за полный комплект чертежей с учетом 10% сезонной скидки: имя шрифта «Tahoma», цвет шрифта красный, размер шрифта – 10pt, начертание – полужирный.

2. Проверьте работоспособность стиля. Результат на рис. 3.

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

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

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

Псевдокласс – специальный селектор, определяющий, как выглядит 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

1. Для верхнего меню страниц проектов включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 4.

2. Проверьте работоспособность стиля.

а – не посещенные ссылки

б – ссылка при наведении на нее курсора

Рис. 4. Вид гиперссылки в определенный момент времени

Задание 8

1. Для пункта «Проекты таунхаусов и блокированных домов» включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 5.

2. Проверьте работоспособность стиля. Обратите внимание на то, чтобы не изменился цвет фона и параметры других элементов меню. Измениться должен только вид гиперссылки. Что для этого нужно сделать?

а – не посещенные ссылки

б – ссылка при наведении на нее курсора

Рис. 5. Вид гиперссылки «Проекты таунхаусов и блокированных домов»

3. Для пунктов с названиями проектов на странице proekt_townhouse.html включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 6.

4. Проверьте работоспособность стиля. Обратите внимание на то, чтобы не изменились параметры ссылок на страницах proekt_D-152-1D.html, proekt_H-173-1P.html, proekt_R-189-1P.html. Что для этого нужно сделать?

а – не посещенная ссылка

б – ссылка при наведении на нее курсора

Рис. 6. Вид гиперссылки для названия проектов