Текст книги "HTML, XHTML и CSS на 100%"
Автор книги: Игорь Квинт
Жанр: Программирование, Компьютеры
сообщить о неприемлемом содержимом
Текущая страница: 2 (всего у книги 23 страниц) [доступный отрывок для чтения: 6 страниц]
Внутри этого элемента задаются стили, используемые на странице. Таких элементов внутри заголовка страницы может быть несколько. Элемент STYLE поддерживает знакомые вам атрибуты lang и title, а также новые атрибуты type и media. Атрибут type указывает, какой язык задания стилей применяется в данном документе, а атрибут media определяет, на каком устройстве предполагается воспроизводить данный HTML-документ.
Для задания стилей в документе HTML 4.01 применяется язык CSS, который мы будем подробно рассматривать в гл. 7. Здесь же мы немного познакомим вас с возможностями этого языка, чтобы вы поняли их достоинства. Они настолько велики, что консорциум W3C отказался от использования атрибутов форматирования содержимого HTML-документов в элементах, применяемых для разметки текста, например задающих шрифт, его начертание и прочие характеристики. Все эти методы признаны устаревшими, на их смену пришли средства CSS.
Каскадные таблицы стилей (CSS) используют, чтобы максимально отделить HTML-код страницы от ее оформления. Иными словами, внутри таблицы описано оформление различных элементов, а в HTML-коде – только применяемый стиль. Это очень удобный метод – вы можете менять оформление страницы, цвет фона, шрифт, не перебирая огромное количество команд HTML-кода, а просто заменив его в таблице стилей.
Элемент STYLE позволяет реализовать возможности CSS в документе без применения внешних источников. Внутри этого элемента можно записывать код форматирования содержимого странички в формате CSS. Чтобы браузер знал формат кода, атрибуту type элемента STYLE присваивается значение text/css, сообщающее браузеру о применении средств CSS. Вот пример задания CSS-стиля:
<style type="text/css">
p.style {
color:#CC0000;
background:#9999CC;
word-spacing:20px;
}
Здесь запись p.style указывает, что для элемента P, создающего абзац, определяется стиль под названием style, который определяет для текста внутри абзаца цвет шрифта (color: #CC0000), фона (background: #9999CC) и расстояние между словами (word-spacing:2 0px).
Чтобы подключить к элементу какой-либо стиль, нужно использовать атрибут class и в качестве его значения установить название стиля, который необходимо применить к этому элементу:
<p class="style">
Текст со стилем style
</p>
Таким образом, используя язык CSS и элемент STYLE, можно создать стили для конкретного элемента или общий стиль, который будет применим к любому элементу, а далее просто ссылаться на этот стиль в процессе разметки документа.
Более того, с помощью элемента STYLE можно задать разные стили для вывода на экран и для вывода на печать. Это полезно, если в качестве фона вы используете темные тона или рисунок. Совершенно не обязательно оставлять подобное декорирование документа при выводе на печать, тем более что это потребует больше краски от принтера. Для этого нужно использовать атрибут media.
Значения атрибута media таковы:
• print – стили для вывода на печать;
• screen – стили для вывода на экран;
• all – стили для вывода на любое устройство.
На примере кода из листинга 1.6 рассмотрим основы синтаксиса CCS.
Листинг 1.6. Использование стилей
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css" media="screen" >
p.style {
color:#CC0000;
background:#9999CC;
word-spacing:20px;
}
.style2 {
color:#66FFFF;
background:#990000;
word-spacing:10px;
}
</style>
<style type="text/css" media="print" >
p.style {
color:#000000;
background:#FFFFFF;
word-spacing:20px;
}
.style2 {
color:#000000;
background:#FFFFFF;
word-spacing:10px;
}
</style>
<title>Использование стилей</title>
</head>
<body>
<p class="style">
Текст со стилем style
</p>
<p class="style2">
Текст со стилем style2
</p>
<table border="1" >
<tr>
<td class="style2">
Для ячейки применен стиль style2
</td>
</tr>
</table>
</body>
</html>
В примере создано два стиля: style можно применять только для элемента P (для обозначения этого перед названием стиля стоит название элемента), style2 – для любого объекта. В листинге 1.6 стиль style2 применен еще и для ячейки таблицы.
Результат обработки листинга 1.6 представлен на рис. 1.3.
Рис. 1.3. Использование стилей
Для вывода на печать будет использован черный шрифт с белым фоном. Этим мы сэкономим чернила пользователей.
Совет
На странице можно делать ссылки на отображение документа в формате для вывода на печать. Это даст возможность пользователю определить, устраивает ли его установленный формат вывода.
Есть еще один способ применения к элементу стиля: встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Такой атрибут доступен для всех элементов HTML. В нем в формате CSS через точку с запятой прописываются значения разных свойств элемента. Вот как это выглядит для элемента P:
<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">
Как видите, CSS-код совпадает с содержимым элемента STYLE из предыдущего примера. В листинге 1.7 представлен пример задания свойств элементов с помощью встраивания CSS-кода в значение атрибута style.
Листинг 1.7. Использование атрибута style
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Использование стилей</title>
</head>
<body>
<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">
Текст с атрибутом style="color:#CC0000; background:#9999CC; word-spacing:20px;"
</p>
<p style="color:#66FFFF; background:#990000; word-spacing:10px;">
Текст с атрибутом style="color:#66FFFF; background:#990000; word-spacing:10px;"
</p>
<table border="1" >
<tr>
<td style="color:#66FFFF; background:#990000; word-spacing:10px;">
Описание ячейки таблицы с атрибутом style="color:#66FFFF; background: #990000; word-spacing:10px;"
</td>
</tr>
</table>
</body>
</html>
Здесь применены такие же стили, как и в предыдущем примере, но параметры заданы с помощью атрибута style.
На рис. 1.4 показан результат обработки кода из листинга 1.7.
Рис. 1.4. Установка стилей с помощью атрибута style
Как видно из рисунков, результаты обоих листингов одинаковые по стилям. Однако задавать стили в начале документа удобнее, потому что при необходимости их легко будет найти и исправить.
Еще один способ задать стили для документа – записать их в отдельный файл с разрешением CSS. Синтаксис записи в этот файл такой же, как и при использовании элемента STYLE, однако этот способ более универсален.
Подключить файл со стилями к документу можно двумя способами. Первый представлен в листинге 1.8 и использует элемент STYLE. Внутри этого элемента нужно записать такую строку: @import URL("nyTb к файлу с таблицами");.
Листинг 1.8. Импорт файлов с таблицами стилей
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
@import URL("test.css");
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Использование стилей</title>
</head>
</html>
При такой настройке к элементам нашего документа можно будет применять стили, описанные в файле test.css.
Элемент LINKИспользование элемента LINK – это второй способ подключения файла с таблицами стилей к документу. Элемент не требует наличия закрывающего тега. Его возможности намного шире, нежели просто подключение таблиц стилей. В общем, элемент LINK определяет отношения между текущей страницей и другими документами. Поскольку отношения могут быть разными, то и элементов LINK на странице может быть много.
Основным для этого элемента является атрибут href; его значение – это путь к объекту, для которого описывается тип связи. Этот атрибут является обязательным, что вполне логично – странно было бы устанавливать связи с объектом, не указав, где он расположен.
Другим атрибутом является type, он задает параметры объекта, с которым определяется связь. При связывании таблиц стилей этот атрибут принимает значение text/css.
У элемента LINK есть два взаимодополняющих атрибута: rel и rev. Первый определяет отношение между текущим документом и другим, а второй – отношение другого документа к текущему. Эти атрибуты могут принимать различные фиксированные значения, которые обозначают типы отношений.
В листинге 1.9 представлены примеры использования элемента LINK.
Листинг 1.9. Использование элемента LINK
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
<link href="copyrihgt.html" rel="copyright" />
<link href="help.html" rev="help" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Использование элемента LINK</title>
</head>
</html>
В примере из листинга 1.9 элемент LINK использован для прикрепления к текущему документу таблиц стилей, для указания файла, содержащего информацию об авторском праве на данный документ, и для определения файла, в котором хранится справочная информация.
В табл. 1.6 приведены некоторые возможные значения атрибута rel. За более подробной информацией стоит обратиться к специальной литературе или к спецификации на сайте W3C.
Таблица 1.6. Некоторые значения атрибута rel
Совет
Использование значения alternate атрибута rel в сочетании с другими атрибутами hreflang и charset, которые задают в элементе LINK язык и кодировку документа, подскажет браузеру, где искать альтернативные версии текущего документа, написанные на других языках.
Мы разобрались с элементом LINK и выяснили его возможности относительно работы с различными документами и в частности с таблицами стилей. Теперь рассмотрим элемент, который пригодится при работе с другими важными объектами создания сайтов.
Элемент SCRIPTЭлемент SCRIPT позволяет присоединять к документу сценарии. Он требует наличия закрывающего тега, при этом текст сценария может располагаться либо в этом элементе, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента SCRIPT.
Рассмотрим атрибуты этого элемента. Основным можно считать атрибут type, который задает язык сценария, присоединяемого к странице. Если этот атрибут задан, он отменяет установленный по умолчанию язык сценариев. На случай подключения внешнего файла со сценариями у элемента SCRIPT есть атрибут src, в качестве значения которого используют место расположения файла со сценариями. Это удобно, если для различных страниц нужно использовать одинаковые сценарии.
У элемента SCRIPT есть еще один вспомогательный атрибут – defer, который запрещает загружать сценарий до окончания полной загрузки страницы.
В листинге 1.10 показаны разные примеры подключения сценариев к HTML-документу.
Листинг 1.10. Использование элемента SCRIPT
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script defer="defer" type="text/javascript">
<!–текст сценария–>
</script>
<script type="text/javascript" src="test.js">
</script>
<title>Использование элемента SCRIPT</title>
</head>
</html>
Количество подключаемых сценариев не ограничено, однако помните, что на их обработку требуется время, так что не стоит загружать браузер больше необходимого.
Элемент BASEЕсли внутри документа создаются относительные ссылки на файлы, то может возникнуть ситуация, когда текущий документ перемещен и файлы становятся недоступны. Но в языке HTML есть инструменты для решения этой проблемы.
Элемент BASE служит для того, чтобы задать базовый адрес, относительно которого вычисляются все относительные адреса. Это поможет избежать проблем в случае переноса вашей страницы в другое место. Иначе говоря, все ссылки будут работать, как и прежде.
Примечание
Абсолютный адрес документа использует полный путь к нему, начиная с корневого каталога. Например, C:Testtest.jpg для файлов на вашем компьютере или http:// www.test.test/mytests/test.html для документов, расположенных в Интернете. Если путь к файлу очень длинный и неудобно каждый раз вводить его, то можно задать относительный адрес. Например, чтобы из документа, находящегося по адресу C:TestMyTeststest.html, получить доступ к документу C:Testtest.jpg, достаточно в нем набрать. test.jpg, при этом знак «.» означает переход на более высокий уровень иерархии каталогов.
Основным атрибутом элемента BASE является href. В качестве его значения используется адрес базовой папки, относительно которой и будут вычисляться относительные адреса.
Еще одним полезным атрибутом этого тега является target. Он предназначен для работы с фреймами, то есть с HTML-документами, представляющими собой набор окон, каждое из которых является дочерним к основному, родительскому окну документа. Атрибут target определяет, в какое окно будут загружаться страницы по ссылкам, встречающимся в документе. Этот атрибут может принимать четыре значения:
• _top – отменяет все фреймы и загружает страницу в полное окно браузера;
• _blanc – загружает страницу в новое окно;
• _self – загружает страницу в текущее окно;
• _parent – загружает страницу во фрейм-родитель.
При этом можно использовать элемент BASE с указанием только одного из атрибутов.
В листинге 1.11 представлен пример использования элемента BASE.
Листинг 1.11. Использование элемента BASE
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="http://www.test.test/" target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Использование элемента BASE</title>
</head>
</html>
В примере из листинга 1.11 все относительные адреса будут браться от адреса http://www.test.test/, то есть если в тексте документа будет строка с адресом ../IMG/test.jpg, то браузер будет ее воспринимать как http://www.test.test/IMG/test.jpg. При этом все ссылки будут открываться в новых окнах, если среди параметров самой ссылки не указать другой вариант.
Мы разобрались со всеми элементами, которые можно использовать внутри элемента HEAD, и от заголовка документа пора перейти к его телу.
Элемент BODYВнутри элемента BODY располагается сам документ: весь текст, находящийся между открывающим тегом <BODY> и закрывающим тегом </BODY>, будет отображаться браузером. Все элементы, отвечающие за форматирование документа, помещают внутрь элемента BODY.
Атрибуты элемента BODY применяются для того, чтобы установить общие для всего документа свойства, и в этом отношении возможности данного элемента достаточно большие: можно задать цвет ссылок, параметры фона и т. п.
Сначала рассмотрим атрибуты элемента BODY, управляющие отображением ссылок. Для удобства посетителей страницы надо задавать разные цвета для посещенных, непосещенных и активных ссылок, при этом нужно следить, чтобы они не сливались с цветом фона страницы, потому что это будет неудобно посетителям.
За цвет ссылок отвечают следующие атрибуты элемента BODY:
• alink – задает цвет активной ссылки;
• vlink – определяет цвет посещенной ссылки;
• link – устанавливает цвет непосещенной ссылки.
Цвета ссылок можно задать в HEX-формате или ключевыми словами. Ключевые слова имеет смысл использовать, если вы хотите применить стандартный цвет. Ну а если вы собираетесь устанавливать нестандартные цвета, придется воспользоваться HEX-форматом.
В примере из листинга 1.12 представлены оба варианта записи.
Листинг 1.12. Цвет ссылок
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="http://www.test.test/" target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Использование элемента BODY</title>
</head>
<body alink="#00FF00" vlink="red" link="#330000">
</body>
</html>
В примере для активной и непосещенной ссылки цвет задан с помощью цифр и букв: они определяют код цвета в шестнадцатеричном формате и записываются в качестве значения соответствующего атрибута после знака #. Для посещенной ссылки цвет задан ключевым словом. Использовать ключевые слова просто. В качестве обозначения цвета с их помощью применяются стандартные названия цветов на английском языке. Указывайте простые названия цветов вроде blue, red, black и не ошибетесь.
Что касается записи цвета в цифрах, то код для нужного цвета можно определить, используя любой графический редактор.
Элемент BODY предоставляет большие возможности для управления фоном страницы. Рассмотрим атрибуты, отвечающие за это.
Для начала надо задать фоновый цвет страницы. Это делается с помощью атрибута bgcolor, значение которого определяет цвет фона. Потом нужно указать фоновый рисунок страницы с помощью атрибута background, значение которого представляет собой адрес файла с рисунком для фона. При этом старайтесь ставить цвет фона, близкий к цветовой гамме фонового рисунка. Это пригодится, если у пользователя не загрузится фоновый рисунок. Когда цвет фона близок к цвету рисунка, не будет дисбаланса в общем виде страницы.
Следующий атрибут управляет прокруткой фона и называется bgproperties. Он определяет, будет ли фон прокручиваться вместе с текстом. Этот атрибут принимает всего одно значение fixed, позволяющее зафиксировать фон документа и не прокручивать его вместе с текстом. В противоположном случае нужно просто удалить этот атрибут. При выборе параметров прокрутки фона надо действовать очень осторожно и следить за тем, чтобы при прокрутке не терялась читаемость текста.
В листинге 1.13 представлен пример использования атрибутов элемента BODY, отвечающих за фон документа.
Листинг 1.13. Параметры фона
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<base href="http://www.test.test/" target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Использование элемента BODY</title>
</head>
<body background="test.jpg" bgcolor="#0033CC" bgproperties="fixed">
</body>
</html>
В примере из листинга 1.13 файл test. jpg оформлен в синих тонах, поэтому и цвет фона взят из синей гаммы. Прокрутка фона вместе с текстом запрещена.
После того как мы разобрались с фоном, можно задать положение содержимого страницы относительно границ окна браузера.
За отступ от границ окна отвечают следующие атрибуты элемента BODY:
• bottommargin – определяет расстояние от нижнего края окна браузера до содержимого страницы;
• leftmargin – указывает расстояние от левого края окна браузера до содержимого страницы;
• topmargin – задает расстояние от верхнего края окна браузера до содержимого страницы.
Расстояние для всех атрибутов устанавливается в пикселах.
В листинге 1.14 приведен пример указания расстояния до содержимого страницы с помощью атрибутов элемента BODY.
Листинг 1.14. Установка расстояния от границ окна до содержимого страницы
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<base href="http://www.test.test/" target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Использование элемента BODY</title>
</head>
<body topmargin="10" leftmargin="20" bottommargin="10">
</body>
</html>
В примере расстояние сверху и снизу будет по 10 пикселов, а слева – 20 пикселов.
У элемента BODY есть еще два атрибута, которые могут нам пригодиться. Атрибут text отвечает за цвет текста в документе. Когда задаете цвет текста, следите, чтобы он не сливался с фоном страницы.
Атрибут scroll определяет, будет ли в окне документа вертикальная полоса прокрутки. У него всего два значения: yes и no, обозначающие разрешить и запретить прокрутку соответственно. На самом деле запрещать прокрутку не стоит, потому что документ, который у вас на экране виден полностью без проблем, у пользователя с низким разрешением монитора может не поместиться на экране. В итоге без полосы прокрутки он просто не увидит часть документа.
Мы рассмотрели элемент BODY, его возможности и функции. Все параметры, определяемые в этом элементе, влияют на общий вид документа.
Когда вы создаете большие сайты, то со временем можете забыть, что именно делает та или иная часть кода страницы. Комментарии помогут избежать этого.
Правообладателям!
Данное произведение размещено по согласованию с ООО "ЛитРес" (20% исходного текста). Если размещение книги нарушает чьи-либо права, то сообщите об этом.Читателям!
Оплатили, но не знаете что делать дальше?
