Израда веб странице је одличан начин да се изразите. Иако постоји много алата за израду веб страница, само писање је забаван начин да сазнате више о томе како веб локације раде иза сцене. Добар почетнички пројекат је стварање веб странице и додавање слике у позадини са ЦСС-ом. Овај пројекат ће вас покренути и са ХТМЛ-ом и са ЦСС-ом.
Шта је ЦСС?
ЦСС је скраћеница од Цасцадинг Стиле Схеет. То је програмски језик који вам омогућава да обликујете језике за означавање. Један од таквих означних језика је ХТМЛ или Хипер-Тект Маркуп Лангуаге. ХТМЛ се користи за стварање веб локација. Иако неким стилом веб странице можете да контролишете помоћу ХТМЛ-а, ЦСС нуди много више опција за контролу и дизајн.
Израда основне веб странице са ХТМЛ-ом
Пошто је ЦСС само језик стила, да бисмо га користили, прво нам треба нешто за стил. Веома основна веб локација биће нам довољна да почнемо да се играмо са ЦСС-ом. На нашој страници ће се појавити „Хелло Ворлд.“
Здраво Свете
У случају да нисте упознати са ХТМЛ-ом, хајде да брзо пређемо на то шта раде сви елементи. Као што је поменуто, ХТМЛ је означни језик, што значи да користи ознаке за означавање текста. Кад год видите реч окружену са
<> то је ознака. Постоје две врсте ознака, ознака која означава почетак одељка помоћу <> и она која означава крај одељка помоћуУ нашем примеру имамо четири ознаке. Тхе хтмл ознака означава који су елементи део веб странице. Тхе глава Ознака садржи информације о заглављу које се не приказују на страници, али су потребне за стварање странице. Сви приказани елементи су између тело ознаке. Имамо само један приказани елемент, стр ознака. Веб прегледачу говори да је текст пасус.
Повезан: 10 једноставних примера ЦСС кода које можете научити за 10 минута
Желите да сазнате више о коришћењу ЦСС-а? Испробајте ове основне примере ЦСС кода за почетак, а затим их примените на сопствене веб странице.
Додавање ЦСС-а у ХТМЛ
Сада када имамо једноставну страницу, можемо прилагодити стил помоћу ЦСС-а. Наша страница је тренутно прилично једноставна и не можемо много учинити, али почнимо од тога да истакнемо наш пасус тако да га можемо разликовати од позадине додавањем обруба.
Здраво Свете
Сада ће наш пасус бити окружен црном ивицом. Додавањем описа стила у ЦСС-у нашој ознаци пасуса веб локацији је речено како да стилизује пасус. Можемо додати још описа. Повећајмо размак или размак око нашег пасуса и центрирамо текст.
Здраво Свете
Наша веб локација изгледа боље, али наш ХТМЛ почиње да изгледа неуредно са свим оним описима у ознаци пасуса. Те податке можемо преместити у заглавље. Наше заглавље је за информације које су нам потребне за правилно приказивање веб локације.
Здраво Свете
Сада је наш ХТМЛ лакше читати. Приметићете да смо морали неке ствари променити. Ознака стила говори информације о стилу веб прегледача, али и шта треба такође обликовати. У нашем примеру смо користили два различита начина да му кажемо шта треба обликовати. Тхе стр у ознаци стила говори веб прегледачу да примени тај стил на све ознаке пасуса. Тхе #оурПараграпх одељак му говори да користи само елементе стила са ид-ом нашПараграф. Приметићете да ид информације су додате на ознаку п у нашем телу.
Увоз ЦСС датотеке на вашу веб локацију
Додавање информација о стилу у заглавље чини наш код много лакшим за читање. Међутим, ако желимо да обликујемо више различитих страница на исти начин, тај текст морамо додати на врх сваке странице. То се можда не чини много посла, ипак можете да га копирате и прошите, али ствара пуно посла ако касније желите да промените елемент.
Уместо тога, чуваћемо ЦСС информације у посебној датотеци и увеземо је да бисмо стилизовали страницу. Копирајте и налепите информације између ознака стила у нову ЦСС датотеку оурЦССфиле.цсс.
п {
поравнање текста: средина
}
#оурПараграпх {
стил обруба: чврст;
подлога: 30пк;
}Затим увезите датотеку у ХТМЛ датотеку.
Здраво Свете
Додавање слике у позадини са ЦСС-ом
Сад кад имате солидну основу у ХТМЛ-у и ЦСС-у, додавање слике у позадини биће део колача. Прво одредите којем елементу желите да дате позадинску слику. У нашем примеру ћемо додати позадину целој страници. То значи да желимо да променимо стил тело. Запамтите, ознаке тела садрже све видљиве елементе.
тело {
позадина-слика: урл ("ски.јпг");
}
п {
поравнање текста: средина
}
#оурПараграпх {
стил обруба: чврст;
подлога: 30пк;
}Да бисте променили стил тела у ЦСС-у, прво користите тело кључна реч. Затим додајте коврџаве заграде као што смо то чинили раније {}. Све информације о стилу тела морају бити између коврџавих заграда. Атрибут стила који желимо да променимо је позадинска слика. Постоји много атрибута стила. Не очекујте да ћете их све научити напамет. Означи а ЦСС цхеатс-схеет својства са атрибутима које желите да запамтите.
Повезан: 8 сјајних ХТМЛ ефеката које свако може додати на своју веб страницу
Након атрибута, двотачком означите како ћете променити атрибут. Да бисте увезли слику, користите урл (). то указује на то да користите везу за усмеравање на слику. Поставите локацију датотеке у заграде између наводника. На крају, ред завршите тачком и зарезом. Иако размак у ЦСС-у нема значење, користите увлачење како бисте ЦСС олакшали читање.
Наш пример изгледа овако:
Ако се ваша слика не приказује правилно због величине слике, можете је директно изменити. Међутим, у ЦСС-у постоје атрибути стила позадине помоћу којих можете променити позадину. Слике мање од позадине аутоматски ће се поновити у позадини. Да бисте то искључили, додајте позадина-понављање: без понављања; вашем елементу.
Постоје и два начина да слика учини да покрије целу позадину. Прво можете помоћу величине подесити величину позадине на величину екрана величина позадине: 100% 100%;, али ово ће истегнути слику и можда ће је превише искривити. Ако не желите да се пропорције слике мењају, такође можете да подесите величину позадине на поклопац. Цовер ће учинити да слика у позадини покрије позадину, али не и да је искриви.
Промена боје позадине
Променимо последњу ствар. Сад кад имамо прошлост, наш пасус је тешко прочитати. Учинимо његову позадину белом. Процес је сличан. Елемент који желимо да изменимо је #оурПараграпх. Знак # означава да је „оурПараграпх“ име идентитета. Даље, желимо да поставимо боја позадине приписати белом.
тело {
позадина-слика: урл ("ски.јпг");
}
п {
поравнање текста: средина
}
#оурПараграпх {
боја позадине: бела;
стил обруба: чврст;
подлога: 30пк;
}Много боље.
Настављајући да дизајнирате своју веб страницу помоћу ЦСС-а
Сад кад знате како да промените стил различитих ХТМЛ елемената, небо је граница! Основна метода за промену атрибута стила је иста. Идентификујте елемент који желите да промените и опишите како да промените атрибут. Најбољи начин да научите више је поигравање различитим атрибутима. Изазовите се да промените боју текста даље.
Желите да научите ХТМЛ за кодирање сопствених веб локација и апликација? Користите ове примере веб страница и изворни код да бисте научили ХТМЛ и ЦСС.
- Програмирање
- ХТМЛ
- Веб дизајн
- ЦСС
Ј. Сеатон је научни писац специјализован за разбијање сложених тема. Докторирала је на Универзитету у Саскатцхевану; њено истраживање се фокусирало на коришћење учења заснованог на играма за повећање ангажовања ученика на мрежи. Када не ради, затећи ћете је док чита, игра видео игре или баштованство.
Претплатите се на наш билтен
Придружите се нашем билтену за техничке савете, прегледе, бесплатне е-књиге и ексклузивне понуде!
Још један корак…!
Молимо потврдите своју адресу е-поште у е-поруци коју смо вам управо послали.
