- •1.1. Представление информации в сети Интернет
- •1.2. Структура html-документа
- •1.3. Форматирование html-документа
- •1.3.1. Настройка внешнего вида страницы
- •1.3.2. Форматирование символов в html-документе
- •1.4. Форматирование абзацев в html-документе
- •Лабораторная работа №2 «Графика в html-документе»
- •2.1. Графические изображения для web
- •2.2. Вставка рисунков в html-документ
- •2.3. Горизонтальная линия
- •Лабораторная работа №3 «Гиперссылки в html-документе»
- •3.1. Гиперссылки в html-документе
- •3.2. Создание гиперссылки
- •Лабораторная работа №4 «Таблицы в html-документе»
- •4.1. Направления использования таблиц в html
- •4.2. Создание таблицы
- •Лабораторная работа №5 «Формы в html-документе»
- •5.1. Понятие формы
- •5.2. Создание формы
- •Лабораторная работа №6 «Каскадные таблицы стилей»
- •6.1. Назначение каскадных таблиц стилей
- •6.2. Способы задания css
- •6.3. Классы стилей
- •6.4. Способы задания классов стилей
- •Лабораторная работа №7 «Позиционирование элементов»
- •7.1. Позиционирование
- •7.2. Слои
Лабораторная работа №6 «Каскадные таблицы стилей»
6.1. Назначение каскадных таблиц стилей
Используя тот или иной тег из стандартного набора, мы задаем стандартный (определенный по умолчанию) внешний вид абзацу, символам, рисунку и т. д. Если же мы хотим получить иной вид, то нужно использовать дополнительные теги.
Например, чтобы создать абзац с полужирным начертанием, красного цвета и с подчеркиванием, нужно использовать 3 тега - <FONT>, <B> и <U>:
<P> <font color="red"> <B> <U> Абзац с красным полужирным подчеркнутым шрифтом </U></B></FONT></P>
Если подобный стиль нужно использовать не один, не два, а десятки раз, то использование такого набора тегов становится нерациональным и неудобным для разработчика.
Решается такая проблема с помощью CSS (Cascading Style Sheets – каскадные таблицы стилей). CSS позволяют задать шаблон стиля и применять его в дальнейшем.
Использование каскадных таблиц стилей имеют ряд преимуществ:
CSS предоставляет гораздо больший объем параметров форматирования объектов HTML2.
Используя CSS, зачастую можно легко сократить размер исходного HTML-документа.
CSS позволяет «настраивать» такие объекты HTML, как таблицы, списки, гиперссылки и т.д.
6.2. Способы задания css
Существует три способа задания стилей, применение каждого из которых обусловлено конкретной задачей.
1-й способ: строчный (включение в теговые конструкции) – стили вставляются прямо в описание тегов HTML с помощью специального параметра style.
<ТЕГ style="описание стиля">текст</ТЕГ>
Этот способ обычно используется, если стиль нужно применить единожды к конкретному тегу и требуется использование параметров, доступных только через CSS.
2-й способ: вложенный (внедрение в документ) – стили описываются все в одном месте между тегами <STYLE> и </STYLE> (обычно этот раздел размещается в разделе <HEAD> </HEAD>).
<STYLE>
тег1 {описание стиля}
тег2 {описание стиля}
...
тег{описание стиля}
</STYLE>
Используя этот способ, мы переназначаем форматирование тегов. Этот способ обычно применяется, если стиль тега в документе используется несколько раз. Тогда, описав стиль один раз в разделе <STYLE>, при указании тега в тексте уже не нужно стиль описывать повторно.
3-й способ: внешний (ссылка на внешний файл) – отличается от предыдущего тем, что описания стилей помещаются не в разделе <STYLE>, а вносятся в отдельный тестовый файл с расширением *.css (например, style.css). Если мы хотим использовать описанные стили на страничке, мы должны включить ссылку на этот файл в наш HTML-документ между тегами <HEAD> и </HEAD> с помощью тега <LINK>.
<LINK rel=stylesheet type=text/css href=”имя файла с описанными стилями”>
Этот способ применяется, если описанные стили используются не в одном документе, а сразу в нескольких – тогда вставляется ссылка на файл с описаниями стилей в каждый HTML-документ.
6.3. Классы стилей
Итак, используя шаблоны стилей, можно настраивать теги по своему усмотрению. Благодаря стилям тег приобретает новые параметры форматирования.
Но иногда требуется использование нескольких вариантов отображения одного и того же элемента в HTML-документе. Например, несколько абзацев (тег <P>) имеют вид, отличающийся от других.
Спецификация HTML позволяет использовать для одного и того же элемента несколько стилевых правил, интерпретируемых браузером последовательно, каскадом. Для этого используются классы стилей (вложенные каскады). Каждое новое отображение тега представляется новым классом с уникальным именем, которое начинается с точки:
P.zagolovok {text-align: center; font-weight: bold; font-size:16px;},
В данном примере задан класс zagolovok, который описывает набор параметров форматирования тега <P>: выравнивание, полужирное начертание, размер шрифта 16 px.
Если задается несколько классов одного тега, принадлежность класса определенному тегу определяется в первом описании, а в последующих описаниях тега можно не указывать. Например,
P {text-align: center; font-weight: bold; font-size:16px;}
.text {text-align: left; font-weight: normal; font-size: 12px;}
.right {text-align:right}