Вход/Регистрация
HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
вернуться

Дронов Владимир

Шрифт:

Как видим, возможных значений у атрибута cursor очень много, к тому же многие из них на практике применяются крайне редко. Поэтому мы рассмотрим только самые необходимые.

— auto — Web-обозреватель сам управляет формой курсора мыши. Это обычное поведение.

— default — курсор по умолчанию, обычно стрелка. none — курсор мыши вообще не отображается. help — стрелка с вопросительным знаком.

— pointer — "указующий перст". Обычное поведение при наведении курсора мыши на гиперссылку.

— progress — стрелка с небольшими песочными часами. Обозначает, что в данный момент работает какой-то фоновый процесс.

— wait — песочные часы. Обозначает, что в данный момент Web-обозреватель занят.

— text — текстовый курсор. Обычное поведение при наведении курсора мыши на фрагмент текста.

Полный список значений атрибута стиля cursor и описание соответствующей им формы курсора мыши вы можете найти на Web-странице https://developer.mozilla.org/en/CSS/cursor. Там все просто и наглядно, так что не ошибетесь.

Вот пример задания курсора мыши в виде "указующего перста" для пунктов списка, формирующего только что созданную полосу навигации:

#navbar LI { cursor: pointer }

Что дальше?

В настоящей главе мы разобрались с атрибутами стиля, задающими параметры абзацев, списков и отображения элементов Web-страницы. Их немного, но при должном применении они могут заметно улучшить наши Web-творения.

В следующей главе мы познакомимся с блочными контейнерами — "коллегами" знакомых нам по главе 8 встроенных контейнеров. Мы выясним, как можно расположить их на Web-странице в нужном нам порядке и какие атрибуты стиля CSS для этого следует применять. Блочные контейнеры — чрезвычайно мощный инструмент, и мы уделим им много времени.

А еще в следующей главе мы всерьез займемся Web-дизайном.

ГЛАВА 10. Контейнерный Web-дизайн 

В предыдущей главе мы рассматривали атрибуты стиля CSS, задающие параметры абзацев и отображения. Их было совсем немного, и глава получилась небольшой.

Теперь мы займемся Web-дизайном. Согласитесь — наши Web-странички, несмотря на созданное нами шикарное представление, выглядят все еще крайне непрезентабельно. Настала пора оформить их как положено.

А для этого нам придется изучить новые элементы Web-страниц — блочные контейнеры. Правда, они не такие уж новые — с их встроенными "коллегами" мы познакомились еще в главе 8. Но именно блочные контейнеры дадут нам в руки инструмент современного Web-дизайна.

Разумеется, не обойдется и без дополнительных атрибутов стилей, с помощью которых мы сможем задать необходимые параметры блочных контейнеров (и других блочных элементов). Эти атрибуты стиля позволяют задать размеры и местоположение блочных контейнеров на Web-странице.

А напоследок мы получим от CSS очередной сюрприз — средства управления переполнением. Они пригодятся нам в случаях, если содержимое контейнера не помещается в нем, и не только…

Блочные контейнеры

Как ясно из названия, блочный контейнер может хранить только блочные элементы: абзацы, заголовки, большие цитаты, теги адреса, текст фиксированного форматирования, таблицы, аудио- и видеоролики. Блочный контейнер может содержать как один блочный элемент, так и несколько.

Блочный контейнер формируется с помощью парного тега <DIV>, внутри которого помещают HTML-код, формирующий содержимое контейнера (листинги 10.1—10.3).

В листинге 10.1 мы поместили в блочный контейнер заголовок и два абзаца.

Листинг 10.1

<DIV>

<H3>Это заголовок</H3>

Это первый абзац.

Это второй абзац.

</DIV>

Листинг 10.2 иллюстрирует блочный контейнер, содержащий таблицу.

Листинг 10.2

<DIV>

<TABLE>

<CAPTION>Это таблица</CAPTION>

<TR>

<TH>Это первый столбец</TH>

<TH>Это второй столбец</TH>

</TR>

.

</TABLE>

</DIV>

А блочный контейнер, приведенный в листинге 10.3, может похвастаться самым "богатым" содержимым.

Листинг 10.3

<DIV STYLE="text-align: center">

<VIDEO SRC="film.ogg" CONTROLS>

</VIDEO>

Щелкните кнопку воспроизведения, чтобы просмотреть фильм.

</DIV>

Во-первых, мы поместили в него видеоролик и абзац с текстом, предлагающим начать просмотр этого видеоролика. Во-вторых, мы привязали к блочному контейнеру встроенный стиль, задающий выравнивание текста по центру. Отметим при этом, что по центру также будет выровнен и сам видеоролик.

  • Читать дальше
  • 1
  • ...
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: