Home-theater-designers
Креирање веб странице је одличан начин да се изразите. Иако постоји много алата за израду веб страница, сами их пишете забаван је начин да сазнате више о томе како веб странице раде иза сцене. Добар пројекат за почетнике је креирање веб странице и додавање позадинске слике помоћу ЦСС -а. Овај пројекат ће вас покренути са ХТМЛ -ом и ЦСС -ом.
Шта је ЦСС?
ЦСС означава Цасцадинг Стиле Схеет. То је програмски језик који вам омогућава да стилизујете језике за означавање. Један од таквих језика за означавање је ХТМЛ или језик за означавање хипертекста. ХТМЛ се користи за креирање веб страница. Иако неким стилом веб локације можете управљати помоћу ХТМЛ -а, ЦСС нуди много више могућности контроле и дизајна.
Креирање основне веб странице са ХТМЛ -ом
Пошто је ЦСС само језик стила, да бисмо га користили, прво нам је потребно нешто за стилизовање. Врло основна веб страница биће нам довољна да се почнемо играти са ЦСС -ом. Наша страница ће приказати „Хелло Ворлд“.
Hello World
У случају да нисте упознати са ХТМЛ -ом, пређимо брзо на то шта сви елементи раде. Као што је поменуто, ХТМЛ је језик за означавање, што значи да користи ознаке за означавање текста. Кад год видите реч окружену то је ознака. Постоје две врсте ознака, ознака која означава почетак одељка помоћу и једна која означава крај одељка помоћу. Текст унутар одељка такође има за циљ да олакша уочавање ове разлике.
У нашем примеру имамо четири ознаке. Тхе хтмл ознака означава који су елементи део веб локације. Тхе глава ознака садржи информације о заглављу које се не приказују на страници, али су потребне за креирање странице. Сви приказани елементи налазе се између тело ознаке. Имамо само један приказани елемент, п таг. Он говори веб прегледачу да је текст пасус.
Повезан: 10 једноставних примера ЦСС кода које можете научити за 10 минута
Додавање ЦСС -а у ХТМЛ
Сада када имамо једноставну страницу, можемо прилагодити стил помоћу ЦСС -а. Наша страница је сада прилично једноставна и не можемо много учинити, али почнимо тако што ћемо издвојити наш пасус како бисмо га разликовали од позадине додавањем обруба.
Hello World
Наш пасус ће бити окружен црном ивицом. Додавањем описа стила у ЦСС -у нашој ознаци параграфа веб страници је речено како да стилизира пасус. Можемо додати још описа. Повећајмо размак или заглавље око пасуса и центрирајмо текст.
Hello World
Наша веб страница изгледа боље, али наш ХТМЛ почиње да изгледа неуредно са свим тим описима у ознаци пасуса. Ове податке можемо преместити у заглавље. Наш заглавље служи за информације које су нам потребне за правилно приказивање веб локације.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
Сада је наш ХТМЛ лакши за читање. Приметићете да смо неке ствари морали да променимо. Ознака стила говори информације о стилу веб прегледача, али и шта треба стилизовати. У нашем примеру, користили смо два различита начина да му кажемо шта да стилизира. Тхе п у ознаци стила говори веб прегледачу да примени тај стил на све ознаке пасуса. Тхе #оурПараграпх одељак говори само елементима стила са ид -ом наш параграф . Приметићете да ид информације су додате у п ознаку у нашем телу.
ако купим иПхоне од Аппле -а, да ли је откључан
Увоз ЦСС датотеке на вашу веб локацију
Додавање података о стилу у заглавље чини наш код много лакшим за читање. Међутим, ако желимо да стилизујемо много различитих страница на исти начин, морамо да додамо тај текст на врх сваке странице. То можда не изгледа као много посла, ипак га можете копирати и заобићи, али ствара много посла ако касније желите да промените елемент.
Уместо тога, ЦСС информације ћемо држати у засебној датотеци и увести датотеку да бисмо обликовали страницу. Копирајте и залепите информације између ознака стила у нову ЦСС датотеку оурЦССфиле.цсс .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Затим увезите датотеку у ХТМЛ датотеку.
Hello World
Додавање позадинске слике помоћу ЦСС -а
Сада када имате солидну базу у ХТМЛ -у и ЦСС -у, додавање позадинске слике бит ће дио колача. Прво идентификујте ком елементу желите да дате позадинску слику. У нашем примеру додаћемо позадину целој страници. То значи да желимо да променимо стил тело . Запамтите, ознаке тела садрже све видљиве елементе.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Да бисте променили стил каросерије у ЦСС -у, прво користите тело кључна реч. Затим додајте увијене заграде као и раније {}. Сви стилски подаци за тело морају бити између увијених заграда. Атрибут стила који желимо да променимо је позадинска слика . Постоји много атрибута стила. Не очекујте да ћете их све запамтити. Обележите листу листа ЦСС својстава са атрибутима које желите да запамтите.
Повезан: 8 кул ХТМЛ ефеката које свако може додати на своју веб страницу
оверклок малина пи 3 б+
Након атрибута, користите двоточку да бисте назначили како ћете променити атрибут. Да бисте увезли слику, користите урл () . означава да користите везу за усмеравање на слику. Ставите локацију датотеке у заграде између наводника. На крају, завршите ред тачком и зарезом. Иако бели простор нема значење у ЦСС -у, користите увлачење да бисте ЦСС учинили лакшим за читање.
Наш пример изгледа овако:
Ако се ваша слика не приказује исправно због величине слике, можете је директно изменити. Међутим, у ЦСС -у постоје атрибути стила позадине које можете користити за промену позадине. Слике које су мање од позадине аутоматски ће се поновити у позадини. Да бисте то искључили, додајте позадина-понављање:без понављања; вашем елементу.
Постоје и два начина да слика прекрива целу позадину. Прво, можете поставити величину позадине на величину екрана помоћу величина позадине: 100% 100%; , али ово ће растегнути слику и може превише искривити слику. Ако не желите да се пропорције слике мењају, можете поставити и величину позадине на корице . Цовер ће учинити да позадинска слика покрије позадину, али неће изобличити слику.
Промена боје позадине
Хајде да променимо још једну ствар. Сада када имамо позадину, наш одломак је тешко читати. Учинимо његову позадину белом. Процес је сличан. Елемент који желимо да модификујемо је #оурПараграпх. # Означава да је 'оурПараграпх' ид име. Затим желимо да поставимо боја позадине атрибут белом.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}Много боље.
Настављате да дизајнирате своју веб локацију помоћу ЦСС -а
Сада када знате како да промените стил различитих ХТМЛ елемената, небо је граница! Основни начин промене атрибута стила је исти. Идентификујте елемент који желите да промените и опишите како да промените атрибут. Најбољи начин да научите више је да се играте са различитим атрибутима. Изазовите себе да промените боју свог текста.
Објави Објави Твеет Емаил 8 најбољих локација за примере квалитетног ХТМЛ кодирањаЖелите да научите ХТМЛ за кодирање сопствених веб локација и апликација? Користите ове примере веб страница и изворни код да бисте научили ХТМЛ и ЦСС.
Прочитајте следеће Повезане теме- Програмирање
- ХТМЛ
- Веб дизајн
- ЦСС
Ј. Сеатон је научни писац који се специјализовао за разбијање сложених тема. Докторирала је на Универзитету Саскатцхеван; њено истраживање се фокусирало на коришћење учења заснованог на играма за повећање ангажовања ученика на мрежи. Кад не ради, затећи ћете је како чита, игра видео игрице или се бави вртларством.
Више од Јеннифер СеатонПретплатите се на наш билтен
Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!
Кликните овде да бисте се претплатили