Как поменять цвет в html. Форматирование текста html-страницы (ч.2)
Приветствую всех читателей данной статьи и подписчиков моего блога! Сегодняшнюю публикацию я хочу посвятить теме, без знаний которой ваши интернет-ресурсы не будут читабельными и привлекательными: «Как в html задать шрифт». Сама по себе тема является легкой, и я уверен, что вы быстро ее освоите.
Однако не следует забывать, что веб-языки богаты на всевозможные инструменты оформления шрифтов, которые в идеале необходимо знать. После прочтения статьи вы уверенно овладеете форматированием текста, научитесь задавать различные стили, виды начертаний и украшений шрифтов, а также изменять размер и цвет как предложений, так и отдельных букв. Приступим же!
Шрифты бывают разные
Основная масса вывесок, прессы и литературы, сайтов и других сервисов используют стандартные шрифты. Хоть они и удобные, однако уже давно наскучили и не цепляют глаз. Именно поэтому многие дизайнеры несколько изменяют вид оформления или вовсе создают новые стили. Наиболее известными и влиятельными шрифтами считаются:
- Helvetica;
- Futura;
- Garamond;
- Bodoni;
- Bembo;
- Rockwell;
- Times New Roman.
Их главные отличия состоят в отношении к определенным семействам. Существуют антиквенные (с засечками), рубленные, декоративные, курсивные и моноширинные семейства.
Также хочу подчеркнуть, что существует 5 единиц размерностей шрифтов.
Начнем с языка html и его «творческих способностей»
Название первого заголовка
Подзаголовок с красной буквы!
Здесь расположен первый абзац текущего примера. Для наглядности эти слова будут написаны курсивом.
Напомню, что атрибут align = « center» задает отображение текста по центру.
А теперь пришел час css хвастаться своими умениями
Несмотря на целый набор разнообразных тегов, предусмотренных html, css является более удобным и гибким инструментом для оформления внешнего вида шрифтов.
Основные свойства, применяемые для форматирования контента, это font и его составляющие: text-decoration .
Сначала разберем font . Это универсальный параметр, благодаря которому одновременно можно задать несколько значений. К тому же каждый параметр оперирует своими ключевыми словами.
| Название свойства | Ключевые слова |
| font-family | Можно устанавливать как стандартные семейства шрифтов:
· без засечек (sans-serif); · антиквенные (serif); · декоративные (fantasy); · курсивные (cursive); · моноширинные (monospace), Так и стандартные существующие стили (Arial, Calibri и т.д.). |
| font-size | Для установки абсолютной размерности символов используются обозначения: xx-small, x-small, small, medium, large, x-large, xx-large. Также можно задать уникальное значение. |
| font-weight | Отвечает за насыщенность текстового начертания. Изменяется в диапазоне или задается при помощи слов normal, bold, lighter или bolder. |
| font-variant | Задает представление буквам, используя ключевые слова: small-caps, normal или inherit. |
| font-style | Устанавливает обычное (normal), наклоненное (oblique), курсивное (italic) начертание или наследует родителя (inherit). |
| font-stretch | Указывает плотность расположения букв. Можно указать такие значения: ultra-condensed, ultra-expanded, extra-condensed, extra-expanded, semi-condensed, semi-expanded, normal, expanded, condensed и inherit. |
Свойство text-decoration помогает украсить текст дополнительными элементами, такими как подчеркивание (underline ), зачеркивание (line-through ), надчеркивание (overline ), а также наследовать параметры родителя (inherit ) или отменить все оформление (none ).
А теперь настало время для второго примера. Я взял предыдущий код и оформил его при помощи средств css. Так, заголовок был оформлен с тенью (при помощи свойства text- shadow ) и с контуром вокруг (border- color ). При этом одно слово я сделал крупнее. Также мне захотелось использовать параметр opacity для задания прозрачности подзаголовку.
Название первого заголовка
Полупрозрачный подзаголовок!
Здесь расположен первый абзац текущего примера. Для наглядности эти слова будут написаны курсивом.
При создании веб-страницы приходится сталкиваться с различными проблемами дизайна. Одним из распространённых является вопрос, как изменить цвет текста в HTML. Решить её достаточно просто, при этом существует два различных способа.
Задание атрибута встроенного стиля текста
Чтобы понять, как изменить цвет текста в HTML, достаточно взглянуть на список атрибутов текстового поля. Среди них имеется ряд значений, определяющих стиль текста, заключенного в данные теги, которые указываются внутри ключевого слова style.
Для изменения цвета текста достаточно в выбранном участке текстового поля внутри открывающегося тега ввести слово style= "". Внутри данного атрибута можно указывать различные значения параметров - за изменение цветового оттенка текста отвечает значение атрибута color. Указав этот параметр, после знака двоеточия необходимо указать цвет, в который будет окрашены все символы данного поля. При этом, определяя оттенок, можно указать как явное значение цвета, например, red или yellow, так и его шестнадцатиричное значение, или rgb.
Вне зависимости от выбранного способа определения цвета, результат будет одинаковым в случае одинакового выбора оттенка. Таким образом, все следующие три примера выполнят одинаковые изменения текста - окрасят его в жёлтый цвет.
1.
текст
2.
текст
3.
текст
Изменение цвета с использованием CSS
Использование таблицы стилей также позволяет решить, как изменить цвет текста в HTML. CSS полностью поддерживается всеми современными версиями HTML, а также позволяет изменять стиль сразу нескольких элементов страницы.
Чтобы понять, как изменить цвет текста в HTML с помощью CSS, не обязательно разбираться в формальном языке определения внешнего вида. Для определения атрибутов некоторого элемента, необходимо создать CSS-описание, которое записывается внутру тега
, и определяется тегомАбзац со значением normal.
Абзац со значением italic.
Абзац со значением oblique.