Вход/Регистрация
JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид

Шрифт:

Будущей альтернативой модели

border-box
, предусматриваемой стандартом CSS3, являются вычисляемые значения свойств:

<div style="width: calc(50%-12рх); padding: 10рх; border: solid black 2px;">

Возможность вычисления значений CSS-свойств с применением calc поддерживается в IE9 и в Firefox 4 (как -moz-calc).

16.2.4. Отображение и видимость элементов

Управлять видимостью элемента документа позволяют два CSS-свойства:

visibility
и
display
. Пользоваться свойством
visibility
очень просто: если оно имеет значение
hidden
, то элемент не отображается, если
visible
, - отображается. Свойство
display
является более универсальным и служит для задания варианта отображения элемента, определяя, блочный это элемент, встраиваемый, списочный или какой-нибудь другой. Если же свойство
display
имеет значение
none
, то элемент вообще не отображается и для него даже не выделяется место на странице.

Различие между свойствами стиля

visibility
и
display
имеет отношение к их воздействию на статически или относительно позиционируемые элементы. Для элемента, расположенного в нормальном потоке вывода документа, установка свойства
visibility
в значение
hidden
делает элемент невидимым, но резервирует для него место в документе. Такой элемент может повторно скрываться и отображаться без изменения компоновки документа. Однако если свойство
display
элемента установлено в значение попе, то место в документе для него не выделяется; элементы с обеих сторон от него смыкаются, как будто его вообще не существует. Свойство
display
может пригодиться, например, при создании разворачивающихся и сворачивающихся списков.

Обратите внимание, что нет особого смысла использовать атрибуты

visibility
и
display
, чтобы сделать элемент невидимым, если вы не собираетесь динамически устанавливать их в сценарии на языке JavaScript, чтобы в какой-то момент сделать его снова видимым! Как это делается, будет показано далее в этой главе.

16.2.5. Цвет, прозрачность и полупрозрачность

Цвет текста, содержащегося в элементе документа, можно задать с помощью CSS-свойства

color
. Цвет фона любого элемента - с помощью свойства
background-color
. Выше мы видели, что цвет рамки элемента можно задать с помощью свойства
border-color
или сокращенной формы его написания
border
.

При обсуждении рамок мы рассматривали пример, в котором цвет рамки задавался указанием названий наиболее распространенных цветов, таких как «red» (красный) и «black» (черный). Стандарт CSS поддерживает множество таких обозначений цветов на английском языке, но имеется более универсальный способ определения цветов, который заключается в использовании шестнадцатеричных цифр, определяющих красную, зеленую и синюю составляющие цвета. Значения каждой из составляющих могут задаваться одной или двумя цифрами. Например:

#000000 /*черный */

#fff /*белый */

#f00 /*ярко-красный */

#404080 /*ненасыщенный темно-синий */

#ccc /*светло-серый */

Стандарт CSS3 дополнительно определяет возможность определения цвета в формате RGBA (значения красной, зеленой и синей составляющих плюс альфа-значение, определяющее степень прозрачности). Формат RGBA поддерживается всеми современными броузерами, кроме IE; ожидается, однако, что его поддержка будет включена в IE9. CSS3 также определяет поддержку форматов HSL (hue-saturation-value - тон-насыщенность-яркость) и HSLA. И снова эти форматы поддерживаются броузерами Firefox, Safari и Chrome, но не поддерживаются IE.

Таблицы CSS позволяют точно указать позицию, размеры, цвета фона и рамки элемента, что обеспечивает элементарные графические средства рисования прямоугольников и (если до предела уменьшить высоту или ширину) горизонтальных или вертикальных линий. В предыдущее издание книги был включен пример рисования столбчатых диаграмм средствами CSS, но в этом издании он был заменен расширенным описанием элемента

<canvas>.
(Подробнее о работе с графикой на стороне клиента рассказывается в главе 21.)

В дополнение к атрибуту

background-color
можно также указать изображение, которое должно использоваться в качестве фоновой картинки элемента. Свойство
background-image
определяет фоновое изображение, а свойства
background-attachment, background-position
и
background-repeat
уточняют некоторые параметры рисования изображения. Сокращенная форма записи - свойство
background
, позволяющее указывать все эти атрибуты вместе. Свойства, определяющие фоновый рисунок, могут применяться для создания довольно интересных визуальных эффектов, но это уже выходит за рамки темы данной книги.

  • Читать дальше
  • 1
  • ...
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • ...

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

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

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

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