Каскадные таблицы стилей (CSS)
В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходится каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Все равно необходимо десять или сто десять раз вставлять один и тот же кусок HTML-кода, увеличивая размер файла.
CSS (Cascading Style Sheets - каскадные таблицы стилей) позволяют действовать другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик требуется один раз описать этот элемент и определить это описание как стиль. В дальнейшем можно просто указывать, что элемент, который требуется оформить соответствующим образом, должен принять свойства указанного стиля.
Существует три вида таблиц стилей: Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей. Внутренние таблицы стилей (Inline Style Sheets) мало чем отличаются от HTML тегов. Глобальные (Global Style Sheets) определяют стиль элементов во всем документе. Связанные (Linked Style Sheets) могут быть использованы для нескольких документов и хранятся во внешнем файле.
Расположение описания стилей в отдельном файле имеет смысл в случае, если планируется применять эти стили к большому количеству документов. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, а в коде документов, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <LINK> , располагающегося внутри тега <BODY>.
<LINK REL=STYLESHEET TYPE=”text/css” HREF = . . .>
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр - HREF - указывает на файл, который содержит описания стилей. Этот параметр должен содержать путь к файлу.
Во втором варианте описание стилей располагается внутри тега BODY, в теге <STYLE>
<STYLE type = ”text/css” > . . . </STYLE>
В этом случае можно использовать указанные стили для элементов, располагающихся в пределах документа. Параметр type = ”text/css” является обязательным и служит для указания броузеру использовать CSS.
И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента. Это делается с помощью параметра STYLE, используемого с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS - возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
Самый простой способ присвоения какому-либо элементу определенного стиля выглядит так:
НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;}
- НАЗВАНИЕ_ЭЛЕМЕНТА - имя HTMLтега (H1, P, TD, A и т. д.),
- параметры в фигурных скобках - список свойств элемента и присвоенных им значений.
Пример:
H1 {font-size: 30pt; color: blue;}
В этом примере всем заголовкам на странице, оформленным тегом H1, присваивается размер шрифта 30 пунктов и синий цвет.
CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно - для этого используется параметр CLASS = “имя класса” или идентификатор ID = “имя элемента”, присваивающиеся любому элементу документа.
Рассмотрим эти возможности подробнее.
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов документа (одинаковых или разных).
Примеры:
- описание стиля для класса A1
.A1 {font-weight: bold; text-align: center}
Все элементы класса A1 будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).
- параграфу и ячейке таблицы присвоен стиль класса A1
<P CLASS="A1">Текст параграфа</P>
<TD CLASS="A1">текст</TD>
Содержащийся в ячейке текст будет отображаться согласно описанию класса. Таким образом, можно присвоить описанный стиль любым текстовым элементам документа.
При написании названия классов необходимо соблюдать регистр символов, согласно тому, как назван класс в описании стиля.
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент в документе. Если элементов, которым необходимо присвоить такой стиль, несколько - это уже класс.
Язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Но этот стандарт в полном объеме поддерживают не все броузеры. Совместно с ДОМИНО рекомендуется использовать Microsoft Internet Explorer версии 5 и выше.
Далее рассмотрим некоторые элементы стиля.
Свойства шрифта
font-family - Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
P {font-family: Times New Roman, sans-serif;}
font-weight - Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder
B {font-weight: bolder;}
font-size - Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и в абсолютной величине (пункты, пикселы, сантиметры)
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}
Цвет элемента и цвет фона
Color - Определяет цвет элемента
I {color: yellow;}
background-color – Устанавливает цвет фона для элемента – именно для элемента, а не для документа.
<HTML>
<HEAD>
<TITLE>Пример использования CSS</TITLE>
<STYLE type=”text/css”>
H1 {font-size: 300%;}
</STYLE>
</HEAD>
<BODY bgcolor=white>
<center><BR>
<H1 style=”background-color: teal; color: white;”>Cascading</H1>
<H1 style= ”background-color: navy; color: yellow;”>Style</H1>
<H1 style=”background-color: gold; color: brown;”>Sheets</H1>
</BODY>
</HTML>
В этом примере в разделе <STYLE> всем элементам <Н1> был установлен размер 300 % от нормы. Затем каждому из элементов <H1> были присвоены собственные значения цвета фона и цвета символов.
Свойства текста
text-decoration - Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст
H4 {text-decoration: underline;}
A {text-decoration: none;}
text-align - Определяет выравнивание элемента.
P {text-align: justify}
H1 {text-align: center}
text-indent - Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
P {text-indent: 50pt;}
line-height - Управляет интервалами между строками текста.
P {line-height: 50 %}
Свойства границ
margin-left (margin-right, margin-top) - Устанавливают значения отступов вокруг элемента.
IMG { margin-right: 20pt}
P { margin-left: 2cm}
Единицы измерения
- px – Пикселы
- cm – Сантиметры
- mm – Миллиметры
- pt – Пункты (типогр.)
- % - Проценты
Шаблон отчета ‘Товары по группам по наименованию’
Рассмотрим подробнее пример шаблона отчета. Вот так шаблон выглядит целиком.
{{Заголовок}}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel=stylesheet href="file:{STYLE}" type="text/css">
</head>
<H1><I>Товары по группам по наименованию.</I></H1>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="TableHeader" >Код </td>
<td class="TableHeader" >Наименование </td>
<td class="TableHeader" >ЕИ </td>
<td class="TableHeader" >Остаток </td>
<td class="TableHeader" >Цена розничная </td>
</tr>
{{Группа}}
<tr class=TableLine>
<td align=left> {CODE} </td>
<td align=left> {NAME} </td>
<td align=right> </td>
<td align=right> </td>
<td align=right> </td>
</tr>
{{Подгруппа}}
<tr class=TableLine>
<td align=left> {CODE} </td>
<td align=left> {NAME} </td>
<td align=right> </td>
<td align=right> </td>
<td align=right> </td>
</tr>
{{Продукт}}
<tr class="TableBody">
<td align=left> {CODE} </td>
<td align=left> {NAME} </td>
<td align=left> {EI} </td>
<td align=right> {STOCK} </td>
<td align=right> {PRICE} </td>
</tr>
{{Итог по подгруппе}}
<tr>
<td colspan=5 class=Total align=left> ИТОГО Продуктов в подгруппе {NAME}: {KOLWO}</td>
</tr>
{{Итог по группе}}
<tr>
<td colspan=5 class=Total align=left> ИТОГО Продуктов в группе {NAME}: {KOLWO}</td>
</tr>
{{Итог}}
</table>
</body></html>
Разобьем текст на элементы.
{{Заголовок}}
Начало блока ‘Заголовок’.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel=stylesheet href="file:{STYLE}" type="text/css">
</head>
Начало документа. Подключение стиля, описание которого находится в отдельном файле. Имя файла задается в переменной отчета STYLE.
<H1><I>Товары по группам по наименованию.</I></H1>
Заголовок первого уровня, выделенный курсивом.
<table border="0" width="100%" cellspacing="0" cellpadding="0">
Задаются атрибуты таблицы. Таблица без рамки на все окно.
<tr>
<td class="TableHeader" >Код </td>
<td class="TableHeader" >Наименование </td>
<td class="TableHeader" >ЕИ </td>
<td class="TableHeader" >Остаток </td>
<td class="TableHeader" >Цена розничная </td>
</tr>
Первый ряд ячеек состоит из пяти элементов. Текст в каждой ячейке выделяется одинаковым стилем класса TableHeader.
{{Группа}}
Начало блока ‘Группа’.
<tr class=TableLine>
<td align=left> {CODE} </td>
<td align=left> {NAME} </td>
<td align=right> </td>
<td align=right> </td>
<td align=right> </td>
</tr>
Второй ряд ячеек отображается стилем класса TableLine. В первую ячейку заносится значение переменной отчета CODE, во вторую – значение переменной NAME. Текст в ячейках выравнивается влево.
{{Подгруппа}}
Начало блока ‘Подгруппа’.
<tr class=TableLine>
<td align=left> {CODE} </td>
<td align=left> {NAME} </td>
<td align=right> </td>
<td align=right> </td>
<td align=right> </td>
</tr>
Этот ряд ячеек заполняется аналогично ячейкам блока ‘Группа’.
{{Продукт}}
Начало блока ‘Продукт’.
<tr class="TableBody">
<td align=left> {CODE} </td>
<td align=left> {NAME} </td>
<td align=left> {EI} </td>
<td align=right> {STOCK} </td>
<td align=right> {PRICE} </td>
</tr>
Ряд ячеек блока ‘Продукт’ отображается стилем класса TableBody. В первую ячейку заносится значение переменной отчета CODE, во вторую – значение переменной NAME, в третью – значение переменной EI. Текст в этих ячейках выравнивается влево. Четвертая ячейка заполняется значением переменной STOCK, пятая - значением переменной PRICE. Поскольку эти переменные числового типа, то применяется выравнивание вправо.
{{Итог по подгруппе}}
Начало блока ‘Итог по подгруппе’.
<tr>
<td colspan=5 class=Total align=left> ИТОГО Продуктов в подгруппе {NAME}: {KOLWO}</td>
</tr>
Все ячейки объединяются в одну. В обобщенной ячейке текст отображается стилем класса Total и выравнивается влево. Высвечивается следующий текст: ‘ИТОГО Продуктов в подгруппе’, значение переменной NAME, далее следует двоеточие (:) и значение переменной KOLWO.
{{Итог по группе}}
<tr>
<td colspan=5 class=Total align=left> ИТОГО Продуктов в группе {NAME}: {KOLWO}</td>
</tr>
Аналогичное описание для блока ‘Итог по группе’.
{{Итог}}
Начало блока ‘Итог’.
</table>
</body></html>
Конец таблицы и тела документа.
Файл стилей stl_green.css
Рассмотрим подробнее один из файлов стилей, используемых в ДОМИНО.
body {font-family: Courier;
font-size: 12pt;
Background: url(green.bmp)
}
H1 {font-family: Arial;
font-size: 14pt;
font-weight: bold;
text-align: center
}
table.MainTable
{font-family: Courier;
table-border: 4px;
margin: none;
padding: 4px;
}
th
{text-align: center;
font-size: 12pt;
font-weight: bold;
color: rgb(255,255,255);
background-color: rgb(24,56,47);
border : 1px solid;
mso-number-format:"\@";
vertical-align : middle;
}
td.TableHeader
{text-align: center;
font-size: 12pt;
font-weight: bold;
color: rgb(255,255,255);
background-color: rgb(24,56,47);
border : 1px solid;
mso-number-format:"\@";
vertical-align : middle;
}
tr.TableBody
{font-size: 10pt;
font-family: Arial;
background-color: rgb(205,215,204);
mso-number-format:"\@";
}
.TableBodySumma
{font-size: 10pt;
font-family: Arial;
background-color: rgb(205,215,204);
mso-number-format:"\#\,\#\#0\.00";
white-space : nowrap;
}
tr.TableLine
{font-family: Arial;
font-size: 10pt;
font-weight: bold;
background-color: rgb(153,173,152);
}
td.Total
{font-family: Arial;
font-size: 10pt;
font-weight: bold;
background-color: rgb(153,173,152);
border-bottom: 1px solid
}
Разобьем текст на элементы.
body {font-family: Courier;
font-size: 12pt;
Background: url(green.bmp)
}
Для тела документа указан стиль со следующими характеристиками: шрифт Courier, размер шрифта 12 пунктов, для отображения фона применяется рисунок, находящийся в файле green.bmp.
H1 {font-family: Arial;
font-size: 14pt;
font-weight: bold;
text-align: center
}
Для заголовков первого уровня указан следующий стиль: жирный шрифт Arial, размер шрифта 14 пунктов, выравнивание текста по центру.
table.MainTable
{font-family: Courier;
table-border: 4px;
margin: none;
padding: 4px;
}
Для таблицы определен стиль класса MainTable. Шрифт Courier, ширина рамки вокруг таблицы (и ячеек) и промежуток между содержимым ячейки и ее рамкой по 4 пикселя, без отступов.
th
{text-align: center;
font-size: 12pt;
font-weight: bold;
color: rgb(255,255,255);
background-color: rgb(24,56,47);
border : 1px solid;
mso-number-format:"\@";
vertical-align : middle;
}
Для заголовка таблицы указаны следующие элементы стиля: выравнивание текста по центру, размер шрифта 12 пунктов, жирный шрифт, белым цветом на темно-зеленом фоне, вертикальное выравнивание по середине.
td.TableHeader
{text-align: center;
font-size: 12pt;
font-weight: bold;
color: rgb(255,255,255);
background-color: rgb(24,56,47);
border : 1px solid;
mso-number-format:"\@";
vertical-align : middle;
}
Описание класса TableHeader для ячейки совпадает с описанием стиля для заголовка таблицы.
tr.TableBody
{font-size: 10pt;
font-family: Arial;
background-color: rgb(205,215,204);
mso-number-format:"\@";
}
Описание класса TableBody для ряда ячеек: шрифт Arial, размер шрифта 10 пунктов, серо-зеленый цвет фона.
.TableBodySumma
{font-size: 10pt;
font-family: Arial;
background-color: rgb(205,215,204);
mso-number-format:"\#\,\#\#0\.00";
white-space : nowrap;
}
Описание класса TableBodySumma почти совпадает с описанием класса TableBody.
tr.TableLine
{font-family: Arial;
font-size: 10pt;
font-weight: bold;
background-color: rgb(153,173,152);
}
Описание класса TableLine для ряда ячеек: шрифт Arial, размер шрифта 10 пунктов, жирный шрифт, серо-зеленый цвет фона.
td.Total
{font-family: Arial;
font-size: 10pt;
font-weight: bold;
background-color: rgb(153,173,152);
border-bottom: 1px solid
}
Описание класса Total для ячейки почти совпадает с описанием класса TableLine.
Нет комментариев