Модульная лекция: мл 3-8

2.12. Создание таблицы стилей - css.

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

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

Рассмотрим пример.

H1 { color: blue;

font-size: 16pt; }

Здесь селектором является элемент H1, а определение, записанное в фигурных скобках, задает значения двух свойств заголовка первого уровня: цвет шрифта (свойство color:blue) - синий, и размер шрифта (свойство font-size) определяет в 16 пунктов (значение 16pt). В одном правиле можно задать несколько определений, разделенных символами точка с запятой ( ; ), как это показано в примере.

Созданная таким образом таблица стилей влияет на форматирование элемента определенного типа. Комбинация таких правил с другими таблицами стилей определяет окончательное представление документа при его просмотре в окне браузера.

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

Таблица стилей содержит множество стилевых свойств, которые задают параметры стилевого оформления документа. Свойство стилей определяется так:

имя_стиля : имя_свойства;

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

color : red ;	цвет красный,
font-size : 14pt ;	размер 14 пикселей
text-align: center ;	выравнивание текста по центру
font-style: italic ;	курсивный текст
font-famyly: arial, helvetica, sans-serif ;	наименоваия шрифтов
border-width: 1px ;	ширина линии рамки
background-color : yellow ;	фон желтый

Пробелы (кроме одного) между наименованиями свойств и его значением браузером игнорируются.

2.12. 1.Формирование листа стилей

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

{ font-style : italic; }

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

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

Назначение стиля тому или иному тэгу (элементу HTML) выполняется с помощью установки связи стиля с элементом:

имя_тэга { определение стиля }

Например элементы абзацев (тэг P) отображались шрифтом Ariel размером 14 pt, нужно записать следующее свойство:

P {font-size:Ariel; font-size:14pt; }

Другой вариант установки связи стиля с элементом HTML - это использование идентификатора (id), связывающего свойство стиля с элементом HTML.

id=”имя_свойства”

Здесь ”имя_свойства” , используемое в тэге.

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

#pict1 { width:150; height: 100; }

Здесь pict1 – идентификатор селектора связи.

Связь тэга использования рисунка с указанным свойством стиля осуществляется следующей записью тэга:

<img src=”имя_рисунка” class=”pict1”>

Элемент, к которому относится определяемый стиль, называется селектором. Селекторами могут быть как имена тэгов (p,h1,table и др.), так и идентификаторы. Если используется идентификатор, то внутри тэга связь со свойством устанавливается с помощью параметра class=”идентификатор”. Необходимо отметить, что CSS представляет собой язык описания информации о стиле форматирования элементов HTML-документа и является инородным по отношению к нему. Поэтому для размещения информации о стиле применяется специальный тэг-контейнер <style> </style>, который имеет следующий вид:

<style type=”text/css”> - начало описание листа стилей

набор стилевых свойств

</style>

Этот тэг-контейнер записывается внутри тэга.

Пример на использование стилей.

<html>

<head>

<title>Пример стилей></title>

<style type=”text/css”>

h1 { font-size:15pt;}

h2 { background-color;yellow;

font-size:25pt;

font-style:italic}

h3 {background-color:blue;

color:white}

#zelen {background-color:green;

color:white;

font-size:25pt;}

p.par {background-color:red;

font-size:20 pt;

color:white;}

</style>

</head>

<body>

<h1>Заголовок без стилей</h1>

<h2>Заголовок курсив,фон-желтый</h2>

<h3>Заголовок фон-синий,цвет-белый</h3>

<P class=par>Р-параграф,фон-красный,цвет-белый</p>

<div id=zelen>DIV - абзац ,фон- зеленый, цвет - белый </div>

</body> </html>

Результат выполнения кода показан ниже.

Рис. 2.2. Пример форматирования текста Таблицу стилей можно оформить в виде отдельного файла, который можно присоединить к HTML-документу с помощью тэга <link>, который располагается в внутри тэга <head>.