Как изменить цвет фона и текста веб-страницы?
Для изменения цвета фона применяется свойство background добавленное к селектору body , а для цвета текста используется свойство color , как показано в примере 1.
Пример 1. Изменение цвета веб-страницы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет фона Эскапизм устойчиво дает материалистический комплекс, независимо от психического состояния пациента.
Результат данного примера показан на рис. 1.
Рис. 1. Вид страницы, с измененным цветом фона и текста
Рекомендуем задавать цвет фона, даже если он белый. Дело в том, что некоторые пользователи устанавливают в браузере цвет фона по умолчанию отличный от белого. Так что если цвет явно не задан, то он меняется на другой, причем, совсем не тот, который бы хотелось в итоге получить.
Определение стилей
Настройка стилей используется для изменения внешнего вида текста в Notepad++, но также позволяет настроить некоторые другие элементы интерфейса, которые имеют настраиваемый цвет.
Диалоговое окно настройки стиля имеет два списка. Левый список ( Язык: ) содержит все языки, которые могут быть стилизованы, а также дополнительные группы настроек:
- «Global Styles» — стиль интерфейса.
- «Search results» — стиль для Окно результатов поиска
- DOS style: Highlighting text as if displayed on a command.vom/cmd.exe shell window.
Список справа ( Элементы: ) (в оригинале Style) содержит настраиваемые элементы принадлежащие выбранному языку.
Для большинства языков это название указывает назначение настраиваемого элемента (например комментарии, числа, операторы), поэтому только группы настроек «Global Styles», «Search result» описаны здесь.
- ОК — В оригинале (Save & Close) Сохраняет все изменения и закрывает окно.
- Отмена — Отменяет любые изменения, возвращая к прежнему состоянию, и закрывает диалоговое окно. Аналогичное происходит и при закрытии диалогового окна.
- Цвет текста — (в оригинале «цвет переднего плана»). В большинстве это цвет текста, но для некоторых элементов просто цвет определённой части элемента.
- Цвет фона — (в оригинале «цвет заднего плана»). В большинстве это цвет фона под текстом, но для некоторых элементов просто цвет определённой части элемента.
- Шрифт — Название используемого шрифта. Оставьте пустым для использования по умолчанию.
- Размер — Размер шрифта в пунктах. Оставьте пустым для использования по умолчанию.
- Полужирный — Полужирный шрифт текста.
- Курсив — Курсивный шрифт текста.
- Подчёркнутый — Подчёркнутый шрифт текста.
Если выбран очередной язык, показаны два поля ввода:
- Расшир.по умолч: — расширения файлов по умолчанию, связанные с этим языком. Если открыт файл с указанным здесь расширением, то Notepad++ переключит подсветку на этот язык.
- Ваши расширения: — расширения заданные пользователем (список разделённый пробелами), которые дополняют список расширений по умолчанию, чтобы задать подсветку для указанных вами расширений.
Когда выбран элемент, имеющий специальные ключевые слова, то при выборе этого элемента появятся 2 дополнительных полей ввода:
- Ключевые слова по умолчанию — Ключевые слова, используемые по умолчанию данного языка.
- Ключевые слова пользователя — Ключевые слова, добавляемые пользователем к списку по умолчанию (список разделённый пробелами). Стиль будет применяться только если слово в тексте соответствует одному из добавленных ключевых слов .
Специальные группы настроек
Основные настройки окна редактирования — (группа Global Styles)
Global Styles — глобальный стиль (стиль по умолчанию + стиль элементов интерфейса)
Global Override Этот стиль переназначает индивидуальные установки любого другого стиля, и имеет несколько опций глобального переназначения в дополнение к группе стандартных установок. Каждый флажок находящийся ниже группы стандартных установок указывает, какие свойства применить глобально. Если свойства является пустыми (раскрывающиеся списки), то стиль не будет применяться. Однако применение глобальных установок для не отмеченных флажков полужирный, курсив и подчеркивание — глобально отключают эти свойства. Default Style Стиль по умолчанию, чтобы использовать его в качестве изначального для других языков или неопределённых языков. Оставление настроек пустыми приводит к неопределённому поведению. Indent Guideline Цвет линий отступа. Линия состоит из чередующихся цветов, и задаётся обоими цветами. Отображение отступов включается в Вид→Отображение символов→Отображать отступы Brace Highlight Style Подсвечивание скобок (<[]>) если курсор прилегает. Все свойства элемента регулируются. Bad brace colour Если скобка не имеет пары (сбойная), то подсвечивается этим стилем. Current line background colour Цвет фона активной строки, в которой находится курсор, если эта опция включена в «Настройки→Правка→Подсвечивать текущую строку». Нельзя задавать пустые значения. Selected text colour Цвет фона выделенного текста. Нельзя задавать пустые значения. Caret colour Цвет текстового мигающего курсора. Нельзя задавать пустые значения. Edge colour Цвет вертикальной границы справа. Нельзя задавать пустые значения. Line number margin Стиль поля нумерации строк. Все свойства элемента регулируются. Это также изменяет фон поля закладок. Fold Цвет узла сворачивания (но не самого поля, а линии и внутренности узла). Нельзя задавать пустые значения. Fold active Цвет активного узла сворачивания (линии), в котором находится курсор. Работает только тогда, когда узлы являются кружками или квадратиками. Fold Margin Цвет фона поля под узлами сворачивания. Поле заполнено пикселями обоих цветов в шахматном порядке, поэтому оба цвета влияют на общий цвет поля. White space symbol Цвет знаков пробельных символов. Они отображаются, если в включена опция Вид→Отображение символов→. or any style that is applied to whitespace is set to underlined. Нельзя задавать пустые значения. Smart Highlighting Цвет фона всех вхождений, при выделении слова, если включена опция «Настройки→Разное→Подсветка вхождений при выделении». Mark style # Цвет фона стилевой пометки, где # от 1 до 5. Эти 5 стилевых пометок используются в Поиск→Пометить все вхождения выделенного текста цветом→Используя стиль # Find Mark Style Цвет фона стилевой пометки при поиске на вкладке Найти и пометить в диалоговом окне поиска. При этом помечаются все вхождения. Incremental highlight all Цвет фона. Применяется при Поиск→Поиск по мере набора и использовании флажка Highlight all . Tags match highlighting Цвет фона. Применяется при отмеченном флажке в «Настройки→Разное→Подсветка парных тегов html, xml». Tags attribute Цвет фона. Применяется при отмеченном флажке Подсветка атрибутов тега в «Настройки→Разное→Подсветка парных тегов html, xml». Нельзя задавать пустые значения. Active tab focused Цвет линии активной вкладки, если отмечен флажок «Настройки→Основное→ Оранж. линия на активной вкладке . Нельзя задавать пустые значения. Active tab unfocused Цвет линии активной вкладки неактивного окна (при одновременном просмотре двух документов), если отмечен флажок «Настройки→Основное→ Оранж. линия на активной вкладке . Нельзя задавать пустые значения. Active tab text Цвет текста активной вкладки. Нельзя задавать пустые значения. Inactive tabs Цвет текста не активной вкладки. Цвет фона не активной вкладки задаётся при отмеченном флажке Настройки→Основное→ Затенять неактивные вкладки .
Окно результатов поиска — (группа Search result)
Default Любой текст в окне, который не подсвечен другими особыми стилями. Search Header Стиль корневой строки поиска, содержащей искомый текст, число всех вхождений и число файлов File Header Стиль строки найденного файла и число вхождений в нём Line Number Стиль номера строки, напротив «Line», в которой найдено вхождение Hit Word Стиль самого вхождения Selected Line Любой выделенный текст(?) Current line background colour Цвет фона активной строки, в которой курсор.
iDOS Style (также .ini файлы. )
The ini file «language», which also applies to DOS .bat files uses a special font called MSLINEDRAW to enable “box-art” for files written in the old Dos codepage. You can only control the fore- and background color of the text (applied to all the text). The font properties are derived from the default style (with the exception of the font name, which is always MSLINEDRAW).
High Star
Ну, что же… пришла пора определиться, на чьем же фоне мы будем умопомрачающе выглядеть! И где же тот чудесный тег, который за это дело отвечает? Какие у него есть, выражаясь умным словом атрибуты? И, главное, каким образом разместить всю нашу красоту?
Короче, вопросов — множество! А ответ всего один. Ну нету такого тега вообще! Еще не придумали!
Но не огорчайтесь! Нет тега и не надо! Зато есть два чудесных атрибута известного нам дескриптора BODY. Так что встречайте старого знакомого!
Фон, или как принято называть задний фон в переводе на английский означает background. Поэтому нет ничего проще запомнить два атрибутика, созданных в его честь. Один — background, а другой — bgcolor.
Так чем же они отличаются? Какими возможностями обладают? И, главное, чем будут нам полезны?
Начнем, с самого простого — bgcolor. Этот атрибут отвечает за цвет фона. Вы можете подставить любое значение, в буквенном или в числовом значении цвета и ваш фон окрасится как по волшебству.
Что ж, ради примера можем открыть наш шаблон, либо любой, созданный нами ранее файл и попытаться залить страничку любимым цветом. Я же открою свою страничку index.html в NotePad (Блокнот) и внесу следующие изменения:
Листинг 11. Файл index.html
Ура! Привет мир! Привет люди! Встречайте!