Меню

Как изменить цвет тега body



Меняем цвет текста и фона

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега

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

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

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

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

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

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

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

style= «color:имя цвета» >. — указание цвета текста по имени.

style= «color:#HEX-код» >. — указание цвета текста по коду.

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

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

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

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

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

Цвет фона любого элемента страницы меняется также с помощью атрибута style . Общий синтаксис такой:

style= «background:имя цвета» >. — указание цвета фона по имени.

style= «background:#HEX-код» >. — указание цвета фона по коду.

Пример изменения цвета фона

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

Заголовок.

Жирный текст. Обычный текст.

Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно — прозрачный, вот и все.

  1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
  2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
  3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
  4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
  5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).
Читайте также:  Вопросы что где когда вопросы по цветам

Источник

Body не меняет цвет

Добрый день! У меня появилась проблема body не меняет цвет.
Демка — https://codepen.io/meln1337/pen/ZPNbXr

не меняет цвет
Добрый день, уважаемые Форумчане. Начал работать с joomla(сайт не мной разрабатывался, шаблон как.

Не меняет цвет ссылок
Друзья,почему -то не меняется цвет ссылок.Помогите.P.S. сцылки имеют фиолетовый цвет,хотя я им.

Кнопка меняет цвет
Кнопка при наведении на нее она меняет цвет Как можно этот эффект убрать?

Hover не меняет color цвет
Всем привет! Нужна помощь. Не могу понять, почему hover при наведении на ссылку применяет к ней.

Проблема в подключаемом стиле

Вот фон и белый.

Самое простое решение в вашем коде

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

При наведении на картинку меняет цвет
есть две картинки 80*60,первая с надписью на синем фоне,назовем ее f1.jpg вторая с той же надписью.

Почему правило берется из body.site.fluid а не из body?
Есть 2 файла css:

Написать программу, которая по выбору пользователя меняет цвет консольного приложения. Пользователь может выбрать цвет ш
Написать программу, которая по выбору пользователя меняет цвет консольного приложения. Пользователь.

Как изменить цвет body при наведение на ссылку?
Сделать в html , с помощью java script и onmauseover, чтобы при наведении на ссылку менялся цвет.

Источник

21 февраля 2019 | Опубликовано в css | 1 Комментарий »

В этом уроке мы будем разбираться с тегом body, а точнее с его свойствами, которые позволяют задать тегу фоновый цвет. Иногда это работает совсем не так, как вы можете того ожидать. Сегодня вы узнаете почему это происходит именно так, и как это исправить.

Допустим, вам нужно, чтобы у вашего веб-сайта был красный фон. И вы воспользуетесь следующим кодом CSS:

И получите такой результат:

После работы над кодом CSS, не связанным с цветом тега body, Вы заметите неожиданные изменения:

Что же случилось? Почему красный цвет так обрезан? Ведь он задан как цвет фона для тега body.

То, что в некоторых ситуациях цвет фона тега body заливает собой весь фон веб-сайта, — просто странность кода CSS. По-настоящему высота тега body меньше высоты окна браузера. Тег body по высоте равен своему содержимому так же, как блок и другие элементы.

Если у тега html не задан фон, фон тега body закроет всю страницу. Но если у тега html фон задан, фон тега body будет вести себя так же, как и любой другой элемент.

Получается, в этой ситуации в какой-то момент тегу html был задан белый цвет фона.

Возможно, вы используете какую-то таблицу стилей для сброса кода CSS, в которой прописывается белый цвет для тега html, чтобы для этой цели не использовалась системная цветовая схема в таких браузерах, как Firefox, Internet Explorer и Opera, например такую, как normalize.css 2.1.1. Вероятно, из-за широкого распространения подобных проблем этот подход уже не используется в большинстве современных версий таблиц стилей для сброса кода CSS.

Читайте также:  Какого цвета выбрать ковер для светлого пола

Чтобы решить эту проблему, просто удалите фон у тега html или перенесите тот цвет, который должен заливать весь фон, тегу html, так как его поведение всегда одинаковое — его цвет фона зальет собой все свободное пространство.

Источник

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

В се атрибуты тега BODY оказывают своё влияние на объекты, находящиеся между тегами и . Т. е. на все элементы html-страницы. Это означает, что, по-умолчанию, браузер будет выводить html-страницу так, как это прописано или не прописано в теге BODY.

Е сли в каком-либо месте html-документа нужно отобразить текст, фон или другой элемент иначе, то это нужно прописывать в значениях атрибутов соответствующего тега. Т.е. значения тега BODY являются общими для всех элементов документа. И для изменения оформления какого-то одного достаточно указать это в его атрибутах.

Я пока не рассматриваю каскадные таблицы стилей (CSS), с помощью которых также можно задать отображение html-страницы. Кроме того, в этом разделе я не буду рассказывать об абсолютно всех атрибутах тега BODY. Я расскажу только об основных.

И так, наиболее часто используемые атрибуты тега BODY:

bgcolor — цвет фона html-страницы. По-умолчанию, браузер заполняет фон сплошным цветом (в настройках по дефолту — белым) или в зависимости от настроек пользователя этого браузера. Допустим, если вам нужен html-документ с чёрным фоном, то нужно написать так:

Добрый! Классный сайт у вас.правда я только про тег body прочитала. Надо будет попробовать замутить страничку)
Целый день читала про енто дело, а тут еду с работы и натыкаюсь на этот сайт. Очень доступно написано
Это я как истинный чайник говорю.
Спасибо что создали такое

З десь нужно коротко сказать о способах представления цвета в HTML. Цвета в HTML можно задать либо именем цвета из предопределенного списка, либо шестнадцатеричным (hex) значением выбранного цвета. В предопределенном списке содержится 140 цветов и все они соответствуют так называемой Web-палитре. Использование цветов из этой палитры гарантирует их одинаковое воспроизведение всеми браузерами.

С писок цветов из Web-палитры ты найдёшь на странице Приложения. Там же ты найдёшь и шестнадцетиричные (hex) значения этих цветов (при использовании шестнадцетиричных (hex) значений перед числом нужно ставить символ #). В hex-значении цвета используется модель RGB: первые две цифры задают яркость красной (Red), вторые две цифры — зелёной (Green), а последние две цифры — синей (Blue) составляющей цвета.

Д ля того, чтобы использовать цвета, не входящие в Web-палитру, нужно знать их hex-значение. Я для этого использую программу, которую можно взять с моего сайта: ColorT Final.

С представлением цвета в HTML разобрались, теперь продолжим разговор об атрибутах тега BODY.

background — позволяет задать в качестве фона html-страницы картинку. Допустим, есть картинка logo.jpg, расположенная по адресу http://www.seoded.ru/images/logo.jpg . Для того, чтобы сделать её фоном html-страницы нужно записать так:

Е сли html-страница и картинка logo.jpg находятся в одном каталоге (папке), то можно записать так:

Е сли logo.jpg находится в подкаталоге images каталога с html-страницей (т.е. в папке images, которая находится в каталоге с html-страницей), то можно записать так:

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

Читайте также:  Бабушкин квадрат крючком как менять цвет

text — устанавливает цвет текста html-документа. Например, сделаем текст зелёным:

С ледующие атрибуты относятся к представлению вида ссылок на странице:

link — цвет ещё неиспользованной (непросмотренной) ссылки (по умолчанию синий).

vlink — цвет уже использованной (просмотренной) ссылки.

alink — цвет гиперссылок при наведении на них курсора мыши.

Д опустим, нам нужно, чтобы цвет ещё неиспользованных ссылок был красным (#FF0000), а уже нажатых — синим (#0000FF). Сделать это можно так:

Д а, я думаю, ты уже заметил, что атрибут в теге (не только BODY, но и в любом другом) может быть как один, так и несколько сразу. А может и ни одного, в этом случае браузер будет использовать настройки по-умолчанию. В следующем примере мы создадим html-страницу с чёрным фоном, зелёным текстом, неиспользованные ссылки — красные, а посещённые — синие. Весь этот ужас можно создать так:

Н абери этот html-код в любом текстовом редакторе или визуальном. Набирай весь код вручную. Между тегами и вставь текст, какой захочёшь, сохрани этот файл под любым именем (латинскими буквами или цифрами), но обязательно с расширением html (т. е., например, primer.html). А затем открой его в браузере и наслаждайся открывшейся тебе авангардистской картиной.

Примечание. Не забывай — я ставлю после скобки НЕ НАДО.

П омимо собственных атрибутов (атрибуты, которые используются только в этом теге) в теге BODY можно применять атрибуты и других тегов (их можно употреблять в разных тегах, они общие для них всех). О них ты узнаешь в следующих частях этого раздела. Пока же настоятельно рекомендую поэкспериментировать с полученными знаниями. Только на практике ты увидишь результаты этих знаний и поймёшь, как это работает. И только поняв и запомнив, как атрибуты тега BODY используются при создании html-страницы, переходи к следующей главе, в которой мы поговорим о форматировании текста в HTML.

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки ! Так победим.

Поделиться ссылкой на эту страницу в:

Источник

Атрибут bgcolor для тега body.

bgcolor – атрибут, предназначенный для установки желаемого цвета для фона страницы. Если в теге body Вы не пропишите данный атрибут, то браузер по умолчанию заполнит фон страницы сплошным белым цветом (если пользователь, просматривающий страницу, не изменит вручную настройки браузера). При желании задать какой-либо конкретный фоновый цвет для html страницы Вам необходимо…

bgcolor – атрибут, предназначенный для установки желаемого цвета для фона страницы. Если в теге body Вы не пропишите данный атрибут, то браузер по умолчанию заполнит фон страницы сплошным белым цветом (если пользователь, просматривающий страницу, не изменит вручную настройки браузера).

При желании задать какой-либо конкретный фоновый цвет для html страницы Вам необходимо в открытии тега прописать атрибут bgcolor, указав в его значении желаемый цвет. Браузер в этом случае прочитает Ваши фоновые установки и покажет страницу с заданным Вами фоновым цветом.

Например , чтобы фон страницы был синим, пропишите в body один из двух вариантов bgcolor:

1. Словесное указание цвета ( blue – синий ):

2. Указание цвета шестнадцатеричной системой ( #0000ff — синий ):

Таким образом, Вы можете задавать любые желаемые цвета для фона своих html страниц.

Больше информации о других атрибутах тега body здесь.

Важно.
Для самостоятельного и быстрого определения цветов при наведении мышки на объект web-дизайнеры и создатели сайтов используют отличную программу Pixie.

Источник