Какав је процес креирања заглавља помоћу ХТМЛ-а и ЦСС-а?

Овај чланак показује корак по корак процес креирања заглавља користећи ХТМЛ и ЦСС који ће укључивати:

• Креирање одељка заглавља
• Креирање траке за навигацију
• Примена стилова на ставке Навбар-а
• Додавање ефекта лебдења у ставке Навбар-а

Какав је процес креирања заглавља помоћу ХТМЛ-а и ЦСС-а?

Заглавље дефинише садржи најважније информације о веб локацији. Углавном садржи логотип, наслов веб странице, траку за претрагу и ставке менија за навигацију које помажу кориснику да прелази на друге странице.

Пратите доле наведене кораке за креирање заглавља:

Корак 1: Креирајте одељак заглавља

У ХТМЛ датотеци, „ <хеадер> ” ознака се користи за креирање одељка за заглавље. „ <див> ” или “ <сецтион> ” ознаке се такође могу користити, али је добра пракса да користите „ <хеадер> ” ознака. Затим доделите „ заглавље ” за примену ЦСС стилова на одељак заглавља. Након тога, додајте „ <х1> ” означите у њему и доделите му класу “ наслова ” за приказ садржаја „Добро дошли у Линукхинт!“:

Након тога, изаберите „ <хеадер> ” означите класу и доделите следеће стилове:

Објашњење горњег кода је наведено у наставку:

• Прво поставите слику ' бг.јпг ” као позадину за одељак заглавља користећи „ позадинска слика ' имовина.
• Затим, „ величина позадине ' и ' бацкгроунд-репеат ” својства се користе за подешавање величине слике и заустављање понављања слике, респективно.
• Након тога, подесите боју текста и положаја слике на врх помоћу „ боја ' и ' бацкгроунд-поситион ” својства.
• На крају, „ паддинг ” својство се користи за постављање размака између садржаја заглавља и ивице.

Након извршавања горњег кода, веб страница изгледа овако:

Горњи излаз приказује да је одељак заглавља креиран и да се на њега примењују ЦСС стилови.

Корак 2: Направите траку за навигацију

У већини случајева заглавље такође може да садржи траку за навигацију. За креирање навигационе траке ХТМЛ “ <нема> ” ознака може бити веома корисна. Зато додајте ставке навигационе траке користећи „ <а> ” ознаке и додели класу “ акт ”:

Након извршавања горњег кода, веб страница изгледа овако:

Горњи излаз илуструје да ставке навигационе траке „ Кућа ”, “ Услуге ”, “ О нама ”, “ Контактирајте нас ' и ' Новопридошли ” су креирани.

Корак 3: Примените стилове на ставке Навбар-а

Да бисте стилизовали ставке навигационе траке, изаберите „ акт ” и доделите следећа својства ЦСС стилова:

Објашњење горњег кода је:

• Прво, „ текст-декорација ” својство је подешено на „ништа” да би се уклонио унапред дефинисани стил „ <а> ” ознака.
• Да бисте побољшали видљивост текста за корисника, „ бео ' и ' велики ” вредности су обезбеђене за „ боја ” и „ фонт-сизе ' имовина.
• Након тога, „ приказ ' и ' пловак “ својства помажу “ <а> ” да се појаве на истој линији.
• На крају, „ паддинг ' и ' маргина ” вредности својстава се користе за прављење размака између сваке ознаке „<а>”.

Након извршавања горњег кода, веб страница изгледа овако:

Горњи излаз илуструје да су ставке навигационе траке сада стилизоване.

Корак 4: Додајте ефекат лебдења у ставке Навбар-а

Као у горњем излазу, ефекат лебдења није доступан на ставци навигационе траке. Да бисте додали оба, изаберите „ наслова ” класа која је додељена “ <х1> ” ознака. Након тога, додајте „ :лебдети ” селектор са „ акт ” да бисте применили ефекат лебдења на ставке навигационе траке:

Објашњење горњег кода је дато у наставку:

• Прво поставите „ граница ” солидног типа 2пк и доделите бело “ боја ”. Уз то, поставите „ блуевиолет ” боја само када корисник пређе мишем на ставке навигационе траке.
• Затим изаберите „ наслова ” класе и подесите њено поравнање на “ центар ” и обезбедите неку маргину да би одељак изгледао већи.

Након извршавања горњег кода, коначни изглед заглавља изгледа овако:

Горњи излаз показује да је заглавље креирано помоћу ХТМЛ-а и ЦСС-а.

Закључак

У ХТМЛ датотеци, ознака “<хеадер>” се користи за креирање одељка за заглавље. Након тога, корисници могу да примене ЦСС својства као што су паддинг и позадинске слике да побољшају одељак заглавља. Примењује се на све елементе заглавља као што је трака за навигацију. Да би направили траку за навигацију, корисници могу да користе ознаку „<нав>” заједно са „ <а> ' ознаке. Овај чланак је показао како да направите заглавље користећи ХТМЛ и ЦСС.