HTML: Популярный самоучитель - Александр Чиртик
Шрифт:
Интервал:
Закладка:
11.10. Псевдоклассы текста
Помимо гиперссылок, еще как минимум два псевдокласса предусмотрены для обычного текста. При помощи этих псевдоклассов можно ссылаться на первую букву или первую строку текста, содержащегося в HTML‑элементе.
Для ссылки на первую букву текста используется псевдокласс first-letter. Его можно использовать, например, для создания буквицы (см. рис. 11.10). Правда, добиться такого же результата можно и при помощи рассмотренного далее HTML‑элемента SPAN в сочетании со стилем CSS, примененным к этому элементу. Но теперь речь идет не об элементе SPAN, а о псевдоклассе first-letter.
Итак, для создания буквицы, показанной на рис. 11.10, используется приведенный в примере 11.6 HTML‑код.
Рис. 11.10. Заглавная буква страницы
Пример 11.6. Создание буквицы<HTML>
<HEAD>
<TITLE>Первая буква</TITLE>
<STYLE type = "text/css">
P.first_par:first-letter {font-size:300%; font-weight:bold; color:blue}
</STYLE>
</HEAD>
<BODY>
<P class = "first_par">Первая буква этого текста будет большой и красивой буквой синего цвета.
<P>Все последующие абзацы будут начинаться по-обычному
</BODY>
</HTML>
Как было сказано ранее, в CSS можно также ссылаться на первую строку текста HTML‑элемента. Для этого используется псевдокласс first-line. Этот псевдокласс бывает очень полезен, так как нельзя точно предугадать, где браузер разорвет строку (если, конечно, не используется запрет разрывов строки, рассмотренный в гл. 3). Место разрыва первой строки зависит от ширины окна браузера или ширины HTML‑элемента, в который помещен текст, а также от размера шрифта и стиля текста. Пример выделения первых строк абзацев приведен на рис. 11.11.
Рис. 11.11. Особое оформление первых строк абзацев
Текст HTML‑документа, показанного на рис. 11.11, приведен ниже (пример 11.7).
Пример 11.7. Особое оформление первых строк абзацев<HTML>
<HEAD>
<TITLE>Первая строка</TITLE>
<STYLE type = "text/css">
P:first-line {font-weight:bold; color:blue}
P.big {font-size:150%}
P.small {font-size:75%}
</STYLE>
</HEAD>
<BODY>
<P>Абзац, оформленный шрифтом по умолчанию. ...
<P class = "big">Абзац, оформленный шрифтом большого размера. ...
<P class = "small">Абзац, оформленный шрифтом малого размера. ...
</BODY>
</HTML>
Как видите, использование псевдокласса first-line является простым и универсальным способом изменения оформления первых строк текста, заключенного внутри HTML‑элементов. При этом нас не интересует, как отделить от текста именно первую строку при разных разрешениях экрана, разных размерах окна браузера, да и в разных браузерах.
11.11. Создание CSS для различных устройств
При использовании таблиц стилей у автора имеется возможность позаботиться о том, чтобы страницы его сайта одинаково хорошо обрабатывались самыми различными устройствами. Это достигается созданием таблиц стилей, которые используются, если просмотр производится с помощью заданного устройства.
Сами таблицы стилей создаются как обычно, то есть в CSS‑файле или внутри HTML‑элемента STYLE. Вся хитрость заключается в указании нужного значения атрибута media элемента LINK (при подключении внешней CSS) или элемента STYLE (для встроенной таблицы).
Атрибут media может принимать в качестве значения список из одного или более следующих строковых идентификаторов:
• all – таблица подходит для любого устройства;
• aural – таблица используется для речевых синтезаторов (таблицы управления свойствами потоком речи гораздо более сложны, чем таблицы для графических средств просмотра, и в этой книге не рассматриваются);
• braille – таблица применяется для устройств, генерирующих последовательность символов алфавита Брайля (предназначенного для людей с ослабленным зрением);
• handled – таблица используется для устройств с небольшим экраном, имеющим также ограничения по цветопередаче и прочим параметрам (карманные ПК и прочие портативные устройства);
• print – таблица применяется при выводе страницы на печать, а также при выводе в окне предварительного просмотра;
• projection – таблица используется при просмотре документа с помощью проектора или другого сходного устройства;
• screen – таблица применяется при отображении на экране стандартного монитора (используется по умолчанию);
• tty – таблица используется при выводе на устройства с ограниченными возможностями отображения (телетайпы, терминалы и др.);
• tv – таблица применяется при отображении на экране телевизора или сходного по возможностям устройства.
Теперь рассмотрим небольшой пример документа, который по‑разному отображается, например, на экране монитора и при выводе на печать (самые доступные режимы при применении только ПК) (пример 11.8).
Пример 11.8. Документ для различных устройств<HTML>
<HEAD>
<TITLE>Использование встроенной таблицы стилей</TITLE>
<!– Определение таблицы стилей для вывода на печать–>
<STYLE type = "text/css" media = "print">
H1 {color: black; font-family: newroman; text-align: center}
H2, H3 {color: black; font-family: newroman; text-align: center}
P {font-style: normal; font-weight: normal; color: black}
</STYLE>
<!– Определение таблицы стилей для монитора–>
<STYLE type = "text/css" media = "screen">
BODY {background-color: black}
H1 {color: red; font-family: arial; text-align: center}
H2, H3 {color: yellow; font-family: courier; text-align: left}
P {font-style: italic; font-weight: bold; color: white}
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок первого уровня</H1>
<P>Текст абзаца
<H2>Заголовок второго уровня</H2>
<P>Текст абзаца
<H3>Заголовок третьего уровня</H3>
<P>Текст абзаца
</BODY>
</HTML>
На экране монитора документ выглядит так, как показано на рис. 11.12 (используется таблица со значением атрибута media равным screen).
Рис. 11.12. Страница в окне браузера
При выводе на печать (в окне предварительного просмотра) используется таблица стилей со значением media=print, что видно из рис. 11.13.
Рис. 11.13. Страница в окне предварительного просмотра
Конечно, даже при выводе на печать может потребоваться гораздо больше работы при создании таблицы стилей, чем показано в приведенном здесь примере. Однако думается, что даже в этом простом случае хорошо заметна потенциальная мощь CSS в подготовке документов для различных устройств.
Глава 12
Краткий курс JavaScript
Все, что было рассмотрено в предыдущих главах книги, относится к созданию хоть и красивых и удобных, но все же статичных веб‑страниц. Этого в большинстве случаев оказывается вполне достаточно. Однако по‑настоящему эффектными страницы получаются, если использовать при их создании возможности, предоставляемые большинством современных браузеров, – добавление в документы исполняемого содержимого.
Итак, исполняемым содержимым документа являются небольшие программы (названные сценариями), написанные автором документа и выполняющие в большинстве случаев несложные задачи по обработке данных или украшающие страницу.
Сценарии являются программами, поэтому естественно, что написаны они с использованием какого‑то языка программирования.
Среди языков, разработанных для программирования сценариев, можно привести JavaScript, VBScript, JScript как наиболее простые. В данной книге будет рассмотрено только программирование на языке JavaScript.
Язык программирования сценариев JavaScript претендует на то, чтобы быть упрощенной версией популярного языка Java, хотя во многих вопросах это сходство ограничивается только сходством в названии. JavaScript является интерпретируемым языком программирования (как и другие языки программирования сценариев). Это значит, что, когда наступает нужный момент, браузер находит в документе программу JavaScript, проверяет ее на наличие ошибок, после чего выполняет команду за командой.
Далее в этой главе рассматриваются основные возможности языка JavaScript и правила написания программ с его использованием.
Объем книги не позволяет привести развернутое описание языка программирования, поэтому материал изложен кратко.
12.1. Замечание о строках кода JavaScript
Логически цельные и обособленные действия программы на JavaScript, будь то присвоение значения переменной, вызов функции и пр., записываются в отдельных строках (эти действия называются операторами, или инструкциями). В конце строк обязательный для многих других языков программирования (для того же Java) символ ; ставить необязательно, за исключением тех случаев, когда нужно явно задать пустой оператор (в тех местах, где оператор требуется синтаксисом языка, но он не нужен программисту) или если все же нужно записать несколько действий в одной строке. Например:
var a, b = 123
a = a + 12 + b*2
a = a + b; c = a – b / 2
Однако во всех примерах книги строки заканчиваются символом ;, чтобы избежать путаницы (особенно для людей, которые уже имеют опыт программирования на C/C++ или Java). Выражения и операторы программы можно переносить на следующую строку, но только там, где допускается пробел. Например:
