CSS3da fon rang va rangli tasvirlar bilan ishlash qoidalari

Yuklangan vaqt:

20.09.2019

Ko'chirishlar soni:

0

Hajmi:

157 KB

Ko'chirib olish

CSS3da fon rang va rangli tasvirlar bilan ishlash qoidalari R е ja: 1. Web sahifa yaratishda CSS da asosiy fon va rang uchun javob beradigan stil xususiyatlari 2. Web sahifaga rasm qo`yish tegi va uning tavsifi; 3. CSS3da fon, rang va rangli tasvirlar bilan ishlashga doir misollar.

$CSS orqali web sahifa fonini o‘zgartirish va rang berish ishlarni HTML orqali ham qilish mumkin, lekin bu darajadagi fonlarni chiqarish qiyinchilik tug‘diradi. Shuning uchun web 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: 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 H3teglari 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 endi natijani ko‘ramiz: 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> 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 web sahifa foni rasmga to‘lmoqda. Background-repeatshu 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. 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- f on 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. 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. <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> 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;} Sahifamizga rasm qo‟yish uchun <img> nomli teg bizga yordam beradi. Ammo birgina shuni o‟zi hech narsani hal etmaydi, Buning uchun qo‟shimcha attribut kodlari kerak. Attribut bu – teg uchun yordamchi kodlar hisoblanadi. Masalan <p> bu matn abzasi bo‟lsa , <p align="right"> esa abzasdagi matnni o‟ng tomonga joylaydi. Bunda , align="right" qo‟shimcha kod yoki attribut deyiladi.

Eslatma: attribut – bu teg uchun yordamchi kod. Biz <img> tegini sahifamizga qo‟ysak hech qanday rasm ko‟rinmaydi. Chunki, biz hali qaysi rasmni qo‟yish haqida sahifada hech bir kod yozmadik. Demak , biz rasmni manzilini va uning nomini yozishimiz ham kerak. Buning uchun, <img src="rasmnomi.jpg"> deb kiritamiz. Demak biz src nomli attributdan foydalandik. Keling, endi saytimizga birorta rasm qo‟ysak:Bu saytni yangi papka ichiga joylashtirsak qulay bo‟ladi. Shuning uchun, yangi papka ochib dars6 deb nomlaymiz. Keyin, Notepad (Bloknot) dasturini ochamiz va unga quyidagi kodlarni yozamiz: Kod: <html> <head> <title> Saytim sarlavhasi </title> </head> <body> <h1>Gulla haqidagi sayt</h1> <img src="gullar.jpg"> </body> </html> Endi dars6.html deb nom qo‟yamiz , endi .html fayl ko‟rinishda papka ichiga saqlaymiz. Xullas papkamizda 2 ta fayl bor: gullar.jpg nomli rasm va dars6.html nomli sahifa. Sahifamizni ochib ko‟ramiz. Juda ajoyib! Sarlavha va rasm joylashgan. ESLATMA: Kompyuterda har qanday faylning o‟z turi (formati) bo‟ladi. Masalan rasmlar odatda jpg , png, gif kabi formatlarda bo‟ladi. Rasm

nomidan keyin .jpg yoki .png kabi formatini ham yozish lozim, aks holda rasm ko‟rinmay qoladi. Rasm formatini bilish uchun uning ustiga sichqonchaning o‟ng taraf tugmasini bosib, свойства (properties) menusini tanlaymiz. Type of file qismidan faylning qaysi formatga oid ekanligini aniqlaymiz. Saytimizdagi rasmni kattaligini ham biz teg (kod) orqali boshqara olamiz. Aytaylik, siz ushbu qo‟ygan rasmni kichikroq bo‟lishini istaysiz. Buning uhcun bizga atribut (yordamhi teg) lozim. Buning uchun width va height nomli attributlar yoziladi. Bularni sahifada yozilishi quyidagicha : <img src="gullar.jpg" width="200" height="180"> www.qalam.uz – Sayt ochish, dizayn va grafika, darslar width="200" bu rasmning eni 200 piksel bo‟lishi kerakligini bildiradi, Bu yerga istagan sonni kiritish mumkin. height="180" bu rasmning bo‟yi 180 piksel bo‟lishi kerakligini bildiradi, Bu yerga am istagan sonni kiritish mumkin. Elsatma, Kompyuterda rasmning eni va bo‟yi odatda piksel kattaligida o‟lchanadi. Ya‟ni 1 piksel bu komputer ekranidagi eng kichik nuqta. 1 sm uzunlikda o‟rtacha 32 piksel mavjud.

Adabiyotlar: 1. Кarimov I.A. “Yuksak ma’naviyat – yengilmas kuch” Tosh kent ma’naviyat 2008 yil 2. Abduqodirov A. va boshqalar. Informatika va hisoblash texnikasi asoslari – Т .: O`qituvchi, 1996 y. 3. Hoshimov O. Kompyuterli va raqamli texnologiyalar. - Т .: Yangi asr avlodi, 2009 y. 4. Usmonov R.N. Кompyuter tizimlariga texnik xizmat ko’rsatish” “Ilm ziyo” 2012. 5. Sh.A. Nazarov “Кompyuter va ofis qurilmalar”, 2007 y. 6. http://www.borlpasc.narod.ru/ . 7. http://www.intuit.ru

O'xshashlar

Macromedia Flash dasturida tasvirlar bilan ishlash

Html5 da bloklar CSS3 da o’zgaruvchan bloklar bilan ishlash DIV tegi va uning atributlari CSS3da bloklarning kengligi

Oynalar bilan ishlash

Domenlar bilan ishlash

Diagrammalar bilan ishlash