Как изменить цвет шифра. Форматирование текста html-страницы (ч.2)
Все мы пользовались известным редактором текста 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. Решить её достаточно просто, при этом существует два различных способа.
Задание атрибута встроенного стиля текста
Чтобы понять, как изменить цвет текста в HTML, достаточно взглянуть на список атрибутов текстового поля. Среди них имеется ряд значений, определяющих стиль текста, заключенного в данные теги, которые указываются внутри ключевого слова style.
Для изменения цвета текста достаточно в выбранном участке текстового поля внутри открывающегося тега ввести слово style= "". Внутри данного атрибута можно указывать различные значения параметров - за изменение цветового оттенка текста отвечает значение атрибута color. Указав этот параметр, после знака двоеточия необходимо указать цвет, в который будет окрашены все символы данного поля. При этом, определяя оттенок, можно указать как явное значение цвета, например, red или yellow, так и его шестнадцатиричное значение, или rgb.
Вне зависимости от выбранного способа определения цвета, результат будет одинаковым в случае одинакового выбора оттенка. Таким образом, все следующие три примера выполнят одинаковые изменения текста - окрасят его в жёлтый цвет.
1.
текст
2.
текст
3.
текст
Изменение цвета с использованием CSS
Использование таблицы стилей также позволяет решить, как изменить цвет текста в HTML. CSS полностью поддерживается всеми современными версиями HTML, а также позволяет изменять стиль сразу нескольких элементов страницы.
Чтобы понять, как изменить цвет текста в HTML с помощью CSS, не обязательно разбираться в формальном языке определения внешнего вида. Для определения атрибутов некоторого элемента, необходимо создать CSS-описание, которое записывается внутру тега
, и определяется тегом