§ 44–45. CSS

 Естеріңе түсіріңдер:
• web-құжат дегеніміз не?
• гипермәтін дегеніміз не?
• гипермедиа дегеніміз не?

Меңгерілетін білім:
• СSS туралы түсінік;
• СSS-тің ML-де қолданылуы;
• СSS пен ML-дің айырмашылығы;
• стиль түрлері.

Терминдер:
• СSS;
• стиль;
• қолануы стилі;
• брауер стилі;
• кіріктірілен стиль;
• баланысқан стил;
• импортталған стил.

        CSS (Cascading Style Sheets – каскадты стильдер парақтары) – браузердегі деректердің көрінуін анықтайтын стандарт. HTML құжат құрылымы туралы ақпарат береді, ал CSS стильдер парақтары оны қалай бейнелеу керек екенін қарастырады. Әдетте HTML мәтіннің түсі мен өлшемін беру үшін пішімдеу тегтері арқылы жүзеге асырылады. Сайттағы бірдей элементтердің параметрлерін өзгерту қажет болса, тегтерді табу және өзгерту үшін барлық беттерді шолу қажет болады. CSS тілі HTML тілінің мүмкіндігін кеңейтеді.
HTML құжаттарына қажетті бейнені береді.
         Көбінесе HTML және XHTML web-беттерді жобалау құралы ретінде пайдаланылады, сонымен қатар SVG, XUL және XML форматындағы құжаттардың барлық түрлерімен де қолдануға болады.

            CSS стильдердің каскадты кестелері HTML-ден кейін, 1997 жылы пайда болды. CSS -тің арқылы тек HTML-мен жұмыс жасағанына қарамастан, ол - HTML емес. Сонымен қоса CSS HTML тегтерді анықтай отырып,  HTML мүмкіндіктерін кеңейтетін жеке кодты ұсынады. Бұл WWW мәтіндік құжаттарды алмасу тәсілі ретінде, ал HTML  осы құжаттар жасалатын тіл болғандығы мен байланысты. Әскери қызметкерлер мен ғылымдарды құжаттың көріктілігі емес, оның құрамы қызықтырды. Сондықтан HTML -дің алғашқы жобаларында web- беттерге бейнені қосу әдістері болмаған. Бірақ уақыт өте келе интернетке басқа да пайдаланушылар келіп, олар өздеріне әсем етіп жасауды талап етті. Осылайша web-дизайнерлердің жұмысын жеңілдету мақсатымен жасалған стильдердің каскадты кестелері пайда болды.
CSS арқылы тек HTML құрылымын емес, сонымен қатар мәтіндік құжаттарды, стильдерді және веб-беттердің көрінісін басқаруға болады. Ол HTML тілінің мүмкіндіктерін кеңейтеді және жеке компоненттердің параметрлерін анықтап, өзгертуге мүмкіндік береді.

CSS каскадты болғандықтан, бір элементке бірнеше стиль қолданылғанда, браузер әр стильдің басымдылығын есептеп, ең дұрыс нұсқаны таңдайды. Бұл әсіресе үлкен жобалар мен веб-беттерді басқарғанда өте ыңғайлы.

Каскадты стильдер веб-дизайнерлер мен бағдарламашылардың жұмысын жеңілдетіп, сайттағы барлық элементтердің бірдей көрінуін және оңай жаңартылуын қамтамасыз етеді.

 

Тапсырма 1. «CSS қолдану алгоритмі»
Оқушылар CSS-ті HTML бетке қосу алгоритмін дұрыс ретімен орналастырады.

Қадамдар аралас берілген:

1. style.css файлын HTML файлымен бір бумаға сақтау
2. HTML құжатын құру
3. <head> бөлігіне " target="_blank" rel="noopener noreferrer">style.css"> жазу
4. CSS файлына селектор мен қасиеттерді жазу
5. Браузерде нәтижені тексеру
6. Қате болса, кодты түзету

Тапсырма 2. «Нәтижені болжа»
Берілген код орындалғанда web-бет қалай көрінеді?

Тапсырма 3. «Практикалық тапсырма»
Тақырыбы: «Менің хоббиім»

Мына талаптар бойынша web-бет жаса:

1. Бет тақырыбы: Менің хоббиім
2. Тақырып ортада орналассын
3. Өзің туралы 2 сөйлем жаз
4. Хоббиіңді маркерленген тізіммен көрсет
5. Тізім маркерін төртбұрышқа өзгерт
6. Тақырыпқа class қолдан
7. Бір абзацқа id қолдан