Таг за промяна на фона в html. Цвят на текста и цвят на фона в CSS. Основни инструменти за настройка на фона на уеб страници

Можете напълно да персонализирате своя блог или уебсайт много лесно. Тази статия показва колко лесно е да промените шрифта в заглавката и фоновото изображение на страница.

Блогърите и собствениците на сайтове обикновено променят фона, за да направят сайта си визуално по-привлекателен за посетителите. Въпреки това, фоново изображение, което е добавено неправилно, може да обърка посетителя и дори да предизвика недоверие към вашия сайт или блог и нежелание да го посетите отново. За да добавите правилно фона, е важно да използвате правилните HTML кодове.

Има само няколко лесни начина да промените облика на съществуващия си сайт. Много потребители дори не осъзнават колко е лесно.

Как да персонализирате шрифта

Първо, ще трябва да добавите четири мета тагове някъде след това< head >. Можете просто да копирате символите по-долу и да ги поставите във вашия ресурс, след като премахнете интервалите.

Как да персонализирате цвета на фона

Отворете страницата в HTML кода на вашия блог или уебсайт. Когато редактирате страница в Dreamweaver, можете да я отворите, за да улесните работата си. Ако вашият сайт е създаден с помощта на конструктор на уебсайтове, някои услуги ви позволяват да промените вашите HTML настройки онлайн, като отидете на страницата Дизайн и изберете раздела Редактиране на HTML. Така или иначе трябва да имате достъп до HTML кодовете за вашия блог или уебсайт. Процесът на настройка може да варира значително в зависимост от това какви услуги са достъпни за вас и какъв двигател използвате.

Не си струва да се опитвате да търсите отделно изображение с различен цвят, ако всичко, което трябва да направите, е да промените цвета на фона. Вместо това можете просто да редактирате HTML и да промените съществуващия цвят на какъвто искате да запазите.

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

По този начин намерете цветовия код, който искате да видите на вашия сайт като цвят на фона. В маркирането ще изглежда така:

цвят на фона:#XXXXXX; (

След като запазите цвета на фона в HTML, ще видите, че външният вид на вашата страница се е променил.

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

Изберете изображението, което искате да добавите като фон. Има много сайтове, които ви позволяват да изтеглите такива фонове. Освен това можете да използвате снимка, която вече е запазена на вашия компютър.

Качете изображението в Интернет. Много ви позволяват да изтегляте изображения безплатно. Вземете URL адрес на вашето фоново изображение. За да направите това, трябва да отворите изображението в браузъра си и да копирате URL адреса.

Поставете кода, за да добавите изображение като фон. В HTML изглежда така:

фоново изображение: url (URL адрес на изображение);

Трябва да добавите кода там, където започва тялото на страницата в HTML. Запазете промените след редактиране и заредете вашия сайт. Ще можете да видите, че изображението е напълно заменило цвета на фона.

Не забравяйте обаче, че изображенията, които са твърде големи, могат да отнемат много време за зареждане, което ще бъде неприятно за много посетители. Поради тази причина се опитайте да изберете малки изображения за тази цел.

Хубав ден на всички, които искат да учат и да научат нещо ново! Обръщали ли сте някога внимание на външния вид, по време на разработването на който създателите бяха твърде мързеливи, за да украсят фона на страниците? И се обърнах. Това изглежда зле. Често, поради липсата на разделение между различни видове информация, с която сме свикнали, тя се смесва и просто няма желание да се разглежда по-нататък такъв уеб ресурс.

За да не ми се случи такова бедствие, реших да напиша статия на тема: "Как да направя фон на страница в html." След като прочетете публикацията, ще научите какви инструменти можете да използвате, за да зададете дизайна на фона, как да направите фона фиксиран или променен и много повече, което ще ви помогне да направите сайта си привлекателен. А сега да започваме!

Основни инструменти за настройка на фона на уеб страници

За да зададат фоново изображение, дизайнерите на уеб езици предоставиха фоновия атрибут. Предлага се както в , така и в css.

В езика за маркиране това е атрибут на етикета body, а в таблиците със стилове това е универсално свойство, което ви позволява да зададете до 5 фонови характеристики едновременно. Фонът е доста гъвкав елемент, който може да се използва за задаване на фона под формата на един цвят, цветно изображение или дори анимация.

И така, за да зададете фоновото изображение чрез html модула просто напишете този код: ...

и вместо думите "адрес на файла" вмъкнете пътя до снимката.

Въпреки това, забележете! Ако искате да видите като фон едноцветно платно, зададено със стойност от цветовата палитра, то това става с помощта на атрибута bgcolor.

Например, ...

, задали сме черен фон за нашия сайт.

Цветовете в css и html се определят или с английска дума (например червено), или със специален код, който се състои от знака # и шест знака след него (например #FFDAB9).

При въвеждане на втората опция в специализирани софтуерни продукти за разработчици, палитрата автоматично ще се появи пред вас. Ако току-що сте започнали да изучавате тези уеб езици, тогава можете да надникнете цветния код в Интернет.

Фонът като свойство в каскадни листове със стилове

Задава се или в отделен файл с css стилове, или в елемент

На тази бележка можем да обобщим нашата работа. Присъединете се към редиците на моите лоялни абонати, задавайте въпроси, ако нещо не е ясно и не бъдете алчни за връзка към моя блог, а го споделете с приятелите си. Желая ви приятно учене. Чао чао!

С уважение, Роман Чуешов

Цветът на фона е доста важен елемент от всяка уеб страница. Първо, създава правилното настроение и общото настроение на сайта, и второ, улеснява възприемането на текста.

Цветът на фона на уеб страницата се задава с помощта на атрибута bgcolor на тага .

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

Цветът може да бъде зададен в шестнадесетична стойност или чрез името си.

Въпреки че можете да посочите произволен цвят за фона, повечето сайтове използват предимно бял фон и черни букви като най-утвърдената опция.

фонова картина

Като фон можете да използвате всяко подходящо изображение за това. Фонът не трябва да нарушава текста, но трябва да се слива добре с цветовата схема на уеб страницата и да е малък, за да се зарежда бързо. Ако след горното все още искате да добавите фоново изображение към страницата, трябва да използвате атрибута background на тага .

Пример 2: Добавяне на фоново изображение

Ако изображението е по-малко от размера на екрана на монитора, то ще бъде възпроизведено хоризонтално и вертикално.

Тъй като фоновото изображение се зарежда по-бавно от фоновия цвят, може да се случи текстът да не се чете известно време, докато изображенията не бъдат заредени. Същото може да се случи с изображения, деактивирани в браузъра. Поради това се препоръчва винаги да задавате цвета на фона заедно с фоновото изображение (пример 3).

Пример 3: Използване на фоново изображение и фонов цвят

фиксиран фон

По подразбиране, когато използвате лентата за превъртане, фоновото изображение се движи със съдържанието на уеб страницата. Internet Explorer ви позволява да направите фона фиксиран с помощта на атрибута bgproperties="fixed" на тага .

Пример 4 - Задаване на фиксиран фон

Чрез указване на атрибута bgproperties, както е показано в пример 4, фоновото изображение на уеб страницата ще остане неподвижно, а текстът, графиките и други елементи ще се движат с лентата за превъртане.

За да промените цвета на фона на цяла уеб страница или отделни елементи, използвайте генеричното свойство background или background-color. Цветът може да бъде зададен във всеки формат, достъпен за CSS. Най-често срещаните са следните методи.

По име на цвят

Браузърите поддържат някои цветове по име. Ето няколко ключови думи - black (черен), white (бял), red (червен), green (зелен), blue (син) и т.н.

По шестнадесетична стойност

За определяне на цветове се използват шестнадесетични числа. Шестнадесетичната система, за разлика от десетичната, се основава, както подсказва името й, на числото 16. Числата ще бъдат следните: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , 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. Цветен фон

Форматът RGBA ви позволява да зададете цвета на фона на даден елемент на полупрозрачен, така че фонът на уеб страницата да прозира. Изглежда по-забележимо и впечатляващо, когато имаме фоново изображение или шаблон, а не плътен цвят. Тогава картината ще се показва през фона, но четливостта на текста ще остане (фиг. 2).

Ориз. 2. Полупрозрачен фон

Пример 2 показва използването на RGBA формат за създаване на такъв фон.

Пример 2: RGBA формат

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

Свойство COLOR

Това свойство задава цвета на елемента, по-точно цвета на текста вътре в елемента. Стойността се дава в една от възможните форми:

• име на цвят (ЗЕЛЕН, ЧЕРЕН, ЧЕРВЕН...);
• шестнадесетичен цветен код (008000, 000000, FF0000...);
• десетичен код на цвета в RGB (color:rgb (40, 175, 250));

Свойството COLOR се наследява и ако стойността не е зададена за нито един елемент, стойността ще бъде наследена от своя предшественик. Но може да се случи и той да не е зададен за предшественика - тогава стиловият лист на браузъра ще бъде приложен, като се използват стойностите по подразбиране. Цветът на елемента в този случай вероятно ще бъде черен.

Както вече споменах, можете да зададете цвят за почти всички елементи, той може да бъде (H1... H6), (strong, em) и дори цели (p) и дори граници на таблици, но повече за това по-късно.

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

h1 (цвят: син)

В този пример всички заглавия от първо ниво на уеб страницата ще бъдат сини:

силен (цвят: червен)

В този случай всичко, което е в текста на страницата, ще бъде маркирано с етикета силен, ще стане червен.

Може да се напише така:

h1, p, силен (цвят: зелен)

Тогава заглавията от първо ниво, всички параграфи и всичко, което е маркирано с таг, ще бъдат зелени.

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

class="blue"> Цветът на заглавията на този клас ще бъде син

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

h1.Blue (цвят: син)

В HTML документи се използват и селектори по идентификатор, те се определят от атрибута документ за самоличност. Идентификаторът е по-важен или приоритетен атрибут от клас. И ако и класът, и идентификаторът са посочени в HTML кода за елемента, тогава ще се приложи стилът на идентификатора. Идентификаторът се обозначава със знак за паунд ( # ). За да използвате идентификатора в HTML кода, ще трябва да напишете:

id="синьо"> Цветът на заглавията на този идентификатор ще бъде син

В листа със стилове на свой ред:

h1#Син (цвят: син)

Свойство BACKGROUND-COLOR

Това свойство ви позволява да зададете цвета на фона за страницата като цяло, параграф, връзка, като цяло за всеки HTML елемент. За да направите това, цветът или стойността са посочени в стойността на свойството. прозрачен(прозрачен). Кодът за фона на страницата е написан:

тяло (цвят на фона: аква)

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

h1 (цвят на фона: жълт)

Получаваме жълтия фон на заглавията от първото ниво.

Цвят и фон в CSS

Свойство BACKGROUND-REPEAT

Това свойство се използва, когато е зададено, за да се определи дали ще се повтаря хоризонтално и вертикално. Валидни стойности:

• повторете- изображението се повтаря вертикално и хоризонтално;
• повторете x- изображението се повтаря само хоризонтално;
• повторение-у- изображението се повтаря само вертикално;
• не-повтаряне- изображението не се повтаря.

Кодът е написан така:

p(
фоново изображение: url( адрес на файл с изображение) ;
фоново повторение: повторение-x
}

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

Собственост на ФОН-ПРИЛОЖЕНИЕ

Това свойство се използва, за да каже на браузъра дали фоновото изображение на страницата трябва да се превърта с текст ( превъртане) или останете неподвижни ( фиксирани).

тяло (
фоново изображение: url( адрес на файл с изображение) ;
фоново повторение: повторение-x;
фоново прикачване: фиксирано
}

В този случай фоновото изображение ще остане фиксирано.

ФОН-ПОЗИЦИЯ Имот

Това свойство се използва за позициониране на изображението спрямо . Стойностите са зададени в проценти (%), в единици за дължина (cm, px), с ключови думи:

• Вертикално:
• Горна част- горната част на изображението е подравнена с горния ръб на страницата или блока;
• център
• отдолу- долната част на изображението е подравнена с долния край на страницата или блока.
• Хоризонтално:
• наляво- левият край на изображението е подравнен с левия край на страницата или блока;
• център- центърът на изображението е подравнен спрямо центъра на страницата или блока;
• точно- десният край на изображението е подравнен с десния край на страницата или блока.

Пишем примерен код в проценти, единици за дължина и ключови думи:

тяло (
фоново изображение: url( адрес на файл с изображение) ;
фонова позиция: 0% 0%
}

Тяло(
фоново изображение: url( адрес на файл с изображение) ;
позиция на фона: 10px 25cm
}

Тяло(
фоново изображение: url( адрес на файл с изображение) ;
позиция на фона: горе в центъра
}