Блокли ва сатрли элементлар. Ранг ва шрифт турлари - Informatika va AT - Referatlar

Блокли ва сатрли элементлар. Ранг ва шрифт турлари

Yuklangan vaqt:

20.09.2019

Ko'chirishlar soni:

0

Hajmi:

103.5 KB

Ko'chirib olish

Блокли ва сатрли элементлар. Ранг ва шрифт турлари Режа: 1. Блокларни жойлаштириш 2. Нисбий позициялаш (relative) 3. A бсолют позициялаш 4. Фиксирланган блоклар

1. Блокларни жойлаштириш. Блок яратилиб, унинг хусусияти берилгач, браузер ойнасида жойлашиш ўрнини аниқлаш керак. Умумий ҳолда блокнинг ўрни бир нечата параметрларга боғлиқ. Асосий ролни эса блокни жойлаштириш схемаси ўйнайди. Блокни жойлаштириш схемасининг тўрт тури мавжуд. 1. Нормал оқим 2. Нисбий позиция. 3. Абсолют позиция . 4. Сузувчи блоклар модели. Бундан ташқари хужжатнинг кодида блокнинг жойлашган ўрни муҳим рол ўйнайди. Монитор экранинг ўлччами ва кўрсатиш қобилияти ҳам аҳамиятли. Кўпчилик web-дизайнерлар минимал кўрсатиш қобиляитини 800x600 деб олиб, ишлашини шунга мослайдилар. Нормал оқим. Нормал оқим бўйича блокни жойлаштириш схемаси оддий.Ҳамма структура ёки қатортипидаги блоклар вертикал йўналиш бўйича юқоридан пастг а қараб кетма-кет жойлашеверади ва шу тарзда монитор экранида акс этади. Бунда иккита струтурали блок ҳеч қачон бир горизонтал чизиқда жойлаша олмайди. Қатор типли блокларни браузер горизонтал йўналиш бўйича кетма-кет жойлаштиради. Бундай қатор чизиқли блок дейилади, ва бир нечта қатор типли блоклар битта чизиқли блокда жойлашиши мумкин. Агар жой етмаса вертикал бўйича кейинги қаторга ўтади..Нормал оқим ўз хусусиятига кўра HTML код қандай тартибда ёзилса, шу тартибда иш бажаради. Agar jadvaldan foydalanilmasa, normal oqim yordamida, murakkab sahifalar tayyorlash mumkin emas. Kengligi 80%, qalinligi 1 px va yashil ramka chiziq bilan o‘ralgan, hamda sahifaning o‘rtasida joylashadigan asosiy blok yaratamiz. #main { border:1px green solid; margin:0 auto;

width:80%; } НТМ L kodida esa quyidagicha konstruktsiya yoziladi: <body> <div id= "main”> </div> </bodу> Hamma qolgan bloklar asosiy blok “main” ning ishiga joylashadi. Birinchi shunday blok sarlavha ya’ni saytning nomi bo‘ladi. Bu blokni head, deb nomlaymiz. Bu yerdagi tekst kattaroq razmerli shriftda yoziladi.Bundan tashqari sarlavha uchun toq kulrang fon, tekstning rangini oq qilib belgilaymiz.Sarlavhani o‘rtaga joylashtiramiz. #head { background:#A5A5A5; color: #FFF; font size: 2,5еm; text-align: center; } Endi sahifaning НТМ L kodi quyidagi ko‘rinishni oladi: <body> <div id="main"> <div id=”head”> Ta’lim On- line rejimida. </div> </div> </body> Keyingi blok links ochroq fonda beriladi. Bu yerda o‘rtada saytning boshqa bo‘limlariga ssilkalar joylashadi. #links { background:#EDEDED; padding: 2рх 0; text -align:center }

Ssilkalarni bir biridan ajratish uchun uzluksiz probel va vertical chiziqlar qo‘yilgan.Bundan tashqari ssilkalar teksti qalin shriftda va tagiga chizilmagan holda aks etsin.Buning uchun kontekst selektorga quyidagicha qoida yozamiz. #links А{ color:#000; font weight: bold; text decoration: попе ; } Blokning НТМ L kodi quyidagi ko‘rinishni oladi: <body> <div id="main"> <div id="head"> Masofaviy ta’lim On- line rejimida </div> <div id=”links”> <a href=”#”>kundalik</ А >&nbs р ;||  < a href ="#">fotolar</ А >&nbs р ;||  < a href ="#">dil izhorlari kitobi</a> </div> </div> </body> Позицион Позицион хусусияти қуйидаги тўртта қийматлардан бирини қабул қилиши мумкин . 1. static бу оддий блок бўлиб, нормал оқим қоидалари бўйича жойлашади . 2. relative нормал оқимга нисбатан нисбий жойлашиш . 3. absolute absolyut joylashish. 4. fixed фиксирланган жойлашиш . Блок аввал абсолют жойлашади, яъни нормал оқимдан ажралиб чиқиб, алоҳида жойлашади, кейин унинг шу

жойлашиш ҳолати фиксирланади. Фиксирланган блок саҳифа кўриб чиқиш жараёнида сурилганида, ўз ҳолатини ўзгартирмайди. Нисбий позициялаш (relative) Бу усулдан фойдаланилганда, аввал блокнинг ҳолати нормал оқимга нисбатан аниқланади, сўнгра блок ўз жойига нисбатан сурилади. Сурилиш қуйидаги хусусиятлар ёрдамида берилади :  left блокни чап чегараси , контейнерни чап чегарасига нисбатан сурилади. ;  right блокни ўнг чегараси , контейнерни ўнг чегарасига нисбатан сурилади ;  top блокни юқори чегараси , контейнерни юқори чегарасига нисбатан сурилади ;  bottom блокни қуйи чегараси , контейнерни қуйи чегарасига нисбатан сурилади . Қийматлар узунлик ўлчов бирлигида ўлчов бирлигида ёки процентларда берилади. Оддий мисол кўрамизСаҳифага учта блокни жойлаштирамиз . div{ border: 1рх dotted #000; } <div>Birinchi blok</div><br> <div>Ikkinchi blok</div><br> <div>Uchinchi blok</div> Нормал оқим қоидасига кўра блоклар қуйидаги расмдагидек акс этади . Блоклардан бирини чапга 20 px , юқоридан пастга 10 px сурамиз . Бунинг учун “ move ” номли класс яратамиз : .move{ position: relative; left: 20рх; top: 10px; }

<div> Birinchi blok</div><br /> <div class="move"> Ikkinchi blok</div><br /> <div> Uchinchi blok</div> Klasni ikkinchi blok uchun qo‘llasak, quyidagi natija chiqadi: Амалда нисбий позициялаш кам ишлатилади . A бсолют позициялаш A бсолют позициялашда блок нормал оқимдан бутунлай ажралиб чиқади . Бунда ҳам блокларни суриш қуйидаги қийматлардан бирини олади:  left  right ;  top ;  bottom . Ушбу мисолда иккинчи блок контейнер вазифасини браузер ойнаси ўтайди . #abs{ position: absolute; left: 60 рх ; top: 120 рх ; } <div> Birinchi blok</div><br /> <div id="abs"> Ikkinchi blok</div><br /> <div> Uchinchi blok</div> Natija quyidagi rasmda tasvirlangan:

Fiksirlangan bloklar Fiksirlangan blok hech qayerga surilmaydi va har doim o‘rnatilgan sohada o‘zgarishsiz turadi. Fixed position quyidagi qiymatlardan birini oladi:  left  right ;  top ;  bottom . Konkretmisolko ‘ ramiz , ikkitablokyaratamiz . Birinchibloknifiksirlab , brauzerningchapyuqorioynasigajoylashtiramiz . Bublokgamenupunktlarinijoylashtir amiz . Blokningkengligini 100 pikselbilancheklaymiz . #fix{ position: fixed; left: 0рх; top: 0 рх ; widht:100px; } Ikkinchi blok absolyut joylashgan, u birinchi blok bilan ustma-ust tushib qolmasligi uchun , o‘ng tomonga 150 piksel surilgan. #move{ position: absolute; left: 150рх; top: 0 рх ; } Endi bu bloklardan sahifa yaratamiz. <div id="fix"> 1 punktl<br> 2 punkt<br> 3 punkt<br> 4 punkt </div> <div id="move"> Sahifaning asosiy teksti<br> Sahifaning asosiy teksti<br> Sahifaning asosiy teksti<br> </div>

Suzuvchi blok Float Float hususiyati elementni sahifaning chap yoki o‘ng chetiga siqib olib keladi.tekst esa uning atrofidan aylanib o‘tadi.Tekstning bunday harakati toshni yonidan oqib o‘tuvchi suvni eslatadi,shuning uchun ham bunday hususiyatli bloklar , suzuvchi blok deyiladi.Absolyutpozitsiyadan farqli o‘laroq,suzuvchi bloklar aniq koordinataga ega bo‘lmaydi.Ularni aniq berilgan nuqtaga joylashtirish mumkin emas, lekin ular o‘ziga xos muhim xarakterga ega. Float qo‘llaniladigan ishlarni sanab o‘tamiz:  Fotografiyalar galereyasi;  Ikki va uch ustunli(kolonka)maketlar;  Gorizontal menyu;  Tekstni mazmunini yorituvchi rasmlar;  Ko‘p ustunli tekst . Float quyidagi qiymatlardan birini qabulqilishi mumkin.  left strukturali blok chapga suriladi, hujjatning qolgan qismi esa blokning o‘ng tomoniga o‘tadi.  right strukturali blok o‘ng tomonga suriladi, hujjatning qolgan qismi esa blokning chap tomoniga o‘tadi.  попе blok surilmaydi,yani positionda ko‘rsatilgan algoritm bo‘yicha joylashadi.Agar position hususiyati ko‘rsatilmasa, normal oqim holiday bo‘ladi.  Inherit o‘zi joylashgan konteynerni qiymatini oladi. Misol keltiramiz: <html> <head> <title>magistr</title> <style type="text/css"> .comment { float: left; background: #fd0; border: 1px solid black; padding: 10px;

margin-right: 20px; /* ong hoshiya */ width: 30%; /* blokni kengligi */ } </style> </head> <body> <div class="comment"> Word matn protsessorida ishlash tartibi - quyidagilarni o‘z ichiga oladi: </div> <div> Hujjat yaratish; Matn kiritish; Matnni redaktorlash; Matnni formatlash; Hujjatni saqlash; Hujjatni chop qilish. </div> </body> </html> Natija brauzer oynasida quyidagi ko‘rinishda aks etadi: Clear Bu hususiyat suzuvchi bloklarni qaysi tomoni , boshqa suzuvchi blok bilan yonma –yon joylasha olmasligini aniqlatdi. Agar element uchun Float qo‘llanilgan bo‘lsa, Clear bu hususiyatni inkor etadi.U faqat blok darajasidagi elementlar uchun qo‘llaniladi va quyidagi qiymatlardan birini qabul qiladi.  left blok hamma chap tomondagi suzuvchi bloklardan keyin joylashishi kerak.  right blok hamma o‘ng tomondagi suzuvchi bloklardan keyin joylashishi kerak .

 both blok hamma suzuvchi bloklardan keyin joylashishi kerak .  попе blokni joylashuvuga cheklanish qo‘yilmaydi.  Inherit o‘zi joylashgan konteynerni qiymatini oladi. Bu hususiyatni ixtiyoriy strukturali bloklarga qolash mumkin. Misol keltiramiz: <head> <title>float</title> <style type="text/css"> .comment { float: left; background: #fd0; border: 1px solid black; padding: 10px; margin-right: 20px; /* ong hoshiya */ width: 30%; /* blokni kengligi */ } </style> </head> <body> <div class="comment"> Word tekst protsessorida ishlash tartibi - quyidagilarni o‘z ichiga oladi: </div> <div style="clear:left"> Hujjat yaratish; Tekst kiritish; Tekstni redaktorlash; Tekstni retsenziyalash; Tekstni formatlash;Hujjatni saqlash; Hujjatni pechatga chiqarish. </div> </body> CSS da qatlamlar

Agar web sahifani uch o‘lchovli fazo deb faraz qilsak, bu fazoda ustma –ust joylashgan sahifalar Z o‘qi bo‘yicha tartib bilan joylashadi. Hujjatning kodida esa tartib avtomatik tarzda aniqlanadi. Normal oqim bo‘yicha elementning kodi qancha quyida bo‘lsa, u Z o‘qi bo‘yicha shuncha yuqori qiymatni qabul qiladi. CSS da Z- o‘qi bo‘yicha joylashuvga z-index hususiyati javob beradi,ya’ni element bizga yaqin yoki uzoqligini aniqlaydi. Qiymat sifatida butun sonlar beriladi, qiymat qancha katta son bo‘lsa shu element boshqalarga nisbatan yuqorida joylashadi. Web –sahifaning o‘zi uchun z-index 0 ga teng.. z-index hususiyatni , faqatgina position ga absolute, fixed yoki relative qiymatlar berilgan elementlar uchun qo‘llash mumkin. Misol keltiramiz: <html> <head> <title>z-index</title> <style type="text/css"> #layer1, #layer2, #layer3, #layer4 { position: relative; /* nisbiy joylashtirish */ } #layer1, #layer3 {

font-size: 40px; /* shriftni o'lchami*/ color: #000080; /* ko'k rangda */ } #layer2, #layer4 { top: -45px; /* tekstni yuqoriga surish */ left: 25px; /* tekstni o'ngga surish */ color: #ffa500; /* to'q sariq rangda */ font-size:60px; /* shriftni o'lchami */ } #layer1 { z-index: 2; } #layer2 { z-index: 1; } #layer3 { z-index: 3; } #layer4 { z-index: 4; } </style> </head> <body> <h3>Birinchi qatlam yuqorida</h3> <div id="layer1">1 qatlam</div> <div id="layer2">2 qatlam</div> <h3>To'rtinchi qatlam yuqorida</h3> <div id="layer3">3 qatlam</div> <div id="layer4">4 qatlam</div> </body> </html>

A дабиётлар : 1. Мальчук, Е.В. HTML и CSS . Самоучитель. М. Издательский дом "Вильяме", 2008. 2. Михаил Дубаков ВЕБ-МАСТЕРИНГ Средствами CSS .Санкт- Петербург, 2002 3. Eric A. Meyer, Cascading Style Sheets. The Definitive Guide.O’ Reilli 2008

O'xshashlar

HTML формалар

Standard компоненталар палитраси хусусият услуб ва ходиса

HTML хужжатининг тузилиши

HTML ҳужжатининг тузилиши

Web-саҳифаларни лойиҳалашнинг асосий тиллари