Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Цвет фона текста

Цвет текста

Управление цветом в CSS

Каскадные таблицы стилей (CSS) в первую очередь описывают свойсва текста. Это касается как текстовых блоков, так и строковых элементов разметки содержания страницы. В данном разделе речь пойдет об управлении отображением цвета текста (color) и цвета фона (background-color), на котором отображается текст.

Кроме цвета текста и цвета фона CSS позволяет определять цвет границы текстового блока (border-color).

В HTML для управления цветом отображаемого текста используется элемент FONT. Его аналогом в CSS является атрибут color. Этот атрибут можно применять как для блочных, так и для строчных элементов разметки.

Расмотрим в качестве блочного элемента разметки ячейку таблицы:
td {color:darkred;}

Первая колонка
Первая ячейка таблицы

 

В данном примере цвет текста определен только для обычной ячейки, поэтому содержание заголовка колонки отображается основным цветом(#003366).

При определении цвета текста для блочного элемента весь текст этого блочного элемента отображается заданным цветом. Частичное изменение цвета возможно, если применить строчный элемент разметки внутри блочного:
p {color:darkred;}
i {color:#003366;font-style:normal;}

Первая колонка
Первая ячейка таблицы. В нее вставляем строчный элемент темно-синего цвета.

 

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

 

В HTML цветом фона можно управлять только для конкретного блочного элемента разметки. Таким элементом может быть вся страница:
<body bgcolor=...>...</body>
или, например, таблица:
<table bgcolor=...>...</table>

Каскадные таблицы стилей позволяют менять цвет фона текста непосредственно по месту, точно так же, как строковые элементы разметки в HTML меняют обычный стиль начертания на italic, например.

В приведенном выше абзаце для выделения текста применено инвертирование цвета фона и цвета текста:
<span style="background-color:#003366;
color:white;">
как строковые элементы разметки
</span>

При использовании цвета фона следует помнить, что поддержка этого атрибута реализована для всех блочных элементов разметки только с IE 4.0. Поддержка CSS в различных версиях NN гораздо скромнее.

Для работы с фоном элементов существует несколько атрибутов, которые поддерживаются только в IE, начиная с версии 4.0: background-image; background-repeat; background-attachment; background-position. Можно все свойства фона описать в атрибуте background:

background:transparent|color url repeat scroll position Пример:

p {background: gray http://kuku.ru/kuku.gif no-repeat fixed center center;}

Не смотря на такое обилие возможностей, злоупотреблять ими не стоит.

 

<== предыдущая лекция | следующая лекция ==>
Граница(border) | Гарнитура(font-family)
Поделиться с друзьями:


Дата добавления: 2014-01-07; Просмотров: 269; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.011 сек.