Цвет заголовка в html. Как изменить цвет текста в HTML. Задание атрибута встроенного стиля текста

27.11.14 88.7K

В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.

Теги и атрибуты при роботе со шрифтами html

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .

Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.


Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:
  • color – устанавливает цвет текста;
  • size – размер шрифта в условных единицах.

Поддерживается положительное значение атрибута от 1 до 7.

  • face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.

Форматируется только тот текст, который расположен между частями парного тега font. Остальной текст отображается стандартным шрифтом, установленным по умолчанию.


Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:
  • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
  • — размер больше установленного по умолчанию;
  • меньший размер шрифта;
  • — наклонный текст (курсив ). Аналогичный ему тег ;
  • — текст с подчеркиванием;
  • — зачеркнутый;
  • — отображение текста только в нижнем регистре;
  • — в верхнем регистре.

Обычный текст

Жирный текст

Жирный текст

Больше обычного

Меньше обычного

Курсив

Курсив

С подчеркиванием

Зачеркнутый

Возможности атрибута style

Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt


3) font-style – устанавливает стиль написания шрифта. Синтаксис:

font-style: normal | italic | oblique | inherit

Значения:

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique


4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

font-variant:inherit

font-variant:normal

font-variant:small-caps


5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

font: font-size font-family | inherit

Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:

  • caption – для кнопок;
  • icon – для иконок;
  • menu – меню;
  • message-box –для диалоговых окон;
  • small-caption – для небольших элементов управления;
  • status-bar – шрифт строки состояния.

font:icon

font:caption

font:menu

font:message-box

small-caption

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif

14.01.17 4.4K

В HTML цвет текста меняется с помощью тега font , но в HTML5 этот метод не поддерживается, Чтобы задать цвет фона HTML для различных элементов страницы, вместо указанного тега нужно использовать CSS . Использование CSS гарантирует, что веб-страница будет совместима с любым браузером.

Метод 1: Использование CSS

  1. Откройте HTML-файл . Лучший способ изменить цвет текста – это воспользоваться CSS . Тег не поддерживается в HTML5 . Поэтому воспользуйтесь CSS , чтобы определить стиль элементов страницы.

  1. Поместите курсор внутри тега . Стили определяются внутри этого тега, если используется внутренняя таблица стилей:

  1. Введите

    1. Введите элемент, цвет текста которого нужно изменить . Используйте раздел

      1. В селекторе элемента введите атрибут color: . Это свойство определяет цвет текста выбранного элемента. За HTML цвет фона текста отвечает свойство background-color . В нашем примере этот атрибут изменит цвет основного текста, который является элементом, включающим весь текст на странице:

      1. Введите цвет текста . Это можно сделать тремя способами: ввести название, шестнадцатеричное значение или значение RGB . Например, чтобы сделать текст синим, введите blue , rgb(0, 0, 255) или #0000FF :

      1. Добавьте другие селекторы, чтобы изменить цвет различных элементов . Чтобы поменять цвет текста у разных элементов страницы или HTML цвет фона текста, можно использовать различные селекторы:

      Этот заголовок будет зеленым.

      Этот параграф будет синим.

      Этот основной текст будет красным.

      1. Укажите стилевой класс CSS вместо того, чтобы менять элемент . Перед тем, как сделать цвет фона в HTML или изменить стиль элемента, можно указать стилевой класс, а затем применить его к любому элементу страницы. Например, класс .redtext окрасит текст элемента в красный цвет:

      Этот заголовок будет красным

      Этот параграф будет стандартным.

      Этот параграф будет красным

      Метод 2: Использование атрибутов встроенного стиля

      1. Откройте HTML-файл . Чтобы изменить стиль одного элемента страницы или цвет фона HTML , можно воспользоваться атрибутами встроенного стиля. Это может быть полезно, если нужно внести одно-два изменения, но не рекомендуется для масштабного применения. Чтобы полностью изменить стиль, воспользуйтесь предыдущим методом:

      1. Найдите элемент, который нужно изменить . С помощью атрибутов встроенного стиля можно изменить цвет текста любого элемента страницы. Например, чтобы изменить цвет текста определенного заголовка, найдите его в файле:

      Этот заголовок нужно заменить

      1. Добавьте к элементу атрибут стиля . Внутри открывающегося тега изменяемого элемента введите style=»» :

      Как изменить цвет шрифта в 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.

      Для изменения шрифта служит тэг с атрибутом FACE. Можно указывать шрифт по названию (Arial, Tahoma, Verdana) или типу(например, monospace). Желательно перечислить несколько имен шрифта, чтобы избежать ситуации, когда окажется, что требуемый шрифт не установлен у пользователя. Рекомендую "забить" хотя бы один из общепринятых шрифтов (например Arial). Не рекомендую на одной странице применять более 2-3 различных шрифтов, иначе страница будет смотреться аляповато и непрофессионально.

      Пример:

      Изменение размера шрифта html-страницы

      Для изменения размера шрифта используют атрибут SIZE. Чем крупнее шрифт, тем более легким для восприятия становится текст. Однако, мелкий шрифт позволяет уместить в пределах экрана больший объем информации. Используя данный атрибут с тэгом , вы можете изменить размер текста вэб-страницы целиком. Применяя атрибут SIZE совместно с тэгом , можно воздействовать на внешний вид отдельного фрагмента текста. Доступно 7 размеров шрифтов. Самый малый обозначается цифрой 1, а самый крупный - 7.

      Изменять шрифт можно с помощью тэгов и . укрупняет шрифт указанного фрагмента по отношению к предыдущему тексту, а , соответственно, уменьшает.

      Меняя размер отдельных букв, можно добиться интересных эффектов. Например, таким образом можно получить буквицу - укрупненную прописную букву начала абзаца.

      Пример:

      Выбор цвета шрифта html-страницы

      Отображение участков текста Вэб-страницы шрифтами разного цвета придает ей привлекательность.

      Используя атрибут TEXT в контексте тэга , можно изменить цвет текста вэб-страницы целиком. Применение же атрибута COLOR с тэгом (обладает более высоким приоритетом) позволяет взаимодействовать на внешний вид отдельного фрагмента текста.

      Чтобы изменить цвет текста, надо знать наименование цвета, либо его шестнадцатеричный код. Код состоит из символа фунта # и числа, представляющего интенсивность красной, зеленой и синей составляющих цвета. По имени можно сослаться только на 16 стандартных цветов.

      Наим-е цвета Код aqua ##00FFFF black ##000000 blue ##0000FF fuchsia ##FF00FF gray ##808080 green ##008000 lime ##00FF00 maroon ##800000 navy ##000080 olive ##808000 purple ##800080 red ##FF0000 silver ##C0C0C0 teal ##008080 white ##FFFFFF yellow ##FFFF00

      Урок 7. Цвет текста и фона в HTML.

      Дата: 2008-12-05

      Как задать цвет фона и текста на web-странице?

      По умолчанию цвет текста и вообще любого шрифта на web-страницах всегда черный (#000000 ). Но мы всегда можем задать абсолютно любой цвет, который нам нравится и прилично смотрится или же больше подходит под дизайн конкретного сайта.

      Задаем цвет текста

      В HTML цвет текста, шрифта, фона и других элеменотов можно задать двумя способами:

      1. Способ 1-й. В парных тегах прописывается атрибут с указанием названия нужного цвета. Название цвета указывается по английски. Например, цвет заголовка на нашей web-странице можно задать таким способом:


      Комментарии к этой статье (уроку):

      Андрей! Какой у Вас замечательный сайт! Я уже вторую неделю регулярно им пользуюсь: изучаю Ваши уроки, и видеоуроки; читаю Вашу литературу и скачиваю программы; делаю первые шаги в веб-программировании! И, что самое главное, у меня получается!!! А я ведь совсем не физик, а лирик! И в этом может убедиться каждый, кто посетит мой литературный сайт: " СТИХИ ОЛЕГ ГУЗЬ " Мои реквизиты: электронная почта: [email protected] сайт: http://sites.google.com/site/stihiolegguz/

      внимательно проверьте код

      Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?




Top