Darsimiz, CSS orqali veb sahifa fonini o‘zgartirish va rang berishga bag‘ishlanadi. Bu ishlarni HTML orqali ham qilish mumkin, lekin bu darajadagi fonlarni chiqarish qiyinchilik tug‘diradi.  Shuning uchun veb sahifa yaratishda HTML gippermatn tili va CSS stil xususiyatilari aralashtirib ishlatiladi, shu tariqa birini kamchiligini biri yopadi.

CSS da asosiy fon va rang uchun javob beradigan stil xususiyatlari quyidagilardan iborat:

color;

background-color;

background-image;

background-repeat;

background-attachment;

background-position;

background.

Bu stil xususiyatlarini birma-bir ko‘rib chiqamiz.

Color — u yoki bu elementga rang berish uchun ishlatiladi, misol uchun, hamma paragraf teglari qizil rangda, barcha h1 teglar qora rangda bo‘lish kerak bo‘lsa, quyidagicha stil beriladi.

<html>
<head>
<title>Rang_1</title>
<style type="text/css">
p{color:red}
h1{color:black}
</style>
</head>
<body>
<h1>Qora</h1>
<p>Qizil</p>
</body>
</html>

Qayerda bu teglar ishlatilsa, shu tegga mos holda stillar ham ishlaydi, natijani ko‘ramiz:

4css_1

Background-color — biror element yoki butun veb sahifa foniga rang berish. HTML dagi «bgcolor«dan farqli ravishda, bu stil xususiyati istalgan element foniga rang berish mumkin: havolalarga, paragraflarga, jadvallarga,…

Misol ko‘ramiz, butun sahifa foniga va barcha H3 teglari foniga rang beramiz.

<html>
<head>
<title>Rang_2</title>
<style type="text/css">
body{background-color:gray}
h3{color:orange}
</style>
</head>
<body>
<h3>Fongini rangini qara, daxshatu a!</h3>
</body>
</html>

Rang berishda odatagidek rang nomi(ingliz tilida) yoki 16 lik sanoq tizimda berish lozim(16lik tizimdagi rangi aniqlash), endi natijani ko‘ramiz:

4css_2

Background-image — sahifa foni sifatida biror rasmni qo‘yish, nafaqat sahifa boshqa elementlarga ham qo‘yish mumkin, faqat yaxshi chiqmasligi ehtimoli katta. Misol ko‘ramiz,

<html>
<head>
<title>Rang_3</title>
<style type="text/css">
body{
background-image: url(bum.jpg);
}
</style>
</head>
<body>
</body>
</html>

4css_4

E’tibor bergan bo‘lsangiz, rasmni ko‘rsatish HTMLga nisbatan boshqacharoq. «url» kalit so‘zi yozilib, so‘ng rasm adresi berilmoqda, bu holda rasm sahifa fayli saqlangan papka bilan bir joyda joylashgan, agar boshqa joyda bo‘lsa, (image/bum.jpg) ko‘rinishida(rasmning to‘liq adresi) berish kerak.

Background-repeat — qaytarilishni amalga oshirish. Agar yuqoridagi misolga e’tibor bergan bo‘lsangiz, kichik rasmlar yuqori chap burchak bo‘lab qaytarilib takrorlanmoqda va shu tariqa butun veb sahifa foni rasmga to‘lmoqda. Background-repeat shu qaytarilishni boshqara oladi.

Bu stil xususiyatining quyidagi qiymatlari mavjud:

Background-repeat: repeat-x ; — gorizontal bo‘yicha qaytarilish.

Background-repeat: repeat-y ; — vertikal bo‘yicha qaytarilish.

Background-repeat: repeat ;    — vertikal va gorizontal bo‘yicha qaytarilish.

Background-repeat: no-repeat ; — qaytarilishni amalga oshmaydi.

Bunday xususiyatlar HTML gippermatn tilida mavjud emas. Keling misol ko‘ramiz,

BODY {
background-image : url(bum.jpg) ;
background-repeat: repeat-x;
}

Fon sifatida tanlangan rasm, faqat gorizontal bo‘yicha takrorlanadi.

4css_3

Background-attachment — agar fon sifatida rasm bo‘lsa, bu stil xususiyati o‘rnatiladi. Bunda, agar sahifada o‘tkazgich(prokrutka)bo‘lsa, fon rasmi ham o‘tish kerak yoki fon rasmi sahifaga qotirib qo‘yilishi kerakligi ko‘rsatiladi. Qiymatlari:

scroll — fon sifatida o‘rnatilgan rasm, veb sahifa oynasi bilan birga  o‘tadi(prokrutka).

fixed— fon sifatida o‘rnatilgan rasm, veb sahifa oynasiga qotirib qo‘yilgan bo‘ladi va o‘zgarmaydi.

BODY {
background-image : url(bum.png) ;
background-repeat: no-repeat;
background-attachment: scroll ;
}

Background-position — fon sifatida tanlangan rasmni pozitsiyasini o‘rnatadi, ya’ni fon rasmi aynan qayerda joylashishini aniqlashtirish, qiymat foiz yoki uzunlik o‘lchovida beriladi. Boshlanish, chap yuqori tomondan boshlanadi. Quyidagi rasmda pozitsiya haqida yaqqol ko‘rsatilgan.

4css_5

Dastlab, gorizontal bo‘yicha qiymat beriladi, keyin vertikal bo‘yicha. Qiymat brauzer o‘lchamiga qarab piksel yoki foizda beriladi. Undan tashqari kalit so‘zlar orqali ham pozitsiyani berish mumkin.

4css_6

Keling endi misol ko‘ramiz,

<html>
<head>
<title>Rang_4</title>
<style type="text/css">
BODY {
background-image : url(bum.jpg);
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>

4css_7

yana bir misol,

BODY {
background-image : url(bum.jpg) ;
background-repeat: no-repeat;
background-position: 300px 500px ;
}

Background — bu umumiy, hamma xarakteristikalarni ishlatish uchun foydalaniladi, ya’ni background-color, background-image, background-repeat, background-attachment, background-position stil xususiyatlarini bitta shu stil orqali ishlatish mumkin, ya’ni

BODY {
background-color:#ffee8c ;
background-image : url(bum.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

Shu uzun kodni, bitta «background» orqali yozish mumkin:

BODY {
background: #ffee8c url(bum.png) no-repeat fixed top right ;
}

Agar biror xususiyatini kiritmasak, doimiy qiymatni qabul qilib, ishlatadi.