CSS / 9. Цвета и фон

Помните, как вы впервые изменили цвета веб-страницы? Вместо привычного черного текста на сером фоне с синими ссылками вы вдруг смогли задавать любые сочетания цветов, например светло-синий текст на черном фоне с желто-зелеными ссылками. Отсюда оставался всего один шаг до цветного текста и в итоге даже до многоцветного текста на странице. И все благодаря тегу . А когда вы смогли добавлять еще и фоновые изображения, возможным стало практически все, по крайней мере, так казалось. CSS пошел в вопросе цветов и фонов еще дальше, разрешая применять разные цвета и фоны на одной странице, и все без единого тега FONT или TABLE.
Статьи раздела '9. Цвета и фон':
Воздействие на рамки
Значение цвета также может влиять на рамки, окружающие элемент. Предположим, вы объявили приведенные ниже стили: p.aside {color: gray; border-style: solid;} У элемента серый текст и серая сплошная рамка средней ширины. Де...
Воздействие на элементы формы
Заданное значение свойства color можно (теоретически всегда) применить к элементам формы. Объявление для элементов select темно-серого текста должно быть простым: select {color: rgb(33%,33%,33%);} При этом, возможно, будет з...
Еще раз о повторении в определенном направлении
В прошлый раз мы рассматривали значения repeat-x, repeat-y и repeat и влияние этих значений на мозаичное размещение фоновых изображений. Однако во всех этих случаях мозаичный шаблон начинался в верхнем левом углу элемента-контейне...
Замещение атрибутов
Существует множество вариантов применения свойства color, из которых самый распространенный – замена атрибутов TEXT, LINK, ALINK и VLINK элемента BODY HTML 3.2. С помощью псевдоклассов ссылок свойство color может полностью заменит...
Значения, заданные в единицах измерения длины
И наконец, обратимся к позиционированию с помощью значений, заданных в единицах измерения длины. Если местоположение исходного изображения задано в единицах длины, то они интерпретируются как смещения от верхнего левого угла облас...
Интересные эффекты
С технической точки зрения, когда фоновое изображение зафиксировано (fixed), оно размещается с учетом области просмотра, а не элемента, содержащего его. Однако фон будет видимым только в рамках его элемента-контейнера. Это ведет к...
Использование изображений
Прежде всего, чтобы сделать изображение фоном, используем свойство background-image. Применяемое по умолчанию значение none приводит именно к тому, чего и можно ожидать: на заднем плане нет никакого изображения. Для того чтобы фон...
Ключевые слова
Ключевые слова очень просты для понимания. Оказываемый ими эффект соответствует их именам; например, согласно значению top right исходное изображение будет находиться в верхнем правом углу области отступа элемента. Вернемся к мале...
Наследование цвета
Как показывает объявление color, данное свойство относится к наследуемым. Это логично, поскольку если вы задаете p {color: gray;}, то, вероятно, ожидаете, что любой текст в этом абзаце тоже будет серым, даже если он выделен, набра...
Основные цвета
Основной цвет элемента проще всего задать при помощи свойства color. Это свойство в качестве значения принимает любой действительный тип цвета например #FFCC00 или rgb(100%, 80%, 0%), а также ключевые слова системных цветов. Для н...
Повторения в определенном направлении
Раньше, чтобы обеспечить фон для врезки, приходилось создавать очень узкое, но чрезвычайно длинное изображение. Одно время такие изображения чаще всего имели 10 пикселов в высоту и 1500 пикселов вширину. Большую часть такого изобр...
Позиционирование относительно окна
Итак, вы умеете размещать исходное изображение в любом месте фона элемента и можете управлять (в некоторой степени) его мозаичным размещением. Однако, как вы уже, вероятно, поняли, размещение изображения в центре элемента body, ес...
Позиционирование фона
Благодаря свойству background-repeat существует возможность размещать большое изображение на заднем плане документа и не допустить его повторения. Давайте расширим эту возможность и изменим местоположение изображения. Например, мо...
Почему фон не наследуется
Ранее я особенно отмечал, что фон не наследуется. Фоновые изображения показывают, почему наследование в данном случае имело бы негативный эффект. Представьте ситуацию: фон наследуется, и вы применили фоновое изображение к элементу...
Проблемы, сложившиеся исторически
Итак, задание фонового цвета – довольно простая вещь, за исключением одного небольшого предостережения. Navigator 4 совершенно неправильно размещает фоновые цвета. Вместо того чтобы применять фоновый цвет ко всему блоку содержимог...
Процентные значения
Процентные значения очень похожи на ключевые слова, хотя ведут себя немного сложнее. Пусть требуется центрировать базовую точку изображения в элементе, задавая процентные значения. Это довольно просто: p {background-image: url(...
Сведение воедино
Как и свойства шрифтов, все свойства фона можно свести в одну сокращенную форму записи: background. Это свойство может принимать по одному значению от каждого из свойств фона практически в любом порядке. Таким образом, все следующ...
Специальные эффекты
Комбинируя свойства color и background-color, можно создавать некоторые полезные эффекты: h1 {color: white; background-color: rgb(20%,20%,20%); font-family: Arial, sans-serif;} Конечно, количество сочетаний цветов велико, н...
Фоновые изображения
Рассмотрев основы задания цветов фона и переднего плана, обратимся теперь к вопросу о фоновых изображениях. В HTML 3.2 с помощью атрибута BACKGROUND элемента BODY можно делать изображение фоном документа: При этом агент пол...
Фоновый цвет
Цвет фона элемента можно объявлять почти так же, как основной цвет. Для этого применяется свойство background-color, принимающее (что и не удивительно) любой действительный цвет, или ключевое слово, делающее фон прозрачным. Для то...

Страницы: 1 2