НОУ ИНТУИТ | Введение в современные веб-технологии. Лекция 1: Обзор HTML и CSS

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет

|

Вам нравится? Нравится 74 студентам

| Поделиться |

Поддержать программу

Назначение языка 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?

Дальше >>

Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков?

ответить