Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font . По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.
Тег font применяется следующим образом:
Конструктор сайтов "Нубекс"
Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font :
Конструктор сайтов "Нубекс"
Здесь задается синий цвет для слова, обрамленного тегом font .
Но помимо параметра color, тег имеет и другие атрибуты.
Атрибуты тега FONT
Тег font имеет всего три атрибута:
- color - задает цвет текста;
- size - устанавливает размер текста;
- face - задает семейство шрифтов.
Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).
Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.
Рассмотрим применение этих атрибутов на нашем примере:
Конструктор сайтов "Нубекс"
Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.
Задание цвета текста при помощи CSS
Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:
Конструктор сайтов "Нубекс"
Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».
Урок 7. Цвет текста и фона в HTML.
Дата: 2008-12-05
Как задать цвет фона и текста на web-странице?
По умолчанию цвет текста и вообще любого шрифта на web-страницах всегда черный (#000000 ). Но мы всегда можем задать абсолютно любой цвет, который нам нравится и прилично смотрится или же больше подходит под дизайн конкретного сайта.
Задаем цвет текста
В HTML цвет текста, шрифта, фона и других элеменотов можно задать двумя способами:
1. Способ 1-й.
В парных тегах
прописывается атрибут
Комментарии к этой статье (уроку):
Андрей! Какой у Вас замечательный сайт! Я уже вторую неделю регулярно им пользуюсь: изучаю Ваши уроки, и видеоуроки; читаю Вашу литературу и скачиваю программы; делаю первые шаги в веб-программировании! И, что самое главное, у меня получается!!! А я ведь совсем не физик, а лирик! И в этом может убедиться каждый, кто посетит мой литературный сайт: " СТИХИ ОЛЕГ ГУЗЬ " Мои реквизиты: электронная почта: [email protected] сайт: http://sites.google.com/site/stihiolegguz/
внимательно проверьте код
Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?
- В различных браузерах функции градиента реализованы по-разному, поэтому нужно добавить несколько версий кода.
-
Создайте направленный градиент. Если вы не хотите, чтобы градиент шел по вертикали, укажите направление перехода цветов. Для этого введите следующий код между тегами :
html { min-height : 100 % ; } body { background : -webkit- linear-gradient (left , #93B874 , #C9DCB9 ); background : -o- linear-gradient (right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient (right , #93B874 , #C9DCB9 ); background : linear-gradient (to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; }
- Если хотите, переставьте слова «left» (влево) и «right» (вправо), чтобы поэкспериментировать с разными направлениями градиента.
-
Используйте другие свойства для настройки градиента. С ним можно сделать больше, чем кажется.
- Например, после каждого цвета можно ввести число в процентах. Так вы укажите, какое пространство будет занимать каждый цветовой сегмент. Вот пример кода с такими параметрами:
background : linear-gradient (# 93B874 10 %, # C9DCB9 70 %, # 000000 90 %);
- Добавьте прозрачность к цвету. В этом случае он будет постепенно затухать. Чтобы добиться эффекта затухания, используйте один и тот же цвет. Чтобы задать цвет, понадобится функция rgba() . Последнее значение определит прозрачность: 0 - непрозрачный цвет и 1 - прозрачный цвет.
background : linear-gradient (to right , rgba (147 , 184 , 116 , 0 ), rgba (147 , 184 , 116 , 1 ));
- Например, после каждого цвета можно ввести число в процентах. Так вы укажите, какое пространство будет занимать каждый цветовой сегмент. Вот пример кода с такими параметрами:
Найдите заголовок «html». Он должен быть в верхней части документа.
Запомните основной синтаксис этого процесса. Чтобы создать градиент, необходимо знать две величины: начальную точку/угол и ряд цветов, которые будут переходить один в другой. Можно выбрать несколько цветов, чтобы они переходили друг в друга; также можно задать направление или угол перехода.
background : linear-gradient (направление / угол , цвет1 , цвет2 , цвет3 и так далее );
Создайте вертикальный градиент. Если не задать направление, градиент будет идти сверху вниз. Чтобы создать такой градиент, введите следующий код между тегами :
html { min-height : 100 % ; } body { background : -webkit- linear-gradient (#93B874 , #C9DCB9 ); background : -o- linear-gradient (#93B874 , #C9DCB9 ); background : -moz- linear-gradient (#93B874 , #C9DCB9 ); background : linear-gradient (#93B874 , #C9DCB9 ); background-color : #93B874 ; }
Просмотрите код. Код для создания цветового градиента в качестве фона веб-страницы будет выглядеть примерно так:
< html > < head > < style > html { min-height : 100 % ; } body { background : -webkit- linear-gradient (left , #93B874 , #C9DCB9 ); background : -o- linear-gradient (right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient (right , #93B874 , #C9DCB9 ); background : linear-gradient (to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; } style > head > < body > body > html >
Дата создния: 2009-11-18
Итак, Вот и пришла пора изучить, как изменяются цвета того текста, который Вы ввели. Этот урок будит состоять из 2 частей . В мы разукрасим отдельную часть текста, а во , весь текст сделаем одного цвета, а необходимую его часть, другого цвета.
1. часть
Хотя все цвета в HTML прописываются необычным способом, делается это очень просто. Во-первых, я предлагаю Вам скачать палитру web-цветов, нажав по слову ПАЛИТРА , или поискать более полную версию в Интернете. Возле каждого цвета в найденной Вами палитре, будет стоять код (английские буквы и цифры). Для того, чтобы наш цвет был, например, синим, необходимо записать такой тег:
Привет! Начинаем изучение HTML
Тоесть вот, что мы имеем:
1.
текст заключен в тег
...
2.
тег
имеет атрибут color (цвет) = #0000FF
Теперь давайте вернёмся к нашему примеру и рассмотрим все наглядно. Снова открываем созданную ранее страничку в блокноте и изменяем цвет шрифта:
Обновляем HTML страницу и проверяем то, что получилось:
Результат: Первая строка стала синего цвета, а вторая осталась по умолчанию - черной.
Таким же образом Вы можете разукрасить любую необходимую часть текста, не зависимо от того, где он расположен, в начале, в середине или в конце текста.
2. часть
Сейчас мы зададим цвет всему тексту документа . Делается это очень легко. Давайте вспомним нашу третью статью. В ней мы говорили, что все, что будит видно в браузере, прописывается в теге ... , тоесть в "туловище" нашего документа.
И так, как мы знаем, ... - тоже тег, поэтому, мы можем ему, так же как и тегу ... , задать необходимые атрибуты.
Цвет в этом случае задается в открывающемся теге , и запись будит выглядеть так:Весь текст вашего документа
В этом случае весь текст документа, кроме того, который заключен в теги ... с присваиванием цвета, будит иметь красный цвет.
Теперь рассмотрим эту часть статьи на примере. Присвоим всему тексту документа красный цвет, а тот текст, который мы в 1 части сделали синим, таким и оставим. Для этого просто прописываем код открывающемуся тегу :
Затем, как всегда перед просмотром, сохраняем документ:
И, наконец, обновляем HTML страницу в браузере:
Результат: Мы научились задавать всему тексту документа необходимый цвет, а так же делать часть текста другого цвета.