блоктык элементі
3.5 Блоктар қасиеті
3.6 Блокты мәтінмен айналып өту
3.7 Позициялау
3.8 Таңдалынған беттер
3.9 Тег үшін стильді қолдану
4. стильдер қатынасы
4.1 Стильдер каскады және приоритеті
4.2 ID-класстар
Қорытынды
Бұл дәрісте сіз сайттың веб-беттерінің түрін бірдей қалай өзгертуге және оларды бір стильде дайындау жайында, бет бөлігін немесе жеке тегті қалай өзгерту керек екендігі жайында біле аласыз. CSS стильді каскадты кестелер негіздерімен таныса аласыз.
Кілттік сөздер: стильдердің каскадты кестелері, CSS, стильдердің сыртқы кестесі,
стильдердің ішкі кестесі, тег стилі, мұрагерлік, селектор, класс, ID-класс, қатарлы элемент, блокты элемент,
позициялау, стильдер қатынасы, стильдер каскады.
1. Стильдердің каскадты кестелері
1.1 CSS қызметі
HTML негізін білу, сіз үшін кішкенен шындықты түсінуге жеткілікті: гипермәтіндік белгі тілдің қажетті элементтерін жазу – автор қалағанындай пайдаланушының бетінде барлық ақпараттың орналасуына кепілдеме бермейтін, өте күрделі және шаршататын жұмыс. Елестетіңіз, өзіңіздің өңдеп отырған веб-бетіңіз браузер терезесінің барлық көлеміне орналастыру керек болған мәтіннің он абзацынан және экранның ортасы бойынша туырлау керек болған бес көркемдеуден тұрады. Бұл дегеніміз,
HTML-құжаттың кодында
тегін он рет және бес рет
![]()
тегінде align="center" атрибутын көрсетуіңіз керек болады. Егер сізге, осыдан кейін барлық абзацтағы мәтін түрін өзгерту керек болатын болса, мысалы, түсі мен мөлшерін өзгерту, онда мұндай өзгерістерді он рет енгізуге тура келеді. Нәтижесінде жұмыс көлемі, уақыты ұлғаяды және веб-шебер ретіндегі құны да. Сонымен қатар, құжатқа орнатылып жатқан тег көлемі мен нәтижелік
файлдың көлемі ұлғайғандықтан, оның серверден жүктелуі де көбейеді. Яғни, бұл дегеніміз, сіз өз сайтыңыздың пайдаланушыларын жоғалтасыз! HTML-белгілердің мүмкіндіктері шектеулі. Графиканың өлшемін пиксельге дейін нақты көрсетуге болады. HTML-де мәтіндік блоктар өлшемін көрсетуге болмайды: олар үнсіз келісім бойынша шрифтке қатысты өлшемнен шығып, браузермен есептеледі. Беттің авторы пайдаланушының браузер күйге келтірулерін алдын-ала анықтай алмайды, бұл бетте ақпаратты ұсынудың нұсқаларын шектейді. Осы және басқа да мәселелерді шешу үшін W3C консорциумының HTML стандартын өңдеуші-компания бағдарламалаушыларымен жаңа CSS (Cascading Style Sheets – стильдердің каскадты кестелері) стандарты жасалынды. CSS, HTML-ге қарағанда веб-бет алгоритм элементтерін жазуды басқа алгоритмін қолданады. Мәтіндік файлдағы әрбір элементтің қасиетін бір рет көрсету арқылы, кейін сіз осы файлды HTML құжатқа қосып, браузерге веб-беттің әрбір компонентінің мәнін сол жақтан оқыта аласыз. Бұған қоса, сіз осы стильдер жазбасымен жеке файлды түрлі құжаттардың шексіз мөлшеріне қоса аласыз. Бұдан басқа веб-беттерді дайындаудың алдында CSS –тің сөзсіз бір ерекшелігі бар. Өзіңіздің сайтыңыздың немесе бірнеше сайттардың барлық веб-беттердің қандайда бір элементін стилін өзгерту үшін, бір файлдағы кодтің бір қатарын туырлаудың өзі жеткідікті болады.
Бұдан басқа, барлық веб-беттер үшін ішкі файлдан берілген стильді оған керемет түр беру үшін, кез-келген нақты веб-беттің ішінен анықтауға болады. Сонымен қатар кез-келген бірлік тегтің стилінде өзгертуге болады.
Стильдің каскадты кестелері – HTML секілді веб-дизайнерге үлкен нақтылық және әсермен бетке элемент қосу және өзгертуге мүмкіндік беретін технология. CSS оқу, HTML оқыған секілді өте жеңіл. Ал негізінен CSS пен жұмыс жасау жеңілірек, себебі мұнда жаңа тегтер енгізбестен, бар тегтер қолданылады. Осы бөлімді оқи отырып, сіз стильдің каскадты кестелері қалай жұмыс жасайтындығын, олардың құрылу негіздерімен танысасыз. Ары қарай сіз осы кестелердің жеке қасиеттерін қолдануды үйренесіз.
