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

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

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

Как настроить шрифт

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

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

Откройте страницу в HTML вашего блога или сайта. При редактировании страницы в вы можете открыть ее в Dreamweaver, чтобы облегчить свою работу. Если ваш сайт создан посредством конструктора, некоторые сервисы позволяют изменять настройки HTML онлайн, зайдя на страницу «Дизайн» и выбрав вкладку «Редактировать HTML». В любом случае вы должны быть в состоянии получить доступ к HTML-кодам для вашего блога или сайта. Процесс настройки может сильно варьироваться в зависимости от того, какие услуги вам доступны и какой движок вы используете.

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

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

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

background-color:#XXXXXX; {

После того как вы сохраните цвет фона в HTML, вы увидите, что внешний вид вашей страницы изменен.

Добавление фонового изображения

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

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

Вставьте код для добавления изображения в качестве фона. В HTML он выглядит следующим образом:

background-image: url(image URL);

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

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

Для изменения цвета фона всей веб-страницы или отдельных элементов применяется универсальное свойство 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

П ри помощи 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
}

Мы с вами в предыдущих главах составили основной шаблон HTML-документов, определились что такое ХТМЛ-теги, научились сохранять и редактировать html-файлы, а в этой главе мы познакомимся с атрибутами тегов и изменим цвет текста и фона страницы.

Откроем наш index.html , для редактирования: У меня получилось!!! И немного его изменим, добавим атрибуты: text="#000000" bgcolor="#ffffff" > У меня получилось!!! Атрибут - это параметр тега, который вставляется в тег "парой"(имя параметра + значение параметра).
Значения атрибутов тега вставляются:
1) text=#000000 без кавычек;
2) text="#000000" в одинарных кавычках;
3) text="#000000" в двойных кавычках.
Любой из этих вариантов правильный, но если заботиться об этике кода, то лучше использовать двойные кавычки, как в моем примере выше.

Атрибут "text" управляет цветом текста на всей странице, а "bgcolor" управляет цветом фона страницы.

Теперь предлагаю поговорить об цветах для ХТМЛ-документов. Цвет задается:
1) text="gold" - словами на английской, допустим: gold(золотой), red(красный), green(зеленый) и так далее...
Но цвет может состоять только из одного слова например "red", но если написать "green-red", то браузер это не поймет и просто проигнорирует.
2) text="#000000" - цветовая схема RBG(красный зеленый синий). "#" этот символ говорит от том что это номер цвета, первые два символа(в моем примере ноли) говорят сколько мы взяли "красного" цвета, вторые зеленого и последние два синего цвета.
Каждый цвет задается от 00 до FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), например #000000-черный, #ffffff-белый , #ff0000-красный , #00ff00-зеленый #0000ff-синий

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

А теперь вернемся к нашему файлу index.html и сохраним его как tsvet.html , теперь посмотрим что получилось. Каким был, таким и остался? И вы абсолютно правы, т.к белый для фона, а черный для текста цвета по умолчанию. Что-бы заметить разницу изменим значения атрибутов:

text=gold" bgcolor="#0900b8" > У меня получилось!!! Сохраним и помотрим (откроется в новой вкладке)

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

В следующей главе мы научимся управлять текстом тегами BR, переносить текст на другую строку.

17.10.2015

Пока нет

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и на примерах покажу, как сделать фон из цвета или картинки в HTML-странице.
Все довольно просто!
Начнем из цвета!
Я думаю, вы не пропустили , там, где я рассказывал, как менять цвет текста и в конце статьи давал коды различных цветов и оттенков. Почему я напомнил вам об этом уроке? Да потому, что там есть таблица с готовыми кодами цветов, берите их и практикуйте сразу в этом уроке.
Итак, как сделать цветовой фон в HTML…

Цветовой фон в HTML

Цвет фона в HTML-документе по умолчанию белый. Как же задать цвет по желанию?
В этом нам поможет атрибут «bgcolor ». Чтобы закрасить задний фон, пропишите этот атрибут к тегу «body »:

Либо так:

Вот полный HTML-код:

Текст страницы будет зеленый, а фон черным.

Результат будет вот таким:

Если вы хотите сделать фон из картинки, тогда к тегу «body » пропишите атрибут «baсkground »:

Залейте любую картинку туда, где лежит ваша веб-страница (на примере у меня страница имеет название «fon » с расширением «.gif »):

Вот полный HTML-код:

Результат будет вот таким:

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

Вот полный HTML-код:

Текст страницы на красивом фоне.

На сегодня это все! Я думаю, урок был не сложный и вы все поняли. Если есть вопросы, пишите в комментариях.
Жду вас на следующих уроках.

Предыдущая запись
Следующая запись