Создание web-сайтов


Свойство position

Обычно элементы Web -страницы позиционируются относительно предыдущих элемен­тов в коде HTML . Мы будем рассматривать свойство position , которое позволяет вы­полнять позиционирование элемента независимо от предшествующего кода или, говоря другими словами, отдельно от потока документа. Спецификацией CSS1 предусмотрены следующие три значения для свойства position:

✓ static - отвечает размещению объектов в том порядке, в котором они встречаются в коде документа. Значение static используется по умолчанию;


Построчная запись стилевых свойств

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

Н 2 .blue{color:blue;font-family:arial; text-align:right }

лучше воспользоваться записью с построчными определениями свойств:

Н2.blue{color:blue;

font-family : arial ;

text-align : right}


CSS -файлы

В рассматриваемой технологии собственно описание стилей хранится в отдельном фай­ле, который имеет расширение .сss (для стилей CSS ) или . jss (для стилей JSSS - JavaScript Style Sheet , разработанных компанией Netscape ). Такой файл является обыч­ным ASCII -файлом (как и HTML -файл). Для обращения к файлу внешних стилей ему присваивается имя, например, firmstyle.сss .


Свойства списков

Листы стилей позволяют управлять отображением списков: задавать гарнитуру, размер

и цвет шрифта, выбирать вид маркеров (кружок, квадратик, рисунок и т.д.).

Мы рассмотрим свойства, предназначенные для форматирования маркеров списков:

list-style-type, list-style-image, list-style-position. Сокращенная

форма записи этих трех свойств имеет вид list-style.


Свойства шрифтов

Свойства, вводимые листами стилей, условно можно разбить на группы (например, группа свойств текста или группа свойств шрифтов). Мы ограничимся рассмотрением свойств, которые наиболее часто используются разработчиками Web -страниц.

В CSS предусмотрено множество свойств для управления шрифтами (задание гарниту­ры, размера, начертания и т.д.). Эти свойства можно назначать вместе со свойствами, определяющими цвет шрифта, фон, отступы, межсимвольное расстояние. Рассмотрим кратко только свойства шрифтов.


Значения свойств

Напомним, что в определении стиля указываются наименования свойств и их значения. Различают числовые и символьные значения свойств.

Числовые значения применяются для задания размеров, например, ширины и высоты блока, размера шрифта, толщины рамки, межстрочных интервалов и т.д. Значение выражается десятичным числом, за которым обычно следует размерность. Размер­ность записываются после числа без дополнительного пробела, например, 8 pt , 1 cm , 2.5 in , 130%. В случае отрицательного значения перед числом ставится знак минус (например -15рх).


Виды селекторов

В спецификациях CSS определено несколько видов селекторов, основные из них были использованы в примере предыдущего раздела. Рассмотрим возможные виды селекторов подробнее.

Селекторы типа

Селектор типа устанавливает соответствие между определением стиля и типом HTML - элементов, к которым этот стиль будет применен. Например , CSS - правило

Р { font-family : arial ; font-size:14pt}

использует селектор типа и задает шрифт для всех абзацных блоков HTML , а другое правило


CSS-правила

Согласно спецификации CSS стилевые свойства вводятся с помощью определения сти­ля, которое принято обозначать фигурными скобками. Например, назначение курсивного начертания текста выполняется с помощью определения

{ font - style:italic }

В одном определении стиля может записываться несколько свойств. Свойства перечис­ляются через точку с запятой, например:

{color : blue; font-family:Arial; text-align:right }

Согласно спецификации CSS назначение стиля тому или иному элементу HTML состоит в установлении связи:

Элемент {Определение_стиля}


Определение встроенного стиля (атрибут style)

Прежде, чем рассматривать использование CSS , остановимся на простейшем способе задания стиля элемента HTML через атрибут style. Вы можете в процессе разработки :траницы быстро изменить стиль элемента, добавив к тегу атрибут style с указанием требуемых свойств. Допустим, вы хотите, чтобы абзац был набран шрифтом 6 пункта. Для этого тег <Р> нужно записать следующим образом:

< Р style="font-size: 6pt ">


Листы стилей

Стандарты листов стилей для Web были разработаны консорциумом W 3 C в 1995-96 гг. и названы Cascading Style Sheets {каскадные листы стилей ), или сокращенно, CSS . При­сутствие слова «каскадные» в этом термине означает, что листы стилей позволяют соз­давать иерархию стилевых свойств, согласно которой локальный стиль отменяет гло­бальный стиль. Вообще, HTML -документ представляется как структура вложенных эле­ментов различного уровня, в которой стиль элемента более низкого уровня имеет при­оритет перед стилем внешнего элемента высокого уровня.