|
Оглавление: Раздел 6Тема: цвет фона и текста, шрифты.Цвет фона определяется значением аттрибута BGCOLOR — шестнадцатиричным числом вида #hhhhhh,
где первая пара символов является значением насыщенности для красного цвета, вторая — для зеленого,
и третья пара — для синего цвета.
<BODY BGCOLOR=»#FF00FF»>, а можно и так: <BODY BGCOLOR=»PURPLE»>. 
Строго говоря, текстовых значений цвета значительно больше (SCARLET, VIOLET, BROWN и т.д. и т.п.), но не все браузеры их «знают». Применимы также значения LIGHTGREEN (светлозеленый), LIGHTYELLOW (светложелтый) и LIGHTBLUE (светлосиний). Фоном может служить и какое-то изображение. При этом заданная область заполняется множественными
копиями этого изображения (как кафельной плиткой). Для этого используется аттрибут BACKGROUND с
указанием пути к рисунку. Например Аттрибуты BGCOLOR и BACKGROUND могут находиться внутри метки <BODY>, тогда цвет фона устанавливается для всей страницы, либо в метках <TABLE>, <TR> и <TD> — устанавливается цвет фона во всей таблице, ее строке и ее ячейке соответсвенно (таблицы — тема следующего урока). Для изменения цвета и размера шрифта используется метка <FONT></FONT>. Ее аттрибуты:
<FONT SIZE=»5″ COLOR=»RED» FACE=»SANS-SERIF»>Крупный
шрифт красного цвета без засечек</FONT>
Для размещения текста в верхнем или нижнем регистре используются соответственно метки
<SUP>..</SUP> (superscript) и <SUB>..</SUB> (subscript). Пример их
использования:
Тэг BODY может содержать аттрибут TEXT, который определяет цвет шрифта для всей страницы. Значение
аттрибута — шестнадцатиричное значение цвета или текстовое. Также в тэге BODY можно определить каким цветом на вашей странице будут выделяться ссылки. Это аттрибуты:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
НОУ ИНТУИТ | Лекция | Цвет и шрифт
< Лекция 2 || Лекция 3: 123 || Лекция 4 >
Аннотация: Управление отображением цветами текста и фоном, на котором отображается текст, а также использование гарнитур шрифтов.
Ключевые слова: css, очередь, элемент разметки, цвет текста, color, цвет фона, ‘border-color’, AND, background, интерпретация, Internet, строковый, HTML, атрибут, блочный элемент, параграф, строковый элемент, in-line, таблица, инвертирование, поддержка, ‘background-image’, ‘background-repeat’, ‘background-attachment’, ‘background-position’, шрифт, Web, helvetica, monospace, автор, начертание, гарнитура, размер шрифта, кегль, пиксел (px), типографский пункт (pt), font-variant, определение, обратная связь, спецификация CSS-P, перечисление, Windows, oblique, параметр
Управление цветом в CSS
intuit.ru/2010/edi»>Каскадные таблицы стилей (CSS) в первую очередь описывают свойства текста. Это касается как текстовых блоков, так и строковых элементов разметки содержания страницы. В данном разделе речь пойдет об управлении отображением цвета текста ( color ) и цвета фона ( background-color ), на котором отображается текст.
Кроме цвета текста и цвета фона CSS позволяет определять цвет границы текстового блока ( border-color ).
Атрибуты стилей, которые мы собираемся рассмотреть, согласно спецификации Microsoft, относятся к группе атрибутов Color and Background Properties. Всего в эту группу входит семь атрибутов, шесть из которых определяют свойства фона. Кроме цвета фона и его прозрачности, можно управлять фоновой картинкой (координатами ее размещения и способами повторения). К сожалению, Netscape Navigator большинство из этих атрибутов не поддерживает, поэтому мы не будем рассматривать их подробно.
Интерпретация атрибутов цвета в Netscape Navigator и Internet Explorer различна. В Netscape Navigator фоновый цвет отображается только там, где есть текст, а в Internet Explorer фоновый цвет заливает весь блок или строковый элемент вне зависимости от наличия в нем текста.
Цвет текста
В HTML для управления цветом отображаемого текста используется элемент FONT. Его аналогом в CSS является атрибут color. Этот атрибут можно применять как для блочных, так и для строковых элементов разметки.
Рассмотрим в качестве блочного элемента разметки ячейку таблицы:(открыть)
TD { color:darkred; }Рис. 3.1. Блочный элемент разметки для ячейки таблицы.
При определении цвета текста для блочного элемента весь текст этого элемента отображается заданным цветом. Частичное изменение цвета возможно, если поместить строковый элемент разметки внутрь блочного:(открыть)
P { color:darkred; }
I { color:#003366;font-style:normal; }Рис. 3.2.
В данном примере в качестве блочного элемента мы используем параграф, а в качестве строкового элемента (in-line) применяем I. Таблица в данном случае большого значения не имеет, но используется для единообразия с предыдущим примером. В нее мы помещаем параграф со встроенным в него in-line элементом разметки.
Цвет фона текста
В HTML цветом фона можно управлять только для конкретного блочного элемента разметки.
Таким элементом может быть вся страница:
<BODY BGCOLOR=...>...</BODY>
Или, например, таблица:
<TABLE BGCOLOR=...>...</TABLE>
В приведенном ниже примере для выделения текста применено инвертирование цвета фона и цвета текста:(открыть)
<SPAN STYLE="background-color:black;color:white;"> как строковые элементы разметки </SPAN>
Рис. 3.3. Инвертирование цвета фона и цвета текста для выделения текста.
При использовании цвета фона следует помнить, что поддержка этого атрибута реализована для всех блочных элементов разметки только в Internet Explorer 4.0. Поддержка CSS в версиях Netscape Navigator гораздо скромнее.
Для работы с фоном элементов существует несколько атрибутов, которые поддерживаются только в Internet Explorer, начиная с версии 4.
0: background-image ; background-repeat ; background-attachment ; background-position. Все свойства фона можно описать в атрибуте background:
background:transparent|color url repeat
scroll positionПример:
P { background: gray
'http://intuit.ru/intuit.gif'
no-repeat fixed center center; }Однако при всем изобилии возможностей, злоупотреблять ими не стоит.
Дальше >>
< Лекция 2 || Лекция 3: 123 || Лекция 4 >
Иордания: тестер цвета веб-фона
Иордания: тестер цвета веб-фона Перейти на главную страницу сайта.
Перейти на главную страницу сайта.
Контент создан: 24.11.2012
Последнее изменение файла:
Создано содержание: 121124
Последнее изменение файла:
Эта страница изменит цвет фона на любой, который вы укажете.
Если ваш компьютер не поддерживает JavaScript, вам следует нажать здесь, чтобы получить более медленную версию CGI-Perl. Он работает только тогда, когда вы онлайн, но не требует JavaScript.
Просто введите название цвета или любой шестнадцатеричный код цвета от 000000 до FFFFFF и нажмите «Показать», чтобы увидеть результат.
Предостережения:
- Не все названия цветов понимаются веб-браузерами. У меня «оливковый» работает, а «персиковый» дает, например, ярко-зеленый. Как только вы определитесь с цветом, если он действительно важен для вас, лучше использовать числовой код, чем название цвета.
- Различные браузеры могут по-разному интерпретировать цвета, особенно именованные цвета. Попробуйте проверить последнюю страницу на нескольких компьютерах. По моему опыту, цвета Macintosh обычно светлее, чем цвета ПК.
- В общем, цвета, обозначаемые комбинациями кодов 00, 33, 66, 99, CC и FF, являются «безопасными» для использования с достаточно схожими результатами практически на всех машинах.
(Например, FFCC99 будет неопределенно персикового цвета как на ПК, так и на Macintosh.) К сожалению, названия цветов редко соответствуют «безопасной» палитре. - Цвета могут отличаться в зависимости от системных настроек пользователя.
- Для цветовых кодов (или имен) не имеет значения, используете ли вы верхний или нижний регистр.
- Помните, что текст и ссылки должны быть разборчивы на выбранном вами фоне, поэтому не забудьте выбрать и для них цвета. Используются те же цветовые коды.
Наиболее важный текст на этой странице отображается в черно-белом цвете, чтобы его можно было прочитать независимо от выбранных вами цветов. Цветовые коды под полями ввода помогают показать, как данный фон будет выглядеть с текстом некоторых из названных цветов. В таблице в конце приведены примеры цветов, которые можно обозначить по имени.
черный=000000 флот = 000080 зеленый=008000 бирюзовый = 008080 синий=0000FF лайм=00FF00 Аква=00FFFF серый=808080 темно-бордовый=800000
фиолетовый=800080 оливковое=808000 коричневый=A52A2A серебро=C0C0C0 красный=FF0000 желтый = FFFF00 оранжевый = FFA500 белый = FFFFFF
В следующей таблице перечислены большинство цветов, которые можно назвать по имени, а не по номеру.
Обратите внимание, что пурпурный и фуксия относятся к одному и тому же цвету. В следующей таблице перечислены большинство цветов, которые можно назвать по имени, а не по номеру. Обратите внимание, что пурпурный и фуксия относятся к одному и тому же цвету.
| бирюзовый 00FFFF бирюзовый 00FFFF | черный 000000 черный 000000 | синий 0000FF синий 0000FF | коричневый* A52A2A коричневый* A52A2A |
|---|---|---|---|
| коралловый* FF7F50 коралловый* FF7F50 | малиновый* DC143C малиновый* DC143C | голубой* 00FFFF голубой* 00FFFF | темно-синий* 00008B темно-синий* 00008B |
| лесная зелень* 228B22 лесная зелень* 228B22 | золото* FFD700 золото* FFD700 | серый 808080 серый 808080 | зеленый 008000 зеленый 008000 |
| слоновая кость* FFFFF0 слоновая кость* FFFFF0 | лаванда* E6E6FA лаванда* E6E6FA | светло-желтый* FFFFE0 светло-желтый* FFFFE0 | лайм 00FF00 лайм 00FF00 |
| пурпурный* FF00FF пурпурный* FF00FF | темно-бордовый 800000 темно-бордовый 800000 | темно-синий 000080 темно-синий 000080 | оливковое 808000 олива 808000 |
| оранжевый* FFA500 оранжевый* FFA500 | фиолетовый 800080 фиолетовый 800080 | красный FF0000 красный FF0000 | серебро C0C0C0 серебро C0C0C0 |
| небесно-голубой* 87CEEB небесно-голубой* 87CEEB | бирюзовый 008080 бирюзовый 008080 | бирюзовый* 40E0D0 бирюзовый* 40E0D0 | белый FFFFFF белый FFFFFF |
| желтый FFFF00 желтый FFFF00 | *-Названия цветов со звездочками неофициальны, но все же работают. *-Названия цветов со звездочками неофициальны, но все же работают. | ||
background-color · Темы GitHub · GitHub
Вот 30 публичных репозиториев соответствует этой теме…
акндмр / ColorPrefUtil
Звезда 59типичный код / бг.нвим
Спонсор Звезда 32асвинчерияла / реагировать родные анимированные цвета
Звезда 7подчеркивать / цветной флиппер
Звезда 5ksy11 / Summernote-ext-таблица
Звезда 5Кислотно-маниакальный / консольные инструменты
Звезда 4Сагар-Шарма-7 / смена цвета фона
Звезда 4адрес / всплеск
Звезда 4клсмедиа / Flatuicolor.
css Звезда
3Брайцех / текстКонтраст
Звезда 2mcpcpc / xbg
Спонсор Звезда 2МилошМ00 / случайный градиент фона
Звезда 1гасконы / bg-градиент
Звезда 1СебастьянМартинес25 / фоновый цвет
Звезда 0SyncfusionПримеры / элемент-шаблон-элементы-выбор-список-xamarin
Звезда 0ФЛУлул / html-css-booleaner
Звезда 0ДжонГВебДев / Фоновые текстуры
Звезда 0казманбандж / ФонЦветGen
Звезда 0СанаэБуазза / Изменить-Случайный-BackgroundColor
Звезда 0июль07 / bg-изменитель цвета
Звезда 0Улучшить эту страницу
Добавьте описание, изображение и ссылки на
фоновый цвет
страницу темы, чтобы разработчикам было легче узнать о ней.
