НОУ ИНТУИТ | Лекция | Цвет и шрифт
< Лекция 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
Каскадные таблицы стилей (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. Блочный элемент разметки для ячейки таблицы.
В данном примере цвет текста определен только для обычной ячейки, поэтому содержание заголовка колонки отображается основным цветом (#003366).
При определении цвета текста для блочного элемента весь текст этого элемента отображается заданным цветом. Частичное изменение цвета возможно, если поместить строковый элемент разметки внутрь блочного:(открыть)
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 >
6.5. Текст
6.5. Текст6.5. Текст
Рисунок 8.134. Инструмент текста на панели инструментов
Инструмента текста кладёт текст на изображение. При нажатии на изображении этим инструментом появляется Диалог редактора текста, позволяющий ввести текст, и создаётся новый слой в диалоге слоёв. В Диалог параметров текста можно изменить шрифт, цвет и размер текста и растояние от края. Результат изменения параметров сразу показывается в изображении.
Чтобы переместить слой текста, необходимо нажать на букву текста, так как остальная часть слоя прозрачна.
6.5.1. Активация
Инструмент можно вызвать несколькими способами:
в меню изображения Инструменты → Текст,
нажатием на пиктограмму инструмента на панели инструментов
или при помощи клавиши быстрого доступа T.
6.5.2. Параметры
Рисунок 8.135. Параметры инструмента «Текст»
- Общая информация
Параметра инструмента доступны двойным нажатием на пиктограмму инструмента на панели инструментов.
- Шрифт
Существует два способа выбора шрифта в GIMP. Первый — из меню диалогов/шрифтов. Второй — из параметра шрифта этого инструмента. Оба метода выбирают из установленных шрифтов X. Результат выбора шрифта сразу применяется к тексту.
Замечание Получить особые знаки можно также, как и в других редакторах: AltGr + клавиша в Линукс, Alt + число в Виндоус.
- Размер
Определяет размер шрифта в любой единице измерения.
- Подсказка
Использует индексы изменения, чтобы изменить буквы для лучшего представления бука при маленьгом шрифте.
- Заставить автоинструкцию
Автоинструкция старается автоматически вычислить информацию для лучшего представления шрифта.
- Сглаживание
Сглаживание покажет текст с более мягким контуром. Это достигается лёгким размыванием границ.
Этот параметр может намного улучшить
вид текста. Если цветовая модель изображения не RGB, то
сглаживание нужно применять осторожно.- Цвет
Определяет цвет последующего текста. Чёрный установлен по умолчанию. При нажатии появляется диалог выбора цвета.
Подсказка Можно также двинуть цвет из панели инструментов на текст.
- Выключка
Позволяет текст изменятся в соответствии с правилами, выбираемых из соответствующих пиктограмм.
- Отступ
- Растояние между строк
Определяет растояние между соседними строками. Результат изменения этого параметра показан сразу в изображении. Значение параметра не само растояние, а число точек, которое нужно прибавить или отнять от этого растояния. Значение может быть отрицательным.
- Растояние между буквами
Значения также могут быть отрицательными. В таком случае буквы накладываются друг на друга.
- Текст вдоль контура
Этот параметр доступен, если есть хоть один контур.
Для этого создайте или загрузите контур и активируйте его.Затем выберите инструмент текста и введите текст. Для использования уже существующего текста, выберите его в диалоге слоёв, выберите инструмент текста и нажмите на текст в изображении.
Нажмите на кнопку Текст вдоль контура. Текст изогнётся по контуру. Каждая буква становится новым контуром и появляется в диалоге контуров . Все настройки контура применине к этим новым контурам.
Рисунок 8.136. Пример «текста вдоль контура»
- Создать контур из текста
Этот инструмент создайт контур выделения из выделенного текста.
Каждая буква окружена компонентом контура. Можно изменить форму
буквы, перемещая контрольные точки контура.
Этот параметр может намного улучшить
вид текста. Если цветовая модель изображения не RGB, то
сглаживание нужно применять осторожно.
Каждая буква окружена компонентом контура. Можно изменить форму
буквы, перемещая контрольные точки контура.6.5.3. Редактор текста
Рисунок 8.137. Параметры редактора текста
- Общая информация
Это окно диалога появляется при нажатии на изображении инструментом текста. Это простой редактор текста, позволяющий печатать несколько строк. Заворачивание слов невозможно, текстовый слой просто расширяется по мере добавления текста. Чтобы начать новую строку, нажмите клавишу Ввод.
Печатаемый текст сразу появляется в изображении. Если выбран параметр «Показать край слоя», то текст будет окружён чёрно-жёлтой пунктирной линией по краю слоя.
Это не выделение: чтобы
переместить текст, необходимо нажать на сам текст, а не только
внутри этой рамки.Текст можно изменить в редакторе, а шрифт в редакторе шрифта.
Текст можно перемещать с инструмента перемещения, но в таком случае закрывается редактор. Редактирование можно продолжить позже.
Как только вы начинаете печатать, создаётся новый слой в диалоге слоёв. В изображении с таким слоем можно продолжить редактирование текста, выбрав слой текста в диалоге слоёв и нажав дважды на него.
Чтобы добавить текст к изображению, необходимо нажать на не-текстовый слой. Тогда появится новый текстовый редактор и создастся новый слой. Чтобы перейти с одного текста на другой, нужно активировать соответствующий текстовый слой и нажать на него.
Тогда актвируется соответствующий редактор.- Загрузить текст из файла
Позволяет загрузить текст из файла.
- Удалить весь текст
Нажатие этой кнопки удаляет текст в редакторе и в изображении.
- Слева направо
Этот параметр позволяет вводить текст слева направо, как в большинстве западных языков и многих восточных языков.
- Справа налево
Этот параметр позволяет вводить текст справа налево, как в некоторых восточных языках, на пример в арабском (показан в пиктограмме).
- Использование шрифта по умолчанию
По умолчанию, шрифт, выбранный в диалоге настроек, не используется. Чтобы его использовать, выберите этот параметр.
Замечание Обратитесь также к текстам и шрифтам.
Это не выделение: чтобы
переместить текст, необходимо нажать на сам текст, а не только
внутри этой рамки.
Тогда актвируется соответствующий редактор.
Как изменить цвет и размер текста, обратившись к элементу HTML?
Вы хотели бы, чтобы ваш HTML-текст выглядел красиво по многим причинам. HTML предоставляет вам возможность редактировать размер текста, шрифт, цвет и т. д. по своему вкусу. Для этого вам нужно изменить их внешний вид, используя свойства CSS color и font-size.
Эта статья предоставит вам два метода того, как сделать ваши HTML-тексты красивыми.
Способ 1. Использование атрибута встроенного стиля
С помощью свойств color и font-size вы можете изменить цвет и размер вашего текста внутри его тега. Это называется встроенным CSS. Цвет, шрифт, размер и другие стили можно применить к элементу с помощью атрибута стиля HTML. CSS (каскадные таблицы стилей) — это язык таблиц стилей для описания внешнего вида документа, созданного на языке разметки, таком как HTML. Здесь мы покажем вам, как использовать некоторые из наиболее распространенных свойств CSS.
- Цвет текста определяется атрибутом цвета CSS.
- Атрибут размера шрифта в CSS определяет размер отображаемого текста.
Атрибут стиля можно использовать для изменения внешнего вида HTML-элемента. Это свойство CSS. Синтаксис атрибута стиля HTML показан ниже:
Тег
Пример: Следующий пример поможет вам лучше понять это:
HTML
| 902 07
Вывод :
Другой способ изменить размер и цвет шрифта — использовать тег . Хотя тег HTML отброшен, он все еще может использоваться и требуется некоторыми веб-сервисами. Атрибут face, описывающий используемый шрифт, должен быть включен при использовании тега FONT.
Синтаксис:
Содержание
Пример: Взгляните на следующий пример.
HTML
9004 5 |
< :
Пример кода CSS для цвета шрифта (и почему HTML запрещен) »
In Deprecated, HTML Attributes
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше
- Атрибут
- HTML-тег
- Что делает
Пример кода CSS для цвета шрифта (и почему HTML запрещен)? - Используется для указания цвета шрифта. Устарело. Вместо этого используйте CSS.
Устарело. Вместо этого используйте CSS. Атрибут цвета шрифта устарел
Этот атрибут устарел в HTML5 и не должен использоваться. Поддержка этого атрибута браузерами ограничена, и его использование может привести к неожиданным результатам. Вместо этого используйте свойство цвета CSS. Чтобы узнать больше о стилизации текста, см. наш учебник по [шрифтам и веб-типографике](/fonts/).
Цвета шрифта задаются с помощью свойства CSS color . Например, это правило CSS, добавленное в документ HTML с помощью тега STYLE или во внешней таблице стилей, говорит, что все элементы должны иметь красный цвет шрифта:
STRONG {color:red}
Итак, когда мы используем тег :
, я очень сильно отношусь к этому.
Получаем это:
.strongRed {color: red;} I free очень сильно об этом.
Помните, что это цвет, а не цвет шрифта. Все остальные свойства шрифта начинаются со слова font.
Это исключение.
Цветовые выражения для цвета работают так же, как и для цветовых атрибутов HTML. Вы можете указать название цвета, красно-зелено-синее выражение, часто называемое шестнадцатеричным кодом цвета, или значение насыщенности оттенка (HSL). Например, этот код создает класс Preppy с ярко-розовым шрифтом: #FF3399. Обратите внимание, что цветовому коду RGB предшествует знак решетки (#), как и в HTML:
.преппи {
цвет: #FF3399;
вес шрифта: 900;
}
Затем мы можем применить класс Preppy к элементу (или любому другому элементу):
Я чувствую себя фииииииине.
Соедините два вместе, и мы получим это:
.preppy{color: #FF3399; font-weight: 900;} Я чувствую себя оооооооооооооооооооооооооочень хорошо.
Тесно связанный атрибут CSS — font-style . Свойство font-style указывает, должен ли шрифт быть курсивным, наклонным или обычным. Только курсив и обычный шрифт хорошо поддерживаются большинством браузеров и шрифтов.
Следующие правила стиля (в теге STYLE, добавленном в HEAD документа HTML, или во внешней таблице стилей) дают следующие результаты:
<стиль>
эм {
стиль шрифта: обычный;
вес шрифта: 900;
красный цвет;
}
.юридический {
стиль шрифта: курсив;
}
сноска {
стиль шрифта: наклонный;
}
Давайте рассмотрим настоящие здесь.
Однако ему само по себе не дано это право.
Еще в 1934 разрабатывались решения.
Когда мы визуализируем этот фрагмент кода в браузере, мы получаем следующее:
em.real{стиль шрифта: нормальный; вес шрифта: 900; color: red;}.legal{font-style: italic;}a.footnote{font-style: oblique;} Давайте получим здесь , настоящий .
Однако ему не дано это право как таковому.
Уже в 1934 году разрабатывались решения.
Вы, вероятно, знакомы с курсивом, что означает, что шрифт наклонен и, возможно, изогнут.