logo
  1. Главная страница
  2. Рефераты
  3. Информатика и ИТ
  4. Html5 da bloklar CSS3 da o’zgaruvchan bloklar bilan ishlash DIV tegi va uning atributlari CSS3da bloklarning kengligi

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

Загружено в:

20.09.2019

Скачано:

0

Размер:

46 KB
Скачать
Html5 da bloklar CSS3 da o’zgaruvchan bloklar bilan ishlash DIV tegi va uning atributlari CSS3da bloklarning kengligi R е ja: 1. CSS3 da o’zgaruvchan bloklar bilan ishlash. 2. Blokning oraliq masofalari: Maging va Padding 3. CSS3 da bloklarning kengligi va balandligi tushunchasi. Web sohasida, blok tushunchasi juda kerakli termin hisoblanadi, saytning barcha brauzerlarda birxilda ochilishi, rasm va yozuvlarni o‘ylaganingizdek namoyon bo‘lishi aynan blok holatiga bog‘liq. Bu maqoladan boshlab, blokga tegishli stillar xususiyatini ko‘rib chiqamiz. Dastlab, umumiy blok nimaligini bilib olamiz. Blok bu - ma&#39;lum bir chegaraga ega bo‘lgan va alohida qism sifatida qaraladigan ma&#39;lum bir axborotni o‘zida saqlaydigan joydir. HTML gippermatn tilini oladigan bo‘lsak, u yerda ham blok va qator elementlari tushunchasi bor. Blokli elementlar, alohida strukturaga ega bo‘lib, to‘rtburchak chegaraga bilan o‘ralgan bo‘ladi. Ikkita blokli elementni bir qatorga joylashtirib bo‘lmaydi. HTML gippermatn tilida blokli elementga misol qilib, &#34;H1...H6&#34;, &#34;P&#34; va &#34;DIV&#34; teglarini olish mumkin. Har safar bu teglarni ishlatganda, brauzer har biri uchun alohida qator ajratib beradi. Qatorli elementlarga esa, &#34;strong&#34;, &#34;em&#34;, &#34;i&#34; kabi teglarni misol qilish mumkin. Bu teglardan bir qatorda bemalol foydalansa bo‘ladi. CSS stillar texnologiyasida ham blok tushunchasi mavjud va u ham o‘z strukturasiga va to‘rtburchak chegarasiga ega. Strukturali blok ichida qatorli blok ham bo‘lishi mumkin(blok ichidagi yozuvlar), qatorli blok yozuv ko‘rinishida ham bo‘lishi mumkin, to‘g‘riroq etadigan bo‘lsak, strukturali blok ichida ob&#39;yektli blok bo‘lishi mumkin. YUqoridagi nazariy ma&#39;lumotlarni quyida bitta rasm orqali tushunish mumkin. Bloklarning o‘z xususiyatlari bor, misol uchun, blok uzunligi(width), blok balandligi(height), chegarasi(border), ... Har bir blok qandaydir tashkil etuvchilardan iborat bo‘lishi shart, ya&#39;ni yozuv, rasm yoki boshqa axborot. Blokning bu qismi kontentdeb yuritiladi. Misol uchun &#34;P&#34; tegi uchun kontent yozuv hisoblanadi. Blok atrofida qandaydir boshqa blok yoki ob&#39;yektlar bo‘lishi mumkin, blokdan ulargacha bo‘lgan masofaga &#34;margin&#34; kalit so‘zi javob beradi. Blok ajralib turishi uchun, uning chegarasi bo‘lishi lozim, bu chegaraga &#34;border&#34; javob beradi. Yuqoridagilardan tashqari blokning ichki bo‘sh oralig‘i bo‘lishi mumkin, ya&#39;ni blokdan blok chegarasigacha bo‘lgan masofa, bu masofaga &#34;padding&#34; kalit so‘zi javob beradi. Keyingi maqolalarda blokning shu xususiyatlarini birma-bir ko‘rib chiqamiz, bu maqolani blok tushunchasiga ta&#39;rif sifatida qabul qilasiz. Blokning oraliq masofalari: Maging va Padding Blokning o‘z ramkasi(chegarasi)gacha bo‘lgan oraliq masofa va ramkasidan atrofidagi biror ob&#39;yektgacha bo‘lgan masofa kabi xususiyati bor. Bu ikki oraliq masofani tushinish uchun quyidagi rasmni keltirib o‘taman. Bu yerda blok sifatida biror blokli teg(p, div,...) bo‘lishi mumkin. Rasmdan ko‘rinib turibdiki, blokdan o‘z ramkasigacha bo‘lgan masofa &#34;padding&#34; deb, blok ramkasidan biror ob&#39;yekt(element) yoki element mavjud bo‘lmasa hujjat oxirigacha bo‘lgan masofa &#34;margin&#34; deb yuritilar ekan. Bu ikki xususiyatni kod ichida ishlatish, blokni veb sahifada aniq va tushunarli bo‘lishini ta&#39;minlaydi. Misol ko‘ramiz va hammasi tushunarli bo‘ladi <html> <head> <title>Margin Padding</title> <style> p1 { background-color: gray; border:1px solid red; margin:70px; color:white;} p2 { background-color: #FFE446; border:1px solid red; padding:70px;} p3 { background-color: #FFE446; border:1px solid red; margin:50px; padding:20px;} </style> </head> <body> <p class=&#34;p1&#34;>Manchester United Football Club</p> <p>Old trafford stadion</p> <p class=&#34;p3&#34;>Rayan Giggs Assistent</p> </body> </html> Oldingi maqolada ishlatilgan quyidagi kalit so‘zlar ham bu xususiyat uchun ishlaydi: -left - chap tomondan joy qoldirish (margin-left, padding-left) -right - o‘ng tomondan joy qoldirish (margin-right, padding-right) -top - yuqori qismdan joy qoldirish (margin-top, padding-top) -bottom - pastki qismdan joy qoldirish (margin-bottom, padding-bottom). Endi, kalit so‘zlar orqali bo‘sh joy qoldirishga oid misolni ko‘ramiz. <html> <head> <title>Margin Padding</title> <style> d1 { background-color: gray; border:1px solid red; margin-top:70px; margin-bottom:10px; color:white;} .d2 { background-color : #FFE446; border:1px solid red; padding-left:70px; padding-right:10px; } </style> </head> <body> <p>Eric Contana</p> <p>Roy Kean</p> </body> </html> Yuqoridagi CSS kodni qisqartirib quyidagicha yozish mumkin: .d1{margin: 70px 0 10px 0;} .d1{padding: 0 10px 0 70px;} Qaysi paytda qaysi birini(margin, padding) ishlatishni, o‘zingiz hal qilishingiz kerak, faqat shuni aytishim mumkinki, &#34;padding&#34; blok ichida bo‘ladi, &#34;margin&#34; blok tashqarisida CSS3 da bloklarning kengligi va balandligi tushunchasi. Blokga oid xususiyatlarni ko‘rib chiqishni davom ettiramiz, bu safar yana bir asosiy xususiyatlardan biri, blokning balandligi(height) va uning uzunligi(width) haqida gaplashamiz. Agar sezgan bo‘lsangiz, blokning uzunligi va balandligi avtomat aniqlashtiriladi, yozuv qancha katta bo‘lsa(yoki blokni boshqa tashkil etuvchi), shuncha blokning uzunlik va balandlik katta bo‘ladi. Shunday bo‘lsa ham, biz CSS orqali blokning uzunlik va balandligini o‘zimiz o‘rnatishimiz mumkin. Demak bu ish uchun biz quyidagi ikkita xususiyatdan foydalanamiz: - height- blokning balandligi; - width- blokning uzunligi. Odatda, CSS da blok siftida &#34;div&#34; tegi ishlatiladi, lekin paragraf(p tegi), ro‘yxatlarni ham blok sifatida ishlatish mumkin. Nazariy ma&#39;lumotlar bilan tanishib chiqdik, endi misol ko‘ramiz. <html> <head> <title>WH</title> <style> .mu1 { width: 100px; border: 1px solid red; background: #FFE446;} .mu2 { height: 70px; border: 1px solid red; background: #FFE446;} .mu3 { width: 75px; height: 120px; border: 1px solid red; background: #FFE446;} .mu4 { width: 30px; height: 30px; border: 1px solid red; background: #FFE446;} </style> </head> <body> <p class=&#34;mu1&#34;>England champion football club - Manchester United football club!</p> <p class=&#34;mu2&#34;>Eric Contana</p> <p class=&#34;mu3&#34;>Wayne Rooney</p> <p class=&#34;mu4&#34;>Phile John</p> </body> </html> Har xil o‘lchamdagi bloklar hosil qildik, agar biz yozgan yozuv blok ichiga sig‘masa, ko‘rib turganingizdek blok tashqarisida ham yozuvning davomi yozilaverar ekan. Shuning uchun bloklar hosil qilishda hamma narsalarni hisobga oling. Blok uzunligi va balandligini berish bilan siz, faqat yozuv uchun ajratilgan joyni aniqlashtirgan bo‘lasiz, oraliq masofalarni belgilovchi CSS xususiyatlar(margin, padding) bu o‘lchamlarga kirmaydi. Siz kiritgan o‘lchamdan keyin, o‘rnatgan oraliq masofa qiymatichalik joy tashlab ketiladi, rasmda ko‘radigan bo‘lsak, Yuqoridagi o‘lcham beruvchi CSS xususiyatlardan tashqari yana quyidagi o‘lchov beruvchi xususiyatlar mavjud: - max-width- blokning maksimal uzunligi; - min-width- blokning minimal uzunligi; - max-height- blokning maksimal balandligi; - min-height- blokning minimal balandligi. Bu xususiyatlar blokning maksimal va minimal o‘lchovlarini aniqlashtirib beradi, biror kod orqali bu maksimal va minimal o‘lchovlardan chetga chiqib bo‘lmaydi. Beriladigan o‘lchovlar faqat shu oraliqga tushishi lozim. Misol, .size { height:80px; width:600px; max-width: 300px; border:1px solid red; background-color:orange; } Bu holda blok uzunligi 300 piksel bo‘ladi, biz o‘rnatgan 600 piksel ishlamaydi. Menimcha hammasi tushunarli, tushunarsiz narsalar pochta yoki kommentariyada ko‘rib chiqiladi. 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. http://www.borlpasc.narod.ru/ . 6. http://www.intuit.ru

Похожие

Blok yaratish. Bloklar bilan ishlash
C++ da fizik fayllar bilan ishlash
CSS3 da ro’yxatlar CSS3 da giper murojaatlarni qo’llash ochiluvchi ro’yxat menyu turli xil o’lchamli tugmalar yaratish
MS Excel da ishlash
C++ da satrli kattaliklar v ular bilan ishlash