Как установить цвет страницы в html. Цвет текста и цвет фона в CSS

От автора: приветствую вас на webformyself и хочу сегодня рассказать вам, как изменить фон сайта. Фоновый цвет или изображение на заднем плане могут играть огромную роль в восприятии сайта, поэтому вы должны знать, как его устанавливать.

Как поменять фон в wordpress

Опять же, если у вас движок wordpress, то изменить общий фон у страницы не составит труда. Нужно всего лишь нажать кнопку “Настроить” во вкладке “Внешний вид”. Здесь нужно выбрать “Цвета”. В зависимости от выбранного шаблона, тут может быть возможность выбирать цвета для различных элементов. Но цвет страницы вы можете выбрать в любом случае – перед вами откроется удобная цветовая панель.

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

Собственно, это все, что вам нужно знать. Если нужно загрузить именно фоновое изображение – выбираете соответствующий пункт и находите на компьютере нужный файл.

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

После загрузки изображения перед вами появиться пару полезных параметров для настройки. Удобство wordpress в том, что вы видите изменения сразу же, в зависимости от того, какие настройки выбираете.

Во-первых, вам предложат выбрать способ повторения. Тут аж 4 варианта: повторять только по горизонтали, только по вертикали, по обеим сторонам и не повторять. В зависимости от того, какое вы используете изображение, вы должны сделать выбор.

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

Позиция. Тут нечего объяснять, просто посмотрите, как меняется внешний вид страницы с разной позицией фона. Выберете тот вариант, который вам больше нравится.

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

Например, если у вас высота фоновой картинки 1000 пикселей, вы ее не повторяете и не фиксируете, то при прокрутке вниз она просто исчезнет из виду. Фиксация фона позволяет картинке постоянно оставаться на виду. Иногда это очень эффектное решение.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Собственно, на этом все по изменению фона в wordpress. Как видите, все максимально просто.

Как изменить фон сайта в html

Хорошо, мы разобрали чисто визуальный вариант, в которой не нужно лезть в код и что-то там прописывать. Теперь давайте разберемся, как все-таки менять фон через html и css. Какие это дает преимущества? Вы можете задавать фоновые изображения не только для сайта в общем, но и для каждого элемента отдельно. Например, для какого-нибудь виджета, меню, шапки и т.д. Это дает гораздо больше возможностей в оформлении сайта и изменении его дизайна.

Для того, чтобы получить доступ ко всему этому оформлению, вам надо найти главную таблицу стилей вашего шаблона. Обычно она располагается в корне, либо в папке css, и называется style.css или main.css.

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

Как задается фон?

Запомните – свойство background. Сегодня лучше использовать именно сокращенный вариант записи этого свойства. Например:

body{ background: #ccc url(bg.png) no-repeat 50% 50% fixed; }

body { background : #ccc url(bg.png) no-repeat 50% 50% fixed;

Что все это значит? Первым параметром обычно задают сплошной цвет. Допустим, задаем серый. Цвет можно и не указывать, если указано фоновое изображения. Как видите, картинка задается с помощью конструкции url(путь к файлу). Соответственно, вам нужно правильно записать путь к файлу, а еще обязательно указывайте его расширение.

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

Как видите, тут все те же параметры, что вы настраивали визуально, но здесь они прописываются в качестве значений свойства background.

В данном примере я использовал сокращенную запись свойства, просто так удобнее, но на самом деле для каждого отдельного параметра есть свое свойство: background-color для цвета, background-image для картинки, background-position для задания позиции.

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

Свойство COLOR

Это свойство задает цвет элемента, а точнее, цвет текста внутри элемента. Значение задается одной из возможных форм:

• наименованием цвета (GREEN, BLACK, RED...);
• шестнадцатеричным кодом цвета (008000, 000000, FF0000...);
• десятичным кодом цвета в RGB (color:rgb (40, 175, 250));

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

Как я уже упоминал, задавать цвет можно практически всем элементам, это могут быть (H1... H6), (strong, em) и даже целые (p) и даже границам таблиц, но об этом позже.

Смотрим пример задания цвета текста при помощи CSS:

h1 {color : Blue }

В этом примере все заголовки первого уровня web-страницы будут синего цвета:

strong {color : red }

В этом случае все то, что в тексте страницы будет выделено тегом strong , окрасится в красный цвет.

Можно записать так:

h1, p, strong {color : green }

Тогда заголовки первого уровня, все абзацы и все то, что выделено тегом будет зеленого цвета.

Когда же возникает необходимость выделять заголовки различными цветами, то применяются селекторы по классу. Для определения класса в HTML используется атрибут class , который можно применять к любым элементам. В HTML - коде нужно будет записать:

class="Blue" >Цвет заголовков этого класса будет синим

В таблице стилей CSS, в этом случае, пишем правило, где селектором будет элемент H1, а через точку (. ) имя класса:

h1.Blue {color : blue }

В HTML - документах исползуются так же селекторы по идентификатору, определяются они атрибутом id . Идентификатор является более значимым или приоритетным признаком, чем класс. И если в HTML - коде для элемента будет указан и класс и идентификатор, то применится стиль идентификатора. Обозначается идентификатор знаком решетки (# ). Для применения в HTML - коде идентификатора, нужно будет записать:

id="Blue" >Цвет заголовков этого идентификатора будет синим

В таблице стилей в свою очередь:

h1#Blue {color : blue }

Свойство BACKGROUND-COLOR

Это свойство позволяет задать цвет фона для страницы вцелом, абзаца, ссылки, вообщем для любого элемента HTML. Для этого в значении свойства указывается цвет или значение transparent (прозрачный). Код для фона страницы пишется:

body {background-color : aqua }

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

h1 {background-color : yellow }

Получаем желтый фон заголовков первого уровня.

Цвет и фон в CSS

Свойство BACKGROUND-REPEAT

Это свойство применяется когда задано , для того чтобы определить будет ли оно повторяться по горизонтали и вертикали. Допустимые значения:

• repeat - изображение повторяется по вертикали и горизонтали;
• repeat-x - изображение повторяется только по горизонтали;
• repeat-y - изображение повторяется только по вертикали;
• no-repeat - изображение не повторяется.

Код пишется так:

p {
background-image : url(адрес файла с изображением ) ;
background-repeat : repeat-x
}

Текст этого параграфа будет поверх фонового изображения, которое расположится по горизонтали.

Свойство BACKGROUND-ATTACHMENT

Это свойство применяется для указания браузеру, должно ли фоновое изображение страницы прокручиваться с текстом (scroll ) или оставаться неподвижным (fixed ).

body {
background-image : url(адрес файла с изображением ) ;
background-repeat : repeat-x ;
background-attachment : fixed
}

В этом случае фоновое изображение останется неподвижным.

Свойство BACKGROUND-POSITION

Данное свойство применяется для расположения изображения относительно . Значения задаются в процентах (%), в единицах длины (см, px), ключевыми словами:

• По вертикали:
• top - верх изображения выравнивается по верхнему краю страницы или блока;
• center
• bottom - низ изображения выравнивается по нижнему краю страницы или блока.
• По горизонтали:
• left - левый край изображения выравнивается по левому краю страницы или блока;
• center - центр изображения выравнивается по центру страницы или блока;
• right - правый край изображения выравнивается по правому краю страницы или блока.

Пишем пример кода в процентах, единицах длины и ключевыми словами:

body {
background-image : url(адрес файла с изображением ) ;
background-position : 0% 0%
}

Body {
background-image : url(адрес файла с изображением ) ;
background-position : 10px 25см
}

Body {
background-image : url(адрес файла с изображением ) ;
background-position : top center
}

Для изменения цвета фона всей веб-страницы или отдельных элементов применяется универсальное свойство background или background-color . Цвет можно указывать в любом доступном для CSS формате. Наиболее распространены следующие способы.

По названию цвета

Браузеры поддерживают некоторые цвета по их названию. Вот некоторые ключевые слова - black (чёрный), white (белый), red (красный), green (зелёный), blue (синий) и др.

По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Числа от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решётки #, например #666999. Каждый из трёх цветов - красный, зелёный и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зелёную, а два последних - синюю. Допускается использовать сокращённую форму вида #rgb, где каждый символ следует удваивать. Так, запись #fc0 следует расценивать как #ffcc00. Регистр в данном случае значения не имеет, поэтому текст можно набирать как прописными, так и строчными символами.

С помощью RGB

Можно определить цвет, используя значения красной, зелёной и синей составляющей в десятичном исчислении. Каждое из трёх составляющих может принимать число от 0 до 255. Также допустимо задавать цвет в процентном отношении, например rgb(90%, 30%, 60%).

RGBA

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, определяющий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 - непрозрачности, а промежуточное значение вроде 0.5 - полупрозрачности.

В примере 1 показано изменение цвета фона и текста.

Пример 1. Цвет фона

Устойчивость

Устойчивость по Ляпунову колебательно переворачивает устойчивый прибор.

Результат данного примера показан на рис. 1.

Рис. 1. Цветной фон

Формат RGBA позволяет задать цвет фона элемента полупрозрачным, тогда сквозь него будет проступать фон веб-страницы. Более заметно и эффектно это выглядит, когда у нас имеется фоновая картинка или узор, а не однотонный цвет. Тогда сквозь фон будет проступать рисунок, но при этом сохранится читаемость текста (рис. 2).

Рис. 2. Полупрозрачный фон

В примере 2 показано использование формата RGBA для создания такого фона.

Пример 2. Формат RGBA

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов 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 можно группировать, ставя между ними точку с запятой (;).

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

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

Для начала измените цвет вашего фона, так как люди с медленным интернет соединением не сразу смогут увидеть фоновое изображение сайта. Некоторое количество времени, пока картинка загружается, они смогут видеть лишь цвет вашего сайта.
Впишите в тэг параметр bgcolor=”*****”, где ***** – это шифр цвета. Узнать цвета для HTML вы можете в любом графическом редакторе, выбрав опцию “для вэб” либо на сайте https://colorscheme.ru/color-names

Вам достаточно выбрать цвет в палитре круга и назначить его интенсивность в рамках квадрата. Справа вы увидите два кода для html. Скопируйте их и вставьте в блокнот.

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

Теперь вы можете приступать к вставке фонового изображения. Поместите желаемую картинку в папку с кодом для большего удобства. Задайте ему имя латинскими буквами.

Теперь узнайте расположение файла, кликнув по нему правой кнопкой мыши, выбрав строку “Открыть с помощью” и кликнув на любой браузер, установленный на вашем компьютере.

Скопируйте адрес из поисковой строки вашего браузера.

Теперь в тэге впишите строку:

• style=”background-image: url(‘file:///C:/Users/ПУТЬ_ФАЙЛА.jpg’)”

Сохраните свой файл.

Проверьте свою веб страницу. Вы увидите, что фон подставлен под ваш текст.

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

• background-repeat : “Значение “. Варианты вашего значения могут быть такими: “repeat-x” – повторяет ваше фоновое изображение и по горизонтали, и по вертикали. “repeat-y” – повторение только по вертикали. “no-repeat” – изображение заморожено на месте и не повторяется. “space” – вся страница заполнится максимальным количеством копий изображения, крайние обрежутся. “round” – такая же опция, но по краям изображения будут аккуратно масштабироваться;
• background-attachment: “Значение”. Если подставить вместо слова Значение тэг “scroll “, то изображение будет прокручиваться вместе с сайтом. “fixed ” – при прокрутке фон остаётся неизменным;
• background-size: Значение Значение2. Здесь значения должны принимать величину в пикселях. Например: 100px 200px. Кроме пикселей принимаются значения в процентах. Это параметр заполнения страницы изображением. Кроме чисел можно вписать два параметра: “contain ” – заполняет страницу изображением по длинной стороне и “cover ” – заполняет страницу изображением по ширине.

Зная основы заполнения страницы фоном в HTML вы готовы к созданию своего первого сайта.