Създаването на уебсайт е чудесен начин да изразите себе си. Въпреки че има много инструменти за изграждане на уебсайтове, самият си запис е забавен начин да научите повече за това как уебсайтовете работят зад кулисите. Добър начинаещ проект е да създадете уебсайт и да добавите фоново изображение с CSS. Този проект ще ви подготви и работи както с HTML, така и с CSS.
Какво е CSS?
CSS означава Cascading Style Sheet. Това е език за програмиране, който ви позволява да оформяте езици за маркиране. Един такъв език за маркиране е HTML или Hyper-Text Markup Language. HTML се използва за създаване на уебсайтове. Въпреки че можете да контролирате някои от стила на уебсайта с помощта на HTML, CSS предлага много повече възможности за контрол и дизайн.
Създаване на основен уебсайт с HTML
Тъй като CSS е просто стил език, за да го използваме, първо се нуждаем от нещо, което да стилизираме. Един много основен уебсайт ще ни бъде достатъчен, за да започнем да играем с CSS. На страницата ни ще се покаже „Hello World“.
Здравей свят
В случай, че не сте запознати с HTML, нека бързо да разгледаме какво правят всички елементи. Както споменахме, HTML е език за маркиране, което означава, че използва маркери, за да маркира какъв е текстът. Винаги, когато видите дума, заобиколена от <> това е етикет. Има два типа тагове, етикет, който маркира началото на раздел с помощта на <> и един, който отбелязва края на раздел с помощта на
В нашия пример имаме четири маркера. The html tag показва кои елементи са част от уебсайта. The глава тагът съдържа заглавната информация, която не се показва на страницата, но е необходима за създаването на страницата. Всички показани елементи са между тяло етикети. Имаме само един показан елемент, стр етикет. Той казва на уеб браузъра, че текстът е абзац.
Свързани: 10 прости примера за CSS кодове, които можете да научите за 10 минути
Искате ли да научите повече за използването на CSS? Опитайте тези основни примери за CSS код, за да започнете, след което ги приложете към вашите собствени уеб страници.
Добавяне на CSS към HTML
Сега, когато имаме проста страница, можем да персонализираме стила с CSS. Нашата страница е доста проста в момента и не можем да направим много, но нека започнем, като направим нашия абзац да се откроява, за да можем да го различим от фона, като добавим граница.
Здравей свят
Сега нашият параграф ще бъде заобиколен от черна граница. Добавянето на описание на стил в CSS към нашия маркер на абзац каза на уебсайта как да оформи стила. Можем да добавим още описания. Нека да увеличим празното пространство или подложката около нашия абзац и да центрираме текста.
Здравей свят
Нашият уебсайт изглежда по-добре, но нашият HTML започва да изглежда разхвърлян с всички тези описания в етикета на абзаца. Можем да преместим тази информация в нашия хедър. Нашият хедър е за информация, която ни е необходима, за да покажем правилно уебсайта.
Здравей свят
Сега нашият HTML е по-лесен за четене. Ще забележите, че трябваше да променим някои неща наоколо. Етикетът за стил казва информация за стила на уеб браузъра, но също така и какво да се стилизира. В нашия пример използвахме два различни начина да му кажем какво да оформя. The стр в тага за стил казва на уеб браузъра да приложи този стил към всички етикети на абзаци. The #ourParagraph раздел му казва само стилови елементи с идентификатора ourParagraph. Забележи това документ за самоличност информацията беше добавена към p маркера в нашето тяло.
Импортиране на CSS файл на вашия уебсайт
Добавянето на информация за стила към заглавката прави нашия код много по-лесен за четене. Ако обаче искаме да оформяме много различни страници по един и същи начин, трябва да добавим този текст в горната част на всяка страница. Това може да не изглежда много работа, в края на краищата можете да копирате и да го подминете, но създава много работа, ако искате да промените елемент по-късно.
Вместо това ще запазим CSS информацията в отделен файл и ще импортираме файла, за да стилизираме страницата. Копирайте и поставете информацията между стиловите тагове в нов CSS файл ourCSSfile.css.
п {
подравняване на текст: център
}
#ourParagraph {
граничен стил: плътен;
подплата: 30px;
}След това импортирайте файла в HTML файла.
Здравей свят
Добавяне на фоново изображение с CSS
Сега, когато имате солидна основа в HTML и CSS, добавянето на фоново изображение ще бъде парче торта. Първо определете на кой елемент искате да придадете фоново изображение. В нашия пример ще добавим фон към цялата страница. Това означава, че искаме да променим стила на тяло. Не забравяйте, че маркерите на тялото съдържат всички видими елементи.
тяло {
фоново изображение: url ("sky.jpg");
}
п {
подравняване на текст: център
}
#ourParagraph {
граничен стил: плътен;
подплата: 30px;
}За да промените стила на тялото в CSS, първо използвайте тяло ключова дума. След това добавете къдрави скоби, както направихме преди {}. Цялата информация за стила на тялото трябва да е между къдравите скоби. Атрибутът стил, който искаме да променим, е фоново изображение. Има много атрибути на стила. Не очаквайте да ги запомните всички. Отметка a CSS свойства за измама с атрибути, които искате да запомните.
Свързани: 8 страхотни HTML ефекта, които всеки може да добави към уебсайта си
След атрибута използвайте двоеточие, за да посочите как ще промените атрибута. За да импортирате изображение, използвайте url (). това показва, че използвате връзка за посочване на изображението. Поставете местоположението на файла в скобите между кавичките. Накрая завършете реда с точка и запетая. Въпреки че празното пространство няма значение в CSS, използвайте отстъп, за да улесните четенето на CSS.
Нашият пример изглежда така:
Ако изображението ви не се показва правилно поради размера на изображението, можете да го промените директно. В CSS обаче има атрибути на стила на фона, които можете да използвате, за да промените фона. Изображенията, които са по-малки от фона, автоматично се повтарят във фона. За да изключите това, добавете фон-повторение: без повторение; към вашия елемент.
Има и два начина да направите изображението да покрива целия фон. Първо, можете да зададете размера на фона на размера на екрана с размер на фона: 100% 100%;, но това ще разтегне изображението и може да го изкриви твърде много. Ако не искате пропорциите на изображението да се променят, можете също да зададете размера на фона на Покрийте. Cover ще направи фоновото изображение да покрива фона, но не и да го изкривява.
Промяна на цвета на фона
Нека променим едно последно нещо. Сега, когато имаме предистория, нашият параграф е труден за четене. Нека направим фона му бял. Процесът е подобен. Елементът, който искаме да модифицираме, е #ourParagraph. # Показва, че "ourParagraph" е име на идентификатор. След това искаме да зададем Цвят на фона атрибут на бял.
тяло {
фоново изображение: url ("sky.jpg");
}
п {
подравняване на текст: център
}
#ourParagraph {
цвят на фона: бял;
граничен стил: плътен;
подплата: 30px;
}Много по-добре.
Продължаване на дизайна на вашия уеб сайт с CSS
Сега, когато знаете как да промените стила на различните HTML елементи, небето е границата! Основният метод за промяна на атрибутите на стила е същият. Идентифицирайте елемента, който искате да промените, и опишете как да промените атрибута. Най-добрият начин да научите повече е да играете с различни атрибути. Предизвикайте себе си, за да промените цвета на текста си след това.
Искате ли да научите HTML за кодиране на собствените си уебсайтове и приложения? Използвайте тези примери за уеб страници и изходния код, за да се научите на HTML и CSS.
- Програмиране
- HTML
- Уеб дизайн
- CSS
J. Сийтън е научен писател, специализиран в разбиването на сложни теми. Тя има докторска степен от университета в Саскачеван; нейното изследване се фокусира върху използването на базирано на игри обучение за увеличаване на ангажираността на учениците онлайн. Когато тя не работи, ще я намерите с нейното четене, игра на видео игри или градинарство.
Абонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и ексклузивни оферти!
Още една стъпка…!
Моля, потвърдете имейл адреса си в имейла, който току-що ви изпратихме.
