Наравно, веб развој је огроман. Велики део тога је зато што се готово сви налазе на Вебу. Међутим, програмерима недостаје програмера, и зато је наставни план за веб развој тако лако доступан, а такође и бесплатан. Имајући то у виду, показаћемо вам мало о чему се ради о ХТМЛ и ЦСС-у. Тачније, показаћемо вам како раде "часови".
Не крећемо вас од почетка, јер тамо већ има на хиљаде бесплатних наставних планова. Уместо тога, посебно ћемо вам показати како раде часови, јер је то неопходна компонента за стил ваше веб странице. Такође смо мислили да би могло бити вредно покрити пре него што објавимо Твиттер Боотстрап АПИ, јер су и класе обавезна компонента у томе.
Као одрицање од одговорности, ако сте потпуно нови у ХТМЛ-у и ЦСС-у, ово вероватно није добар почетак за вас. Ако сте упознати, то ипак не би требало бити превише тешко покупити. Али, ако тражите комплетан водич за почетнике, на мрежи постоји пуно сјајних опција. Да набројимо само неке, ту су ФрееЦодеЦамп, Тхе Один Пројецт, ЦодеАцадеми, Цоде Сцхоол, Теам Треехоусе, Удацити и многи други. Ако се одлучите за почетак копања у некој од њих, топло бих препоручио да се придржавате једног (попут Фрее Цоде Цамп-а) и да га довршите пре него што започнете други, јер пуно „основног“ садржаја може бити прилично понављано.
Ако се тако изузмемо, хајде да истражимо о чему се ради.
Како раде часови
Часови су изузетно корисни. Они понављају понављање из ХТМЛ-а за стил. Без наставе, сваки би елемент у својој маркирали појединачно. А шта ако имате два иста елемента, али бисте сваки од њих желели другачије стилисати? Био би то потпуни неред. Због тога имамо часове. Класе додају одређену организациону структуру вашег ХТМЛ-а, омогућавајући вам да код будете релативно чисти. И не само то, већ се класе могу користити више пута. Другим речима, никада нећете морати да креирате иста правила стилизовања два пута.
Ево како изгледају часови у нашој
таг:
Као што видите, под ознаком тела, имамо две
елементи са различитим класама. Првиознака има класу „хеад1“ док друга ознака има класу „хеад2“. Дакле, у нашем ЦСС-у, уместо да применимо стил само наелемента, на те појединачне класе можемо применити стил. Зашто бисмо то желели?
елемента, на те појединачне класе можемо применити стил. Зашто бисмо то желели?
Примарни разлог је тај што не желите све своје
елементи да имају исти стил. То би створило пуно главобоља приликом прављења веб странице, а поред тога, веб локације не би изгледале баш сјајно. Класе нам омогућавају да применимо стилинг на само ту једну инстанцу ознаке, не на свеознаке у документу. Па, како написати предавање у ХТМЛ-у? Овако:
Неки садржај
Можете додати својство „класе“ у готово било који ХТМЛ елемент.
Сјајно! Дакле, ми имамо часове, али у свом тренутном стању они заправо ништа не раде. То је зато што још увек нисмо додали никаква стилска правила класи. Да бисмо то учинили, мораћемо да направимо посебан .цсс документ. Само ћу то назвати маин.цсс. У том документу бисмо класирали овакву класу:
Да би одабрали класу коју желимо да стилујемо, радимо ово:
.хеад1 {боја: црвена; поравнавање текста: центар; }
Унутар коврчавих заграде налазе се сва „правила“ (или стилови) која примењујемо на ту класу. Постоји пуно различитих правила која можете поставити у ту класу. У мом случају, променио сам боју текста у црвену помоћу правила „цолор“ и усредсредио текст коришћењем правила „усклађивање текста“. Пуну листу ЦСС правила као и њихову документацију можете пронаћи из Мозилла-ове Развојне мреже.
Сада се наш стил још увек не примењује на класе у нашем ХТМЛ документу и то зато што две датотеке још увек нисмо повезали заједно. Вратите се на ХТМЛ датотеку и у
таг, желећете да повежете ЦСС датотеку на овај начин:
Ваш ХТМЛ документ треба да изгледа овако:
А ваш тестни пројекат требао би изгледати овако на Интернету:
За детаљнији видео запис који пролази кроз ове кораке, погледајте доле.
Видео
Закључак
И то је све што постоји на часовима! Стварно су једноставни за разумевање. Очито на великим и популарним веб локацијама које посећујете правила унутар наставе су много сложенија од онога што смо покрили, али у њиховом најосновнијем облику, то је начин на који они функционишу.
Ако имате било каквих питања или имате проблема после дужег времена, будите сигурни да нас обавестите у коментарима испод или више на форумима ПЦМецх! Или, ако би вас занимао комплетан ХТМЛ / ЦСС водич за почетнике на ПЦМецх-у, будите сигурни да нам то и јавите!
