Как изменить цвет шрифта в html коде. Задаем цвет текста. Атрибут color тега font
От автора: приветствуем вас на страницах блога Webformyself. В этой статье я хотел бы ответить на вопрос, как задать шрифт в html. Кое-кто все еще делает это неправильным образом, поэтому очень важно разобраться с вопросом более тщательно.
Как задавали шрифт раньше
Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.
Задание шрифта в html правильным образом
Сегодня для этой цели стоит использовать исключительно возможности css. Этот язык как раз и создан для того, чтобы определять через него внешний вид. К тому же в css намного больше свойств, которые влияют на внешний вид текста. Рассмотрим понемногу каждое из них:
Font-style. Определяет начертание текста. Принимает такие значения:
Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:
Normal – обычное поведение.
Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.
Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:
Normal – обычный текст
Bold – текст с жирным начертанием
Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.
Lighter – буквы получат меньше жирности, по сравнению с родителем.
Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.
К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.
Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту , где все описано более подробно.
Font-family. Пожалуй, самое основное свойство, которое определяет семейство или конкретное имя используемого шрифта. Если вы используете конкретное название, то нужно убедиться, что заданный шрифт найдется на компьютерах всех пользователей. Для надежности через запятую нужно прописать альтернативный вариант или целое семейство. Шрифты подразделяются на такие семейства:
Каждое семейство подходит под разные потребности. Например, с помощью fantasy часто оформляют различные заголовки, а monospace используются для вывода машинного кода и т.д. Конкретнее узнать названия шрифтов вы можете, например, в текстовом редакторе или в фотошопе.
Сокращенная запись
Все то, что мы рассмотрели выше, можно очень легко записать по сути в одну строчку с помощью замечательного свойства font, которое собирает вместе все настройки. Записывать нужно в такой последовательности:
Font: font-style | font-variant | font-weight | font-size | font-family;
Font : font - style | font - variant | font - weight | font - size | font - family ; |
Если какой-то параметр вам указывать не нужно, то он просто опускается. Обязательными здесь являются только размер и семейство шрифта, все остальное указывать необязательно, если в этом нет необходимости. Использование сокращенной записи позволяет сильно сократить код в css. Пользуйтесь ею, потому что это хорошая оптимизация для работы сайта.
Как задать шрифт в html разным элементам
Так, что-то мы сильно увлеклись описанием всех свойств для шрифта. Это очень важная информация, но как вообще его правильно задавать? Используйте нужные селекторы, чтобы дотянуться до нужных элементов. Дальше я предлагаю несколько примеров:
p a{ font-family: Verdana, sans-serif; }
Для табличных данных задается много параметров шрифт: уменьшенные прописные буквы, жирное начертание, размер и название шрифта.
Все мы пользовались известным редактором текста Word. И мы знаем, что в нем очень легко изменить шрифт, размер и цвет текста. Так вот, в html тоже без особого труда можно задать эти параметры. Для этого существует тег . Он парный и потому имеет закрывающий тег , ведь браузеру нужно понимать, где начало и конец текста, которому мы изменяем параметры. Тег имеет три атрибута: face, size и color, задающие тексту шрифт, размер и цвет соответственно. В этом уроке мы подробно рассмотрим шрифты.
Чтобы изменить шрифт текста в html – файле, мы должны заключить текст в теги и и обязательно применить атрибут face . Выглядит это так:
наш текст
Названия шрифтов можно посмотреть в редакторе Word. Там довольно длинный список. Давайте на примере рассмотрим, как изменить шрифт текста в html и напишем следующий код:
Этот текст будет написан шрифтом по умолчанию
Этот текст будет написан шрифтом Batang
Этот текст будет написан шрифтом Comics Sans MS
Сохраним файл под любым именем и посмотрим, что получилось:
Как мы видим, все сработало: первый абзац имеет шрифт по умолчанию, во втором абзаце мы задали шрифт Batang, а в третьем – текст отобразился шрифтом Comic Sans MS. В принципе все легко и понятно, но есть одно замечание. Так как заданный шрифт не сохраняется в HTML – файле, то нет никакой гарантии, что в браузере он отобразиться как нужно. Мы не можем быть уверены на 100%, что на компьютере посетителя имеется шрифт, который мы задали, тем более, если этот шрифт не стандартный. Поэтому в атрибуте face лучше указывать около трех названий шрифтов, которые перечисляются через запятую, чтоб хоть один из них отобразился наверняка. Давайте рассмотрим пример:
Этот текст должен отобразиться шрифтом Batang или Comic Sans MS, или уж точно шрифтом Arial
Посмотрим на результат:
Текст отобразился шрифтом Batang, который мы указали в атрибуте face первым. Если не сработает этот шрифт в браузере посетителя, то сработает второй шрифт - Comic Sans MS и если не сработает этот шрифт, то уж наверняка текст отобразиться шрифтом Arial.
Другие параметры шрифта
И на закуску давайте рассмотрим другие параметры шрифта. В первом уроке мы уже рассмотрели теги, которые задают полужирный шрифт и курсив, это теги и соответственно. Давайте рассмотрим еще несколько тегов, которые задают стиль шрифту:
Подчеркнем текст
этот кусок зачеркнем
и зададим верхний индекс слову
верх
Посмотрим результат:
Всему тексту мы задали шрифт Comic Sans MS, первую строку подчеркнули, используя тег , помним из первого урока, что тег
делает перенос на новую строку, вторая строка у нас перечеркнута благодаря тегу и в последней строке мы задали в верхнем индексе слово "верх". Все ничего сложного! С остальными тегами можете поэкспериментировать самостоятельно. Если вам все понятно, можете переходить на следующий урок, в котором мы рассмотрим, как задать тексту размер, если же остались вопросы, посмотрите подробное видео этого урока.
Некоторые сайты привлекают пользователей не анимацией, не картинками или фотографиями, не видео-роликами, а исключительно своим текстовым содержимым. Текст - это неотъемлемое содержимое многих популярных сайтов. В предыдущих уроках мы рассмотрели CSS свойства, которые позволяют изменить цвет текста, добавить к нему тень, выровнять его и добавить к нему подчеркивание, надчеркивание или вовсе его зачеркнуть. В этом уроке будет рассмотрено какие семейства шрифтов бывают и как изменить шрифт текста, установленный по умолчанию.
Разница между семействами шрифтов Sans-serif и Serif
сайт - шрифт sans-serif
сайт - шрифт serif
Семейства шрифтов в CSS
В CSS шрифты разделены на семейства, каждое семейство состоит из набора шрифтов, обладающих общими характеристиками. Существует всего пять семейств шрифтов:
- sans-serif - шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
- serif - семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки - декоративные штрихи и черточки по краям букв.
- monospace - семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
- cursive - шрифты, имитирующие рукописный текст.
- fantasy - художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.
Свойство font-family дает возможность изменить шрифт, заданный по умолчанию. Обычно оно содержит список взаимозаменяемых шрифтов, разделенных запятыми, принадлежащих одному семейству. Если имя шрифта состоит более чем из одного слова, то его нужно указывать в кавычках. В конце списка обычно указывается название семейства:
Body { font-family: Verdana, Helvetica, Arial, sans-serif; }
Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:
- Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента )
- Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри .
- Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри .
- И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.
CSS свойство font-family
Абзац использующий шрифт Times New Roman.
Абзац использующий шрифт Arial.
Попробовать »Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом "Times New Roman", который задан по умолчанию во всех браузерах.
В этом уроке мы рассмотрим последний атрибут тега , который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html , нужно применить атрибут color тега :
Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:
Текст зеленого цвета
Текст красного цвета
Текст фиолетового цвета
Посмотрим результат в браузере:
Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.
Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:
С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью , который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:
Текст зеленого цвета
Текст красного цвета
Текст фиолетового цвета
Сохраним файл и посмотрим на результат:
Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.
Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега , и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:
Задаем тексту шрифт, размер и цвет
Задаем тексту шрифт, размер и цвет
