Како написати натпис испод слике? – ЦСС

Овај пост објашњава писање натписа испод слике.

Како написати натпис испод слике?

Да бисмо написали натпис испод слике, обезбедићемо различите методе наведене у наставку:

• Метод 1: Како додати натпис слике користећи ХТМЛ “ <фигцаптион> ” Елемент?
• Метод 2: Како додати натпис слике користећи “ <див> ” Елемент?

Метод 1: Како додати натпис слике користећи ХТМЛ елемент „<фигцаптион>”?

Да бисте додали наслов слике, прођите кроз следећа упутства:

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

Можете видети да је приказана слика са наведеним насловом:

Сада пређите на другу методу за додавање натписа помоћу ЦСС-а.

Метод 2: Како додати натпис слике помоћу елемента “<див>”?

Да бисте додали наслов слике помоћу „ <див> ” елемент, испробајте дата упутства:

• Створити ' <див> ” контејнер и додајте атрибут класе са именом “ држач слике ”.
• Додајте ознаку наслова “ <х2> ” за уметање наслова и стилизовање наслова према вашем избору.
• Додајте још један елемент „<див>“ и уметните „ <имг> ” таг заједно са “ срц ”, “ све ' и ' ширина ” атрибути између див контејнера.
• Додајте трећи „<див>” са именом класе „ имг-цаптион ”. Затим наведите натпис између ознака „<див>“. Штавише, „ <бр> ” елемент се користи за додавање једног прелома реда:

Може се приметити да је наслов за слику успешно додат:

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

Стил „.имаге-холдер“ у ЦСС-у

Прво, приступите „ <див> ” елемент који има класу “ .имаге-холдер ”. Затим примените следећа ЦСС својства:

Детаљи о горе наведеним својствима су описани у наставку:

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

Стилски натпис у ЦСС-у

У овом кораку ћемо приступити двема класама са именом „ држач слике ' и ' имг-цаптион ” и примените следећа ЦСС својства:

Опис горе наведених својстава је следећи:

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

Излаз

Разговарали смо о методама за писање натписа испод слике.

Закључак

Да би написали натпис испод слике, корисници могу да користе „ <фигцаптион> ” елемент или једноставан “ <див> ' контејнер. Да бисте користили „<фигцаптион>“, прво додајте „ <имг> ” елемент да бисте уградили слику унутар „ <фигура> ” затим користите елемент „<фигцаптион>” и додајте натпис између његових ознака. У другом приступу, корисници могу једноставно да користе „ <див> ” и примените различита ЦСС својства да бисте улепшали натпис. Овај пост је демонстрирао методе за писање натписа испод слике.