CSS (cascading sheets style) Технологияси асослари - Informatika va AT - Referatlar

CSS (cascading sheets style) Технологияси асослари

Yuklangan vaqt:

20.09.2019

Ko'chirishlar soni:

0

Hajmi:

133.5 KB

Ko'chirib olish

CSS (cascading sheets style) Технологияси асослари Режа: 1. Хужжатнинг мазмуни ва унинг дизайни 2. CSS 1 ни имкониятлари 3. CSS ни HTML хужжатга қўллаш

Таянч иборалар : CSS, CSS технология, HTML хужжат , стил, дизайн, каскад, Content, inline, embedding, Linking, Import, селектор, хусусият, қиймат, стилни эълон қилиш, класс, ID, контекс селектор ва ҳ.к. 1. Хужжатнинг мазмуни ва унинг дизайни . Одатда хужжатнинг мазмуни браузерда акс эттириш учун HTML тегларидан фойдаланилади. Хужжатнинг дизайни хам HTML орқали ифодалаш мумкин. Лекин буни иккита манфий томони бор. Биринчидан хужжатнинг хажми катталашиб кетади. Иккинчидан хужжатнинг дизайнини ўзгартириш учун катта хажмдаги ишни бажаришга тўғри келади. Яъни форматлаш иши қийинлашади. CSS каскад жадваллар стилидан фойдаланиш қуйидагича қулайликларни беради: 1. Кўп ҳолларда коднинг хажми камаяди; 2. Саҳифаларни принтерга юборишни бошқариш имконияти юзага келади; 3. Кодни логиклик хусусияти ортади; 4. Эҳтиёж туғилганда кодни ўзгартириш осонлашади; 5. Хужжатнинг форматлаш ишини бошқариш сезирарли ортади. Шундай қилиб, CSS web-дизайнерлар учун янги имкониятлар беради. Каскад жадвалалр стили – бу шундай қоидалар тарзида ёзилган хусусиятлар тўпламики, HTML элементларини браузер ойнасида ёки бошқа қурилмаларда қандай акс эттиши кераклигини аниқлаб берувчи восита. Аниқлаб берувчи усуллар қуйидагича:  Боғлаш ( linking ) - ташқи жадваллар стили;  Ичига жойлаштириш (embeding) – хужжатнинг сарлавҳа соҳасида Style элементи киритилиб, керакли ахборот берилади;  Хужжатни ичида (inline) – Style атрибутидан фойдаланилади;  Импорт (import)-IE.

Каскад жадваллар стилининг яратилиши ва ривожланиши тарихи. Таъриф: Content - бу хужжатнинг мазмунини ифодоловчи ахборотлардан ташкил топган қисми бўлиб, унда матн, расм, жадвал, графика бўлиши мумкин. Дизайн – бу хужжатнинг ахборотли қисмини бирор – бир қурилмада акс эттириш усули. CSS ни биринчи версияси 1996 йил 17 декабрда стандарт сифатида тасдиқланди. http://www.w3.org/TR/CSS21/cover.html Пул мабла ғ лар и

CSS ни ўқий оладиган биринчи браузер Internet Explorer ни учинчи версияси эди. Бу нарса Internet Explorerни оммавийлигини ортишига сабаб бўлди. Netscape Navigator ни 4-чи қерсиясидан бошлаб, кейинги версиялари CSS ни ўқий олган.. Opera 5.0 ва кейинги версиялари CSS ни ўқий олади. Web-саҳифа яратувчилар ҳар доим браузерларни имкониятларини ҳисобга олиб иш қиладилар. CSS 1 ни имкониятлари. Каскад жадваллар стилини қўллаш қуйидаги аломатларга қараб белгиланади: Берилган типдаги ҳар қандай элементга;  Элементнинг аниқланган класи бўйича. Клас HTML элементининг ичида элементнинг ичида атрибут class ни киритиш билан аниқланади; <Р class="blue">Бу абзацдаги матн кўк рангда бўлади </Р>  HTML элементнинг ичидаатрибут id ёрдамида уникал (ягона) элемент аниқланади; <Н1 id="uпiquе">Уникал сарлавҳа </Н1>  Бошқа элементни ичида, бирор элементни қўллаш; <Р>Абзацни ичидаги матнни < STRONG >ажратиб</SТRОNG> ёзиш мумкин </Р>  Элементни биринчи ҳарфига қўллаш, Буквиста яратиш;  Элементни биринчи қаторига қўллаш;  Актив, кўриб чиқилган, кўриб чиқилмаган ссилкаларга; Блоклар модели шундай қилинганки, у қуйидаги имкониятларни беради:  Блокларни ўлчами ;  Хошия , чегара чизиқлари ( рамка ), отступлар ўлчами ;  Рамканинг типи ва ранги ;  Блокларни жойлаштириш , Шрифтни бошқариш учун қуйидаги параметрлар ўринли :  Ташқи кўриниши ва қалинлик даражаси ;  Ҳар хил ўлчов бирликларда ўлчами ;

 Гарнитураси . Стандарт CSS2 ва CSS1 га асосланиб яратилган ва у CSS1 ни баъзи хусусиятлар, механизмларни тўлдиради. CSS ни HTML хужжатга қўллаш Каскад жадваллар стилини фақатгина CSS да эмас, балки XCL да хам ёзиш мумкин. Датда стиллар жадвали тилини ўрнатиш учун META элементидан фойдаланилади. Бу элементдан хужжатнинг HEAD бўлимига жойлашувчи турли туман хизматчи ахборотларни беришда фойдаланилади: <head> <МЕТА http - equiv="Content- Style- Тype" content="text/css"> </head> http- equiv="Content- Style Т ype" атрибути , бу META элемнт каскад жадваллар стилига тегишли эканини билдиради , content="text/css" атрибути эсажадваллар стили CSS тилида ёзилганини кўрсатади . Inline стилидан фойдаланиш Бу усул хужжатни исталган жойида style атрибутини қўллаш билан ёзилади . Масалан: <Н1 style="color:green"> Яшил сарлавҳа </Н1> Бу ҳолда хужжатни ичидаги фақат битта сарлавҳа яшил рангда бўлади. Embeding стилидан фойдаланиш Хужжатнинг HEAD бўлимига стил қоидалари киритилади, бу қоидалар <style> ва </style> элементлар ичига ёзилади. <SТYLE type="text/css"> Н1{ color:green } </SТYLE>

Бу ҳолда берилган хужжатдаги хамма биринчи даражали (H1) сарлавҳалар яшил рангда бўлади . STYLE, элементини яна бир атрибути , media қуйидаги қийматларни қабул қилиши мумкин .  screen - компьютер экранлари учун ;  tty – символларни акс эттириш чекланган қурилмалар , терминал , телетайп ва ҳ.к ;  tv – телевизор типидаги қурилмалар ;  projection – проектор типидаги қурилмалар учун .  handheld – мобил телефон , чўнтак компьютерлари учун ;  print – печатга чиқарувчи қурилма ёки печатни олдиндан кўриб чиқиш режми ;  braille – Брайл алфавитли қурилмалар учун ( кўриш қобияти пастлар );  aural – овозни синтезлаш қурилмалари учун ;  all – ҳамма қурилмалар учун . Мисол келтирамиз : < html > < head > < meta http-equiv= "Content-Type" content= "text/html; charset=windows-1251" > < title > @media </ title > < style type= "text/css" > @media screen { /* браузерда акс эттириш учун стил */ BODY { font-family: Arial, Verdana, sans-serif; /* шрифтни тури */ font-size: 90%; /* шрифтни ўлчами */ color: #000080; /* матнни ранги */ } H1 { background: #faf0e6; /* матнни тагидаги фон ранги */ border: 2px dashed #800000; /* сарлавҳа атрофидаги рамка */ color: #a0522d; /* матни ранги */

padding: 7px; /* матн атрофидаги хошия */ } H2 { color: #556b2f; /* матни ранги */ margin: 0; /* отступларни йўқотамиз */ } P { margin-top: 0.5em; /* юқори отступ */ } } @ mediaprint { /* печат учун стил */ BODY { font-family: Times, 'Times New Roman', сериф ; } H1, H2, P { color: #000; /* матн қора рангда */ } } </ style > </ head > < body > < h1 > Хужжатнинг мазмуни ва унинг дизайни </ h1 > < h2 >CSS технологиядан фойдаланиш </ h2 > < p > Content – бу хужжатнинг мазмунини ифодоловчи ахборотлардан ташкил топган қисми бўлиб, унда матн , расм , жадвал , графика бўлиши мумкин . </ p > < p > Дизайн – бу хужжатнинг ахборотли қисмини бирор-бир қурилмада акс эттириш усули . </ p > </ body >

</ html > Натижа қуйидаги кўринишда бўлади : Ташқи стилдан фойдаланиш. Фараз қилайлик сизнинг хужжатингиз бир неча саҳифадан иборат . Ҳар бир саҳифада бир хил <style>…</style> элементини такрорламаслик учун , керакли стил қоидалари ёзилган алоҳида файл тайёрланади. Бу файлнинг номи *.css кенгайимага эга бўлади. Бу файл LINK элементи билан ҳар бир саҳифанинг HEAD бўлимида, қуйидаги тарзда ёзилади: <LINК href="style.css" rel="stylesheet" type="text/css"> Бу ерда “style.css” – стил қоидалари ёзилган алоҳида ташқи файлнинг номи . LINK элементнинг номи href атрибути билан файл жойлашган атрибути билан файл жойлашган URL адрес ва файлни номи кўрсатилади. Атрибут rel эса бу файл HTML хужжатга қандай муносабатда эканини билдиради. (relation – боғланиш маъносни билдиради). Import усули. Бу усулда хам HTML хужжат ташқаридаги алоҳида файл билан боғланади. Бу иш махсус директива @ import билан қуйидаги тарзда амалга оширилади: <STYLE ТYPE="text/css"> Элементлар учун стилни ифодалаш @import url(style.css) Стилни ифодасини давоми </SТYLE> Бу усул фақат Интернет explorer учун ўринли. Бу усулдан кам фойдаланилади. Мисол келтирамиз :

< html > < head > < meta http-equiv= "Content-Type" content= "text/html; charset=windows-1251" > < title > стилни импорти </ title > < style type= "text/css" > @import "/ style /main .css " screen; /* мониторга чиқариш учун стил */ @import "/ style /palm .css " handheld, print; /* печат учун стил */ </ style > </ head > < body > < p > ... </ p > </ body > </ html > Селекторларнинг типлари CSS, ҳам бошқа дастурлаштириш тиллари каби қатъий аниқланган синтаксисига, яъни жадваллар стилини яратиш бўйича қоидалар жамланмасига эга. CSS да элементлар, атрибутлар мавжуд эмас. Унда қоидалар бор. Ҳар бир қоида HTML ни бир ёки бир нечта элементини ташқи кўринишини ифодалайди. CSS қоидалари – бу жадваллар стилининг шундай структуралашган бирлигики, унда бирор HTML элементининг стили ифодланган бўлади. CSS қоидалар, селектор ва стилни эълон қилиш блокидан топади. Селекторлар ҳар доим чап томонда жойлашади ва ундан кейин фигурали қавсни ичида стилни эълон қилиш блоки жойлашади. Ҳар бир эълон хусусият ва уни қийматидан ташкил топган матиндан ташкил трпади. Эълонлар бир биридан нуқтали вергул билан ажратилади. Айнан хусусият стилни ташқи кўринишини аниқлайди.

Ta’риф. Стил қўллаш мумкин бўлган элементнинг конструкциясини селектор деб атаймиз.

A дабиётлар: 1. Мальчук, Е.В. HTML и CSS . Самоучитель. М. Издательский дом "Вильяме", 2008. 2. Михаил Дубаков ВЕБ-МАСТЕРИНГ Средствами CSS .Санкт-Петербург, 2002 www.ziyonet.uz www.referat.arxiv.uz

O'xshashlar

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

Stillar jadvali, shriftlar, maxsus bеlgilar. Tasvirlar va murojaatlar kartasining qo`shimcha xususiyatlari

МОБТда ишлаш технологияси асослари

Электрон кулланмаларни тайёрлаш дастурий воситалари. HTML

CSS3 dan foydalanish kaskadli jadval stillari tushunchasi kaskadli jadval tushunchasi va imkoniyatlari shrift xususiyati