Урок 7. Цвет текста и фона в HTML.
Дата: 2008-12-05
Как задать цвет фона и текста на web-странице?
По умолчанию цвет текста и вообще любого шрифта на web-страницах всегда черный (#000000 ). Но мы всегда можем задать абсолютно любой цвет, который нам нравится и прилично смотрится или же больше подходит под дизайн конкретного сайта.
Задаем цвет текста
В HTML цвет текста, шрифта, фона и других элеменотов можно задать двумя способами:
1. Способ 1-й.
В парных тегах
прописывается атрибут
Комментарии к этой статье (уроку):
Андрей! Какой у Вас замечательный сайт! Я уже вторую неделю регулярно им пользуюсь: изучаю Ваши уроки, и видеоуроки; читаю Вашу литературу и скачиваю программы; делаю первые шаги в веб-программировании! И, что самое главное, у меня получается!!! А я ведь совсем не физик, а лирик! И в этом может убедиться каждый, кто посетит мой литературный сайт: " СТИХИ ОЛЕГ ГУЗЬ " Мои реквизиты: электронная почта: [email protected] сайт: http://sites.google.com/site/stihiolegguz/
внимательно проверьте код
Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?
Как изменить цвет шрифта в html
Если вы хоть немного разбираетесь в веб-технологиях, то должны знать, что вся разметка и содержимое документа содержатся в html-файле, а в файле стилей css при этом хранятся стили, определяющие внешний вид различных элементов. Так вот, именно css нам нужно использовать для изменения цвета шрифта и всего остального.
В html существуют теги, которые позволяют применить к тексту определенные эффекты, но согласитесь, что придумывать сотни тегов для каждого оттенка было бы не совсем разумно. В css можно управлять этим гораздо более удобно. Например, вот так можно задать цвет шрифта html-элементу body, то есть тегу, включающему в себя все содержимое странички, которое выводится на экран.
body{ color: red; }
body { color : red ; |
Мы записали телу страницы красный цвет. Его получат абзацы, списки, заголовки и все остальные элементы. Это будет до тех пор, пока стили для этих элементов не будут переопределены на другие.
Форматы записи цвета
Возможно, у вас имеются небольшие познания в области веб-дизайна? В таком случае вы должны знать о том, что существуют разные цветовые режимы. Например, rgb, rgba, hsl, hex и т.д. Конечно, самый простой способ задать оттенок – просто написать ключевое слово. Мы так и сделали в примере выше, значение red делает буквы красными, blue – синими, brown – коричневыми. Это просто названия цветов по-английски.
Единственное, что вам нужно знать в этом случае – название нужного цвета. Их вы можете посмотреть в интернете в любой таблице. Следующий популярный способ задать цвет – записать его шестнадцатеричный код. Это так называемый hex-формат. Примеры:
p{ color: #000; } /* Текст в абзацах будет черным. */ table{ color: #fff; } /* Содержимое в таблицах будет белым. */
Как видите, нужно записать решетку, после чего код цвета. Как его узнать? Например, можно открыть фотошоп или любой другой графический редактор, в котором при подборе цвета отображается его hex-код. Также можно воспользоваться онлайн-сервисом.
Rgb – еще один популярный формат записи. Он расшифровывается просто – red, green, blue. Цвет в этом формате задается так:
#footer{ color: rgb(234, 22, 56); }
#footer{ color : rgb (234 , 22 , 56 ) ; |
Элемент с идентификатором footer получит указанный цвет. Доля красного составит 234, зеленого – 22, синего – 56. Эти значения можно писать от 0 до 255. Соответственно наш оттенок получится ближе к красному. В Paint вы можете добавлять цвета в палитру с помощью изменения насыщенности трех основных цветов.
Преимущества этого способа в том, что вы выбираете из миллионов цветов, просто изменяя три числа. При записи с помощью ключевых слов в вашем арсенале будет всего лишь несколько сотен цветов.
Rgba – полупрозрачный текст!
Да, это новый режим записи, который в графических редакторах есть давно, но именно в веб-дизайне появился относительно недавно. Записывается так:
a{ rgba(255, 12, 22, 0.5); }
rgba (255 , 12 , 22 , 0.5 ) ; |
Последнее число в записи задает прозрачность. Ее можно записывать от 0 до 1, где 1 – полностью непрозрачный текст, то есть поведение по умолчанию. В этом случае все ссылки станут красными, но из-за прозрачности яркость цвета будет значительно меньше, а если под ссылкой есть другой фон или элемент, то его будет видно.
Неправильный способ задания цвета
В html есть устаревший атрибут color и с его помощью можно было записать цвет текста с помощью ключевого слова. Сейчас это может даже не сработать в современных браузерах, да и вообще этот метод нарушает общепринятые веб-стандарты. А еще он неудобен.
Как определить цвет для произвольного фрагмента
Ну ладно, мы тут говорим о цвете шрифта для абзацев, ссылок и таблиц, но это цельные элементы, а что, если вам надо определить цвет для одного предложения, одного слова, одной буквы, в конце концов?
Просто заключаем нужный фрагмент в теги span. Прописываем внутри тега атрибут class, которому задаем произвольное, но понятное нам значение. Например, так:
Все, теперь остается только обратиться к селектору в css.
При создании веб-страницы приходится сталкиваться с различными проблемами дизайна. Одним из распространённых является вопрос, как изменить цвет текста в HTML. Решить её достаточно просто, при этом существует два различных способа.
Задание атрибута встроенного стиля текста
Чтобы понять, как изменить цвет текста в HTML, достаточно взглянуть на список атрибутов текстового поля. Среди них имеется ряд значений, определяющих стиль текста, заключенного в данные теги, которые указываются внутри ключевого слова style.
Для изменения цвета текста достаточно в выбранном участке текстового поля внутри открывающегося тега ввести слово style= "". Внутри данного атрибута можно указывать различные значения параметров - за изменение цветового оттенка текста отвечает значение атрибута color. Указав этот параметр, после знака двоеточия необходимо указать цвет, в который будет окрашены все символы данного поля. При этом, определяя оттенок, можно указать как явное значение цвета, например, red или yellow, так и его шестнадцатиричное значение, или rgb.
Вне зависимости от выбранного способа определения цвета, результат будет одинаковым в случае одинакового выбора оттенка. Таким образом, все следующие три примера выполнят одинаковые изменения текста - окрасят его в жёлтый цвет.
1.
текст
2.
текст
3.
текст
Изменение цвета с использованием CSS
Использование таблицы стилей также позволяет решить, как изменить цвет текста в HTML. CSS полностью поддерживается всеми современными версиями HTML, а также позволяет изменять стиль сразу нескольких элементов страницы.
Чтобы понять, как изменить цвет текста в HTML с помощью CSS, не обязательно разбираться в формальном языке определения внешнего вида. Для определения атрибутов некоторого элемента, необходимо создать CSS-описание, которое записывается внутру тега
, и определяется тегом