Цвет фона и текста документа

Содержание

Цвета текста и фон документа

Цвет основного текста, цвета гипертекстовых ссылок и фон документа описываются в начальном теге тела документа body с помощью атрибутов :

text = цвет цвет основного текста документа
link = цвет цвет непосещенных гиперссылок
vlink = цвет цвет посещенных гиперссылок
alink = цвет цвет активных гиперссылок (вспыхивает на мгновение при щелчку мыши по гиперссылке)
bgcolor = цвет цвет фона документа
background = url адрес графического файла, используемого при создании фонового изображения; если задан этот атрибут, то при работе браузера в режиме с загрузкой графики значение атрибута bgcolor игнорируется.

Как видно, все эти атрибуты задают параметры внешнего оформления документа и, следовательно являются «нежелательными» (см. раздел «Концепции HTML 4+»). Альтернативой задания этих атрибутов является использование каскадных таблиц стилей CSS, что предпочтительно.

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

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

Задавая фоновое изображение с помощью атрибута background, не надо забывать одновременно указать и фоновый цвет bgcolor. Этот цвет будет использован при работе браузера в режиме без загрузки графики.

Помимо указанных «нежелательных» атрибутов, элемент body два весьма полезных атрибута, использование которых связано со сценариями (например, на наиболее универсальном языке JavaScript ):

Урок 8: Цвет фона и текста

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

Вот необходимые атрибуты:

BACKGROUND – определяет изображение для «заливки» фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.

BGCOLOR – определяет цвет фона документа.

TEXT – определяет цвет текста в документе.

Все они прописываются для элемента BODY. Значения цветов задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

Цвет фона и текста документа

©1999, А.А.Дуванов, Роботландский сетевой Университет

Урок 2. Красивые документы

Один и тот же текст может выглядеть по-разному.

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

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

Вероятно, реакция на первый вариант была такой «Это не текст, а какой-то ужастик!». Вы не можете себе представить, как часто попадаются в Интернете страницы оформленные подобным образом. Давайте не будем поддаваться соблазну использовать многочисленные возможности HTML по принципу «чем больше, тем лучше». Гораздо ближе к истине умеренное утверждение «чем проще, тем приятнее глазу». Главное — не пестрота и многообразие, а хороший вкус и единый стиль.

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

Структура, стиль и внешний вид текстового документа

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

Структуру текста лучше всего продумать заранее. Можно рекомендовать следующий способ оформления:

    Запишите заголовок для всего документа. Он должен быть самым крупным (тег

). Абзацы должны быть небольшими и содержать законченную мысль.

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

    Перейдем от общих рекомендаций к вопросу о том, как их можно выполнить средствами HTML.

    Прежде всего, уточним, что открывающие теги могут содержать атрибуты, то есть дополнительную информацию о свойствах отображаемого на экране элемента. Атрибуты записываются внутри открывающего тега после его имени в виде отдельного ключевого слова или ключевого слова, знака «=» и параметра (значения атрибута).

    Порядок следования атрибутов в теге не важен.

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

    Например, тег, рисующий горизонтальную линию, может содержать атрибут size, изменяющий толщину линии. Если этот атрибут не задан, горизонтальные линии имеют в браузере толщину в два (или три) пиксела.

    Задавая разные параметры атрибуту size, можно получить целую коллекцию линий, разных по толщине:

    Команда HTML Вид линии на экране

    Замечание. По умолчанию браузер рисует линии — «объемными». Можно вывести линии «плоскими», если использовать атрибут noshade:

    Команда HTML Вид линии на экране

    Полный список атрибутов тега расположен здесь.

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

    Текст HTML-программы Комментарий

    Цвет фона и цвет шрифта

    В опытах урока 1 мы никак не задавали, ни цвет фона документа, ни цвет шрифта, которым отображался текст. Тем не менее, и фон, и шрифт не были бесцветными при просмотре документа в браузере. Вероятно, вы видели черный шрифт на белом фоне. Но это совсем не обязательно. Все зависит от настроек вашего браузера. Когда в программе на HTML цвета явно не заданы, браузер использует свои установки по умолчанию. В моем Internet Explorer в разделе «Цвета» включена опция «Использовать стандартные цвета Windows», и я вижу черные буквы на белом фоне. Можно выключить эту опцию и установить свои цвета для работы «по умолчанию».

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

    Цвета для фона и шрифта на всем протяжении документа можно задать при помощи атрибутов bgcolor и text в теге . В рассмотренном выше примере записано:

    Это означает, что в документе заданы черные символы (black) на бирюзовом фоне (aqua). Ключевые слова для других цветов приводится в таблице, а список атрибутов тега здесь.

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

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

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

    Оформление отдельных элементов текста

    Текстовые ссылки и цитаты

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

    Большие цитаты лучше выделять из основного текста при помощи команды

    Посмотрите, как выглядят ссылки и цитаты в нашем примере. А теперь посмотрите на текст программы.

    Усиление текста

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

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

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

    Изменение размера шрифта

    Выделять элементы текста можно не только при помощи жирности, но и изменением размера шрифта. Например, текст объявления «Попал под лошадь» в примере выводится на экран мелким шрифтом, имитируя нонпарель.

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

    Замечание. Возникает вопрос: в каком диапазоне можно изменять размер шрифта? Согласно стандарту, браузер должен поддерживать семь размерных ступений: -2, -1, 0, +1, +2, +3, +4.
    (Здесь за «0» обозначен «нормальный» размер, то есть, размер, который браузер использует по умолчанию.)

    Авторское редактирование

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

    Центрирование абзацев и фрагментов

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

    — выравнивает абзац по центру

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

    Иллюстрация 1 Текст программы Здесь центрированы отдельные элементы
    Иллюстрация 2 Текст программы Здесь центрирован целиком весь блок
    Специальные символы

    Поскольку символы » » воспринимаются браузером как начало и конец тега, возникает вопрос: а как показать эти символы на экране? Еще вопрос: можно ли вставить в тексте абзаца принудительную группу пробелов (ведь браузер игнорирует лишние пропуски)?

    Для этих символов, а также для некоторых других предусмотрено специальное кодирование. Код строится из символа «&» (амперсанд), фиксированного имени и завершающего символа «;»:

    Вот коды некоторых символов (остальные коды можно посмотреть здесь):

    >
    & & пробел
    « « копирайт ©

    Все буквы, составляющие имя специального знака, должны быть строчными (то есть, маленькими). Использование, например, таких обозначений как «"» и «&» не допускается!

    Нажмите кнопку «Сброс», затем выберите верные ответы на вопросы.

    1. Приведенный ниже текст превратите в HTML-документ.
    2. Создайте HTML-документ — небольшой рассказ о ваших увлечениях информатикой и компьютерами.

    Фон в CSS. Параметры background (color, image, position, repeat, attachment) для задания цвета фона или фоновой картинки html элементов

    Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье продолжим рассматривать свойства CSS. На этот раз займемся настройками фона как для всей web-страницы, так и для отдельных элементов. Для этого используются пять CSS правил: background-position, background-image, background-repeat, background-color, background-attachment, — либо одно составное правило background. С помощью хорошо подобранного фона можно выделить важные элементы и оживить html страницу.

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

    Итак, как я уже написал выше, за фон в CSS отвечают пять правил, которые могут быть объединены в одно сборное. Если вкратце, то:

    • background-color — задает цвет фона для любого Html элемента;
    • background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
    • background-repeat — параметр повторения фоновой картинки;
    • background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
    • background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.

    Далее рассмотрим подробнее каждое свойство.

    Background-color и background-image

    Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.

    Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:

    background-color: transparent| |inherit

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

    Илон Маск рекомендует:  Что такое код frenchtojd

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

    У этого абзаца черный фон и белый текст

    Либо так в коде CSS файла:

    p <
    background-color:#000000;
    color:#ffffff
    >

    У этого абзаца черный фон и белый текст

    Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:

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

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

    А вот оригинальный вид фонового изображения:

    Вообще графический фон выводится поверх обычного фона, заданного с помощью свойства background-color. Но если фоновая картинка будет содержать прозрачные области, то цветной фон будет просвечивать сквозь них. Прозрачные фрагменты поддерживают форматы GIF и PNG.

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

    Background-repeat — параметры повторения фонового изображения

    Свойство background-repeat может принимать следующие значения:

    no-repeat — фоновое изображение не будет повторяться. В этом случае часть фона элемента останется не заполненным им. Предыдущий пример, но уже со свойством background-repeat:no-repeat:

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

    В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

    repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.

    repeat-x — фоновое изображение будет повторяться только по горизонтали. Пример:

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.

    repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:

    Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.

    Позиционирование фона с помощью background-position

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

    Горизонтальная позиция может принимать следующие значения:

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

    • left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
    • center — фоновое изображение располагается по центру элемента;
    • right — фон прижимается к правому краю элемента.

    Вертикальная позиция может иметь следующие значения:

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

    • top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
    • center — фоновое изображение располагается по центру;
    • bottom — фон прижимается к нижнему краю.

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

    Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:

    background-image:url (//webcodius.ru/example/logo.png);
    background-repeat:no-repeat;
    background-position:250px 10px;

    Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.

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

    Вообще соотношение между ключевыми словами и процентной записью следующее:

    • top left = left top = 0% 0% (выравнивание по левому верхнему углу)
    • top = top center = center top = 50% 0% (вверху по центру)
    • right top = top right = 100% 0% (по правому верхнему углу)
    • left = left center = center left = 0% 50% (по левому краю и по центру)
    • center = center center = 50% 50% (по центру)
    • right = right center = center right = 100% 50% (по правому краю и по центру)
    • bottom left = left bottom = 0% 100% (по левому нижнему углу)
    • bottom = bottom center = center bottom = 50% 100% (внизу по центру)
    • bottom right = right bottom = 100% 100% (по правому нижнему углу)

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

    Фиксация фона background-attachment

    По умолчанию при прокрутке web страницы в окне браузера, вместе с ее содержимым прокручивается, если есть, и фоновое изображение. Свойство background-attachment позволяет влиять на поведение фонового рисунка. Этот атрибут позволяет зафиксировать фон и запретить его прокрутку. Background-attachment может принимать следующие значения:

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

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

    Сборное правило background

    Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.

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

    background: url (//webcodius.ru/example/logo.png) 50% no-repeat;

    А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:

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

    HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.

    Палитра цвета в HTML. Коды HTML цветов. Цвет текста, ссылки, фона в HTML

    Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы добрались до темы цветов в HTML. Отмечу, что для управления цветом на веб-страницах в данный момент лучше использовать CSS, но иногда бывают такие ситуации, когда средства CSS недоступные (например, многие почтовые клиенты CSS не понимают). Поэтому будущему веб-мастеру просто необходимо изучить средства HTML, которые позволяют изменять цвет, например для того, чтобы делать яркие и красочные e-mail рассылки, которые будут привлекать внимание целевой аудитории сайта.

    Палитра цвета в HTML. Коды HTML цветов. Цвет текста, ссылки, фона в HTML.

    Данная запись получилось довольно объемной, но из нее вы узнаете обо всех технических особенностях работы с цветом при помощи HTML. Начнем мы запись с того, что разберемся с вопрос: для чего нам нужно выделять цветом те или иные элементы HTML страницы. Затем мы поговорим про модель RGB, которая позволяет задавать цвета в HTML при помощи специальных кодов (попутно мы рассмотрим десятичные коды задания цвета и шестнадцатеричные значения HTML цветов). Также из данной записи вы узнаете про палитру цвета, а также поймете почему в HTML нет никакой палитры. И завершении этой публикации будут примеры изменения цвета фона, текста и ссылок.

    Использование цветов в HTML

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

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

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

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

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

    В отрасли IT для манипуляции цветом существует множество цветовых моделей. Самая широко распространённая модель представления цвета – это модель RGB. Про некоторые особенности данной модели мы поговорим здесь, а для более детального знакомства с RGB будет отдельная публикация. Ниже вы найдете список цветовых моделей, используемых в IT (не только в HTML и CSS):

    1. Модель RGB. Данная модель получила очень широкое распространение и, пожалуй, является одним из самых удобных и распространенных способов манипуляции цветом HTML элементов.
    2. Модель RGBA. Данная модель очень похожа на модель RGB, но включает в себя альфа-канал цвета. Особенность модели RGBA заключается в том, что она позволяет регулировать не только цвет HTML элемента, но и его прозрачность за счет наличия альфа-канала. Модель RGBA была добавлена в CSS3 и не поддерживается старыми браузерами.
    3. Модель HSL. Особенность модели HSL заключатся в том, что цвет мы задаем при помощи его параметров: оттенка, напыщенности и светлоты. Данная модель несколько более сложная в понимание, чем модель RGB.
    4. Модель HSLA. Данная модель очень похожа на модель HSL, но она так же, как и модель RGBA позволяет работать с альфа-каналом цвета, поэтому при помощи HSLA мы можем задавать не только цвет HTML элемента на странице, но и его прозрачность.
    5. Модель HSV (HSB). Данную модель не стоит путать с моделью HSL. Отметим, что первых четыре модели можно использовать в HTML или CSS для оформления веб-страниц, а вот модель HSV – нет. Модель HSV была разработана одним из основателей студии Pixar в 1978 году и очень похожа на HSL.
    6. Модель CMY или CMYK. Данная модель используется во всех цветных принтерах для печати. В основе модели CMYK лежит правило, заключающиеся в том, что печать происходит на белых листах бумаги. Любой цвет модели CMYK получается из смешения цветов Cyan (бледно-голубой, бирюзовый), Magenta (пурпурный) и желтого. У каждого цвета в модели CMY есть характеристика непрозрачности (количество краски), измеряющаяся в процентах. Но помимо трех перечисленных цветов, модель CMYK использует еще и черный цвет.

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

    Если говорить про аппаратно-независимые модели передачи цвета, то стоит отметить модель LAB. Итак, мы немного отвлеклись от работы с цветом в HTML, познакомившись с некоторыми цветовыми моделями. Отметим, что браузеры «понимают» только первых четыре модели: HSL, RGB, HSLA и RGBA. Поэтому цветом HTML элементов мы можем управлять только при помощи этих моделей.

    Как формируется цвет HTML элемента: некоторые особенности модели RGB

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

    Итак, модель RGB расшифровывается, как Red, Green, Blue. В основе модели RGB лежит принцип аддитивности. Этот принцип заключается в том, что для получения какого-либо цвета происходит добавление цвета к черному. Для лучшего понимания представьте, что ваш экран – это черная стена и у вас есть три прожектора: первый светит красным цветом, второй светит зеленым, а третий синим. Яркость каждого прожектора вы можете регулировать при помощи линейки, на которой расположены цифры от 0 до 255. Соответственно, если вы установили для прожектора значение ноль, то он выключается и не светит, если значение 255, то прожектор дает максимально яркий цвет.

    Пример того, как происходит создания цвета в модели RGB

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

    Описанный выше принцип лежит в основе модели RGB и применяется для манипуляции цветами в HTML элементов на странице в браузере.

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

    Атрибуты в HTML используются для того, чтобы сделать элементы страницы уникальными. При помощи HTML атрибутов мы можем манипулировать цветом элементов:

    1. HTML атрибут color. Данный атрибут позволяет изменять цвет текста, находящегося внутри HTML элемента. Атрибут может принимать значения в виде называний HTML цветов и при помощи кодов модели RGB в шестнадцатеричной системе счисления и в десятичной системе счисления. Атрибут color – это уникальный HTML атрибут, который позволяет менять цвет текста внутри некоторых HTML элементов.
    2. HTML атрибут text. Данный атрибут является уникальным атрибутом тэга . Тэг вместе с тэгами и образуют структуру HTML документа. Если вы помните, то внутри контейнера размещаются элементы, которые потом отображаются браузером в области просмотра. Атрибут text позволяет задать цвет текста по умолчанию для всей HTML страницы.
    3. HTML атрибут bgcolor. Также являет уникальным HTML атрибутом и позволяет изменять цвет фона некоторых HTML элементов.
    4. HTML атрибут vlink. Данный атрибут уникален и применяется только к тэгу , чтобы изменить цвет ссылки, которую уже посетил пользователь.
    5. HTML атрибут alink. Этот атрибут также уникален и применим только к тэгу . Атрибут alink меняет цвет активной HTML ссылки.
    6. HTML атрибут link. Атрибут link используется только вместе с тэгом и служит для изменения цвета ссылок HTML страницы, которые еще не посещал пользователь.
    Илон Маск рекомендует:  Что такое код yaz_scan

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

    Использование десятичных кодов цвета в HTML

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

    Как задать цвет фона в HTML

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

    Количество источников, использованных в этой статье: 6. Вы найдете их список внизу страницы.

    Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

    Из этой статьи вы узнаете, как изменить цвет фона веб-страницы, если отредактировать ее HTML-код.

    Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

    2013-12-18 / Вр:21:11 / просмотров: 9414

    О том, как менять цвет текста я писал тут. Хочу сказать, что это не всегда удобно. Вот, например, вы хотите поменять цвет текста всей HTML страницы. Например, черный цвет текста изменить на красный. Для этого существует атрибут text для тэга . Хочу зацепить тег , так как в этом теге есть атрибуты, которые помогут изменить не только цвет текста, но и фон всей HTML страницы. А теперь подробней и с примером.
    Вот атрибуты, которые мы сейчас рассмотрим:

    TEXT – этот атрибут задает цвет текста всего документа.
    BGCOLOR – этот атрибут указывает цвет фона HTML странице.
    BACKGROUND – с этим атрибутом можно залить фон страницы изображением.

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

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

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

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

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

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

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

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

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

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

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

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

    Фон в 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 фон задается следующим образом:

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

    Как добавить цвет фона для html страницы. Как задать цвет фона и текста на web-странице

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

    Можно ли обойтись средствами html при задании фона?

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

    Соответственно, мы будем использовать каскадные таблицы стилей (css). Там гораздо больше возможностей для задания бэкграунда. Мы сегодня разберем самые основные.

    Как задать фон через css?

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

    После того, как вы определились с селектором, нужно написать само название свойства. Для задания фонового цвета (именно сплошного цвета, не градиента и не картинки) используется свойство background-color. После него нужно поставить двоеточие и написать сам цвет. Это можно сделать по-разному. Например, с помощью ключевых слов, hex-кода, форматов rgb, rgba, hsl. Любой способ подойдет.

    Чаще всего используется способ шестнадцатеричного кода. Для подбора цветов можно использовать программу, в которой видно код цвета. Например, photoshop, paint или какой-либо онлайн-инструмент. Соответственно, для примера пропишу общий фон для всей веб-страницы.

    Этот код нужно вставить в секцию head. Важно, чтобы файлы находились в одной папке.

    Картинка в качестве фона

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

    Создадим пустой блок с идентификатором:

    Зададим ему явные размеры и фон:

    background — image : url (html . png ) ;

    Из этого кода вы можете видеть, что я использовал новое свойство – background-image. Оно предназначено как раз для вставки картинки в качестве фона html-элементу. Посмотрим, что получилось:

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

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

    Но заметили ли вы одну особенность? Браузер взял и размножил картинку по всему блоку. Так вот, чтобы вы знали, это поведение фоновых картинок по умолчанию – они повторяются по вертикали и горизонтали до тех пора, пока могут влезь в блок. По этим поведением вы можете легко управлять. Для этого используют свойство background-repeat, у которого есть 4 основных значения:

    Repeat – значение по умолчанию, изображение повторяется по обеим сторонам;

    Repeat-x – повторяется только по оис x;

    Repeat-y – повторяется только по оси y;

    No-repeat – не повторяется вообще;

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

    background — repeat : repeat — x ;

    Теперь повторение только по горизонтали. Если прописать no-repeat, то была бы только одна картинка.

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

    С помощью повторения верстальщики раньше достигали того, что создавали фоновые текстуры и градиенты, используя одно малюсенькое изображение. Оно могло быть 30 на 10 пикселей или еще меньше. А может и немного больше. Изображение было таким, что при его повторении по одной или даже по обеим сторонам, не было видно переходов, так что в итоге получался единый цельный фон. К слову, такой подход стоит использовать и сейчас, если вы хотите использовать бесшовную текстуру на своем сайте в качестве фона. Градиент же сегодня уже можно реализовать методами css3, об этом мы еще обязательно поговорим.

    Позиция фона

    По умолчанию фоновое изображение, если для него не задано повторение, будет находиться в левом верхнем углу своего блока. Но положение можно легко изменить с помощью свойства background-position.

    Задавать его можно по-разному. Один из вариантов, это просто указать стороны в которых должна находиться картинка:

    background-position: right top;

    background — position : right top ;

    То есть по вертикали все так и осталось: фоновая картинка располагается сверху, но по горизонтали мы изменили сторону на right, то есть правую. Еще один способ задать позицию – в процентах. Отсчет при этом начинается в любом случае с верхнего левого угла. 100% — весь блок. Таким образом, чтобы поместить картинку ровно по центру, запишем так:

    background-position: 50% 50%;

    background — position : 50 % 50 % ;

    Запомните одну важную вещь, связанную с позиционированием – первым параметром всегда указывается позиция по горизонтали, а вторым – по вертикали. Итак, если вы видите значение 80% 20%, то можно сразу заключить, что фоновое изображение будет сильно сдвинуто вправо, но вниз при этом сильно не уйдет.

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

    Сокращенная запись

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

    background: #333 url(bg.jpg) no-repeat 50% 50%;

    background : #333 url(bg.jpg) no-repeat 50% 50%;

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

    Управляем размером фоновой картинки

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

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

    Итак, моя картинка сейчас занимает все пространство в блоке, но я задам ей размер фона:

    background-size: 80% 50%;

    background — size : 80 % 50 % ;

    Опять же, первым параметром задается размер по горизонтали, вторым – по вертикали. Мы видим, что все правильно применилось –фото стало размером на 80% ширины блока в ширину и наполовину в высоту. Тут только нужно внести одно уточнение – задавая размер в процентах вы можете повлиять на пропорции картинки. Так что будьте внимательны, если хотите не нарушить пропорции.

    Как вы можете догадаться, также размер фона можно указывать в пикселях. Еще есть два ключевых слова-значения, которые также можно использовать:

    Cover – произойдет масштабирование картинки таким образом, чтобы хотя бы по одной стороне она полностью заполняла блок.

    Contain – отмасштабирует так, чтобы картинка полностью влезала в блок в максимальном своем размере.

    Преимущества этих значений в том, что они не изменяют пропорции картинки, оставляя их прежними.

    Также вы должны понимать, что растягивание картинки может привести к ухудшению ее качества. Могу привести пример из жизни и реальной практики верстальщиков. Все знают и понимают, что при верстке под десктопы нужно адаптировать сайт под основные ширины мониторов: 1280, 1366, 1920. Если вы возьмете фоновую картинку размером, допустим, 1280 на 200, и не зададите ей background-size, то экранах с шириной больше появится пустое место, картинка не будет заполнять ширину полностью.

    В 99% случаев это не устраивает веб-разработчика, поэтому он задает background-size: cover, чтобы картинка всегда тянулась на максимум по ширине окна. Это хороший прием, который нужно использовать, но теперь вы столкнетесь с проблемой, что пользователи с шириной экрана 1920 пикселей могут увидеть картинку неоптимального качества.

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

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

    Полупрозрачный фон с помощью css

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

    Для примера я задам всей странице в качестве фона картинку, которую мы использовали ранее в примерах. Блоку же с идентификатором bg, на котором мы проводим все наши эксперименты, зададим фон с помощью формата задания цвета rgba.

    Как я уже и говорил ранее, в css есть много форматов для задания цвета. Один из них – rgb, достаточно известный формат тем, кто работает в графических редакторах. Он записывается так:rgb(17, 255, 34);

    Первым значением в скобках идет насыщенность красного, потом зеленого, потом синего. Значение может быть числовым от 0 до 255. Соответственно, формат rgba ничем не отличается, только добавляется еще один параметр – альфа-канал. Значение может быть от 0 до 1, где 0 – полная прозрачность.

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

    Илон Маск рекомендует:  Функции bios int 0eh прерывание от дискеты

    Основные теги HTML для создания фона

    Итак, переходим к вопросу, фоном в html на весь экран. Для того чтобы сайт красиво выглядел, необходимо понимать одну достаточно важную деталь: достаточно просто сделать градиентный фон или закрасить его однотонным цветом, но если вам необходимо вставить на задний план картинку, она не будет растягиваться на всю ширину монитора. Изображение изначально нужно подобрать или самостоятельно сделать дизайн с таким расширением, в котором у вас будет отображаться страница сайта. Только после того как фоновое изображение готово, переносим его в папку с названием «Images». В ней мы будем хранить все используемые картинки, анимации и другие графические файлы. Эта папка должна находиться в корневом каталоге со всеми вашими файлами html. Теперь можно переходить и к коду. Существует несколько вариантов записи кода, с помощью которого фон будет меняться на картинку.

    1. Написать атрибутом тега.
    2. Через CSS стиль в HTML коде.
    3. Написать CSS стиль в отдельном файле.

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

    1. Первый способ записи через атрибут тега (body) в файле index.htm. Он записывается в таком виде: (body background= «Название_папки/Название_картинки.расширение»)(/body). То есть если у нас картинка с названием «Picture» и расширением JPG, а папку мы назвали как «Images», тогда запись HTML-кода будет выглядеть так: (body background=»Images/Picture.jpg»)… (/body).
    2. Второй метод записи затрагивает CSS стиль, но записывается в том же файле с названием index.htm. (body style=»background: url(«../Images/Picture.jpg»)»).
    3. И третий способ записи производится в двух файлах. В документе с названием index.htm в записывается такая строчка: (head)(link rel=»stylesheet» type=»text/css» href=»Путь_к CSS_файлу»)(/head). А в файле стилей с названием style.css уже записываем: body .

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

    Способы растягивания фоновой картинки на ширину окна

    Представим наш экран в процентном виде. Получается, что вся ширина и длина экрана будет составлять 100% х 100%. Нам необходимо растянуть картинку на эту ширину. Добавим к записи изображения в файл style.css строку, которая и будет растягивать изображение на всю ширину и длину монитора. Как это записывается в CSS стиле? Все просто!

    background-size: 100%; /* такая запись подойдет для большинства современных браузеров */

    Вот мы и разобрали, как сделать картинку фоном в html на весь экран. Есть еще способ записи в файле index.htm. Хоть этот метод и устаревший, но для новичков необходимо его знать и понимать. В теге (head)(style) div < background-size: cover; >(/style) (/head) эта запись означает, что мы выделяем специальный блок для фона, который будет позиционироваться по всей ширине окна. Мы рассмотрели 2 способа, как сделать фон сайта картинкой html, чтобы изображение растягивалось на всю ширину экрана в любом из современных браузеров.

    Как сделать фиксированный фон

    Если вы решили использовать картинку в качестве фона будущего веб-ресурса, тогда вам просто необходимо узнать, как его сделать неподвижным, чтобы он не растягивался в длину и не портил эстетичный вид. Достаточно просто с помощью прописать это небольшое дополнение. Вам необходимо в файле style.css дописать одну фразу после background: url(Images/Picture.jpg») fixed; или вместо нее добавить после точки с запятой отдельную строчку — position: fixed. Таким образом, ваш фоновый рисунок станет неподвижным. Во время прокрутки контента на сайте, вы увидите, что текстовые строки двигаются, а фон остается на месте. Вот вы и научились, как в html сделать фон картинкой, несколькими способами.

    Работа с таблицей в HTML

    Многие неопытные веб-разработчики, сталкиваясь с таблицами и блоками, часто не понимают, как в html сделать картинку фоном таблицы. Как и все и CSS стиля, этот язык веб программирования достаточно простой. И решением такой задачи будет написание пары строк кода. Вы уже должны знать, что написание табличных строк и столбцов обозначается соответственно как теги (tr) и (td). Чтобы фон таблицы сделать в виде изображения, необходимо дописать к тегу (table), (tr) или (td) простую фразу с указанием ссылки на картинку: background = URL картинки. Для наглядности приведем пару примеров.

    Таблицы с картинкой вместо фона: HTML примеры

    Нарисуем таблицу 2х3 и сделаем ее фоном картинку, сохраненную в папке “Images”: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так наша таблица будет закрашена в фон картинки.

    Теперь нарисуем эту же табличку размерами 2х3, но вставим картинку в столбики под номером 1, 4, 5 и 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”)5(/td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). После просмотра видим, что фон появляется только в тех ячейках, в которых мы прописали, а не во всей таблице.

    Кроссбраузерность сайта

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

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

    Откройте свой 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 вы готовы к созданию своего первого сайта.

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

    Цвет фона веб-страницы задается с использованием атрибута bgcolor тега .

    Как изменить фон веб страницы. Как задать цвет фона и текста на web-странице

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

    Свойство COLOR

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Свойство BACKGROUND-COLOR

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

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

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

    Цвет и фон в 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
    >

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

    Чтобы задать фон в HTML используйте промежуточный DOCTYPE

    А начну я с того, что в HTML5 нет возможности задать . Эту возможность было решено вынести в CSS. Поэтому, если Вы планируете использовать ниже изложенное, и хотите получить валидный (правильный) код, Вам нужно остановиться на переходном типе документа. Для этого ваша веб-страница должна начинаться со следующей строки:

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

    Фон HTML-документа и его элементов

    Второе, что Вам нужно знать — это различие между телом документа и элементом документа . Тело документа обозначается в HTML-коде веб-страницы тегом BODY , который включает в себя всё содержание веб-страницы. Очевидно, что фон тела документа не может быть прозрачным. Если фон тела документа не задан, используется значение по умолчанию, заданное в настройках браузера.

    Элементы страницы находятся внутри тега BODY . Примечательно, что задать цвет и/или фоновую картинку средствами HTML можно далеко не для всех элементов документа. Например, фоновую картинку можно указать только для таблиц. По умолчанию, они обычно имеют прозрачный фон.

    Атрибут bgcolor для создания фонового цвета

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

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL