Цвет фона текста html

Цвет фона текста html

Одна из самых распространённых задач при редактировании текста и блоков в HTML и CSS. С ней может столкнуться не только верстальщик, но и любой контент-менеджер, который редактирует содержимое сайта. Для решения данного вопроса используется всего два свойства: color — цвет текста, background — работа с фоном, цвет или изображение.

Работа со цветом теста в CSS

color — это свойство, которое нужно для указания цвета только для текста. Цвет можно указать как в формате HTML HEX кода, так в формате RGB (Red Green Blue). Коды цвета можно выбрать либо в графических программах, например, Photoshop, либо в онлайн

Синтаксис свойства:

color: Цвет;

Теперь применяем свойство:

a {    color: #0085сс; // ссылки приобретут светло-синий цвет  }

Пример указания цвета для текста в элементе с идентификатором content:


.content {    color: #444; // тёмно-серый текст в элементе с классом content  }

Почему именно такой пример: указание цвета для ссылки и для текста — это разные вещи. Запомните. Ну и от себя рекомендую делать цвет текста и ссылки разного цвета.

Работа с фоном в CSS

background — это свойство, которое позволяет работать с фоном изображения: устанавливать цвет фона, устанавливать в качестве фона изображение (форматы jpg, gif, png), изменять положение фона и другие параметры, которые описаны ниже.

background-color — это свойство используется только для установки цвета фона. Принимает только код цвета. Цвет можно указать в формате RGB (Red Green Blue), либо в формате HTML HEX кода.

.block {    background-color: #fbb5b5; // установим пастельный алый цвет для фона  }

Лучшие примеры цветов для фона (современные дизайн-модели: Flat Design и др):

Цвет фона текста html


background-image — это свойство, которое используется для установки какого-либо изображения в качестве фона в элементе. Для указания изображения достаточно параметра url и пути к изображению относительно файла с css-стилями.

#back {    background-image: url("images/fon.jpg");  }

background-repeat — может использоваться только в том случае, когда выше было указано свойство background-image. Данное свойство устанавливает правило повтора изображения. По умолчанию, изображение повторяется по оси X и по оси Y до границ элемента (если фон меньше элемента). В свойстве можно указать настройку, чтобы изображения повторялось только по оси X — repeat-x (по горизонтали), только по Y — repeat-y (по вертикали) или вообще не повторялось вообще — no-repeat.

#content {    background-image: url("background.jpg");    background-repeat: repeat-x; /* изображение будет повторяться только по горизонтали до границ блока */  }

background-attachment — фиксирует фон в одном положении, то есть будет изображение прокручиваться вместе с содержимым блока или останется фиксированным. По умолчанию стоит значение scroll, что не фиксирует положение фона.


#content {    background-image: url("background.jpg");    background-repeat: repeat-x; /* изображение будет повторяться лишь по горизонтали */    background-attachment: fixed; /* закреплено в расположении */  }

background-position — свойство, которое задаёт расположение фона в элементе. Задаётся два значения: расположение по горизонтали и затем по вертикали. Задаётся либо в цифровом (пиксели и проценты), либо в буквенном варианте (left, center, right, top, bottom). Данное свойство нужно в том случае, когда изображение не повторяется (no-repeat), а фон нужно расположить в элементе определённым образом.

#block {    background-position: left center; /* по горизонтали - по левой стороне, по высоте - посередине */  }

В комментарии думаю всё понятно)
Пример написания цифирного значения:

#keys {    background-position: 109px 57px; /* отступ слева 109px, сверху 57px */  }

Тут думаю тоже всё должно быть понятно.
Много свойств? Смотрим как писать сокращённо.

В итоге. Сокращённая запись background в CSS


Можно использовать сокращённую запись, где все параметры будут указаны в строчку:

background: color image repeat attachment position;

О плюсах. Подобная запись сокращает время загрузки страницы и рендеринг браузером. Пожалейте посетителей, записывайте лучше таким образом, если, конечно, Вам нужно несколько свойств.
Да, пропустить какое-либо свойство, в случае отсутствия потребности в нём, можно! Просто продолжаете дальше указывать значения дальше по списку.

.block {    background: #f1f1f1 url("background.jpg") repeat-x scroll 100px 125px;  }

Пример работы фонов background в CSS

Код примера. Результат работы и исходники можете посмотреть по ссылке ниже.

<!DOCTYPE html>  <html>   <head>    <meta charset="utf-8">    <title>Обтекание</title>    <style>     .block1 {      font: 22px/140% Palantino, Tahoma, Verdana, sans-serif;       width:500px;      color:#303030;      bac.    
sp;     width:500px; /* для блока с фоновым изображением указываем размеры */     height:400px; /* иначе блок примет размеры по контенту */     color:#fff;     background: #f1f1f1 url("comp/comp.jpg") repeat-x scroll left top;    }   </style>  </head>  <body> <div class="block1">Блок с окрашеным фоном</div> <div class="block2">Блок с фоновым изображением</div>  </body> </html>

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

Демонстрация Скачать исходники

Спасибо за внимание!

tradebenefit.ru

Изменяем цвет текста с помощью атрибута text.


Атрибут text прописывается в теге <body>. Цвет задается в виде цифрового кода:

<body text=»#cc0000″>

или обычным названием цвета:

<body text=»green»>

Код кодировки и название цвета для HTML вы посмотрите тут.

Вот пример:

  <html>  <head>  <title>Изменяем цвет текста с помощью атрибута text</title>  <meta http-equiv="content-type" content="text/html; charset=Windows-1251">  </head>  <body text="#cc0000">  Текст страницы, таблицы, картинки, музыка и видео.  </body>  </html>  

Результат:

Изменяем цвет текста с помощью атрибута text.

Или вот так:

  <html>  <head>  <title>Изменяем цвет текста с помощью атрибута text</title>  <meta http-equiv="content-type" content="text/html; charset=Windows-1251">  </head>  <body text="green">  Текст страницы, таблицы, картинки, музыка и видео.  </body>  </html>  

Результат:

Изменяем цвет текста с помощью атрибута text.

Изменяем цвет фона с помощью атрибута BGCOLOR.


При помощи атрибута BGCOLOR, который тоже размещается в теге <body>, можно задать цвет фона HTML страницы.

Цвет задается в виде цифрового кода:

<body bgcolor=»#000000″>

или обычным названием цвета:

<body bgcolor=»green»>

Вот пример:

  <html>  <head>  <title>Изменяем цвет фона с помощью атрибута BGCOLOR</title>  <meta http-equiv="content-type" content="text/html; charset=Windows-1251">  </head>  <body bgcolor="#000000" text="green">  Текст страницы, таблицы, картинки, музыка и видео.  </body>  </html>  

Результат:

Изменяем цвет фона с помощью атрибута BGCOLOR

Или вот так:

  <html>  <head>  <title>Заголовок страницы</title>  <meta http-equiv="content-type" content="text/html; charset=Windows-1251">  </head>  <body bgcolor="green" text="#000000">  Текст страницы, таблицы, картинки, музыка и видео.  </body>  </html>  

Результат:


Изменяем цвет фона с помощью атрибута BGCOLOR

Изменяем цвет фона с помощью атрибута BACKGROUND.

Атрибут  BACKGROUND тоже размещается в теге <body>. С помощью этого атрибута вы сможете сделать картиночный фон. Формат картинки берите jpg или gif. Разрешение картинки можно брать от 12х12 пикселей и больше.

Если фоновая картинка размещена вместе с HTML файлом, это будет выглядеть так:

<bоdy baсkground=»fon.gif»>

Если фоновая картинка размещена в папке images, это будет выглядеть так:

<bоdy baсkground=»images/fon.gif»>

Вот пример:

  <html>  <head>  <title>Заголовок страницы</title>  <meta http-equiv="content-type" content="text/html; charset=Windows-1251">  </head>  <body background="fon.gif" text="black">  Текст страницы, таблицы, картинки, музыка и видео.  </body>  </html>  

Результат:


Изменяем цвет фона с помощью атрибута BACKGROUND.

Или вот так:

  <html>  <head>  <title>Заголовок страницы</title>  <meta http-equiv="content-type" content="text/html; charset=Windows-1251">  </head>  <body background="images/fon.gif" text="#000000">  Текст страницы, таблицы, картинки, музыка и видео.  </body>  </html>  

Вот и все.
Теперь вы знаете, как изменить или задать цвет фона. Пробуйте закрепить урок, поменять значение, поэкспериментируйте.
Спасибо, что посетили блог BlogGood.ru. Удачи!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

bloggood.ru

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Изменение цвета текста</title> </head> <body> <h5 style="color:#FF0000">Красный текст заголовка</h5>  <p style="color:#0000FF">Синий текст параграфа.</p>  <p>  <em style="color:#008000">Зеленый курсив.</em>  <span style="color:#FF0000">Красный текст.</span>  </p> </body> </html>

Результат в браузере

seodon.ru

Как сделать рамку в html вокруг текста

В текстовом режиме вставьте в запись (пост) следующий html код (в режиме ТЕКСТ).

<div style="border: 2px solid #aa0000; background: #F8E4DF; padding: 15px; border-radius: 9px; font-size: 12px; font-family: Arial;">ваш текст</div>

Все параметры можете изменить по своему вкусу.
В режиме ВИЗУАЛЬНО вы увидите текст в рамке.
«>

Толщина и размер рамки

РАЗМЕР шрифта текста font-size: 12px

СТИЛЬ шрифта font-family: Arial

ТОЛЩИНУ и ЦВЕТ рамки определяет свойство border: 2px solid #aa0000.

ЦВЕТ фона background: #F8E4DF

Вид рамки

Solid — сплошная линия. Обводка может быть:

  • dotted – точечная;
  • dashed – пунктирная;
  • double – двойная;
  • ridge – рельефная.

При таком написании рамка растянется на всю ширину блока <p>  или <div>, который занимает.

Html рамка по длине текста

Чтобы сделать рамку по длине текста, надо задать ее ширину, например, width:100px.

<div style="border: 2px solid #aa0000; width:100px; background: #F8E4DF; padding: 15px; border-radius: 9px; font-size: 12px; font-family: Arial;">ваш текст</div>

«> Если текст длинный, и ширины рамки не хватает, слова в рамке встанут в несколько строчек. Высота рамки при этом автоматически увеличится.

Как выбрать цвет рамки и фона

Чтобы подобрать цвет рамки и цвет фона, наиболее подходящие к дизайну вашего сайта:

ОТКРОЙТЕ свой сайт. «>

НАВЕДИТЕ курсор на элемент, который надо изменить.

ПРАВАЯ кнопка мыши, ПРОСМОТР КОДА ЭЛЕМЕНТА (в Google Chrome), или ИССЛЕДОВАТЬ ЭЛЕМЕНТ (в Mozilla Firefox), или ПРОИНСПЕКТИРОВАТЬ ЭЛЕМЕНТ (в Opera). Далее во всех этих браузерах действия аналогичны.

Появляется окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.

Нажмите на квадратик COLOR и выберите наиболее подходящий вам цвет. Скопируйте цифровое обозначение цвета и вставьте его в html код (цвет рамки или цвет фона).

Готово, вы получили выделение текста цветом (цветной фон) и цветной рамкой.

Понравилась статья? Пишите отзывы в комментариях!

ПОХОЖИЕ СТАТЬИ:

moi-start.ru

Атрибуты тега FONT

Тег font имеет всего три атрибута:

  • color – задает цвет текста;
  • size – устанавливает размер текста;
  • face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

<html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Меняем цвет шрифта при помощи HTML</title>   </head>   <body>   <p>Конструктор сайтов <font size="6" color="#fa8e47" face="serif">"Нубекс"</font></p>   </body>  </html>

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

<html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Меняем цвет шрифта при помощи CSS</title>   <style>   .nubex {   color:#fa8e47;   font-size: 150%;   }   .constructor {   color: blue;   }   .saitov {   color: green;   font-size: 125%;   }   </style>   </head>   <body>   <p><span class="constructor">Конструктор</span> <span class="saitov">сайтов</span> <span class="nubex">"Нубекс"</span></p>   </body>  </html>

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

nubex.ru

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

  1. Откройте HTML-файл. Лучший способ изменить цвет текста – это воспользоваться CSS. Тег <font> не поддерживается в HTML5. Поэтому воспользуйтесь CSS, чтобы определить стиль элементов страницы.
  • Этот метод также работает с внешними таблицами стилей (отдельными файлами CSS). Приведенные ниже примеры предназначены для HTML-файла с внутренней таблицей стилей:
  1. Поместите курсор внутри тега <head>. Стили определяются внутри этого тега, если используется внутренняя таблица стилей:
  1. Введите <style>, чтобы создать внутреннюю таблицу стилей. Когда тег <style> находится внутри <head>, таблица стилей будет применена к любым элементам страницы. Перед тем, как сделать цвет фона в HTML, начало его разметки должно выглядеть следующим образом:
  1. Введите элемент, цвет текста которого нужно изменить. Используйте раздел <style>, чтобы определить внешний вид элементов страницы. Например, чтобы изменить стиль всего текста на странице, введите следующее:
  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=»»:
  1. Внутри «» введите color: или цвет фона HTML. Например:
  1. Введите цвет текста. Это можно сделать тремя способами: ввести имя, шестнадцатеричное значение или значение RGB. Например, чтобы сделать текст желтым, введите yellow;, rgb(255,255,0); или #FFFF00:

Данная публикация представляет собой перевод статьи «How to Change Text Color in HTML» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

 

В этом уроке мы рассмотрим последний атрибут тега <font>, который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html, нужно применить атрибут color тега <font>:

<font color="цвет">

Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:

  <html>   <head>   <title>Урок 6. Изменяем цвет текста</title>   </head>   <body>   <p><font color="green">Текст зеленого цвета</font></p>   <p><font color="red">Текст красного цвета</font></p>   <p><font color="purple">Текст фиолетового цвета</font></p>   </body>  </html>    

Посмотрим результат в браузере:

Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.

Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:

<font color="#5AFF00">

 

С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью конвертера цветов HEX, который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:

  <html>   <head>   <title>Урок 6. Изменяем цвет текста</title>   </head>   <body>   <p><font color="#008000">Текст зеленого цвета</font></p>   <p><font color="#FF0000">Текст красного цвета</font></p>   <p><font color="#800080">Текст фиолетового цвета</font></p>   </body>  </html>    

Сохраним файл и посмотрим на результат:

Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.

Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега <font>, и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:

  <html>   <head>   <title>Задаем тексту несколько параметров</title>   </head>   <body>   <p>&nbsp</p>   <p align="center"><font face="courier" size="+2" color="#008000">Задаем тексту шрифт, размер и цвет</font></p>   <p align="center"><font face="arial" size="+3" color="#00FF02">Задаем тексту шрифт, размер и цвет</font></p>   <p align="center"><font face="comic sans ms" size="+4" color="#FF002E">Задаем тексту шрифт, размер и цвет</font></p>   </body>  </html>    

Как всегда не забудем сохранить файл и посмотрим результат:

Тексту применились все параметры, которые мы задали и все отображается корректно. Сам код думаю пояснять не стоит, так как все теги и атрибуты мы рассматривали в предыдущих уроках, и вы их уже знаете.

saperka.ru

Как изменить HTML цвет и фон текста

Попробуем изменить фон текста в HTML:

<title>HTML, фон, текст, цвет</title>
</head>
<body>
<h3 style="background-color:#ff9911">HTML Фон текста оранжевый</h3>
<p style="background-color:#ff0000; color:#ffffff">Цвет HTML текста белый, фон красный</p>

Результат: цвет HTML текста и его фон

Атрибут background-color определяет фон, в данном случае изменения затрагивают текст.

ab-w.net


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector