CSS Outline

CSS Outline


CSS outline xususiyatlari

Outline bu elementning atrofiga border dan tashqariga chiziladigan chiziq. U element boshqa elementlardan ajralib turishi uchun ishlatilishi mumkin.

CSS ouline xususiyatlari outline ning stili, rangi va enini belgilaydi.

Bu element ingichka qora border ga va ikta eni 10 piksel, yashil outline ga ega.


CSS Outline

Outline xususiyatlari border xususiyatlaridan farq qilsa ham u elemetning qismi hisoblanmaydi. Outline ning eni elementning to'liq eni va balandligiga tasir qilmaydi.


Outline stillari

outline-style xususiyati outline ning stilini belgilaydi.

outline-style xususiyati quyidagi qiymatlarni qabul qilishi mumkin:

  • dotted - nuqta nuqtali outline
  • dashed - chiziq chiziqli outline
  • solid - yaxlit outline
  • double - ikta outline
  • groove - 3D effiktli outline.
  • ridge - 3D effektli outline.
  • inset - 3D effektli outline.
  • outset - 3D effektli outline.
  • none - outline siz
  • hidden - yashiringan outline

Quyidagi misolda p elementiga ingichka qora border beriladi va outline-style xususiyating barcha qiymatlari ekranga chiqariladi.

Namuna:

O'zingni Sinab Ko'r
p {
    border: 1px solid black;
    outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}


Natija:

Nuqta nuqtali outline

Chiziq chiziqli outline

Yaxlit outline

Ikta outline

3D effectli outline

3D effectli outline

3D effectli outline

3D effectli outline

...  Quyida keltiriladigan CCS outline xususiyatlari outline-style xususiyati berilmaguncha ishlamaydi.


Outline rangi

outline-color xususiyati outline rangini belgilash uchun ishlatiladi.

Rang quyidagicha berilishi mumkin:

  • Nomi - ingliz tilidagi nomi bilan, masalan "red" (qizil)
  • RGB - rangning RGB dagi qiymati bilan, masalan "rgb(255,0,0)" (qizil)
  • Hex - rangning 16 lik sanoq sistemasidagi qiymati bilan, masaln "#ff0000" (qizil)
  • invert - rang inrevsiyasini amalga oshiradi (orqa fon rangidan qatiy nazar outline korinishini taminlaydi)

Namuna:

O'zingni Sinab Ko'r
p {
    border: 1px solid black; (qora)
    outline-style: double; (ikta)
    outline-color: red; (qizil)
}


Natija:

Rangli outline.


Outline eni

outline-width xususiyati outline ning enini belgilaydi.

outline eni aniq qiymatda yoki oldindan belgilangan 3 ta qiymatda berilishi mumkin: thin(ingichka) , medium(o'rtacha) , thick(qalin)

Namuna:

O'zingni Sinab Ko'r
p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}


Natija:

Qalin outline.

Ingichka outline.


Outline shorthand xususiyatlari

Kodni qisqartirish uchun barcha outline xususiyatlarini bitta xususiyatda berish mumkin.

outline xususiyatida quyidagi uchta xususiytni berish mumkin:

  • outline-width (eni)
  • outline-style (berilishi shart) (stili)
  • outline-color (rangi)

Namuna:

O'zingni Sinab Ko'r
p {
    border: 1px solid black;
    outline: 5px dotted red;
}


Natija:

Outline.


Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017