Как да направите нормален фонов цвят в html. Промяна на цвета на текста и фона

Отворете файла на вашата HTML страница за редактиране в редактора, който използвате. За да направите това, можете да щракнете с десния бутон върху документа и да изберете секцията „Отваряне с“.

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

В този случай пътят до изображението може да бъде URL адрес (започващ с http://). Местоположението може да бъде зададено от основната директория (/root/folder/background.jpg) или спрямо местоположението на HTML документа, който се редактира (например folder/background.jpg).

Запазете промените си и отворете страницата в браузър. За да направите това, щракнете с десния бутон и изберете „Отваряне с“. В предоставения списък посочете името на програмата, която използвате за разглеждане на страници в Интернет. Ако параметърът за фон е зададен правилно, ще видите зададеното преди това фоново изображение. Ако изображението не се показва, проверете дали атрибутът на фона е указан правилно и пътят към фоновия файл.

параметър bgcolor

За да зададете цвета на фона без изображение, можете да използвате директивата bgcolor. Като стойност за този атрибут можете да посочите името на цвета на английски езикили използвайте стойността на цвета в HTML палитрата. Например:

Този код дава на страницата син фон. Ако искате да зададете цветови нюанс или по-прецизен цвят, използвайте стойностите на HTML палитрата:

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

CSS атрибути

Можете също да зададете фона, като използвате CSS код в опциите :

Използвайки CSS, можете също да посочите фоново изображение за страницата чрез background-image:

Използването на CSS и HTML дава същите резултати, но когато задавате параметри за показване на страница, за предпочитане е да използвате CSS.

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

Промяна на цвета на фона с помощта на HTML

Етикет тяло, като почти всеки HTML таг, има свои собствени атрибути. За маркиране на атрибути тялоотнасям се:

• bgcolor- определя цвета на фона на страницата;
• заден план- позволява ви да зададете картина като фон на уеб страница (този въпрос е разгледан подробно в статията:);
• превъртане- управлява показването на лентата за превъртане на страницата;
• текст- задава основния цвят на текста, който ще се показва на уеб страницата;
• bgproperties- показва дали фонът ще се движи заедно със страницата;
• връзка- контролира цвета по подразбиране на връзките на страницата;
• връзка- задава цвета на активната връзка;
• vlink- определя цвета на посетената връзка на страницата;
• ляво поле/дясно поле- задава отстъпа на съдържанието от левия или десния край на прозореца на браузъра;
• горно поле/долно поле- задава отстъпа на съдържанието от горния или долния край на прозореца на браузъра;

За да променим цвета на фона с помощта на HTML, ще използваме атрибута bgcolor:

Това е примерен текст бяло, зададен с помощта на атрибута text на етикета body.

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

Промяна на цвета на фона на страницата с помощта на CSS

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

В конструктора на уебсайтове Nubex за всеки уебсайт можете да изберете готов фон от голяма библиотека с изображения или да добавите свой собствен.

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

Да отворим нашата index.html, за редакция: успях!!! И нека го променим малко, добавете атрибути: text="#000000" bgcolor="#ffffff"> Направих го!!! Атрибуте параметър на таг, който се вмъква в тага като „двойка“ (име на параметър + стойност на параметър).
Вмъкват се стойности на атрибутите на етикета:
1) текст=#000000 без кавички;
2) text="#000000" в единични кавички;
3) text="#000000" в двойни кавички.
Всяка от тези опции е правилна, но ако държите на етиката на кода, тогава е по-добре да я използвате двойни кавички, както в моя пример по-горе.

Атрибут "текст"контролира цвета на текста на цялата страница и "bgcolor"контролира цвета на фона на страницата.

Сега предлагам да поговорим за цветовете за HTML документи. Цветът е зададен:
1) текст="злато"- думи на английски, например: gold (златен), red (червен), green (зелен) и така нататък...
Но цветът може да се състои само от една дума, например „червено“, но ако напишете „зелено-червено“, браузърът няма да го разбере и просто ще го игнорира.
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-син

Като бонус от сайта ви предлагам да изтеглите цветовата палитра (2kB), която е показана на снимката по-горе. Трябва да разопаковате архива и да стартирате файла color.html, след това върху голямото поле поставете показалеца на мишката върху цвета, от който се нуждаете, който ще се покаже в малък прозорец и ако щракнете с мишката в този момент, цветният код ще се появи в малкия прозорец вдясно.

Сега да се върнем към нашия файл index.htmlи го запазете като tsvet.html, сега да видим какво се е случило. Какъв беше и какъв остана? И си напълно прав, защото бялото е за фона, а черното за текста е цветът по подразбиране. За да забележите разликата, нека променим стойностите на атрибута:

text=gold" bgcolor="#0900b8"> Направих го!!! Да запазим и да гледаме (отваря се в нов раздел)

Има и други начини за задаване на текст в HTML файлове, но тези два се считат за основните.

В следващата глава ще научим как да манипулираме текст с BR тагове и да обвиваме текст в друг ред.

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

Отворете вашия HTML файл с помощта на Notepad или друг текстов редактор, с който сте свикнали. Например, нека вземем примитивна страница на уебсайт с минимум текст. Можете да отворите файла си с всеки браузър.

Първо променете цвета на вашия фон, тъй като хората с бавна интернет връзка няма да могат веднага да видят фоновото изображение на сайта. За известно време, докато изображението се зарежда, те ще могат да виждат само цвета на вашия сайт.
Въведете в етикета параметър bgcolor=”*****”, където ***** е цветният код. Можете да намерите цветовете за HTML във всеки графичен редактор, като изберете опцията „за уеб“ или на уебсайта https://colorscheme.ru/color-names

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

След като изберете цвят и го поставите в кода, вижте дали сте направили всичко правилно, като прегледате получената уеб страница от браузър.

Сега можете да започнете да вмъквате вашето фоново изображение. Поставете желаното изображение в папката с кодове за по-голямо удобство. Дайте му име с латински букви.

Сега разберете местоположението на файла, като щракнете с десния бутон върху него, изберете „Отваряне с“ и щракнете върху всеки браузър, инсталиран на вашия компютър.

Копирайте адреса от лентата за търсене на вашия браузър.

Сега в етикета въведете реда:

• style=”background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”

Запазете вашия файл.

Проверете вашата уеб страница. Ще видите, че фонът е заменен с вашия текст.

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

• background-repeat : „Стойност“. Опциите за вашата стойност могат да бъдат: „repeat-x“ – повтаря вашето фоново изображение както хоризонтално, така и вертикално. “repeat-y” – повторение само вертикално. “no-repeat” – изображението е замразено на място и не се повтаря. “space” – цялата страница ще бъде запълнена с максималния брой копия на изображението, като най-външните ще бъдат изрязани. „кръг“ – същата опция, но краищата на изображението ще бъдат внимателно мащабирани;
• background-attachment: „Стойност“. Ако замените етикета „превъртане“ вместо думата Стойност, изображението ще се превърта заедно със сайта. “фиксиран” – фонът остава непроменен при скролиране;
• размер на фона: Стойност Стойност2. Тук стойностите трябва да приемат стойност в пиксели. Например: 100px 200px. В допълнение към пикселите се приемат процентни стойности. Това е опция за запълване на страницата с изображение. В допълнение към числата можете да въведете два параметъра: “contain” – запълва страницата с изображение по дългата страна и “cover” – запълва страницата с изображение по ширината.

След като научите основите на попълването на страница с фон в HTML, вие сте готови да създадете първия си уебсайт.

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

Как да промените фона в wordpress

Отново, ако имате WordPress двигател, тогава промяната на общия фон на страницата няма да е трудна. Просто трябва да щракнете върху бутона „Персонализиране“ в раздела „Външен вид“. Тук трябва да изберете „Цветове“. В зависимост от избрания от вас шаблон може да имате възможност да изберете цветове за различни елементи. Но във всеки случай можете да изберете цвета на страницата - пред вас ще се отвори удобен цветен панел.

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

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

JavaScript. Бърз старт

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

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

Първо ще бъдете помолени да изберете метод на повторение. Вече има 4 варианта: повторете само хоризонтално, само вертикално, от двете страни и не повтаряйте. В зависимост от изображението, което използвате, трябва да направите избор.

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

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

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

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

JavaScript. Бърз старт

Научете основите на JavaScript с практически пример как да създадете уеб приложение.

Всъщност това е всичко за промяна на фона в WordPress. Както можете да видите, всичко е възможно най-просто.

Как да промените фона на уебсайт в html

Добре, разгледахме чисто визуална версия, в която не е нужно да влизате в кода и да пишете каквото и да било там. Сега нека да разберем как да променим фона чрез html и css. Какви ползи осигурява това? Можете да задавате фонови изображения не само за сайта като цяло, но и за всеки елемент поотделно. Например за някакъв уиджет, меню, хедър и т.н. Това дава много повече възможности в дизайна на уебсайта и промяната на неговия дизайн.

За да получите достъп до целия този стил, трябва да намерите основния стилов лист на вашия шаблон. Обикновено се намира в корена или в папката css и се нарича style.css или main.css.

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

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

Запомнете – свойството на фона. Днес е по-добре да използвате съкратената версия на писане на това свойство. Например:

тяло (фон: #ccc url(bg.png) без повторение 50% 50% фиксирано; )

тяло( заден план: #ccc url(bg.png) без повторение 50% 50% фиксирано;

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

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

Както можете да видите, тук са всички същите параметри, които сте конфигурирали визуално, но тук те са регистрирани като стойности на свойството на фона.

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

Разбира се, за да владеете свободно тези свойства, ви съветвам първо да вземете нашия курс и ако искате да станете напреднал потребител на езика css, тогава. Там ще научите как да задавате няколко фона едновременно, да настройвате тяхното повторение, да използвате градиенти и т.н. Информацията е много интересна и полезна за създателите на уебсайтове.

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

JavaScript. Бърз старт

Научете основите на JavaScript с практически пример как да създадете уеб приложение.