Тег hr

Тег hr ажратиш уфк чизигини белгилайди. Тегнинг афзаллиги шундаки, битта чизик учун кушимча блоклар яратиш шарт эмас. Ёпилувчи тег талаб қилмайди.

Мисол

Тег hr қандай ишлашини ку́риб чиқайлик:

html<hr>

Результат:

Мисол

CSS хусусияти border-color ёрдамида чизикнинг рангни ўзгартириб ку́райлик:

html<hr style="border-color: red;">

Результат:

Мисол

Чизикнинг рангни color хусусияти билан ҳам ўзгартириш мумкин (бу ҳолда, агар color ва border-color хусусиятлари бир вактда берилган бў́лса - иккинчиси ustunlik қилади):

html<hr style="color: red">

Результат:

Мисол

Энди CSS хусусияти border ёрдамида чизикнинг рангни ўзгартирайлик. Эътиборингизни қаратингки, бу ҳолда чизик икки баробар қалинликда бўлади (чунки биз чеккани юқоридан ҳам, pastidan ҳам белгиладик):

html<hr style="border: 1px solid red;">

Результат:

Мисол

CSS хусусияти border-top ёрдамида чизикнинг рангни ўзгартириб ку́райлик, ва фақат юқори чеккани белгилайлик. Энди иккилама чизик бўлмайди:

html<hr style="border-top: 1px solid red;">

Результат:

Мисол

CSS хусусияти border-top ёрдамида чизикни нуқталар курinишига келтирайлик, solid ўрнига dotted қийматни белгилайлик:

html<hr style="border-top: 1px dotted red;">

Результат:

Мисол

CSS хусусияти border-width ёрдамида чизикнинг қалинлигини оширайлик:

html<hr style="border-width: 10px; border-color: red;">

Результат:

Мисол

Энди чизикка баландлик height ва border орқали чекка қўшайлик. Чекка бу ҳолда юқори ва pastki қисмларга ажралади:

html<hr style="height: 10px; border: 1px solid red;">

Результат:

Қўшимча қаранг