Дисциплина «Web-дизайн». Основы HTML

Тема 5: «использование иерархических стилевых спецификаций (css)»

Цель: изучить основные команды, используемые при создании CSS Задание: выполнить 15 упражнений, приведенные в тексте лабораторной работы; отчитаться перед преподавателем о проделанной работе

1. Применение css

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

В Web существует очень полезная технология – иерархические стилевые спецификации – CSS. Использование CSS позволяет разработчикам отделить описание особенностей оформления Web-страниц от определения структуры документа, то есть восстановить смысл и значение HTML.

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

CSS - это язык, который содержит набор свойств для определения внешнего вида документа.

Средства CSS можно разделить на категории:

1. Средства управления позиционированием;

2. Средства для управления шрифтами;

3. Средства для управления фоновым цветом и изображением;

4. Средства выравнивания текста.

Стилевые спецификации не заменяют языка разметки, они являются самостоятельной технологией, которая применяется непосредственно к тегу HTML. Чтобы назначить элементу HTML стилевое описание, необходимо в стилевой спецификации указать сам элемент и записать после него в фигурных скобках всю информацию о его форматировании: имя элемента {стилевые_спецификации}.

Например, необходимо задать правило форматирования элемента <H1> так, чтобы использовался шрифт гарнитуры Arial, размером 14 пунктов. Стилевая спецификация выглядит следующим образом:

h1 {font-family:”Arial”; font-size:”14pt”;}

Итак, стилевые спецификации являются просто набором правил, которые включают в себя селектор (имя HTML-элемента, атрибута CLASS или ID), связанный со стилевым свойством (например, font-family), после которого следует двоеточие и допустимое значение (или значения) этого свойства. В стилевую спецификацию может быть включено несколько правил, разделенных точкой с запятой.

Задание 1

Откройте файл справочника «Sprav_CSS.doc». Найдите разделы «Свойства шрифта» и раздел «Свойства текста». Ознакомьтесь со стилевыми свойствами шрифта и текста. Выясните, к каким HTML-элементам можно применить эти свойства.

Существует три основных вида стилевых спецификаций (CSS):

• Вы можете связать документ с внешней стилевой спецификацией.

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

• И можно определить внутренний стиль для отдельного HTML-элемента.