Лекция 10. СSS технологиясының қасиеттері.
Каскадты стильдер кестесі.
Енгізілген және inline-стильдер.
Импортталған және байланысқан стильдер.
Каскадты стильдер кестесі. Интернетте көп тараған HTML 3.2 гипермәтін құжаттарды «физикалық форматтау» атты әдіспен ұйымдастырады. Web-форматтаудың бұл әдісінде тэгтер мен олардың атрибуттары әрбір жаңа абзацта қайталанады. Бұл Web-құжаттардың бастапқы кодтағы мәтін көлемінің ұлғаюына әкеледі. «Физикалық форматтауда» Web-құжаттың құрылымына талдау жасау, браузерлерге, ақпаратты іздеу жүйелеріне көп уақыт талап етеді, нәтижеде Web-құжат монитор терезесінде өте жай бейнеленеді.
Қазіргі таңда Web-құжат құруда «логикалық форматтау» әдісін қолданған қолайлы. Бұл әдісті Интернет консорциум ұсынған HTML 4.0 тілінде қарастырамыз. «Логикалық форматтау» Web-құжаттың құрылымы мен сипаттауын бөлектеуге әкеледі. Нәтижеде Web-құжаттың көлемі мен оның жедел жадыға жүктелу уақыты қысқарады және Интернеттегі ақпаратты іздеу жүйелері оларды жеңіл талдай алады, қажетті гипермәтін мультимедия-жобаға берілген форматта жеткізіледі.
Интернет немесе локалдық жүйеде Web-сайттар ұйымдастыруда Web-құжаттардан пайдаланамыз. Егер Web-құжаттар бір-біріне тәуелсіз компьютерлерде сақталатынын және оларды виртуал жинақтау керектігін еске алсақ, онда Web-құжаттарға жалпы стильдерді, шрифттерді, форматтарды, фильтрлерді, т.с.с. енгізуге қажеттілік туады. Web-құжаттарда барлық гипермәтіндер бір түрлі форматта, стильде болуы тұтынушыға қолайлылық тұғызады. Web-құжаттардағы дизайн мен анимация да көп роль ойнайды.
Әрине бұл айтылғандар Web-құжаттарды құруда «классикалық әдіс» болып есептеледі. Бірақта Интернетте Web-сайттарды құруда, коллекциядағы гипермәтіндерді жинақтауда, басқа әдістер қолданған жөн. Web-кеңістікті дұрыс пайдалану мәселесіне де көңіл бөлу қажет. Визуалды Web-редакторлар Web-құжаттарды құруда тэгтерден өте көп пайдаланады, бірақ оларды тиімді пайдаланбайды. Web-құжаттардың бастапқы кодтағы мәтіндерін тұтынушының өзі қарапайым редактормен тиімділейді.
Web-құжаттың құрылымы мен сипаттауын бөлектеуді CSS (Cascade Style Sheets – каскадты стильдер кестесі) технологиясын қолдана отырып орындаймыз. CSS технологиясы Web-құжатты сипаттауда қосымша файлдардан, шаблондар мен стильдерден пайдалануға көмектеседі. Бұл технологияны NetsCape Navigator мен Internet Explorer браузерлері қолдайды.
Енгізілген және inline-стильдер. CSS технологиясы HTML тілінің кез келген тегіне өзіндік стильді визуалды (inline style) енгізе алады. Егер енгізілген стиль HTML-дің тегіне орналасса, онда бұл стильден басқа абзацтар мұрагерлік қасиетімен автоматтық түрде пайдалана алады. Егер абзацта тегі және оның colour, size атрибуттары айқын сипатталса, онда абзац полиморфизм қасиетімен сипатталған стильді аладі.
Әдетте Web-құжаттардың негізгі бөлімдерінде жалпы стильдерден пайдаланылады. Мысалы: гипермәтіннің барлық абзацтары 12 пункт өлшемді, Times New Roman шрифтты, жасыл реңді болсын. Бұл үшін негізгі форманың тегіне Style атрибутын енгіземіз:
| Times New Roman",serif;
font-size: 12 pt;
colour: green;">
Жоғарыдағы мысалда Times New Roman шрифты Serif эффектімен берілген. Егер пайдаланушының компьютерінде бұл шрифт болмаса, онда ол браузермен Serif эффекті бар басқа шрифтпен алмастырады. Браузер Times New Roman шрифтіне сәйкес шрифтты автоматтық түрде таңдайды.
Енді Web-құжаттарда бірнеше стильді қолдану мәселесін көрейік. Бұл үшін стильдер кестесін (CSS) құрамыз.
Көрсетілген мысалда негізгі мәтін 12 пунктті Times New Roman шрифтімен, бас тақырып 18 пунктті Arial шрифтімен, ал II-сатыдағы тақырып 14 пунктті Helvetica шрифтімен берілген. CSS-кестесі Web-құжаттардың бастапқы кодының басына енгізіледі. СSS-кестесінің ішіндегі h1, h2 таңдамасы деп, ал фигуралық жақшанің ішіндегілері оның анықтамалары деп аталады.
Жоғарыдағы әдісті CSS технологиясын HTML-ге енгізу деп атаймыз. Енді CSS технологиясын HTML-ге енгізу және байланыстыру әдістерін қарап шығайық. Бұл әдіс сипаттау стилін бірнеше құжатта қолдану қолайлы. Мұнда CSS-кесте .css файл кеңеймесімен файлда сақталады.
Байқасаңыз
Бұл жерде енгізілетін стильдер кестесімен қатар өзіміз де қалағанша таңдама мен оның анықтамаларын қоса аламыз.
Браузерлер пайдаланылатын стильдер тізбегін олардың орындалу приоритетіне қарай төмендегіше қолданады:
inline-стильдер - құжатқа
