CSS Fon – Qisqartirilgan xususiyat

CSS fon xususiyatlarini bitta xususiyatda belgilash orqali kodni qisqartirish ham mumkin. Bu "qisqartirilgan xususiyat" deb ataladi.

Quyidagi kodni yozish o'rniga:

body {
  background-color: #ffffff;
  background-image: url('img_tree.png');
  background-repeat: no-repeat;
  background-position: right top;
}

Siz qisqartirilgan background xususiyatidan foydalanishingiz mumkin:

Misol Fon xususiyatlarini bitta deklaratsiyada o'rnatish uchun qisqartirilgan xususiyatdan foydalaning:

body {
  background: #ffffff url('img_tree.png') no-repeat right top;
}

Qisqartirilgan xususiyatdan foydalanganda, xususiyat qiymatlarining tartibi quyidagicha bo'ladi:

background-color
background-image
background-repeat
background-attachment
background-position

Agar xususiyatlardan biri ko'rsatilmagan bo'lsa, muhim emas, faqat boshqa qiymatlar bu tartibda bo'lishi kerak. Yuqoridagi misollarda biz background-attachment xususiyatini ishlatmadik, chunki bu holda unga qiymat kerak emas edi.

Mashq Qiling

Mashq: <h1> elementining fon rangini "lightblue" qilib o'rnating.

<style>
h1 {
  background-color: lightblue;
}
</style>
 
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Barcha CSS Fon Xususiyatlari

Xususiyat	Tavsif
`background`	Barcha fon xususiyatlarini bitta deklaratsiyada o'rnatadi
`background-attachment`	Fon tasviri harakatsiz yoki sahifa bilan birga aylanishini belgilaydi
`background-clip`	Fon rasmning bo'yaladigan hududini belgilaydi
`background-color`	Elementning fon rangini o'rnatadi
`background-image`	Element uchun fon rasmini o'rnatadi
`background-origin`	Fon tasvir(lar) qayerda joylashganligini belgilaydi
`background-position`	Fon rasmining boshlang'ich pozitsiyasini belgilaydi
`background-repeat`	Fon tasviri qanday takrorlanishini belgilaydi
`background-size`	Fon rasmining o'lchamini belgilaydi

CSS Fon – Qisqartirilgan xususiyat