Меню

Как изменить цвет фона когда создаешь веб страницу



Фон в HTML

Фон для сайта HTML можно изменить как с помощью атрибутов тега body, так и с помощью CSS-стилей, примененных также к тегу body. Рассмотрим оба варианта как сделать фон для сайта.

Меняем цвет фона с помощью HTML

Тег body, как и практически любой HTML-тег имеет свои атрибуты. К атрибутам тега body относятся:

  • bgcolor — определяет цвет фона для страницы;
  • background — позволяет задать картинку в качестве фона веб-страницы (подробно этот вопрос рассмотрен в статье: Как сделать фон сайта картинкой HTML);
  • scroll — управляет отображением полосы прокрутки на странице;
  • text — задает базовый цвет текста, который будет выводиться на веб-странице;
  • bgproperties — указывает, будет ли прокручиваться фон вместе со страницей;
  • link — управляет цветом ссылок по умолчанию на странице;
  • alink — устанавливает цвет для активной ссылки;
  • vlink — определяет цвет для посещенной ссылки на странице;
  • leftmargin/rightmargin — задает отступ контента от левого или правого края окна браузера;
  • topmargin/bottommargin — задает отступ контента от верхнего или нижнего края окна браузера;

Чтобы изменить цвет фона с помощью HTML, воспользуемся атрибутом bgcolor:

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

Меняем цвет фона страницы с помощью CSS

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

В конструкторе сайтов «Нубекс» для любого сайта можно выбрать уже готовый фон из большой билиотеки изображений, или добавить свой.

Источник

Как создать сайт с нуля. Пошаговая инструкция

Как создать свой сайт с нуля. Пошаговая инструкция по созданию и продвижению сайта для новичков

Задаем и меняем цвет фона в CSS

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

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

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

CSS (Cascading Style Sheets — Каскадные Таблицы Стилей) — это специальный язык, на котором можно описать дизайн сайта. Ту же функцию может выполнять html, но у него гораздо меньше возможностей, он более громоздок и менее гибок, сложен в управлении.

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

Открываем текстовый редактор (например, Notepad ++) и создаем два файла: file.html и style.css. Сохраните их на вашем компьютере.

Читайте также:  Чем покрасить канву цвет льна

Открываем файл file.html (в том же редакторе) и пишем в нем такой html — код:

Разберемся, что мы написали, сверху вниз:

  • открывающий тег указывает на начало html-документа (страницы)
  • открывающий тег указывает на начало «шапки» страницы
  • в теги заключен заголовок документа. Он не отображается на странице, а виден только в заголовке браузера
  • закрывающий тег — шапка закончена
  • далее определен цвет фона страницы. Совсем уж разжевывать не буду, предполагаю, что с html вы хоть немного знакомы.
  • открывающий тег — начало тела страницы
  • в теги

Источник

Изменение фона страницы

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

Вы увидите две вкладки «Фон» и «Фон сраницы». Чтобы вы не путались, уточним:

Изменение цвета

Для того, чтобы изменить цвет фона, просто кликните на прямоугольник напротив пункта «Цвет фона», после чего появится окошко палитры, где вы сможете выбрать цвет.

Установка фонового изображения на сайт

Если вы хотите установить в качестве фона картинку, то кликните на квадрат под надписью «Фоновая картинка».

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

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

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

Настройки фона

Теперь можно настроить параметры отображения загруженного вами изображения.

Давайте подробнее разберем, что здесь можно настроить:

  • • Повторение — загруженная вами картинка будет повторяться по горизонтали, вертикали, а если выберете пункт просто «Повторять», то в обоих направлениях.
  • Позиция — изменяет расположение картинки, расположенной на фоне.
  • Масштаб— как понятно из названия, данная опция масштабирует изображение, т.е. изменяет его размер. Давайте разберем этот пункт подробнее. Тут есть три варианта выбора.
    «Автоматически» — оставляет размер изображения по умолчанию.
    «Перекрыть» — растягивает изображение на весь экран. Если отношения сторон изображения и экрана не совпадают, то изображение автоматически обрезается.
    «Вместить» — растягивает изображение на ту часть экрана, которую вы выбрали в пункте «Позиция».
  • Отображение — тут можно настроить, будет ли изображение прокручиваться вместе со страницей или будет находится статично на одном месте.

О чень важная рекомендация

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

Вот так делать не надо! Это очень плохо!

Берегите глазки ваших посетителей и они отплатят вам благодарностью и высоким поведенческим фактором. На этом всё. Красивых сайтов вам и удачи!

Источник

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

Дата публикации: 2016-05-25

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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

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

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

Источник

Как изменить цвет фона когда создаешь веб страницу

Давно собирался написать простой код для изменения цвета текста и фона страницы по желанию пользователя.

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

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

Таким образом можно было выбрать цвет фона страницы и цвет текста.

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

То что у меня получилось, вы можете посмотреть на сайте Codepen.

Если коротко, то у нас есть какой то текст на странице, размещенный в параграфах

Мы создали два блока с радио-кнопками, которые будут менять цвет фона ( группа кнопок с id = «bgColor» ) и группа меняющая цвет текста ( id=»textColor» ). Для того, чтобы получить значение value выбранного элемента я использовал jQuery.

В коде подключение jQuery выше скрипта, который в самом низу страницы.

Вы можете сами добавить абсолютно любое количество кнопок, главное прописать значение цвета в их значение value .

Функция запускается при нажатии на кнопку и позволяет создавать самые разные комбинации цвета.

Весь код я поместил в один документ — index.html

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

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

Маленькие хитрости.

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

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

Для этого в приведенный выше код, я добавил несколько строк для сохранения данных и проверки их при повторном посещении сайта.

Я выделили их в коде, просто для наглядности.

Я, ради эксперимента, поставил на пробном сайте — traningforblog.blogspot.com. Здесь вы можете посмотреть пройдя по ссылке. Вы можете изменить цвет любых элементов, причем в любом количестве, если выберете их и добавите в код (как последние две строчки — примере). А чтобы добавить в блог в виде гаджета, то здесь все просто.

Для этого вам просто нужно перейти во вкладку — «Шаблоны» -> «Добавить гаджет» -> «Добавить HTML&JavaScript»

Код мало чем отличается от приведенного, поэтому дублировать его здесь не буду. Если у вас есть желание. то вы всегда можете его посмотреть, скопировать или скачать себе с моего Google Drive по этой ссылке
Как изменять размер шрифта сайта пользователем.
Как сделать заглавной каждую букву в слове (JS)

Источник