| Как в ячейку <td> поместить таблицу? |
Преподаватель
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 01.09.2010 | Уровень: для всех | Доступ: свободно
Лекция 1:
Обзор HTML и CSS
Назначение языка CSS
Как было показано в предыдущих разделах, типичный HTML-документ представляет собой набор элементов, содержащих другие элементы либо текст. HTML-элементы могут иметь атрибуты - большинство атрибутов отвечают за такие визуальные характеристики элемента как цвет ( color ), отступ ( margin ), рамка ( border ), размеры ( width, height ) и т.п. Другая большая группа атрибутов определяют реакции элементов на такие события как щелчок мышью ( onclick ), нажатие клавиши ( onkeydown ) и т.д. Ряд атрибутов отвечают за информационное содержание, например, гиперссылка ( href ) или значение в элементе ввода ( value ). Таким образом, атрибуты элементов можно принципиально разделить на группы по критерию: "Что определяет атрибут?" - представление, поведение или содержание (существуют и другие, не попадающие в эти группы, атрибуты).
Нетрудно заметить, что применение атрибутов представления на практике обычно имеет массовый характер, в отличие от атрибутов поведения или содержания. Иными словами, имея в документе множество элементов "абзац" (p), веб-дизайнер наверняка будет применять одно и то же форматирование ко многим из них. То же можно сказать и об изображениях, и о таблицах, и об элементах форм - вообще, в основе хорошего дизайна лежит разумное единообразие.
Достичь единого представления для множества элементов посредством задания соответствующих значений атрибутов каждого из них в принципе возможно, но обременительно - как по объёму требуемых для этого усилий, так и по громоздкости результирующего кода. Так, например, при отнюдь не вычурном дизайне может потребоваться указать для абзацев цвет фона, гарнитуру, размер и цвет шрифта:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <p style="color: Blue; font-family: Verdana; font-size: 14pt; background: #B9FFCF;"> Несколько абзацев текста синего цвета, написанный шрифтом гарнитуры Verdana кеглем 14 пунктов на светло-зелёном фоне. </p> <p style="color: Blue; font-family: Verdana; font-size: 14pt; background: #B9FFCF; "> Стиль всех абзацев одинаковый. </p> <p style="color: Blue; font-family: Verdana; font-size: 14pt; background: #B9FFCF;"> Однако встроенные стили приходится повторять для каждого из них. </p> </body> </html>Листинг 1.1. Встроенные стили
Отступы, рамки, межсимвольное расстояние, фоновые изображения и многое другое также может быть включено в значение атрибута style (определяя таким образом встроенный стиль элемента p ), однако это весьма нерационально - по крайней мере, по одной причине: одни те же значения указываются многократно вместо того, чтобы сделать это единожды. Если бы HTML-документы строились таким образом, они представляли бы собой тяжёлую структуру из хорошо перемешанных определений содержания и представления.
Упражнение. Замените цвет текста (color) на чёрный (black) в каждом абзаце примера.
Поэтому для определения атрибутов представления HTML-элементов создан специальный язык - Cascading Style Sheets (каскадные таблицы стилей), позволяющий отделить представление от содержания HTML-документа и определить представление либо в отдельном файле, либо в отдельном элементе style в "шапке" HTML-документа. Рекомендация W3C, выпущенная в 1998 году, определяет CSS 2, который поддерживается всеми современными браузерами.
Как и любой хорошо спроектированный язык, CSS позволяет давать короткий исчерпывающий ответ на простые вопросы, регулярно возникающие перед веб-дизайнерами. Например, ответ на простой вопрос: "Какими должны быть рамки таблиц в документе?" можно сформулировать так:
table {
border: 1px solid black;
}Данное правило CSS означает: "таблицы везде (где не указано иное) должны иметь сплошную рамку чёрного цвета толщиной в 1 пиксел".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p {
color: Blue;
font-family: Verdana;
font-size: 14pt;
background: #B9FFCF;
}
</style>
</head>
<body>
<p>
Ещё несколько абзацев текста синего цвета, написанный шрифтом гарнитуры
Verdana кеглем 14 пунктов на светло-зелёном фоне.
</p>
<p>
На этот раз стиль абзацев определён при помощи правила CSS, применённого
к элементу p.
</p>
<p>
Поэтому все абзацы выглядят одинаково - при существенно меньшем количестве
работы по написанию и, главное, переделке стилей.</p>
</body>
</html>
Листинг
1.2.
Каскадный стиль
Упражнение. Замените цвет текста (color) на чёрный (black) в стиле абзаца. Сравните трудоёмкость этого изменения с предыдущим упражнением.
Краткие итоги
Для разметки веб-страниц создан язык HTML, стандартизованный консорциумом WWW. Разметка состоит из элементов с атрибутами; границами элементов являются открывающие и закрывающие тэги.
Для разметки произвольного содержимого (графики, формул и т.п.) консорциумом WWW разработан язык XML, и HTML приведён в соответствие с XML спецификацией XHTML, которая отличается большей строгостью и систематичностью правил.
Отделение представления документа от его содержимого достигается при помощи языка CSS, определяющего правила стилей для элементов разметки.
Вопросы
- Что означают аббревиатуры HTML и CSS?
- Что такое тэг, элемент, атрибут?
- Какое содержимое может иметь элемент?
- Какая последняя версия стандарта HTML? Кем и когда она создана?
- В чём отличие строгого и переходного ОТД?
- Какие элементы обязательно должны входить в документ HTML?
- В чём принципиальное отличие XHTML от HTML?
- Какие правила отличают XHTML от HTML?
- Для чего указывается пространство имён в XML-документе?
- В чём назначение CSS?
