Практическая работа №8

«Каскадные таблицы стилей CSS (Cascading Style Sheets)»

Цель работы: изучение и применение Каскадных Таблиц Стилей (CSS) при оформлении (разметке) Web-страниц.

Теоретические сведения:

Вы создавали предыдущие страницы, так как их создавали раньше до появления каскадных таблиц стилей или CSS (Cascading Style Sheets).

Основные проблемы, с которыми сталкивались разработчики сайтов до появления CSS: Проблема позиционирования (разметка страниц). Хотя для этого стали использовать

таблицы (они не были для этого предназначены изначально), они не решили всех проблем. Невозможно осуществить следующее:

- Нельзя задать фиксированные размеры какого-нибудь блока. Например, текстовый блок будет разъезжаться при переполнении (даже если он в таблице).

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

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

Третья проблема заключалась в том, что все браузеры имеют индивидуальные настройки. Например, в браузере можно увеличить шрифт, что приведет к искажению всей страницы.

С помощью CSS эти проблемы можно решить.

Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования.Если понадобится изменить параметры однотипных элементов на сайте, придется просматриватьвсе страницы, чтобы найти и поменять теги.

Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют хранить цвет, размерытекста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.

Стили позволяют одним действием применить сразу всю группу атрибутов форматирования.С их помощью можно, например, изменить вид всех заголовков. Вместо форматированиязаголовка в три приема, когда сначала задается его размер, затем шрифт "Arial" и, наконец,выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу <H1>.Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей,достаточно изменить параметры стиля во всех документах, где он используется, и вид текстапоменяется автоматически.

Другое преимущество CSS состоит в том, что стили предлагают намного большевозможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться вовнешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходитьчуть быстрее.