Как да зададете фоново изображение в CSS

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

Какво е CSS?

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

Създаване на основен уебсайт с HTML

Тъй като CSS е просто език за стил, за да го използваме, първо имаме нужда от нещо за оформяне. Един много елементарен уебсайт ще бъде достатъчен, за да започнем да играем с CSS. Нашата страница ще показва „Hello World“.

  
  
  
  
 Hello World

В случай, че не сте запознати с HTML, нека бързо разгледаме какво правят всички елементи. Както бе споменато, HTML е език за маркиране, което означава, че използва тагове, за да маркира какъв е текстът. Винаги, когато видите дума, заобиколена от това е етикет. Има два вида тагове, маркер, който маркира началото на използваната секция и един, който маркира края на използваната секция. Текстът в раздел също има за цел да направи това разграничение по -лесно видимо.

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

Свързани: 10 прости примера за CSS код, които можете да научите за 10 минути

Добавяне на CSS към HTML

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

  
  
  
  
 Hello World

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

  
  
  
  
 Hello World

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

  
  
  
 p {  
 text-align: center  
 }  
 #ourParagraph {  
 border-style: solid;  
 padding: 30px;  
 }  
  
  
  
 Hello World

Сега нашият HTML е по -лесен за четене. Ще забележите, че наистина трябваше да променим някои неща. Етикетът за стил казва информация за стила на уеб браузъра, но също и какво да оформя. В нашия пример сме използвали два различни начина да му кажем какво да оформя. The стр в етикета за стил казва на уеб браузъра да приложи този стил към всички маркери на абзаци. The #ourParagraph раздел го казва само на стилови елементи с идентификатор нашияПараграф . Забележи това документ за самоличност информация беше добавена към p етикета в нашето тяло.

как да изтриете албум в google photos

Импортиране на CSS файл към вашия уебсайт

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

Вместо това ще съхраняваме CSS информацията в отделен файл и ще импортираме файла, за да стилизираме страницата. Копирайте и поставете информацията между стиловите тагове в нов CSS файл ourCSSfile.css .

p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

След това импортирайте файла в HTML файла.

  
  
  
  
  
 Hello World

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

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

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

За да промените стила на тялото в CSS, първо използвайте тяло ключова дума. След това добавете къдрави скоби, както направихме преди {}. Цялата информация за стила за тялото трябва да бъде между къдравите скоби. Атрибутът на стила, който искаме да променим, е фоново изображение . Има много атрибути на стила. Не очаквайте да ги запомните всички. Маркирайте списък с CSS свойства с атрибути, които искате да запомните.

Свързани: 8 страхотни HTML ефекта, които всеки може да добави към своя уебсайт

как се хакват акаунти в instagram

След атрибута използвайте двоеточие, за да посочите как ще промените атрибута. За да импортирате изображение, използвайте url () . това показва, че използвате връзка, за да посочите изображението. Поставете местоположението на файла в скоби между кавички. Накрая завършете реда с точка и запетая. Въпреки че празното пространство няма значение в CSS, използвайте отстъп, за да улесните четенето на CSS.

Нашият пример изглежда така:

Ако вашето изображение не се показва правилно поради размера на изображението, можете да промените изображението директно. В CSS обаче има атрибути на фонов стил, които можете да използвате, за да промените фона. Изображенията, които са по -малки от фона, автоматично ще се повтарят във фонов режим. За да изключите това, добавете фон-повторение:без повторение; към вашата стихия.

Има и два начина да накарате изображението да покрива целия фон. Първо, можете да зададете размера на фона на размера на екрана с размер на фона: 100% 100%; , но това ще разтегне изображението и може да изкриви изображението твърде много. Ако не искате пропорциите на изображението да се променят, можете също да зададете размера на фона на Покрийте . Cover ще направи фоновото изображение да покрие фона, но няма да изкриви изображението.

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

Нека променим едно последно нещо. Сега, когато имаме опит, нашият параграф е труден за четене. Нека направим фона му бял. Процесът е подобен. Елементът, който искаме да променим, е #ourParagraph. # Показва, че 'ourParagraph' е име на идентификатор. След това искаме да зададем Цвят на фона атрибут на бяло.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 background-color: white;  
 border-style: solid;  
 padding: 30px;  
}

Много по-добре.

Продължаване на проектирането на вашия уебсайт с CSS

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

Дял Дял Туит електронна поща 8 -те най -добри сайта за качествени примери за HTML кодиране

Искате ли да научите HTML, за да кодирате собствените си уебсайтове и приложения? Използвайте тези примери за уеб страници и изходен код, за да се научите на HTML и CSS.

Прочетете Напред Свързани теми

Програмиране
HTML
Уеб дизайн
CSS

За автора Дженифър Сийтън(21 статии са публикувани)

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

Още от Дженифър Сийтън

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате