7.4.1.тапсырма 7.2.1. тапсырмаға оралайық. Ол жерде абзацқа және үшінші деңгейлі тақырыптарға бірдей стиль шақырылады. Абзацтарға жаңа қасиет құрыңыз – абзацтық шегеру 20секіруден. Ол атрибуты арқылы құрылады.
қалай болады егер абзац стилі үшінші деңгейлі тақырып стилімен бірге сипатталған болса? Абзацқа және тақырыпқа жазылу стилін бөлетін болсақ онда жазудың кішігірімділігі жоғалып жұмыс көбейеді. Мысалы, сізге стакан чайды қыздырып оны тәтті ету қажет делік, оны бір мезгілде немесе екі бөлек жасауға болады. Тәжірибе жасап көріңіз бірақ нәтиже бірдей болады. Мұнада дәл солай. Егер атрибутты бірінші сипаттамаға қойуға болмайтын блса, онда ол бірінші тақырыпқа әсер етеді, онда жаңадан жазба құрыңыз ондағы абзацқа 20 пункт мәнін беріңіз. Әр түрлі жазбалардағы әр түрлі қасиеттер бір мезгілде элементке қолданылады. Абзац қара болады және өлшемі 14 пункті және 20пункті өлшемді қызыл жолдан тұратын болады.
4.1. Стилдің каскадтылығы мен артықшылықтары.
Алдында көргендеріңіздей веб-бетке кесте стилінің сыртқы және ішкі сонымен бірге тег стилі әсер ететінін көрдік. Сонымен қатар веб-бет сыртқы кесте стилінің бірнешеуіне сілтенуі мүмкін, мысалы:
бұл жағдайда ол бір уақытта кесте стилінің барлығын қолданады. Егер де бір стиль бірнешерет анықталған болса, онда стилдер жан –жалы туындайды сол уақытта артықшылықтар және каскадтық ережелері келеді. Тегтің ішіне орналастырылған ішкі стилі сыртқы кестедегі сыртқы және ішкі кесте стилінде абыройға ие болады. Осы каскадтық деп аталады.
Каскадтық – үлкен мүмкіндік дегенді білдіреді. Соның арқасында кесте стиліміздің өлшемін минимумға дейін кішірейте аламыз. Каскадтық кесте стилін ұзақ оқып үйренуге болады. Ол одан әрі қызығырақ болады. Біздің курста тек CSS негіздерімен таныстыру болып табылады. Кейін қалағандар одан әрі арнайы әдебиеттерді өз бетіншще оқу арқылы үйренуіне болады. Оған қажетті базалық білімдеріңіз сіздерде енді бар. Бірақтан бұндай қызықты тақырыпты аяқтау өте қиын. Бұл әдістеменің авторлары тағы бірнеше веб-бетті құрудың тиімді түрлерін көрсеткісі келіп отыр. Дәстүрлі CSS классты стандарттан басқа тағы жалған атты кластарды анықтайды.link, active, visited, hover – бұл жалған атты класттар тек тегімен қолданылады. Мысал:
a:link { color: red } /* непросмотренные ссылки */
a:visited { color: blue } /* просмотренные ссылки */
a:hover { color: yellow } /*выбранный, но не активизированный*/
/* пользователем элемент */
a:active { color: white } /* активные ссылки */ назар аударыңыз a:hover ережесі a:link и a:visited ережелерінен кейін орналасуы керек, әйтпесе каскадтау ережесі a:hover ережесінің "color" қасиетін жасыратын болады.
a:active a:hover кейін орналасқандықтан активті сілтеме ақ түспен бейнеленеді пайдаланушы сілтемені А элементінің үстіне қойғанда сонымен бірге ол оны активтейді. Осы класстар көмегімен беттердегі сілтемелерді безендіруге болады. Тышқанмен сілтемеген көрсеткен уақытта ширифті өзгетпеген жөн. Ол жағдайда мәттінің сілтемеден төмен жылжытуы болып көзге зиян тигізеді.
4.2. ID-клaccы
барлық тегтар ID атрибутына жіберіледі. CSS көмегімендеректер тегіне ID мәнін беруге және кейбір стилдік ережелерді беруге болады.
Имя id-класс тег атынан # (peшeткa) белгісі арқылы бөлінеді. #yellow {color: yellow}
h1#blue {color: blue} 7.4.4. тапсырма .
жазуын жазу арқылы немесе ID атрибутының кез-келген тегіне yellow мәнін беру арқылы көк түсті тақырыпнама құрыңыз. Бұның бәрі класттарды пайдаланғанға ұқсас. Бұндай әдіспен құрылған стильдерді қолданудың кейбір кемшіліктері бар- ID мәні құжатта ерекше. Бұл динамикалық веб-беттерді бағдарлағанда әр бір тегін басқаруға мүмкіндік береді.