Информационные системы ускорителей

Л/р №5 Технология CSS

CSS (Cascading Style Sheets - каскадные таблицы стилей) это технология, расширяющая возможности стилевого оформления Web-страниц, по сравнению со стандартными средствами HTML. Атрибуты дескрипторов HTML заменяются свойствами CSS, которые позволяют устанеовить цвет фона и текста, границы, шрифт и другие параметры практически для любого дескриптора CSS. Существуют так же специфические свойства CSS, применимые, например к таблицам и спискам. Примененение CSS настоятельно рекомендуется в стандарте HTML, начиная с версии 4.0. Ряд атрибутов дескрипторов HTML, таких как ALIGN, не рекомендуются к использованию, и соответствующие оформительские задачи средствами CSS (см. краткий перечень свойств CSS).

Inline-стиль (атрибут STYLE)

Для любого дескриптора HTML может быть указан атрибут STYLE, которому присваивается перечень свойств CSS, заключенный в кавычки. Для каждого свойства после двоеточия указывается одно или несколько значений, разделенных пробелами. Пары свойство: значение раделяются точкой с запятой. Inline-стиль рекомендуется использовать, если данное стилевое оформление используется только один раз и в одном единственном документе, правда сдедует учитывать, что не все браузеры корректно отображают применение inline-стиля.

Внедренная таблица стилей (дескриптор STYLE)

Внедренная таблица стилей применяется если заданный в ней стиль встречается только в одном HTML документе, но несколько раз. Для создания внедренной таблицы стилей используется дескриптор <STYLE>...</STYLE>, помещенный в заголовочном разделе HTML страницы <HEAD>...</HEAD>. Внутри контейнера <STYLE>...</STYLE> перечисляются ключевые слова стилизуемых дескрипторов. После каждого ключевого слова в фигурных скобках, через точку с запятой указываются пары свойство: значение. Стилизованный таким образом дескриптор называется селектором. Селекторы используются для форматирования документа в разделе <BODY>...</BODY>

Связывание и импортирование стилевой таблицы

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

Связывание

Импортирование

Селекторы класса

Предположим нам нужно два типа абзацев, каждый из которых имеет свое собственное стилевое оформление. В этом случае мы создаем два вида селекторов: P.first и P.second. Мы создаем два класса для одного дескриптора <P>: first и second (имена классов любые).

Задание

Для сайта, созданного в л/р №4 создайте стилевое оформление по технологии CSS.