Стили форматирования можно применять с помощью атрибутов, кодируемых в тегах XHTML. Разные теги имеют разные атрибуты, которые определяются их спецификой и управляют внешним видом контента страницы. В качестве простого примера можно взять горизонтальную линейку, которая выводится через всю страницу, когда на странице появляется тег <hr/>. Этот тег создает линию, которую часто используют для разделения контента на странице.
-------------------------------------------------------------------
Приведенная выше линейка является используемым по умолчанию выводом тега. Она может, однако, иметь другое представление при задании в теге дополнительных атрибутов. Атрибут size управляет толщиной линейки; атрибут width задает ее длину; атрибут color задает цвет, а атрибут align определяет ее горизонтальное положение на линии (слева на странице, справа на странице или по центру страницы).
Атрибуты имеют общую форму кодирования: атрибут="значение" - название атрибута и задаваемое в кавычках его значение. Ниже, например, тег <hr/> закодирован с четырьмя атрибутами управления характеристиками вывода, как показано на рисунке 3.1.
<hr size="10" width="50%" color="red" align="center"/>
(рис 3.1) Красная горизонтальная линейка в 50% ширины страницы WebЛинейка имеет толщину 10 пикселей ( size="10" ), 50% ширины окна браузера ( width="50%" ), красный цвет ( color="red" ) и выровнена горизонтально по центру страницы ( align="center" ). Таким образом, значения атрибутов задают характеристики оформления для вывода линейки отлично от ее обычного, используемого по умолчанию оформления. В ходе изложения учебника будет представлены различные атрибуты, связанные с различными тегами в качестве параметров оформления этих тегов.
Однако стандарты XHTML исключают большинство атрибутов оформления тегов. Это означает, что атрибуты все еще распознаются современными браузерами, но рекомендуется избегать их применения в пользу других методов оформления. Для оформления элементов XHTML рекомендуется использовать вместо атрибутов каскадные таблицы стилей (CSS).
Предпочтительным способом оформления элементов страницы является использование каскадных таблиц стилей (CSS). Таблица стилей - это набор характеристик стилей оформления и соответствующих значений оформления, описывающих внешний вид элементов XHTML, к которым они применяются. Существует три способа создания таблиц стилей. Линейная ( in-line ) таблица стилей появляется внутри тега, к которому применяются ее объявления стилей; встроенная ( embedded ) таблица стилей является отдельным разделом стилей страницы Web, которая применяет свои стили ко всем определяемым на странице тегам; внешняя ( linked ) таблица стилей является внешним документом, содержащим задания стилей, которые применимы ко всем страницам, которые с ней соединены.
Линейная таблица стилей кодируется внутри тега для применения оформления к этому конкретному тегу. Она использует общий формат, показанный в листинге 3.2.
<tag style="property:value [; property:value] ...">
Одна или несколько пар property:value задают настройки стиля оформления в атрибуте style тега. Несколько настроек свойств стиля разделяются друг от друга с помощью точки с запятой, для удобства чтения между настройками можно использовать пробелы.
Свойства и значения, которые могут кодироваться для тега, зависят в большой степени от конкретного оформляемого тега. Стилевые настройки для горизонтальной линейки, например, могут включать свойства height, width, color, и text-align, идентичные по результату исключенным атрибутам size, width, color, и align, которые они заменяют. Эти свойства кодируются как линейная таблица стилей, что показано на рисунке 3.2. Атрибут style появляется внутри тега <hr/> и определяет набор свойств и значений, применяемых к тегу, когда он выводится в браузере.
<hr style="height:10px; width:50%; color:red; text-align:center"/>
(рис 3.2) Горизонтальная линейка, использующая линейную таблицу стилейПри использовании в качестве линейных таблиц стилей свойства и значения относятся только к тому тегу, в котором они определены. Это означает, например, что если на странице имеется несколько тегов <hr/>, то каждый должен будет включать одну и ту же линейную таблицу стилей, чтобы они были оформлены одним стилем. Это может не создавать проблем для нескольких тегов; однако для множества тегов это может быть утомительно и приводить к ошибкам при кодировании одной и той же таблицы стилей во всех отдельных тегах. Поэтому необходим способ объявления настроек стилей один раз и последующего совместного использования этих настроек множеством тегов.
Чтобы избежать дублирования кодирования линейных таблиц стилей, можно применять встроенную таблицу стилей. Встроенная таблица стилей определяется в теге <style type="text/css">, который обычно располагается в разделе страницы <head>. Внутри этого раздела <style> находится список имен тегов, называемых селекторами, которым присваивают объявления стилей (свойства и значения). Когда эти объявления сделаны, они автоматически применяются к определенным тегам, если они появляются на странице. Общая форма раздела <style> документа показана в листинге 3.3.
<style type="text/css">
selector {property:value [; property:value] ...}
...
</style>
Селектор является именем тега (без охватывающих символов " < " и " > "). Свойства и значения стиля тега представлены в виде списка объявлений стиля, разделенном точками с запятой и помещенном внутри пары фигурных скобок " { } ". Например, следующий код определяет объявления стиля для тега <hr/>, задавая такие же параметры стиля, как и предыдущая линейная таблица стилей.
<head>
<title>Пример встроенной таблицы стилей</title>
<style type="text/css">
hr {height:10px; width:50%; color:red; text-align:center}
</style>
</head>
Селектор hr связан с четырьмя объявлениями property:value стиля горизонтальной линейки. Когда эти стили определены во встроенной таблице стилей, они автоматически применяются, если браузер встречает в документе тег <hr/>. Нет необходимости кодировать отдельные линейные таблицы стилей в каждом теге <hr/>. Тег сам несет в себе оформление стиля, описанное во встроенной таблице стилей. Хотя показанная выше встроенная таблица стилей содержит только один селектор для тега <hr/>, на самом деле она может содержать любое число записей, в зависимости от того, сколько различных тегов должно быть оформлено. Пример также записан на одной строке. Многие авторы страниц Web предпочитают кодировать настройки property:value на отдельных строчках, как показано на листинге 3.5, чтобы облегчить чтение и редактирование.
<style type="text/css">
hr {height:10px;
width:50%;
color:red;
text-align:center}
</style>
Форма записи таблицы стилей не влияет на результат оформления. Подобно коду XHTML код таблицы стилей имеет свободный формат, его можно организовать любым образом, если только код и пунктуация будут оставаться правильными.
Отдавать ли предпочтение встроенной таблице стилей или нескольким линейным таблицам стилей, является вопросом эффективности кодирования и личных предпочтений. Обычно если стиль применяется к нескольким случаям использования тега, то использование встроенной таблицы стилей ведет к сокращению объема кода и меньшему количеству ошибок кодирования, так как стиль объявляется один раз для совместного использования всеми заданными тегами. С другой стороны, если стиль применяется только один раз к одному тегу, то удобнее закодировать линейную таблицу стилей для этого одного конкретного тега. Далее будут рассмотрены различные стратегии, применяемые в различных ситуациях оформления.
Если сайт Web имеет множество страниц, то третий вариант таблиц стилей будет, вероятно, лучшим решением. Он позволяет применять одни стили оформления ко всем страницам, не требуя копирования линейных или встроенных таблиц стилей на каждую страницу.
Внешняя таблица стилей является отдельным документом, содержащим настройки property:value в том же формате, что и встроенная таблица стилей. Единственное различие состоит в том, что этот документ не содержит вокруг записей тегов <style>. Например, документ внешней таблицы стилей, содержащий описанные выше спецификации оформления тега <hr/>, включает в себя записи, показанные в листинге 3.6.
Stylesheet.css (документ)
hr {height:10px;
width:50%;
color:red;
text-align:center}
Этот отдельный документ создается с помощью текстового редактора и сохраняется как стандартный текстовый файл, обычно с расширением файла .css, чтобы идентифицировать его как документ таблицы стилей. Широко распространено сохранение этого документа таблицы стилей с именем Stylesheet.css в том же каталоге, где находятся страницы Web, к которым она применяется.
Документ внешней присоединяемой таблицы стилей содержит настройки стиля оформления, которые применимы ко всем страницам сайта Web. Поэтому все страницы, которые используют эту таблицу стилей, должны с ней "соединяться", чтобы сделать стили доступными для этих страниц. Соединение происходит с помощью тега <link>, кодируемого в разделе <head> страницы. Общая форма тега <link> показана в листинге 3.7.
<link href="url" type="text/css" rel="stylesheet" />
Атрибут href ( type определяет тип документа, с которым делается соединение (всегда "text/css" ). Атрибут rel определяет взаимоотношения внешнего документа с данной страницей (всегда "stylesheet" ).
Если имеется документ таблицы стилей с именем Stylesheet.css, который расположен в той же папке, что и страница Web, то страница Web соединяется с этим документом с помощью следующего кода XHTML.
<head> <title>Пример присоединяемой таблицы стилей</title> <link href="Stylesheet.css" type="text/css" rel="stylesheet"/> </head>
Теперь страница Web имеет все доступные для нее настройки стиля оформления, заданные в документе Stylesheet.css. Эта присоединенная таблица стилей может служить для замены встроенных или линейных таблиц стилей, которые в противном случае должны были бы появиться на отдельных страницах Web. Как и в случае встроенных таблиц стилей, все теги, определенные селекторами в присоединенной таблице стилей, несут в себе объявленные стили оформления.
Нет ничего необычного в том, чтобы использовать все три типа таблиц стилей для одной страницы Web. Внешняя таблица будет содержать стили, которые являются общими для всех страниц Web; встроенная таблица будет включать в себя стили, которые относятся к определенной странице; линейные таблицы будут применяться к отдельным тегам, которым не требуется общее оформление. Браузер использует это множество таблиц стилей следующим образом.
Первое: все внешние таблицы стилей применяются на странице для заданных селекторов тегов.
Второе: применяются все встроенные таблицы стилей. Если одинаковые селекторы тегов присутствуют во внешних и встроенных таблицах стилей, то встроенные стили переопределяют или расширяют внешние стили.
Третье: применяются все линейные таблицы стилей. Если эти настройки относятся к тем же тегам, которые присутствуют во внешних или встроенных таблицах стилей, то линейные стили переопределяют или расширяют присоединенные и встроенные стили.
Общий действующий принцип состоит в том, что любое определение стиля более нижнего уровня имеет преимущество над эквивалентным значением стиля более высокого уровня. Линейные таблицы стилей имеют преимущество над встроенными таблицами стилей, которые имеют преимущество над внешними таблицами стилей.
Предположим, например, что присоединенная таблица стилей содержит следующее объявление стиля для горизонтальных линеек.
hr {height:1px;
width:50%;
color:red;
text-align:center}
Все страницы, которые соединяются с этой таблицей стилей, выводят горизонтальные линейки этим стилем. Предположим теперь, что одна определенная страница должна иметь другое оформление линеек, скажем, голубым цветом, а не красным. Поэтому на этой единственной странице кодируется встроенная таблица стилей, чтобы переопределить объявление цвета во внешней таблице стилей.
<style type="text/css">
hr {color:blue}
</style>
Все горизонтальные линейки на этой странице будут синими; однако они сохраняют свойства height, width, и text-align внешней таблицы стилей. Теги на этой странице наследуют свойства внешней таблицы стилей, если не модифицируются встроенной таблицей стилей.
Предположим дальше, что одна определенная горизонтальная линейка на этой странице должна быть зеленого цвета и проходить по всей ширине страницы. Поэтому для этой конкретной линейки добавляется линейная таблица стилей.
<hr style="color:green; width:100%"/>
Зеленый цвет стиля переопределяет синий, который наследуется из встроенной таблицы стилей; ширина в 100% переопределяет ширину в 50%, унаследованную из внешней таблицы стилей. Однако, эта конкретная линейка сохраняет толщину в 1 пиксель и выравнивание по центру, унаследованные из внешней таблицы стилей.
Именно наследование стилей делает таблицы стилей "каскадными". Внешние стили наследуются, или каскадно распространяются, на все страницы Web, которые с ними соединены; встроенные стили наследуются, или каскадно распространяются, на отдельные теги, содержащие линейные таблицы стилей.
В этом учебнике свойства и значения стилей иллюстрируются в виде линейных таблиц стилей, с обсуждением того, как их можно перенести во встроенные или внешние таблицы стилей для расширения приложения. К окончанию курса читатель не будет иметь никаких проблем с использованием таблиц стилей и способами их использования при проектирования страниц Web любой степени сложности.
Когда текст выводится в окне браузера, он распространяется от одного края окна до другого с полями примерно в 6 мм (четверть дюйма), окружающими текст на странице. Можно было видеть эти поля на созданных ранее страницах Web. Они показаны на простой странице Web с одним параграфом на рисунке 3.3.
(рис 3.3) Страница Web с полями по умолчаниюВ некоторых случаях эти настройки полей работают вполне успешно. Однако, если на странице находится много текста, то эти узкие поля создают перегруженный вид, что затрудняет чтение страницы. Может быстро надоесть монотонное перемещение по строкам текста, которые тянутся от одного края окна до другого. Страница Web станет более привлекательной, более удобочитаемой и более приятной для глаз, если вокруг текста появится больше свободного пространства. Однако в других случаях может понадобиться сократить или удалить используемые по умолчанию настройки полей, чтобы некоторые элементы страницы выводились еще ближе к границам окна.
Вспомните, что тег <body> ограничивает все содержимое страницы, которое выводится в окне браузера. Этот тег можно использовать также для управления полями вокруг границ страницы. Для этого необходимо применить к тегу <body> таблицу стилей, которая определяет поля страницы.
Существует пять свойств стиля оформления, которые можно применять для задания полей вокруг элементов страницы. Эти свойства определяют величину свободного пространства между внешними границами элемента и любым окружающим содержимым. При использовании в теге <body> они задают величину свободного пространства вокруг
| Свойство | Значения |
|---|---|
margin margin-top margin-right margin-bottom margin-left |
npx n% auto |
Свойство margin задает одну и ту же ширину поля со всех сторон элемента; свойства margin-right, auto заставляет поля вернуться к их значению ширины по умолчанию при переопределении предыдущих настроек полей.
Свойства полей, как и различные другие свойства стиля оформления, используют значения размера. В большинстве случаев требуется определять размер в пикселях ( px ) или в процентах ( % ) от ширины окна браузера. Это два наиболее распространенных способа измерения расстояния на экране компьютера. Если тип измерения не определен, то предполагаются пиксели.
Поля, окружающие контент страницы Web, можно задать, применяя таблицу стилей к тегу <body>. Например, следующая линейная таблица стилей задает 25-пиксельное поле вокруг всей страницы, используя свойство margin и задавая пробел в 25 пикселей между содержимым страницы и границами окна браузера.
<body style="margin:25px"> <p>Эта страница Web выводит параграф текста с окружающими страницу полями величиной 25 пикселей. Эти поля создаются линейной таблицей стилей, заданной для тела документа. Строки текста лежат в этих границах и переносятся по словам. </p> </body>
Это оформление создает страницу, показанную на рисунке 3.4. Текстовый параграф кажется менее перегруженным, чем на рисунке 3.3, что делает его более привлекательным и облегчает чтение текста, сокращая длину строк.
(рис 3.4) Страница Web с 25-пиксельными полями
В приведенном выше примере тег <body> включает линейную таблицу стилей для задания полей этой конкретной страницы. Вместо этого можно написать встроенную таблицу стилей для получения такого же результата. Следующая запись <style> задает селектор body со свойством стиля оформления margin и значением для этого тега.
<head>
<title>Поля страницы</title>
<style type="text/css">
body {margin:25px}
</style>
</head>
<body>
<p>Эта страница Web выводит параграф текста с окружающими страницу
полями величиной 25 пикселей. Эти поля создаются линейной таблицей
стилей, заданной для тела документа. Строки текста лежат в этих границах и
переносятся по словам.</p>
</body>
Тег <body> через селектор body получает 25-пиксельные поля, не применяя код таблицы стилей в самом теге. Также при использовании встроенной таблицы стилей настройки стиля оформления изолируются в отдельном разделе страницы, что облегчает поиск этих настроек и изменение в случае необходимости. Фактически, первым желанием всегда должно быть создание встроенной таблицы стилей, согласованной с линейными или внешними таблицами стилей.
Если сайт Web имеет много страниц и все страницы должны использовать одинаковые поля, то необходимо применять внешнюю таблицу стилей. Поместите оформление body в этот отдельный документ и соедините его со всеми страницами, которые должны использовать это оформление.
Следующий код показывает документ Stylesheet.css, в котором определено оформление полей для тега <body>. Этот документ находится в том же каталоге Web, что и страницы, где этот стиль оформления применяются.
Stylesheet.css
body {margin:25px}
Когда эта внешняя таблица стилей будет создана, любая страница Web может использовать ее настройки полей, соединяясь с ней. Код для подключения этой внешней таблицы стилей показан ниже.
<head> <title>Любая страница</title> <link href="Stylesheet.css" type="text/css" rel="stylesheet"/> </head>
В примерах выше свойство margin применяется для задания полей одинаковой ширины для всех четырех сторон страницы. Вместо этого можно выборочно задавать поля различной ширины для каждой из сторон, используя свойства индивидуальных полей. В следующей встроенной таблице стилей для страницы задаются поля различной ширины с разных сторон.
<style type="text/css">
body {margin-top:50px; margin-left:30px; margin-right:30px;
margin-bottom:50px}
</style>
Отметим, что эти свойства можно записывать в любом порядке. Не забывайте только, что пара :), а отдельные объявления разделяются точкой с запятой ( ; ).
Существуют атрибуты полей, которые не распознаются в XHTML, но могут использоваться для задания полей страницы. Эти исключенные атрибуты тега <body> перечислены ниже.
leftmargin="n" rightmargin=""n" topmargin="n" bottommargin="n" marginwidth="n" marginheight="n"
Величину полей задает значение ( n ), представляющее число пикселей пустого пространства между содержимым страницы и границами окна браузера. Значения задают индивидуально для каждой из границ ( leftmargin, rightmargin, topmargin, bottonmargin ), для двух боковых сторон ( marginwidth ) или для верхнего и нижнего полей ( marginheight ) страницы, например:
<body leftmargin="30" rightmargin="30" topmargin="30" bottommargin="30">
или
<body marginwidth="30" marginheight="30">
Хотя эти исключенные атрибуты тега <body> все еще работают в современных браузерах - и их, наверняка, можно встретить на существующих страницах Web - не следует применять их при создании новых страниц. Вместо этого используйте свойства оформления полей, задействуя внешние, встроенные или линейные таблицы стиля.
Стили полей применимы для многих тегов XHTML, а не только для тега <body>. Фактически любой контейнерный тег может использовать задание полей. Тег <p> является таким тегом. Объявляя для этого тега свойства стиля полей margin, margin-right,
Следующий код выводит три параграфа, средний из которых использует линейную таблицу стилей для задания левого и правого полей шириной 40 пикселей.
<p>Здесь три параграфа. Первый параграф форматирован с помощью
стандартного тега параграфа с используемыми по умолчанию настройками
стиля.</p>
<p style="margin-left:40px; margin-right:40px">Второй параграф форматирован с
настройкой стиля "margin-left:40px; margin-right:40px" для задания левого
и правого полей для смещения параграфа относительно окружающих
параграфов. Это оформление создает параграф, похожий по результату на
использование тега blockquote.</p>
<p>Третий параграф кодируется так же, как и первый. Он заключен в
стандартный тег параграфа с используемым по умолчанию оформлением.</p>
Вывод в браузере этого кода показан на рисунке 3.5.
(рис 3.5) Задание полей параграфаВ этом примере применяется линейная таблица стилей, так как настройки полей применяют только для одного параграфа. Нет необходимости определять встроенную таблицу стилей или создавать внешнюю таблицу стилей, так как это оформление используется только одним параграфом.
Ранее упоминалось, что можно использовать несколько тегов <br/> для увеличения вертикального пробела на странице. Каждый тег <br/>, кроме тега в конце строки текста, создает ниже на странице дополнительную пустую строку.
Тот же самый результат можно получить, задавая настройки стиля <br/>. Результат вывода в браузере приведен на рисунке 3.6.
<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду ее преследовала.<p>
<p style="margin-left:40px; margin-right:40px;
margin-top:50px; margin-bottom:50px">
Была у Мери овечка,<br/>
Была ее шерсть снежно-белой;<br/>
И куда бы ни шла Мери,<br/>
Овечка бежала за нею. <br/>
</p>
<p>У Мери ужасная жизнь. Очень трудно сходить на свидание, когда вокруг
тебя все время скачет овечка.</p>
(рис 3.6) Использование настройки полей для увеличения вертикального интервалаМожно применять либо несколько тегов <br/>, либо увеличенные настройки полей для создания вертикальных интервалов. Однако при использовании
При изучении других тегов в этом учебнике помните, что они могут использовать свойства полей для изменения свободного пространства между их содержимым и окружающими элементами на странице. Настройка полей является одним из основных методов для организации содержимого на странице Web.
Элементы на странице Web обычно располагаются у левого края страницы или на левых границах, созданных свойствами стиля оформления margin или
Свойство стиля text-align позволяет осуществлять выравнивание элементов страницы left (слева), center (по центру), right (справа) или justify (по ширине). Значения свойства показаны в таблице 3.2.
| Свойство | Значения |
|---|---|
text-align |
left center right justify |
Свойство стиля text-align является заменой исключенного атрибута align, использовавшегося ранее для тегов <p>, <, и <hr/>. С данного момента все горизонтальное выравнивание должно делаться с помощью свойства text-align.
Тег <p> окружает блок текста, который также располагает свои строки у левого края страницы или у левой границы, созданной заданием стиля оформления параграфа margin или text-align, чтобы изменить это используемое по умолчанию выравнивание слева.
Следующий код создает четыре параграфа, каждый с линейной таблицей стилей для использования различного выравнивания текста. Браузер выводит эти параграфы, как показано на рисунке 3.7.
<p style="text-align:left"> Этот параграф форматируется с помощью задания стиля style="text-align:left". Каждая строка текста располагается у левого края страницы и переносится на новую строку у правого края страницы. Это используемый по умолчанию стиль выравнивания параграфа.</p> <p style="text-align:center"> Этот параграф форматируется с помощью задания стиля style="text- align:center". Каждая строка текста с переносами выводится выровненной по центру между левым и правым полем страницы.</p> <p style="text-align:right"> Этот параграф форматируется с помощью задания стиля style="text-align:right". Каждая строка текста с переносами выравнивается по правому полю страницы. </p> <p style="text-align:justify"> Этот параграф форматируется с помощью задания стиля style="text- align:justify". Все строки текста с переносами, за исключением последней строки, выравниваются по ширине от левого до правого поля. Последняя строка, так как она недостаточно длинная для переноса, не выравнивается по ширине между полями страницы. </p>
(рис 3.7) Вывод параграфов с разным выравниванием в окне браузераВ этом примере все четыре параграфа имели различное оформление. Поэтому теги <p> используют линейные таблицы стилей, а не встроенную или внешнюю таблицу стилей, которые создавали бы общее оформление для всех параграфов. Помните, однако, что выравнивание текста, которого должны придерживаться все параграфы на странице, должно быть задано только один раз во встроенной или внешней таблице стилей. Если принято решение, например, что все параграфы на странице будут выравниваться строки по ширине, то подходящим решением будет встроенное объявление стиля для селектора p.
<style type="text/css">
p {text-align:justify}
</style>
Если в дальнейшем будет решено, что все параграфы на всех страницах сайта Web будут выровнены по ширине, то такую встроенную таблицу стилей можно преобразовать во внешнюю таблицу стилей для общего использования всеми страницами.
Стили выравнивания текста можно применять к тегам < для размещения заголовков на странице слева, в центре или справа. В следующем примере свойство text-align задается для заголовка <h2> в линейной таблице стилей для выравнивания его на странице горизонтально по центру. Это свойство стиля оформления заменяет старый атрибут align="center", использовавшийся ранее для выравнивания заголовков.
<h2 style="text-align:center">Центрированный заголовок</h2>
Как правило, различные заголовки, встречающиеся на одной странице Web, имеют общие стили, чтобы обеспечить общий вид страницы. Поэтому обычно выравнивание заголовков включают во встроенную таблицу стилей для общего использования всеми подобными заголовками. Следующий код задает стили выравнивания для трех размеров заголовков, которые встречаются на странице. Кроме того увеличены верхние поля, чтобы создать дополнительное свободное вертикальное пространство между заголовками и предшествующим текстом.
<style type="text/css">
h1 {text-align:center; margin-top:20px}
h2 {text-align:left; margin-top:20px}
h3 {text-align:left; margin-top:20px}
</style>
Хотя выравнивание текста не требуется для приведенных выше тегов <h2> и <h3> (так как выравнивание слева используется по умолчанию), эти настройки включены в таблицу стилей, чтобы сделать их явными и для документирования настроек. Также поскольку все выравнивания заголовков заданы в этой встроенной таблице стилей, то любые изменения в выравнивании заголовков можно делать в одном месте, что будет распространяться на все заголовки на странице.
Вспомните, что выравнивание изображений происходит при включении тега <img/> в контейнерный тег, который выравнивает вложенное изображение. Это выравнивание можно осуществить, помещая тег <img/> в тег <p>, к которому применяется стиль text-align. Вложенное в параграф изображение размещается в отдельной строке и выравнивается по левому полю параграфа, по правому полю или размещается в центре страницы. Например, следующий код линейной таблицы стилей в теге <p> задает вывод изображения в центре страницы.
<p style="text-align:center"><img src="Stonehenge.jpg" alt="Стоунхендж"/></p>
(рис 3.8) Выравнивание изображения по центруОтметим также, что хотя именем свойства является "text"-align (т.е., выравнивание "текста"), содержимое любого вида, вложенное в параграф, текст или что-то другое, будет выводиться в центре строки.
Альтернативой размещению изображения в отдельной строке является размещение его у левого или правого поля, позволяя тексту заполнять остающееся пространство. Изображение называют "плавающим" слева или справа от сопровождающего его текста. Плавание изображения обеспечивается свойством стиля float.
| Свойство | Значение |
|---|---|
float |
left right none |
Изображение на рисунке 3.9 выводится у правого поля страницы ( float right ). Сопровождающий текст параграфа заполняет оставшееся свободным пространство. Задание стиля содержится во встроенной таблице стилей.
(рис 3.23) Плавающее изображение(рис 3.9) Код страницы со смещенным вправо изображением<head> <title>Плавающее изображение</title> <style type="text/css"> body {margin:20px} p {text-align:justify} h2 {text-align:center} img {float:right; margin-left:25px} </style> </head> <body> <h2>Плавающие изображения</h2> <p> <img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/> Альтернативой размещению изображения в отдельной строке является размещение изображения у левого или правого поля, позволяя тексту заполнять оставшееся свободное пространство. Сопровождающее изображение смещается вправо от текста на странице. </p> <p>Помните, что важно помещать тег <img> в коде сразу перед текстом или другими элементами страницы, которые дополняют изображение. Изображение смещается точно в то место на странице, в котором кодируется тег <img/>. В данном случае тег помещается в начале первого параграфа; поэтому изображение смещается вправо от этого параграфа. </p> </body>
Отметим, что свойство float ассоциировано с селектором img в предыдущей таблице стилей. Это свойство тега <img/> - тег будет плавающим, в отличие от случая, когда на строке размещается только изображение, которое выравнивается свойством text-align охватывающего тега <p>.
Изображения, которые смещаются на странице влево или вправо, должны кодироваться сразу перед текстом, который окружает изображение. В приведенном выше примере тег <img/> находится в начале параграфа, который окружает изображение. Между изображением и окружающим контентом нет никаких символов переноса строк. Тегу <img/> присвоено свойство стиля float:right, чтобы поместить у правого поля охватывающего параграфа. Он имеет также параметр стиля
Изображения могут смещаться на странице влево или вправо; они не могут находиться в середине страницы с текстом, окружающим их с обеих сторон. Для плавающих изображений желательно обычно включать дополнительное пустое пространство между изображением и окружающим его текстом, расширяя его поля. Подобно большинству свойств стиля оформления свойство float может применяться для множества других тегов. В дальнейшем мы узнаем, как смещать текстовые контейнеры на странице влево или вправо.
В примере выше все теги оформляются с помощью <p>, <h2> и <img/> будут получать такие же характеристики оформления.
Предыдущие примеры выравнивания параграфа слева показывают их в "блочном стиле", в котором все строки текста прижаты к левому полю. Однако широко распространено использование отступа для первой строки параграфа, чтобы визуально выделить начало нового параграфа. Отступ первой строки на самом деле не требуется, когда параграфы разделены пустыми строками, как в случае страниц Web; тем не менее, такое форматирование может применяться для смягчения внешнего вида страниц.
Для создания отступа первой строки параграфа используется свойство стиля
| Свойство: | Значение |
|---|---|
text-indent |
npx n% |
Следующий код делает отступ первой строки двух параграфов, первого на 25 пикселей и второго на 5% ширины страницы. Вывод в браузере показан на рисунке 3.10.
<p style="text-indent:25px">Этот параграф форматируется с помощью
style="text-indent:25px". Первая строка параграфа смещается на 25 пикселей от
левого поля. Остальные строки параграфа прижаты к левому полю и
переносятся по словам по правому полю.</p>
<p style="text-indent:5%">Этот параграф форматируется с помощью style="text-
indent:5%". Первая строка параграфа смещается на 5 процентов ширины
страницы от левого поля. Остальные строки параграфа прижаты к левому
полю и переносятся по словам по правому полю. </p>
(рис 3.10) Отступ первой строки текста в параграфахВ этом примере значения в пикселях и процентах задают примерно одинаковую величину отступа первой строки. Однако при использовании измерения в процентах для отступа параграфа помните, что это значение основано на ширине страницы. Будет создаваться отступ разной величины, в зависимости от ширины окна браузера. Чтобы сохранить фиксированную величину отступа, независимо от размера окна, задавайте значение в пикселях, а не в процентах.
Существует два общих свойства стиля width и height, которые можно использовать для задания размера любого элемента страницы. Свойство width задает ширину элемента в пикселях или как процент от ширины страницы. Свойство height задает высоту элемента в пикселях или как процент от высоты страницы.
| Свойство | Значения |
|---|---|
width |
npx n% |
height |
В дальнейшем в учебнике эти свойства приложены к широкому набору элементов страницы. В этом начальном введении ширина и высота применяются к горизонтальным линейкам и графическим изображениям, чтобы проиллюстрировать их использование.
Как говорилось ранее, разделы страницы Web могут визуально разделяться выводом между ними горизонтальных линеек. Это делается с помощью тега <hr/> для проведения линии на странице.
Линейка по умолчанию имеет высоту (толщину) в 2 пикселя и проходит по ширине окна браузера. Можно изменить эти размеры, кодируя для тега <hr/> стили width и height. Такое изменение размеров показано в следующей линейной таблице стилей и выводе браузера.
<hr style="width:75%; height:7px; text-align:center"/>
(рис 3.12) Задание стиля горизонтальной линейкиПри определении ширины элементов страницы часто предпочтительнее кодировать их в виде процентов. В этом случае ширина всегда выводится в правильной пропорции с другими элементами на странице Web, даже если пользователь изменяет размер окна браузера. Если горизонтальная линейка получает размер меньше ширины окна браузера, то ее можно также позиционировать на горизонтальной линии с помощью text-align:left, text-align:center, или text-align:right. В предыдущем примере линейка занимает 75% ширины страницы и расположена по центру.
Обычно все горизонтальные линейки на странице оформлены в одном стиле. Поэтому имеет смысл поместить этот стиль оформления во вложенной или внешней таблице стилей, чтобы ее можно было закодировать один раз для всех линеек на странице или всех линеек на сайте. Следующий код является примером того, как горизонтальные линейки можно стандартизовать для страницы с помощью
<style type="text/css">
hr {height:1px; width:50%; text-align:center}
</style>
С помощью такого задания стиля все теги <hr/> на странице создают линейки толщиной 1 пиксель, 50% от ширины окна браузера (независимо от размера окна) и расположенные горизонтально по центру страницы.
Достаточно часто бывает, что графические изображения имеют не те размеры, которые требуются для размещения на странице Web. Эта проблема постоянно возникает, если не используется или отсутствует программное обеспечение, которое позволяет изменять размер изображения прежде, чем помещать его на странице. Однако с помощью свойств стиля width и height, используемых для этих изображений, размеры изображений можно изменять во время вывода в браузере.
Реальный размер изображения, показанного на рисунке 3.12, равен 162 x 108 пикселей. При выводе на странице его ширина задается равной 100 пикселям с помощью линейной таблицы стилей.
<img src="Stonehenge.jpg" alt="Изображение Стоунхенджа" style="width:100px"/>
(рис 3.13) Динамическое изменение размера изображенияПри изменении размеров изображения задают свойство высоты или ширины, но обычно не оба. Браузер автоматически задаст другой размер, чтобы сохранить правильную пропорцию. Можно, конечно, задать оба свойства независимо, если известны правильные измененные размеры или если необходимо создать специальные визуальные эффекты с непропорционально измененными шириной и высотой.
Хотя размеры изображения могут автоматически изменяться при выводе в браузере, его реальные размеры останутся без изменений. Слишком большое изображение может занимать значительное дисковое пространство и создавать задержку при загрузке. В идеале необходимо отредактировать большое изображение, чтобы уменьшить его реальный размер до размеров его изображения на странице, а не использовать стили ширины и высоты для изменения только выводимого размера. Изображение не должно обычно выводиться с размером большим, чем его исходный размер. При увеличении размера можно
Вспомните из предыдущего материала, что тег <img/> имеет исключенные атрибуты width и height для изменения размеров изображений. Эти атрибуты должны заменяться соответствующими свойствами стиля width и height для удовлетворения стандартам XHTML. Хотя их имена совпадают, способы их применения различаются.
Значения стиля для ширины и высоты можно применять для любых тегов XHTML, а не только для тегов <hr/> и <img/>, как в предыдущих примерах. В дальнейшем будут рассмотрены случаи изменения размеров других элементов страницы с согласованием их с точными размерами на странице.
Использование цвета для различных элементов страницы можно задавать с помощью свойств color и background-color. Значения цвета ( color ) можно задавать с помощью названия цвета, шестнадцатеричного значения, представляющего комбинацию оттенков используемых красного, зеленого и синего цветов или десятичным значением RGB (red, green, blue). Например, спецификации цвета могут иметь следующие формы:
color:red color:#FF0000 color:rgb(255,0,0)
Эти задания цветов обсуждаются более полно в дальнейшем. Пока для задания стиля цвета на странице можно применять обычные системные названия или имена цветов. Существует 16 основных имен цветов ( aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow ), называемых стандартными цветами Windows и показанных на рисунке 3.14. Эти цвета можно использовать для элементов страницы, задавая в таблице стилей с помощью color:name или background-color:name.
(рис 3.14) Свойства и названия основных цветов
Цвет текста задается присваиванием значения цвета в таблице стилей, которая связана с контейнерным тегом, содержащим текст. Например, заголовок можно вывести синим цветом, присваивая имя этого цвета в линейной таблице стилей тега <.
<h1 style="color:blue">Синий заголовок</h1>
Если весь параграф должен иметь определенный цвет, то имя этого цвета можно задать в таблице стилей, связанной с тегом <p>.
<p style="color:red">...красный текст параграфа ...</p>
В некоторых случаях может понадобиться вывести весь текст на странице определенным цветом. Это легко сделать, присваивая свойство color тегу <body>. Следующий код выводит весь текст на странице зеленым цветом, используя встроенную таблицу стилей, ассоциированную с селектором body.
<style type="text/css">
body {color:green}
</style>
Для любого текстового контейнера можно задать также цвет фона, применяя свойство background-color. Проверьте также, что выбранный цвет является дополнительным для цвета текста и не создаст трудностей при чтении. В следующей таблице стилей желтый цвет используется в качестве цвета фона страницы для зеленого текста.
<style type="text/css">
body {color:green; background-color:yellow}
</style>
Такие же стили цвета можно задавать для горизонтальных линеек. В следующем примере линейки выводятся с различными свойствами стилей для получения различных цветов, размеров, и положения на странице. В то же самое время цвет текста страницы будет синим, а цвет фона будет желтым. Вывод в браузере показан на рисунке 3.15.
<body style="color:blue; background-color:yellow"> <p>Синяя горизонтальная линейка высотой 10 пикселей, шириной 300 и смещенная к правому полю:</p> <hr style="color:blue; height:10px; width:300px; text-align:right"/> <p>Красная горизонтальная линейка высотой 2 пикселя, 75% от ширины страницы и расположенная по центру:</p> <hr style="color:red; height:2px; width:75%; text-align:center"/> <p>Зеленая горизонтальная линейка высотой 10 пикселей; 25% от ширины страницы и смещенная к левому полю:</p> <hr style="color:green; height:10px; width:25%; text-align:left"/> </body>
(рис 3.15) Горизонтальные линейки различных стилейВ этом примере все стили линеек задаются с помощью линейных таблиц стилей. Отдельные линейки имеют различные настройки, для которых встроенная таблица стилей с одним селектором hr не подходит. Стиль оформления body также использует линейную таблицу стилей, хотя в этом случае можно было бы применить встроенную таблицу стилей с селектором body для задания цвета фона и цвета переднего плана.
Цвета можно задавать для многих других элементов страницы, кроме текста и линеек. Дополнительное обсуждение значений цветов и использования стилей будет дано в дальнейшем. Применение имен базовых цветов позволит начать использовать на страницах все многообразие различных цветов.
До этого момента стили применялись для отдельных элементов страницы, ассоциируя таблицы стилей с их тегами. Эта техника прекрасно работает в большинстве случаев, однако существуют ситуации оформления, когда этого будет недостаточно.
Например, в параграфе может понадобиться использовать стиль для определенной буквы, слова, фразы или других текстовых строк, расположенных внутри параграфа. Применение таблицы стилей к тегу <p> не предоставляет возможности выбрать, какие подстроки параграфа оформлять стилем. Все символы параграфа получают единое оформление.
Другим примером является последовательная группа параграфов, для которой необходимо использовать один и тот же стиль. Можно, конечно, скопировать и применить одну и ту же линейную таблицу стилей для отдельных тегов <p>, чтобы задать для них одинаковый вид. Однако, было бы удобнее иметь возможность применить один стиль к параграфам как к группе, не задавая для них стиль по отдельности.
Для таких и других ситуаций оформления, включающих строки текста длиной меньше параграфа и блоки текста больше параграфа, XHTML предоставляет теги маркировки для определения и обособления определенных разделов или подразделов страницы, к которым может применяться стиль оформления.
Тег <span> является линейным тегом, который помещают вокруг текста с целью идентификации строки символов, где применяется таблица стилей этого тега. Тег может ограничивать одну букву, слово, фразу, предложение или любую другую подстроку текста с целью ее определения для применения оформления. Напомним также, что линейный тег <span> окружает строку текста, расположенную внутри блочного контейнера.
В следующем параграфе слова "КРАСНЫЙ" и "СИНИЙ" выделяются тегами <span> как слова, для которых эти теги определяют цвет. Когда этот параграф выводится в браузере, эти два слова выводятся соответствующими цветами.
<p>Этот параграф содержит слово <span style="color:red">RED</span>, которое
находится внутри тега <span>, чтобы определить цвет этого слова. В этом
предложение для слова <span style="color:blue">BLUE</span> задан этот
цвет.</p>
Тег <span> является просто маркером для выделения текста, к которому можно применить его таблицу стилей. Он не имеет своих собственных встроенных характеристик форматирования. Он не создает разрыва строки и не создает пробела. Поэтому его можно использовать линейным образом, в обычном потоке текста просто для оформления ограниченного им контента. Конечно, применяемый стиль должен подходить для вложенной строки текста. Например, было бы неуместно применять свойство
Тег <div> (division) служит, как и тег <span>, разновидностью маркера. Его назначение состоит в ограничении и определении набора элементов страницы для применения стиля оформления к вложенному множеству. Тег <div> является блочным тегом, так как он охватывает другие теги и, что важно, создает на странице перенос строки перед своим вложенным содержимым и после него.
Использование тега <div> иллюстрируется двумя следующими параграфами. Оба параграфа оформляются одинаково. Однако вместо кодирования этих стилей с помощью линейных таблиц стилей в обоих тегах <p>, параграфы окружены тегом <div>, который определяет эти стили. Параграфы наследуют стили охватывающего тега <div>. Вывод браузером этого форматирования показан на рисунке 3.15.
<div style="text-indent:25px; margin-left:30px; margin-right:30px; text-align:justify"> <p>Этот параграф имеет отступ первой строки в 25 пикселей. Он имеет левое и правое поле по 30 пикселей и выровнен по ширине между двумя полями.</p> <p>Этот параграф также имеет отступ первой строки в 25 пикселей. Он имеет левое и правое поле по 30 пикселей и выровнен по ширине между полями. Оба параграфа оформлены с помощью охватывающего тега раздела div для применения этих стилей к обоим параграфам.</p> </div>
(рис 3.16) Параграфы, оформленные охватывающим тегом <div>Тег <div> не имеет никаких видимых собственных характеристик форматирования, кроме того факта, что он создает перенос строки перед и после окаймленного содержимого. Эти переносы строк не видны в приведенном выше примере, так как теги <p> сами создают собственные переносы строк, которые объединяются с переносами строк тега <div>.
Так как тег <div> подобно тегу <span> обеспечивает большую гибкость при обрамлении и оформлении содержимого страницы, в дальнейшем существуют многочисленные случаи использования тегов <span> и <div> для применения форматирования к широкому набору элементов страницы.
Использование встроенных таблиц стилей было предложено в качестве обычного способа применения к тегам стилей оформления уровня страницы. Там, где некоторым тегам нужно задать специальные стили, отличающиеся от стилей уровня страницы, для изменения оформления используются линейные таблицы стилей.
Тем не менее, там, где удобно, встроенные таблицы стилей всегда должны быть предпочтительным методом оформления, даже для приложения специальных только одноразовых стилей. Встроенные таблицы стилей локализуют настройки стиля оформления в одном разделе страницы <style>, делая их более доступными, чем если бы они были разбросаны по множеству линейных таблиц стилей. Встроенные таблицы стилей можно также легко преобразовать во внешние таблицы стилей для приложений уровня сайта. Ниже обсуждаются способы применения специального оформления элементов страницы с помощью встроенных объявлений стиля, а не с помощью линейных таблиц стилей.
За счет пересмотра большую часть встроенного оформления можно выполнить с помощью селекторов отдельных тегов и соответствующих объявлений стиля. Эти простые селекторы объявляют используемое по умолчанию оформление тега для всей страницы. Общий формат простого селектора показан в листинге 3.33.
selector {property:value [; property:value] ... }
Любое число селекторов можно объединять во встроенной таблице стилей с любым числом свойств стиля. Например, следующие простые селекторы задают форматирование уровня страницы для полей страницы, заголовков и параграфов. В любом месте на странице, где встретится один из этих тегов, браузер будет использовать соответствующий стиль оформления.
<style type="text/css">
body {margin:20px; color:black}
h1 {color:blue; text-align:center}
h2 {color:blue; text-align:left}
p {text-align:justify; text-indent:25px}
</style>
Существуют, однако, ситуации, когда эти стили уровня страницы необходимо для определенных тегов модифицировать. Например, один или несколько параграфов в документе могут требовать отличающегося выравнивания или отступов, или определенный заголовок может использовать другой стиль для выделения его среди остальных заголовков. Хотя можно применять линейные таблицы стилей для переопределения этих встроенных объявлений, существуют способы определения исключительных стилей в самой встроенной таблице стилей.
Одним из способов применения специальных стилей для отдельных элементов страницы является задание для элемента уникального идентификатора. Затем во встроенной таблице стилей можно применить специальное оформление только к элементу с этим идентификатором.
Предположим, например, что для всей страницы Web принят для параграфа общий отступ и выравнивание с помощью показанной выше встроенной таблицы стилей. Скажем, все параграфы имеют отступ в 25 пикселей, а текст выравнивается по ширине с отступом первой строки в 25 пикселей. Предположим теперь, что один определенный параграф на странице требует отличающегося оформления. Этот один параграф должен быть смещен на 25 пикселей от левого и правого полей относительно окружающих параграфов, и он не должен иметь отступа в первой строке.
Первый шаг в оформлении этого конкретного параграфа состоит в присвоении ему значения id. id является уникальным идентификатором для тега. Он может быть любым именем, выбранным как комбинация алфавитных и цифровых символов. В следующем коде идентификатор id="Special" присвоен параграфу, требующему специального форматирования.
<p id="Special">Этот параграф требует специального оформления,
отличающегося от обычных параграфов на странице. Он должен быть смещен
на 25 пикселей от обоих полей и не должен иметь отступа в первой
строке.</p>
С помощью id, присвоенного этому тегу <p>, можно определить специальное оформление, используя селектор ID во встроенной таблице стилей. Общий формат селектора ID показан в листинге 3.36.
selector#id {property:value [; property:value] ...}
Стили определяют для селектора, но только для селектора с заданным ( # ) значением id. Таким образом, селектор ID можно добавить к приведенной выше таблице стилей, чтобы отформатировать специальный параграф иначе, чем обычный параграф:
<style type="text/css">
body {margin:20px; color:black}
h1 {color:blue; text-align:center}
h2 {color:blue; text-align:left}
p {text-align:justify; text-indent:25px}
p#Special {text-indent:0px; margin-left:25px; margin-right:25px}
</style>
Синтаксис p#Special относится к тегу <p> со значением id (#), заданным как "Special". Стандартный отступ первой строки в 25 пикселей, заданный простым селектором p, изменен на 0 пикселей для этого конкретного параграфа. Для этого параграфа также заданы значения левого и правого полей, отличающиеся от обычных параграфов. Однако его текст остается выровненным по ширине, как унаследовано из оформления стандартного параграфа, заданного селектором p. Другими словами, все параграфы наследуют оформление, заданное простым селектором p, если только стили не модифицируются или не дополняются селекторами p#id.
Такой тип идентификация тега и оформления можно использовать для любого тега. Присвойте просто тегу уникальный id и выделяйте его из других тегов такого же типа, добавляя это значение #id к селектору тега.
Оформление тегов <span> и <div> не должно выполняться с помощью простых селекторов во встроенной таблице стилей. Эти теги часто появляются на странице несколько раз, чтобы выделить и оформить различные части текста и различные наборы элементов страницы, которые обычно требуют различного оформления. Поэтому невозможно связать один определенный стиль с этими тегами, не ограничивая их гибкость в оформлении других фрагментов текста или разделов, которые требуют отличающегося оформления. Другими словами, не применяйте кодирование следующих простых селекторов во встроенных таблицах стилей.
<style type="text/css">
div {property:value}
span {property:value}
</style>
Однако, используя селекторы ID с этими тегами, можно применять различное оформление для различных тегов <span> и <div>, не связывая их с одним определенным стилем.
В следующем примере двум параграфам задают один и тот же стиль, помещая их внутри тега <div>, для которого задается специальное оформление. Это оформление влияет только на этот единственный раздел с помощью своего уникального селектора ID. Оформление других разделов не затрагивается, так как они не имеют этого значения id. В то же самое время два тега <span>, получают свое уникальное оформление через свои уникальные значения id, оставляя незатронутым все остальное оформление охваченного тегами <span> текста.
<style type="text/css">
div#Justify {text-align:justify}
span#Red {color:red}
span#Blue {color:blue}
</style>
<div id="Justify">
<p>Этот параграф оформляется наследованием оформления своего
контейнерного раздела, который форматируется с помощью <span
id="Red">"Justify"</span> style.</p>
<p>Это параграф также оформляется наследованием оформления своего
контейнерного раздела. Кроме того, к одному из его слов применяется
оформление <span id="Blue">"Blue"</span></p>
</div>
Определяя селектор класса, можно объявить стиль оформления общего назначения для применения к любому тегу, которому понадобится применить этот стиль. Селектор класса определяется во встроенной таблице стилей, как показано его общей формой в листинге 3.40.
.class {property:value [ ;property:value] ...}
Вместо указания тега или использования в селекторе id, задается имя класса, перед которым ставится точка. Для селектора .class можно задавать любое имя, оно не может только включать пробелы или специальные символы. Любая комбинация свойств и значений стилей оформления может быть связана с этим классом стиля оформления.
Следующая встроенная таблица стилей включает класс оформления с именем .Offset. После определения этого класса его можно задать для любого тега с помощью атрибута class="class". Ниже этот класс стиля оформления задается параграфу, когда его присваивают тегу <p>. Этот параграф получает оформление класса .Offset, в данном случае с помощью переопределения обычного оформления, задаваемого простым селектором p.
<style type="text/css">
p {margin:20px}
.Offset {margin-left:30px; margin-right:30px}
</style>
<p class="Offset">Этот параграф требует специального оформления,
отличающегося от обычных параграфов на странице. Он имеет левое и правое
поле шириной по 30 пикселей.</p>
(Отметим, что присвоенный тегу класс не включает точку, которая требуется при объявлении селектора .class в таблице стилей.)
Класс стиля является стилем общего назначения, который можно применять к тегу любого типа, задавая просто класс тегу; плюс, в отличие от селектора ID, селектор класса можно присваивать любому числу тегов. Поэтому любые параграфы, разделы и другие типы блочных тегов могут использовать приведенное выше оформление, присваивая его в классе .Offset. Конечно, тег, к которому применяется класс, должен быть восприимчив к определенным свойствам и значениям, объявляемым классом.
Классы стилей особенно подходят для тегов <span> и <div> для оформления строк текста и блоков кода, не связывая эти теги с определенным стилем. Эти теги становятся носителями множества различных стилей просто при присвоении им различных классов стилей. Следующий код является примером применения различных классов стилей к различным тегам для создания страницы, показанной на рисунке 3.16.
<head>
<title>Стили классов</title>
<style type="text/css">
.Offset {margin-left:25px; margin-right:25px; text-align:justify}
.Red {color:red}
.Blue {color:blue}
.Rule {height:2px; width:75%; text-align:center; color:green}
</style>
</head>
<body>
<hr class="Rule"/>
<div class="Offset">
<p>Этот параграф имеет форматирование, задаваемое охватывающим
разделом. Внутри этого параграфа слово <span class="Red">RED</span>
использует собственный класс стиля.</p>
<p>Этот параграф также оформляется охватывающим разделом. Внутри
этого параграфа слово <span class="Blue">BLUE</span> использует
собственный класс стиля.</p>
</div>
<hr class="Rule"/>
</body>
(рис 3.17) Применение классов стилейОба параграфа выше оформляют, помещая их внутри раздела, которому присвоен класс стиля Offset. Поэтому параграфы наследуют оформление раздела, которое в данном случае смещает оба параграфа относительно полей страницы и выравнивает их текст по ширине. Эта техника имеет такой же результат, как и объявление селектора ID для оформления раздела ( div#Offset ) и применение стиля через этот селектор ID ( <div id="Offset" ). Однако класс .Offset является более гибким, так как его можно ассоциировать с другими тегами, кроме разделов. Любые теги на странице могут получать стиль .Offset при присвоении их этому классу.
В каждом параграфе есть отдельные слова, которые получают оформление цветом. Эти слова помещены внутри тегов <span>, которые задают цвет, присваивая теги классу стиля .Blue или .Orange. В связи с этим, если какие-либо другие разделы страницы - параграф, заголовок, что-то еще - понадобится вывести одним из этих цветов, то ограничивающим их тегам можно будет присвоить эти же самые классы стиля. Любое обычное оформление этих тегов будет дополняться этими заданными цветами.
Обе горизонтальные линейки имеют ширину 75% страницы и высоту 2 пикселя, зеленый цвет и размещены по центру. Сделан вариант определения класса стиля представления этого оформления и присваивания всех тегов <hr/> этому классу. Конечно, эти стили можно было бы определить для простого селектора hr без использования класса. Однако выбран вариант создания классов для всех оформлений и присваивания тегов этим классам, как диктует необходимость. Нет ничего необычного во встроенной таблице стилей, состоящей исключительно из классов стилей, которые выборочно применяются ко всем разновидностям тегов, требующих этих стилей.
Во всем этом вполне можно запутаться. Можно использовать внешние таблицы стилей, встроенные таблицы стилей, линейные таблицы стилей или некоторые их комбинации. При использовании внешних или встроенных таблиц стилей можно применять простые селекторы тегов, селекторы ID или классы стилей. Далее в учебнике будут представлены дополнительные возможности оформления. Что делать разработчику со всеми этими средствами?
С учетом различных подходов к оформлению ниже представлена разумная стратегия использования. Можно будет разработать и свои собственные предпочтительные подходы, когда вы станете лучше разбираться в таблицах стилей, но описанный подход является хорошим началом для выбора варианта использования.
<span> и <div>. Используйте также классы
стилей, когда два или несколько тегов требуют форматирования,
отличающегося или дополняющего то, что задано их простыми селекторами
тегов.id и задавайте его оформление с помощью селектора ID во встроенной
таблице стилей.Хотя предпочтение отдается применению встроенных таблиц стилей, - и, расширительно, внешним таблицам стилей, - в этом учебнике часто используются линейные таблицы стилей в качестве обучающего инструмента для знакомства и описания свойств стилей. Однако всегда предполагается, что линейные стили будут перенесены во встроенные или внешние таблицы стилей, когда страницы "будут включены в производственную систему".
Этот раздел делает вводное знакомство с таблицами стилей. Существует большое множество свойств стилей, которые еще надо рассмотреть, и много других вариантов тех, которые были здесь рассмотрены. Важность таблиц стилей невозможно переоценить. После исключения большинства атрибутов форматирования тегов, таблицы стилей стали основным методом организации и вывода содержимого страницы. Использование линейных, встроенных и внешних таблиц стилей стало сущностью кодирования XHTML.
Стили форматирования можно применять с помощью атрибутов, кодируемых в тегах XHTML. Разные теги имеют разные атрибуты, которые определяются их спецификой и управляют внешним видом контента страницы. В качестве простого примера можно взять горизонтальную линейку, которая выводится через всю страницу, когда на странице появляется тег <hr/>. Этот тег создает линию, которую часто используют для разделения контента на странице.
-------------------------------------------------------------------
Приведенная выше линейка является используемым по умолчанию выводом тега. Она может, однако, иметь другое представление при задании в теге дополнительных атрибутов. Атрибут size управляет толщиной линейки; атрибут width задает ее длину; атрибут color задает цвет, а атрибут align определяет ее горизонтальное положение на линии (слева на странице, справа на странице или по центру страницы).
Атрибуты имеют общую форму кодирования: атрибут="значение" - название атрибута и задаваемое в кавычках его значение. Ниже, например, тег <hr/> закодирован с четырьмя атрибутами управления характеристиками вывода, как показано на рисунке 3.1.
<hr size="10" width="50%" color="red" align="center"/>
(рис 3.1) Красная горизонтальная линейка в 50% ширины страницы WebЛинейка имеет толщину 10 пикселей ( size="10" ), 50% ширины окна браузера ( width="50%" ), красный цвет ( color="red" ) и выровнена горизонтально по центру страницы ( align="center" ). Таким образом, значения атрибутов задают характеристики оформления для вывода линейки отлично от ее обычного, используемого по умолчанию оформления. В ходе изложения учебника будет представлены различные атрибуты, связанные с различными тегами в качестве параметров оформления этих тегов.
Однако стандарты XHTML исключают большинство атрибутов оформления тегов. Это означает, что атрибуты все еще распознаются современными браузерами, но рекомендуется избегать их применения в пользу других методов оформления. Для оформления элементов XHTML рекомендуется использовать вместо атрибутов каскадные таблицы стилей (CSS).
Предпочтительным способом оформления элементов страницы является использование каскадных таблиц стилей (CSS). Таблица стилей - это набор характеристик стилей оформления и соответствующих значений оформления, описывающих внешний вид элементов XHTML, к которым они применяются. Существует три способа создания таблиц стилей. Линейная ( in-line ) таблица стилей появляется внутри тега, к которому применяются ее объявления стилей; встроенная ( embedded ) таблица стилей является отдельным разделом стилей страницы Web, которая применяет свои стили ко всем определяемым на странице тегам; внешняя ( linked ) таблица стилей является внешним документом, содержащим задания стилей, которые применимы ко всем страницам, которые с ней соединены.
Линейная таблица стилей кодируется внутри тега для применения оформления к этому конкретному тегу. Она использует общий формат, показанный в листинге 3.2.
<tag style="property:value [; property:value] ...">
Одна или несколько пар property:value задают настройки стиля оформления в атрибуте style тега. Несколько настроек свойств стиля разделяются друг от друга с помощью точки с запятой, для удобства чтения между настройками можно использовать пробелы.
Свойства и значения, которые могут кодироваться для тега, зависят в большой степени от конкретного оформляемого тега. Стилевые настройки для горизонтальной линейки, например, могут включать свойства height, width, color, и text-align, идентичные по результату исключенным атрибутам size, width, color, и align, которые они заменяют. Эти свойства кодируются как линейная таблица стилей, что показано на рисунке 3.2. Атрибут style появляется внутри тега <hr/> и определяет набор свойств и значений, применяемых к тегу, когда он выводится в браузере.
<hr style="height:10px; width:50%; color:red; text-align:center"/>
(рис 3.2) Горизонтальная линейка, использующая линейную таблицу стилейПри использовании в качестве линейных таблиц стилей свойства и значения относятся только к тому тегу, в котором они определены. Это означает, например, что если на странице имеется несколько тегов <hr/>, то каждый должен будет включать одну и ту же линейную таблицу стилей, чтобы они были оформлены одним стилем. Это может не создавать проблем для нескольких тегов; однако для множества тегов это может быть утомительно и приводить к ошибкам при кодировании одной и той же таблицы стилей во всех отдельных тегах. Поэтому необходим способ объявления настроек стилей один раз и последующего совместного использования этих настроек множеством тегов.
Чтобы избежать дублирования кодирования линейных таблиц стилей, можно применять встроенную таблицу стилей. Встроенная таблица стилей определяется в теге <style type="text/css">, который обычно располагается в разделе страницы <head>. Внутри этого раздела <style> находится список имен тегов, называемых селекторами, которым присваивают объявления стилей (свойства и значения). Когда эти объявления сделаны, они автоматически применяются к определенным тегам, если они появляются на странице. Общая форма раздела <style> документа показана в листинге 3.3.
<style type="text/css">
selector {property:value [; property:value] ...}
...
</style>
Селектор является именем тега (без охватывающих символов " < " и " > "). Свойства и значения стиля тега представлены в виде списка объявлений стиля, разделенном точками с запятой и помещенном внутри пары фигурных скобок " { } ". Например, следующий код определяет объявления стиля для тега <hr/>, задавая такие же параметры стиля, как и предыдущая линейная таблица стилей.
<head>
<title>Пример встроенной таблицы стилей</title>
<style type="text/css">
hr {height:10px; width:50%; color:red; text-align:center}
</style>
</head>
Селектор hr связан с четырьмя объявлениями property:value стиля горизонтальной линейки. Когда эти стили определены во встроенной таблице стилей, они автоматически применяются, если браузер встречает в документе тег <hr/>. Нет необходимости кодировать отдельные линейные таблицы стилей в каждом теге <hr/>. Тег сам несет в себе оформление стиля, описанное во встроенной таблице стилей. Хотя показанная выше встроенная таблица стилей содержит только один селектор для тега <hr/>, на самом деле она может содержать любое число записей, в зависимости от того, сколько различных тегов должно быть оформлено. Пример также записан на одной строке. Многие авторы страниц Web предпочитают кодировать настройки property:value на отдельных строчках, как показано на листинге 3.5, чтобы облегчить чтение и редактирование.
<style type="text/css">
hr {height:10px;
width:50%;
color:red;
text-align:center}
</style>
Форма записи таблицы стилей не влияет на результат оформления. Подобно коду XHTML код таблицы стилей имеет свободный формат, его можно организовать любым образом, если только код и пунктуация будут оставаться правильными.
Отдавать ли предпочтение встроенной таблице стилей или нескольким линейным таблицам стилей, является вопросом эффективности кодирования и личных предпочтений. Обычно если стиль применяется к нескольким случаям использования тега, то использование встроенной таблицы стилей ведет к сокращению объема кода и меньшему количеству ошибок кодирования, так как стиль объявляется один раз для совместного использования всеми заданными тегами. С другой стороны, если стиль применяется только один раз к одному тегу, то удобнее закодировать линейную таблицу стилей для этого одного конкретного тега. Далее будут рассмотрены различные стратегии, применяемые в различных ситуациях оформления.
Если сайт Web имеет множество страниц, то третий вариант таблиц стилей будет, вероятно, лучшим решением. Он позволяет применять одни стили оформления ко всем страницам, не требуя копирования линейных или встроенных таблиц стилей на каждую страницу.
Внешняя таблица стилей является отдельным документом, содержащим настройки property:value в том же формате, что и встроенная таблица стилей. Единственное различие состоит в том, что этот документ не содержит вокруг записей тегов <style>. Например, документ внешней таблицы стилей, содержащий описанные выше спецификации оформления тега <hr/>, включает в себя записи, показанные в листинге 3.6.
Stylesheet.css (документ)
hr {height:10px;
width:50%;
color:red;
text-align:center}
Этот отдельный документ создается с помощью текстового редактора и сохраняется как стандартный текстовый файл, обычно с расширением файла .css, чтобы идентифицировать его как документ таблицы стилей. Широко распространено сохранение этого документа таблицы стилей с именем Stylesheet.css в том же каталоге, где находятся страницы Web, к которым она применяется.
Документ внешней присоединяемой таблицы стилей содержит настройки стиля оформления, которые применимы ко всем страницам сайта Web. Поэтому все страницы, которые используют эту таблицу стилей, должны с ней "соединяться", чтобы сделать стили доступными для этих страниц. Соединение происходит с помощью тега <link>, кодируемого в разделе <head> страницы. Общая форма тега <link> показана в листинге 3.7.
<link href="url" type="text/css" rel="stylesheet" />
Атрибут href ( type определяет тип документа, с которым делается соединение (всегда "text/css" ). Атрибут rel определяет взаимоотношения внешнего документа с данной страницей (всегда "stylesheet" ).
Если имеется документ таблицы стилей с именем Stylesheet.css, который расположен в той же папке, что и страница Web, то страница Web соединяется с этим документом с помощью следующего кода XHTML.
<head> <title>Пример присоединяемой таблицы стилей</title> <link href="Stylesheet.css" type="text/css" rel="stylesheet"/> </head>
Теперь страница Web имеет все доступные для нее настройки стиля оформления, заданные в документе Stylesheet.css. Эта присоединенная таблица стилей может служить для замены встроенных или линейных таблиц стилей, которые в противном случае должны были бы появиться на отдельных страницах Web. Как и в случае встроенных таблиц стилей, все теги, определенные селекторами в присоединенной таблице стилей, несут в себе объявленные стили оформления.
Нет ничего необычного в том, чтобы использовать все три типа таблиц стилей для одной страницы Web. Внешняя таблица будет содержать стили, которые являются общими для всех страниц Web; встроенная таблица будет включать в себя стили, которые относятся к определенной странице; линейные таблицы будут применяться к отдельным тегам, которым не требуется общее оформление. Браузер использует это множество таблиц стилей следующим образом.
Первое: все внешние таблицы стилей применяются на странице для заданных селекторов тегов.
Второе: применяются все встроенные таблицы стилей. Если одинаковые селекторы тегов присутствуют во внешних и встроенных таблицах стилей, то встроенные стили переопределяют или расширяют внешние стили.
Третье: применяются все линейные таблицы стилей. Если эти настройки относятся к тем же тегам, которые присутствуют во внешних или встроенных таблицах стилей, то линейные стили переопределяют или расширяют присоединенные и встроенные стили.
Общий действующий принцип состоит в том, что любое определение стиля более нижнего уровня имеет преимущество над эквивалентным значением стиля более высокого уровня. Линейные таблицы стилей имеют преимущество над встроенными таблицами стилей, которые имеют преимущество над внешними таблицами стилей.
Предположим, например, что присоединенная таблица стилей содержит следующее объявление стиля для горизонтальных линеек.
hr {height:1px;
width:50%;
color:red;
text-align:center}
Все страницы, которые соединяются с этой таблицей стилей, выводят горизонтальные линейки этим стилем. Предположим теперь, что одна определенная страница должна иметь другое оформление линеек, скажем, голубым цветом, а не красным. Поэтому на этой единственной странице кодируется встроенная таблица стилей, чтобы переопределить объявление цвета во внешней таблице стилей.
<style type="text/css">
hr {color:blue}
</style>
Все горизонтальные линейки на этой странице будут синими; однако они сохраняют свойства height, width, и text-align внешней таблицы стилей. Теги на этой странице наследуют свойства внешней таблицы стилей, если не модифицируются встроенной таблицей стилей.
Предположим дальше, что одна определенная горизонтальная линейка на этой странице должна быть зеленого цвета и проходить по всей ширине страницы. Поэтому для этой конкретной линейки добавляется линейная таблица стилей.
<hr style="color:green; width:100%"/>
Зеленый цвет стиля переопределяет синий, который наследуется из встроенной таблицы стилей; ширина в 100% переопределяет ширину в 50%, унаследованную из внешней таблицы стилей. Однако, эта конкретная линейка сохраняет толщину в 1 пиксель и выравнивание по центру, унаследованные из внешней таблицы стилей.
Именно наследование стилей делает таблицы стилей "каскадными". Внешние стили наследуются, или каскадно распространяются, на все страницы Web, которые с ними соединены; встроенные стили наследуются, или каскадно распространяются, на отдельные теги, содержащие линейные таблицы стилей.
В этом учебнике свойства и значения стилей иллюстрируются в виде линейных таблиц стилей, с обсуждением того, как их можно перенести во встроенные или внешние таблицы стилей для расширения приложения. К окончанию курса читатель не будет иметь никаких проблем с использованием таблиц стилей и способами их использования при проектирования страниц Web любой степени сложности.
Когда текст выводится в окне браузера, он распространяется от одного края окна до другого с полями примерно в 6 мм (четверть дюйма), окружающими текст на странице. Можно было видеть эти поля на созданных ранее страницах Web. Они показаны на простой странице Web с одним параграфом на рисунке 3.3.
(рис 3.3) Страница Web с полями по умолчаниюВ некоторых случаях эти настройки полей работают вполне успешно. Однако, если на странице находится много текста, то эти узкие поля создают перегруженный вид, что затрудняет чтение страницы. Может быстро надоесть монотонное перемещение по строкам текста, которые тянутся от одного края окна до другого. Страница Web станет более привлекательной, более удобочитаемой и более приятной для глаз, если вокруг текста появится больше свободного пространства. Однако в других случаях может понадобиться сократить или удалить используемые по умолчанию настройки полей, чтобы некоторые элементы страницы выводились еще ближе к границам окна.
Вспомните, что тег <body> ограничивает все содержимое страницы, которое выводится в окне браузера. Этот тег можно использовать также для управления полями вокруг границ страницы. Для этого необходимо применить к тегу <body> таблицу стилей, которая определяет поля страницы.
Существует пять свойств стиля оформления, которые можно применять для задания полей вокруг элементов страницы. Эти свойства определяют величину свободного пространства между внешними границами элемента и любым окружающим содержимым. При использовании в теге <body> они задают величину свободного пространства вокруг
| Свойство | Значения |
|---|---|
margin margin-top margin-right margin-bottom margin-left |
npx n% auto |
Свойство margin задает одну и ту же ширину поля со всех сторон элемента; свойства margin-right, auto заставляет поля вернуться к их значению ширины по умолчанию при переопределении предыдущих настроек полей.
Свойства полей, как и различные другие свойства стиля оформления, используют значения размера. В большинстве случаев требуется определять размер в пикселях ( px ) или в процентах ( % ) от ширины окна браузера. Это два наиболее распространенных способа измерения расстояния на экране компьютера. Если тип измерения не определен, то предполагаются пиксели.
Поля, окружающие контент страницы Web, можно задать, применяя таблицу стилей к тегу <body>. Например, следующая линейная таблица стилей задает 25-пиксельное поле вокруг всей страницы, используя свойство margin и задавая пробел в 25 пикселей между содержимым страницы и границами окна браузера.
<body style="margin:25px"> <p>Эта страница Web выводит параграф текста с окружающими страницу полями величиной 25 пикселей. Эти поля создаются линейной таблицей стилей, заданной для тела документа. Строки текста лежат в этих границах и переносятся по словам. </p> </body>
Это оформление создает страницу, показанную на рисунке 3.4. Текстовый параграф кажется менее перегруженным, чем на рисунке 3.3, что делает его более привлекательным и облегчает чтение текста, сокращая длину строк.
(рис 3.4) Страница Web с 25-пиксельными полями
В приведенном выше примере тег <body> включает линейную таблицу стилей для задания полей этой конкретной страницы. Вместо этого можно написать встроенную таблицу стилей для получения такого же результата. Следующая запись <style> задает селектор body со свойством стиля оформления margin и значением для этого тега.
<head>
<title>Поля страницы</title>
<style type="text/css">
body {margin:25px}
</style>
</head>
<body>
<p>Эта страница Web выводит параграф текста с окружающими страницу
полями величиной 25 пикселей. Эти поля создаются линейной таблицей
стилей, заданной для тела документа. Строки текста лежат в этих границах и
переносятся по словам.</p>
</body>
Тег <body> через селектор body получает 25-пиксельные поля, не применяя код таблицы стилей в самом теге. Также при использовании встроенной таблицы стилей настройки стиля оформления изолируются в отдельном разделе страницы, что облегчает поиск этих настроек и изменение в случае необходимости. Фактически, первым желанием всегда должно быть создание встроенной таблицы стилей, согласованной с линейными или внешними таблицами стилей.
Если сайт Web имеет много страниц и все страницы должны использовать одинаковые поля, то необходимо применять внешнюю таблицу стилей. Поместите оформление body в этот отдельный документ и соедините его со всеми страницами, которые должны использовать это оформление.
Следующий код показывает документ Stylesheet.css, в котором определено оформление полей для тега <body>. Этот документ находится в том же каталоге Web, что и страницы, где этот стиль оформления применяются.
Stylesheet.css
body {margin:25px}
Когда эта внешняя таблица стилей будет создана, любая страница Web может использовать ее настройки полей, соединяясь с ней. Код для подключения этой внешней таблицы стилей показан ниже.
<head> <title>Любая страница</title> <link href="Stylesheet.css" type="text/css" rel="stylesheet"/> </head>
В примерах выше свойство margin применяется для задания полей одинаковой ширины для всех четырех сторон страницы. Вместо этого можно выборочно задавать поля различной ширины для каждой из сторон, используя свойства индивидуальных полей. В следующей встроенной таблице стилей для страницы задаются поля различной ширины с разных сторон.
<style type="text/css">
body {margin-top:50px; margin-left:30px; margin-right:30px;
margin-bottom:50px}
</style>
Отметим, что эти свойства можно записывать в любом порядке. Не забывайте только, что пара :), а отдельные объявления разделяются точкой с запятой ( ; ).
Существуют атрибуты полей, которые не распознаются в XHTML, но могут использоваться для задания полей страницы. Эти исключенные атрибуты тега <body> перечислены ниже.
leftmargin="n" rightmargin=""n" topmargin="n" bottommargin="n" marginwidth="n" marginheight="n"
Величину полей задает значение ( n ), представляющее число пикселей пустого пространства между содержимым страницы и границами окна браузера. Значения задают индивидуально для каждой из границ ( leftmargin, rightmargin, topmargin, bottonmargin ), для двух боковых сторон ( marginwidth ) или для верхнего и нижнего полей ( marginheight ) страницы, например:
<body leftmargin="30" rightmargin="30" topmargin="30" bottommargin="30">
или
<body marginwidth="30" marginheight="30">
Хотя эти исключенные атрибуты тега <body> все еще работают в современных браузерах - и их, наверняка, можно встретить на существующих страницах Web - не следует применять их при создании новых страниц. Вместо этого используйте свойства оформления полей, задействуя внешние, встроенные или линейные таблицы стиля.
Стили полей применимы для многих тегов XHTML, а не только для тега <body>. Фактически любой контейнерный тег может использовать задание полей. Тег <p> является таким тегом. Объявляя для этого тега свойства стиля полей margin, margin-right,
Следующий код выводит три параграфа, средний из которых использует линейную таблицу стилей для задания левого и правого полей шириной 40 пикселей.
<p>Здесь три параграфа. Первый параграф форматирован с помощью
стандартного тега параграфа с используемыми по умолчанию настройками
стиля.</p>
<p style="margin-left:40px; margin-right:40px">Второй параграф форматирован с
настройкой стиля "margin-left:40px; margin-right:40px" для задания левого
и правого полей для смещения параграфа относительно окружающих
параграфов. Это оформление создает параграф, похожий по результату на
использование тега blockquote.</p>
<p>Третий параграф кодируется так же, как и первый. Он заключен в
стандартный тег параграфа с используемым по умолчанию оформлением.</p>
Вывод в браузере этого кода показан на рисунке 3.5.
(рис 3.5) Задание полей параграфаВ этом примере применяется линейная таблица стилей, так как настройки полей применяют только для одного параграфа. Нет необходимости определять встроенную таблицу стилей или создавать внешнюю таблицу стилей, так как это оформление используется только одним параграфом.
Ранее упоминалось, что можно использовать несколько тегов <br/> для увеличения вертикального пробела на странице. Каждый тег <br/>, кроме тега в конце строки текста, создает ниже на странице дополнительную пустую строку.
Тот же самый результат можно получить, задавая настройки стиля <br/>. Результат вывода в браузере приведен на рисунке 3.6.
<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду ее преследовала.<p>
<p style="margin-left:40px; margin-right:40px;
margin-top:50px; margin-bottom:50px">
Была у Мери овечка,<br/>
Была ее шерсть снежно-белой;<br/>
И куда бы ни шла Мери,<br/>
Овечка бежала за нею. <br/>
</p>
<p>У Мери ужасная жизнь. Очень трудно сходить на свидание, когда вокруг
тебя все время скачет овечка.</p>
(рис 3.6) Использование настройки полей для увеличения вертикального интервалаМожно применять либо несколько тегов <br/>, либо увеличенные настройки полей для создания вертикальных интервалов. Однако при использовании
При изучении других тегов в этом учебнике помните, что они могут использовать свойства полей для изменения свободного пространства между их содержимым и окружающими элементами на странице. Настройка полей является одним из основных методов для организации содержимого на странице Web.
Элементы на странице Web обычно располагаются у левого края страницы или на левых границах, созданных свойствами стиля оформления margin или
Свойство стиля text-align позволяет осуществлять выравнивание элементов страницы left (слева), center (по центру), right (справа) или justify (по ширине). Значения свойства показаны в таблице 3.2.
| Свойство | Значения |
|---|---|
text-align |
left center right justify |
Свойство стиля text-align является заменой исключенного атрибута align, использовавшегося ранее для тегов <p>, <, и <hr/>. С данного момента все горизонтальное выравнивание должно делаться с помощью свойства text-align.
Тег <p> окружает блок текста, который также располагает свои строки у левого края страницы или у левой границы, созданной заданием стиля оформления параграфа margin или text-align, чтобы изменить это используемое по умолчанию выравнивание слева.
Следующий код создает четыре параграфа, каждый с линейной таблицей стилей для использования различного выравнивания текста. Браузер выводит эти параграфы, как показано на рисунке 3.7.
<p style="text-align:left"> Этот параграф форматируется с помощью задания стиля style="text-align:left". Каждая строка текста располагается у левого края страницы и переносится на новую строку у правого края страницы. Это используемый по умолчанию стиль выравнивания параграфа.</p> <p style="text-align:center"> Этот параграф форматируется с помощью задания стиля style="text- align:center". Каждая строка текста с переносами выводится выровненной по центру между левым и правым полем страницы.</p> <p style="text-align:right"> Этот параграф форматируется с помощью задания стиля style="text-align:right". Каждая строка текста с переносами выравнивается по правому полю страницы. </p> <p style="text-align:justify"> Этот параграф форматируется с помощью задания стиля style="text- align:justify". Все строки текста с переносами, за исключением последней строки, выравниваются по ширине от левого до правого поля. Последняя строка, так как она недостаточно длинная для переноса, не выравнивается по ширине между полями страницы. </p>
(рис 3.7) Вывод параграфов с разным выравниванием в окне браузераВ этом примере все четыре параграфа имели различное оформление. Поэтому теги <p> используют линейные таблицы стилей, а не встроенную или внешнюю таблицу стилей, которые создавали бы общее оформление для всех параграфов. Помните, однако, что выравнивание текста, которого должны придерживаться все параграфы на странице, должно быть задано только один раз во встроенной или внешней таблице стилей. Если принято решение, например, что все параграфы на странице будут выравниваться строки по ширине, то подходящим решением будет встроенное объявление стиля для селектора p.
<style type="text/css">
p {text-align:justify}
</style>
Если в дальнейшем будет решено, что все параграфы на всех страницах сайта Web будут выровнены по ширине, то такую встроенную таблицу стилей можно преобразовать во внешнюю таблицу стилей для общего использования всеми страницами.
Стили выравнивания текста можно применять к тегам < для размещения заголовков на странице слева, в центре или справа. В следующем примере свойство text-align задается для заголовка <h2> в линейной таблице стилей для выравнивания его на странице горизонтально по центру. Это свойство стиля оформления заменяет старый атрибут align="center", использовавшийся ранее для выравнивания заголовков.
<h2 style="text-align:center">Центрированный заголовок</h2>
Как правило, различные заголовки, встречающиеся на одной странице Web, имеют общие стили, чтобы обеспечить общий вид страницы. Поэтому обычно выравнивание заголовков включают во встроенную таблицу стилей для общего использования всеми подобными заголовками. Следующий код задает стили выравнивания для трех размеров заголовков, которые встречаются на странице. Кроме того увеличены верхние поля, чтобы создать дополнительное свободное вертикальное пространство между заголовками и предшествующим текстом.
<style type="text/css">
h1 {text-align:center; margin-top:20px}
h2 {text-align:left; margin-top:20px}
h3 {text-align:left; margin-top:20px}
</style>
Хотя выравнивание текста не требуется для приведенных выше тегов <h2> и <h3> (так как выравнивание слева используется по умолчанию), эти настройки включены в таблицу стилей, чтобы сделать их явными и для документирования настроек. Также поскольку все выравнивания заголовков заданы в этой встроенной таблице стилей, то любые изменения в выравнивании заголовков можно делать в одном месте, что будет распространяться на все заголовки на странице.
Вспомните, что выравнивание изображений происходит при включении тега <img/> в контейнерный тег, который выравнивает вложенное изображение. Это выравнивание можно осуществить, помещая тег <img/> в тег <p>, к которому применяется стиль text-align. Вложенное в параграф изображение размещается в отдельной строке и выравнивается по левому полю параграфа, по правому полю или размещается в центре страницы. Например, следующий код линейной таблицы стилей в теге <p> задает вывод изображения в центре страницы.
<p style="text-align:center"><img src="Stonehenge.jpg" alt="Стоунхендж"/></p>
(рис 3.8) Выравнивание изображения по центруОтметим также, что хотя именем свойства является "text"-align (т.е., выравнивание "текста"), содержимое любого вида, вложенное в параграф, текст или что-то другое, будет выводиться в центре строки.
Альтернативой размещению изображения в отдельной строке является размещение его у левого или правого поля, позволяя тексту заполнять остающееся пространство. Изображение называют "плавающим" слева или справа от сопровождающего его текста. Плавание изображения обеспечивается свойством стиля float.
| Свойство | Значение |
|---|---|
float |
left right none |
Изображение на рисунке 3.9 выводится у правого поля страницы ( float right ). Сопровождающий текст параграфа заполняет оставшееся свободным пространство. Задание стиля содержится во встроенной таблице стилей.
(рис 3.23) Плавающее изображение(рис 3.9) Код страницы со смещенным вправо изображением<head> <title>Плавающее изображение</title> <style type="text/css"> body {margin:20px} p {text-align:justify} h2 {text-align:center} img {float:right; margin-left:25px} </style> </head> <body> <h2>Плавающие изображения</h2> <p> <img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/> Альтернативой размещению изображения в отдельной строке является размещение изображения у левого или правого поля, позволяя тексту заполнять оставшееся свободное пространство. Сопровождающее изображение смещается вправо от текста на странице. </p> <p>Помните, что важно помещать тег <img> в коде сразу перед текстом или другими элементами страницы, которые дополняют изображение. Изображение смещается точно в то место на странице, в котором кодируется тег <img/>. В данном случае тег помещается в начале первого параграфа; поэтому изображение смещается вправо от этого параграфа. </p> </body>
Отметим, что свойство float ассоциировано с селектором img в предыдущей таблице стилей. Это свойство тега <img/> - тег будет плавающим, в отличие от случая, когда на строке размещается только изображение, которое выравнивается свойством text-align охватывающего тега <p>.
Изображения, которые смещаются на странице влево или вправо, должны кодироваться сразу перед текстом, который окружает изображение. В приведенном выше примере тег <img/> находится в начале параграфа, который окружает изображение. Между изображением и окружающим контентом нет никаких символов переноса строк. Тегу <img/> присвоено свойство стиля float:right, чтобы поместить у правого поля охватывающего параграфа. Он имеет также параметр стиля
Изображения могут смещаться на странице влево или вправо; они не могут находиться в середине страницы с текстом, окружающим их с обеих сторон. Для плавающих изображений желательно обычно включать дополнительное пустое пространство между изображением и окружающим его текстом, расширяя его поля. Подобно большинству свойств стиля оформления свойство float может применяться для множества других тегов. В дальнейшем мы узнаем, как смещать текстовые контейнеры на странице влево или вправо.
В примере выше все теги оформляются с помощью <p>, <h2> и <img/> будут получать такие же характеристики оформления.
Предыдущие примеры выравнивания параграфа слева показывают их в "блочном стиле", в котором все строки текста прижаты к левому полю. Однако широко распространено использование отступа для первой строки параграфа, чтобы визуально выделить начало нового параграфа. Отступ первой строки на самом деле не требуется, когда параграфы разделены пустыми строками, как в случае страниц Web; тем не менее, такое форматирование может применяться для смягчения внешнего вида страниц.
Для создания отступа первой строки параграфа используется свойство стиля
| Свойство: | Значение |
|---|---|
text-indent |
npx n% |
Следующий код делает отступ первой строки двух параграфов, первого на 25 пикселей и второго на 5% ширины страницы. Вывод в браузере показан на рисунке 3.10.
<p style="text-indent:25px">Этот параграф форматируется с помощью
style="text-indent:25px". Первая строка параграфа смещается на 25 пикселей от
левого поля. Остальные строки параграфа прижаты к левому полю и
переносятся по словам по правому полю.</p>
<p style="text-indent:5%">Этот параграф форматируется с помощью style="text-
indent:5%". Первая строка параграфа смещается на 5 процентов ширины
страницы от левого поля. Остальные строки параграфа прижаты к левому
полю и переносятся по словам по правому полю. </p>
(рис 3.10) Отступ первой строки текста в параграфахВ этом примере значения в пикселях и процентах задают примерно одинаковую величину отступа первой строки. Однако при использовании измерения в процентах для отступа параграфа помните, что это значение основано на ширине страницы. Будет создаваться отступ разной величины, в зависимости от ширины окна браузера. Чтобы сохранить фиксированную величину отступа, независимо от размера окна, задавайте значение в пикселях, а не в процентах.
Существует два общих свойства стиля width и height, которые можно использовать для задания размера любого элемента страницы. Свойство width задает ширину элемента в пикселях или как процент от ширины страницы. Свойство height задает высоту элемента в пикселях или как процент от высоты страницы.
| Свойство | Значения |
|---|---|
width |
npx n% |
height |
В дальнейшем в учебнике эти свойства приложены к широкому набору элементов страницы. В этом начальном введении ширина и высота применяются к горизонтальным линейкам и графическим изображениям, чтобы проиллюстрировать их использование.
Как говорилось ранее, разделы страницы Web могут визуально разделяться выводом между ними горизонтальных линеек. Это делается с помощью тега <hr/> для проведения линии на странице.
Линейка по умолчанию имеет высоту (толщину) в 2 пикселя и проходит по ширине окна браузера. Можно изменить эти размеры, кодируя для тега <hr/> стили width и height. Такое изменение размеров показано в следующей линейной таблице стилей и выводе браузера.
<hr style="width:75%; height:7px; text-align:center"/>
(рис 3.12) Задание стиля горизонтальной линейкиПри определении ширины элементов страницы часто предпочтительнее кодировать их в виде процентов. В этом случае ширина всегда выводится в правильной пропорции с другими элементами на странице Web, даже если пользователь изменяет размер окна браузера. Если горизонтальная линейка получает размер меньше ширины окна браузера, то ее можно также позиционировать на горизонтальной линии с помощью text-align:left, text-align:center, или text-align:right. В предыдущем примере линейка занимает 75% ширины страницы и расположена по центру.
Обычно все горизонтальные линейки на странице оформлены в одном стиле. Поэтому имеет смысл поместить этот стиль оформления во вложенной или внешней таблице стилей, чтобы ее можно было закодировать один раз для всех линеек на странице или всех линеек на сайте. Следующий код является примером того, как горизонтальные линейки можно стандартизовать для страницы с помощью
<style type="text/css">
hr {height:1px; width:50%; text-align:center}
</style>
С помощью такого задания стиля все теги <hr/> на странице создают линейки толщиной 1 пиксель, 50% от ширины окна браузера (независимо от размера окна) и расположенные горизонтально по центру страницы.
Достаточно часто бывает, что графические изображения имеют не те размеры, которые требуются для размещения на странице Web. Эта проблема постоянно возникает, если не используется или отсутствует программное обеспечение, которое позволяет изменять размер изображения прежде, чем помещать его на странице. Однако с помощью свойств стиля width и height, используемых для этих изображений, размеры изображений можно изменять во время вывода в браузере.
Реальный размер изображения, показанного на рисунке 3.12, равен 162 x 108 пикселей. При выводе на странице его ширина задается равной 100 пикселям с помощью линейной таблицы стилей.
<img src="Stonehenge.jpg" alt="Изображение Стоунхенджа" style="width:100px"/>
(рис 3.13) Динамическое изменение размера изображенияПри изменении размеров изображения задают свойство высоты или ширины, но обычно не оба. Браузер автоматически задаст другой размер, чтобы сохранить правильную пропорцию. Можно, конечно, задать оба свойства независимо, если известны правильные измененные размеры или если необходимо создать специальные визуальные эффекты с непропорционально измененными шириной и высотой.
Хотя размеры изображения могут автоматически изменяться при выводе в браузере, его реальные размеры останутся без изменений. Слишком большое изображение может занимать значительное дисковое пространство и создавать задержку при загрузке. В идеале необходимо отредактировать большое изображение, чтобы уменьшить его реальный размер до размеров его изображения на странице, а не использовать стили ширины и высоты для изменения только выводимого размера. Изображение не должно обычно выводиться с размером большим, чем его исходный размер. При увеличении размера можно
Вспомните из предыдущего материала, что тег <img/> имеет исключенные атрибуты width и height для изменения размеров изображений. Эти атрибуты должны заменяться соответствующими свойствами стиля width и height для удовлетворения стандартам XHTML. Хотя их имена совпадают, способы их применения различаются.
Значения стиля для ширины и высоты можно применять для любых тегов XHTML, а не только для тегов <hr/> и <img/>, как в предыдущих примерах. В дальнейшем будут рассмотрены случаи изменения размеров других элементов страницы с согласованием их с точными размерами на странице.
Использование цвета для различных элементов страницы можно задавать с помощью свойств color и background-color. Значения цвета ( color ) можно задавать с помощью названия цвета, шестнадцатеричного значения, представляющего комбинацию оттенков используемых красного, зеленого и синего цветов или десятичным значением RGB (red, green, blue). Например, спецификации цвета могут иметь следующие формы:
color:red color:#FF0000 color:rgb(255,0,0)
Эти задания цветов обсуждаются более полно в дальнейшем. Пока для задания стиля цвета на странице можно применять обычные системные названия или имена цветов. Существует 16 основных имен цветов ( aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow ), называемых стандартными цветами Windows и показанных на рисунке 3.14. Эти цвета можно использовать для элементов страницы, задавая в таблице стилей с помощью color:name или background-color:name.
(рис 3.14) Свойства и названия основных цветов
Цвет текста задается присваиванием значения цвета в таблице стилей, которая связана с контейнерным тегом, содержащим текст. Например, заголовок можно вывести синим цветом, присваивая имя этого цвета в линейной таблице стилей тега <.
<h1 style="color:blue">Синий заголовок</h1>
Если весь параграф должен иметь определенный цвет, то имя этого цвета можно задать в таблице стилей, связанной с тегом <p>.
<p style="color:red">...красный текст параграфа ...</p>
В некоторых случаях может понадобиться вывести весь текст на странице определенным цветом. Это легко сделать, присваивая свойство color тегу <body>. Следующий код выводит весь текст на странице зеленым цветом, используя встроенную таблицу стилей, ассоциированную с селектором body.
<style type="text/css">
body {color:green}
</style>
Для любого текстового контейнера можно задать также цвет фона, применяя свойство background-color. Проверьте также, что выбранный цвет является дополнительным для цвета текста и не создаст трудностей при чтении. В следующей таблице стилей желтый цвет используется в качестве цвета фона страницы для зеленого текста.
<style type="text/css">
body {color:green; background-color:yellow}
</style>
Такие же стили цвета можно задавать для горизонтальных линеек. В следующем примере линейки выводятся с различными свойствами стилей для получения различных цветов, размеров, и положения на странице. В то же самое время цвет текста страницы будет синим, а цвет фона будет желтым. Вывод в браузере показан на рисунке 3.15.
<body style="color:blue; background-color:yellow"> <p>Синяя горизонтальная линейка высотой 10 пикселей, шириной 300 и смещенная к правому полю:</p> <hr style="color:blue; height:10px; width:300px; text-align:right"/> <p>Красная горизонтальная линейка высотой 2 пикселя, 75% от ширины страницы и расположенная по центру:</p> <hr style="color:red; height:2px; width:75%; text-align:center"/> <p>Зеленая горизонтальная линейка высотой 10 пикселей; 25% от ширины страницы и смещенная к левому полю:</p> <hr style="color:green; height:10px; width:25%; text-align:left"/> </body>
(рис 3.15) Горизонтальные линейки различных стилейВ этом примере все стили линеек задаются с помощью линейных таблиц стилей. Отдельные линейки имеют различные настройки, для которых встроенная таблица стилей с одним селектором hr не подходит. Стиль оформления body также использует линейную таблицу стилей, хотя в этом случае можно было бы применить встроенную таблицу стилей с селектором body для задания цвета фона и цвета переднего плана.
Цвета можно задавать для многих других элементов страницы, кроме текста и линеек. Дополнительное обсуждение значений цветов и использования стилей будет дано в дальнейшем. Применение имен базовых цветов позволит начать использовать на страницах все многообразие различных цветов.
До этого момента стили применялись для отдельных элементов страницы, ассоциируя таблицы стилей с их тегами. Эта техника прекрасно работает в большинстве случаев, однако существуют ситуации оформления, когда этого будет недостаточно.
Например, в параграфе может понадобиться использовать стиль для определенной буквы, слова, фразы или других текстовых строк, расположенных внутри параграфа. Применение таблицы стилей к тегу <p> не предоставляет возможности выбрать, какие подстроки параграфа оформлять стилем. Все символы параграфа получают единое оформление.
Другим примером является последовательная группа параграфов, для которой необходимо использовать один и тот же стиль. Можно, конечно, скопировать и применить одну и ту же линейную таблицу стилей для отдельных тегов <p>, чтобы задать для них одинаковый вид. Однако, было бы удобнее иметь возможность применить один стиль к параграфам как к группе, не задавая для них стиль по отдельности.
Для таких и других ситуаций оформления, включающих строки текста длиной меньше параграфа и блоки текста больше параграфа, XHTML предоставляет теги маркировки для определения и обособления определенных разделов или подразделов страницы, к которым может применяться стиль оформления.
Тег <span> является линейным тегом, который помещают вокруг текста с целью идентификации строки символов, где применяется таблица стилей этого тега. Тег может ограничивать одну букву, слово, фразу, предложение или любую другую подстроку текста с целью ее определения для применения оформления. Напомним также, что линейный тег <span> окружает строку текста, расположенную внутри блочного контейнера.
В следующем параграфе слова "КРАСНЫЙ" и "СИНИЙ" выделяются тегами <span> как слова, для которых эти теги определяют цвет. Когда этот параграф выводится в браузере, эти два слова выводятся соответствующими цветами.
<p>Этот параграф содержит слово <span style="color:red">RED</span>, которое
находится внутри тега <span>, чтобы определить цвет этого слова. В этом
предложение для слова <span style="color:blue">BLUE</span> задан этот
цвет.</p>
Тег <span> является просто маркером для выделения текста, к которому можно применить его таблицу стилей. Он не имеет своих собственных встроенных характеристик форматирования. Он не создает разрыва строки и не создает пробела. Поэтому его можно использовать линейным образом, в обычном потоке текста просто для оформления ограниченного им контента. Конечно, применяемый стиль должен подходить для вложенной строки текста. Например, было бы неуместно применять свойство
Тег <div> (division) служит, как и тег <span>, разновидностью маркера. Его назначение состоит в ограничении и определении набора элементов страницы для применения стиля оформления к вложенному множеству. Тег <div> является блочным тегом, так как он охватывает другие теги и, что важно, создает на странице перенос строки перед своим вложенным содержимым и после него.
Использование тега <div> иллюстрируется двумя следующими параграфами. Оба параграфа оформляются одинаково. Однако вместо кодирования этих стилей с помощью линейных таблиц стилей в обоих тегах <p>, параграфы окружены тегом <div>, который определяет эти стили. Параграфы наследуют стили охватывающего тега <div>. Вывод браузером этого форматирования показан на рисунке 3.15.
<div style="text-indent:25px; margin-left:30px; margin-right:30px; text-align:justify"> <p>Этот параграф имеет отступ первой строки в 25 пикселей. Он имеет левое и правое поле по 30 пикселей и выровнен по ширине между двумя полями.</p> <p>Этот параграф также имеет отступ первой строки в 25 пикселей. Он имеет левое и правое поле по 30 пикселей и выровнен по ширине между полями. Оба параграфа оформлены с помощью охватывающего тега раздела div для применения этих стилей к обоим параграфам.</p> </div>
(рис 3.16) Параграфы, оформленные охватывающим тегом <div>Тег <div> не имеет никаких видимых собственных характеристик форматирования, кроме того факта, что он создает перенос строки перед и после окаймленного содержимого. Эти переносы строк не видны в приведенном выше примере, так как теги <p> сами создают собственные переносы строк, которые объединяются с переносами строк тега <div>.
Так как тег <div> подобно тегу <span> обеспечивает большую гибкость при обрамлении и оформлении содержимого страницы, в дальнейшем существуют многочисленные случаи использования тегов <span> и <div> для применения форматирования к широкому набору элементов страницы.
Использование встроенных таблиц стилей было предложено в качестве обычного способа применения к тегам стилей оформления уровня страницы. Там, где некоторым тегам нужно задать специальные стили, отличающиеся от стилей уровня страницы, для изменения оформления используются линейные таблицы стилей.
Тем не менее, там, где удобно, встроенные таблицы стилей всегда должны быть предпочтительным методом оформления, даже для приложения специальных только одноразовых стилей. Встроенные таблицы стилей локализуют настройки стиля оформления в одном разделе страницы <style>, делая их более доступными, чем если бы они были разбросаны по множеству линейных таблиц стилей. Встроенные таблицы стилей можно также легко преобразовать во внешние таблицы стилей для приложений уровня сайта. Ниже обсуждаются способы применения специального оформления элементов страницы с помощью встроенных объявлений стиля, а не с помощью линейных таблиц стилей.
За счет пересмотра большую часть встроенного оформления можно выполнить с помощью селекторов отдельных тегов и соответствующих объявлений стиля. Эти простые селекторы объявляют используемое по умолчанию оформление тега для всей страницы. Общий формат простого селектора показан в листинге 3.33.
selector {property:value [; property:value] ... }
Любое число селекторов можно объединять во встроенной таблице стилей с любым числом свойств стиля. Например, следующие простые селекторы задают форматирование уровня страницы для полей страницы, заголовков и параграфов. В любом месте на странице, где встретится один из этих тегов, браузер будет использовать соответствующий стиль оформления.
<style type="text/css">
body {margin:20px; color:black}
h1 {color:blue; text-align:center}
h2 {color:blue; text-align:left}
p {text-align:justify; text-indent:25px}
</style>
Существуют, однако, ситуации, когда эти стили уровня страницы необходимо для определенных тегов модифицировать. Например, один или несколько параграфов в документе могут требовать отличающегося выравнивания или отступов, или определенный заголовок может использовать другой стиль для выделения его среди остальных заголовков. Хотя можно применять линейные таблицы стилей для переопределения этих встроенных объявлений, существуют способы определения исключительных стилей в самой встроенной таблице стилей.
Одним из способов применения специальных стилей для отдельных элементов страницы является задание для элемента уникального идентификатора. Затем во встроенной таблице стилей можно применить специальное оформление только к элементу с этим идентификатором.
Предположим, например, что для всей страницы Web принят для параграфа общий отступ и выравнивание с помощью показанной выше встроенной таблицы стилей. Скажем, все параграфы имеют отступ в 25 пикселей, а текст выравнивается по ширине с отступом первой строки в 25 пикселей. Предположим теперь, что один определенный параграф на странице требует отличающегося оформления. Этот один параграф должен быть смещен на 25 пикселей от левого и правого полей относительно окружающих параграфов, и он не должен иметь отступа в первой строке.
Первый шаг в оформлении этого конкретного параграфа состоит в присвоении ему значения id. id является уникальным идентификатором для тега. Он может быть любым именем, выбранным как комбинация алфавитных и цифровых символов. В следующем коде идентификатор id="Special" присвоен параграфу, требующему специального форматирования.
<p id="Special">Этот параграф требует специального оформления,
отличающегося от обычных параграфов на странице. Он должен быть смещен
на 25 пикселей от обоих полей и не должен иметь отступа в первой
строке.</p>
С помощью id, присвоенного этому тегу <p>, можно определить специальное оформление, используя селектор ID во встроенной таблице стилей. Общий формат селектора ID показан в листинге 3.36.
selector#id {property:value [; property:value] ...}
Стили определяют для селектора, но только для селектора с заданным ( # ) значением id. Таким образом, селектор ID можно добавить к приведенной выше таблице стилей, чтобы отформатировать специальный параграф иначе, чем обычный параграф:
<style type="text/css">
body {margin:20px; color:black}
h1 {color:blue; text-align:center}
h2 {color:blue; text-align:left}
p {text-align:justify; text-indent:25px}
p#Special {text-indent:0px; margin-left:25px; margin-right:25px}
</style>
Синтаксис p#Special относится к тегу <p> со значением id (#), заданным как "Special". Стандартный отступ первой строки в 25 пикселей, заданный простым селектором p, изменен на 0 пикселей для этого конкретного параграфа. Для этого параграфа также заданы значения левого и правого полей, отличающиеся от обычных параграфов. Однако его текст остается выровненным по ширине, как унаследовано из оформления стандартного параграфа, заданного селектором p. Другими словами, все параграфы наследуют оформление, заданное простым селектором p, если только стили не модифицируются или не дополняются селекторами p#id.
Такой тип идентификация тега и оформления можно использовать для любого тега. Присвойте просто тегу уникальный id и выделяйте его из других тегов такого же типа, добавляя это значение #id к селектору тега.
Оформление тегов <span> и <div> не должно выполняться с помощью простых селекторов во встроенной таблице стилей. Эти теги часто появляются на странице несколько раз, чтобы выделить и оформить различные части текста и различные наборы элементов страницы, которые обычно требуют различного оформления. Поэтому невозможно связать один определенный стиль с этими тегами, не ограничивая их гибкость в оформлении других фрагментов текста или разделов, которые требуют отличающегося оформления. Другими словами, не применяйте кодирование следующих простых селекторов во встроенных таблицах стилей.
<style type="text/css">
div {property:value}
span {property:value}
</style>
Однако, используя селекторы ID с этими тегами, можно применять различное оформление для различных тегов <span> и <div>, не связывая их с одним определенным стилем.
В следующем примере двум параграфам задают один и тот же стиль, помещая их внутри тега <div>, для которого задается специальное оформление. Это оформление влияет только на этот единственный раздел с помощью своего уникального селектора ID. Оформление других разделов не затрагивается, так как они не имеют этого значения id. В то же самое время два тега <span>, получают свое уникальное оформление через свои уникальные значения id, оставляя незатронутым все остальное оформление охваченного тегами <span> текста.
<style type="text/css">
div#Justify {text-align:justify}
span#Red {color:red}
span#Blue {color:blue}
</style>
<div id="Justify">
<p>Этот параграф оформляется наследованием оформления своего
контейнерного раздела, который форматируется с помощью <span
id="Red">"Justify"</span> style.</p>
<p>Это параграф также оформляется наследованием оформления своего
контейнерного раздела. Кроме того, к одному из его слов применяется
оформление <span id="Blue">"Blue"</span></p>
</div>
Определяя селектор класса, можно объявить стиль оформления общего назначения для применения к любому тегу, которому понадобится применить этот стиль. Селектор класса определяется во встроенной таблице стилей, как показано его общей формой в листинге 3.40.
.class {property:value [ ;property:value] ...}
Вместо указания тега или использования в селекторе id, задается имя класса, перед которым ставится точка. Для селектора .class можно задавать любое имя, оно не может только включать пробелы или специальные символы. Любая комбинация свойств и значений стилей оформления может быть связана с этим классом стиля оформления.
Следующая встроенная таблица стилей включает класс оформления с именем .Offset. После определения этого класса его можно задать для любого тега с помощью атрибута class="class". Ниже этот класс стиля оформления задается параграфу, когда его присваивают тегу <p>. Этот параграф получает оформление класса .Offset, в данном случае с помощью переопределения обычного оформления, задаваемого простым селектором p.
<style type="text/css">
p {margin:20px}
.Offset {margin-left:30px; margin-right:30px}
</style>
<p class="Offset">Этот параграф требует специального оформления,
отличающегося от обычных параграфов на странице. Он имеет левое и правое
поле шириной по 30 пикселей.</p>
(Отметим, что присвоенный тегу класс не включает точку, которая требуется при объявлении селектора .class в таблице стилей.)
Класс стиля является стилем общего назначения, который можно применять к тегу любого типа, задавая просто класс тегу; плюс, в отличие от селектора ID, селектор класса можно присваивать любому числу тегов. Поэтому любые параграфы, разделы и другие типы блочных тегов могут использовать приведенное выше оформление, присваивая его в классе .Offset. Конечно, тег, к которому применяется класс, должен быть восприимчив к определенным свойствам и значениям, объявляемым классом.
Классы стилей особенно подходят для тегов <span> и <div> для оформления строк текста и блоков кода, не связывая эти теги с определенным стилем. Эти теги становятся носителями множества различных стилей просто при присвоении им различных классов стилей. Следующий код является примером применения различных классов стилей к различным тегам для создания страницы, показанной на рисунке 3.16.
<head>
<title>Стили классов</title>
<style type="text/css">
.Offset {margin-left:25px; margin-right:25px; text-align:justify}
.Red {color:red}
.Blue {color:blue}
.Rule {height:2px; width:75%; text-align:center; color:green}
</style>
</head>
<body>
<hr class="Rule"/>
<div class="Offset">
<p>Этот параграф имеет форматирование, задаваемое охватывающим
разделом. Внутри этого параграфа слово <span class="Red">RED</span>
использует собственный класс стиля.</p>
<p>Этот параграф также оформляется охватывающим разделом. Внутри
этого параграфа слово <span class="Blue">BLUE</span> использует
собственный класс стиля.</p>
</div>
<hr class="Rule"/>
</body>
(рис 3.17) Применение классов стилейОба параграфа выше оформляют, помещая их внутри раздела, которому присвоен класс стиля Offset. Поэтому параграфы наследуют оформление раздела, которое в данном случае смещает оба параграфа относительно полей страницы и выравнивает их текст по ширине. Эта техника имеет такой же результат, как и объявление селектора ID для оформления раздела ( div#Offset ) и применение стиля через этот селектор ID ( <div id="Offset" ). Однако класс .Offset является более гибким, так как его можно ассоциировать с другими тегами, кроме разделов. Любые теги на странице могут получать стиль .Offset при присвоении их этому классу.
В каждом параграфе есть отдельные слова, которые получают оформление цветом. Эти слова помещены внутри тегов <span>, которые задают цвет, присваивая теги классу стиля .Blue или .Orange. В связи с этим, если какие-либо другие разделы страницы - параграф, заголовок, что-то еще - понадобится вывести одним из этих цветов, то ограничивающим их тегам можно будет присвоить эти же самые классы стиля. Любое обычное оформление этих тегов будет дополняться этими заданными цветами.
Обе горизонтальные линейки имеют ширину 75% страницы и высоту 2 пикселя, зеленый цвет и размещены по центру. Сделан вариант определения класса стиля представления этого оформления и присваивания всех тегов <hr/> этому классу. Конечно, эти стили можно было бы определить для простого селектора hr без использования класса. Однако выбран вариант создания классов для всех оформлений и присваивания тегов этим классам, как диктует необходимость. Нет ничего необычного во встроенной таблице стилей, состоящей исключительно из классов стилей, которые выборочно применяются ко всем разновидностям тегов, требующих этих стилей.
Во всем этом вполне можно запутаться. Можно использовать внешние таблицы стилей, встроенные таблицы стилей, линейные таблицы стилей или некоторые их комбинации. При использовании внешних или встроенных таблиц стилей можно применять простые селекторы тегов, селекторы ID или классы стилей. Далее в учебнике будут представлены дополнительные возможности оформления. Что делать разработчику со всеми этими средствами?
С учетом различных подходов к оформлению ниже представлена разумная стратегия использования. Можно будет разработать и свои собственные предпочтительные подходы, когда вы станете лучше разбираться в таблицах стилей, но описанный подход является хорошим началом для выбора варианта использования.
<span> и <div>. Используйте также классы
стилей, когда два или несколько тегов требуют форматирования,
отличающегося или дополняющего то, что задано их простыми селекторами
тегов.id и задавайте его оформление с помощью селектора ID во встроенной
таблице стилей.Хотя предпочтение отдается применению встроенных таблиц стилей, - и, расширительно, внешним таблицам стилей, - в этом учебнике часто используются линейные таблицы стилей в качестве обучающего инструмента для знакомства и описания свойств стилей. Однако всегда предполагается, что линейные стили будут перенесены во встроенные или внешние таблицы стилей, когда страницы "будут включены в производственную систему".
Этот раздел делает вводное знакомство с таблицами стилей. Существует большое множество свойств стилей, которые еще надо рассмотреть, и много других вариантов тех, которые были здесь рассмотрены. Важность таблиц стилей невозможно переоценить. После исключения большинства атрибутов форматирования тегов, таблицы стилей стали основным методом организации и вывода содержимого страницы. Использование линейных, встроенных и внешних таблиц стилей стало сущностью кодирования XHTML.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.