Сыныптар мен идентификаторлар CSS-ді кеңейтуге көмектеседі
Бүгінгі вебтегі веб-сайттарды құру CSS-ны (Cascading Style Sheets) терең түсінуді талап етеді. Бұл браузер терезесінде қалай орналасатынын анықтау үшін веб-торапты берген нұсқаулар. Веб-бетіңіздің көрінісі мен сезімін жасайтын HTML құжатыңызға бірқатар «стильдер» қолданады.
Жоғарыда аталған стильдерді құжат арқылы қолданудың көптеген жолдары бар, бірақ көбінесе сол элементтің барлық даналарын емес, құжаттың кейбір элементтеріне ғана стиль қолданғыңыз келеді.
Әрбір жеке данаға арналған ереже ережесін қайталамай-ақ, құжатта бірнеше элементтерге қолдануға болатын стиль жасағыңыз келуі мүмкін. Осы қалаған стильдерге қол жеткізу үшін сынып және ID HTML атрибуттарын қолданасыз. Бұл атрибуттар әр HTML тегіне қолданыла алатын жаһандық атрибуттар болып табылады. Демек, сіз бөлімдерді, параграфтарды, сілтемелерді, тізімдерді немесе құжатыңыздағы басқа HTML бөліктерінің стилін жасайсыз ба, сынып пен ID атрибуттарына бұл міндетті орындауға көмектеседі!
Класс селекторлары
Сынып селекторы құжатта бірдей элементке немесе тегке бірнеше мәнерлерді орнатуға мүмкіндік береді. Мысалы, мәтіннің қалған бөлігінен мәтіннің белгілі бір бөлімдерін басқаша түспеуі мүмкін. Бұл бөлектелген бөлімдер бетте орнатылған «ескерту» болуы мүмкін. Сіз өзіңіздің ежелеріңізді келесідей сабақтармен тағайындауға болады:
p {түсі: # 0000; }
p.alert {түсі: # ff0000; }
Бұл стильдер барлық ежелердің түсін көкке (# 0000ff) орнатады, бірақ «ескерту» сынып атрибуты бар кез келген параграфтың орнына қызыл (# ff0000) түрінде болады. Бұл сынып төлсипатының тек тег селекторын қолданатын бірінші CSS ережесінен жоғары ерекшелігі бар.
CSS-мен жұмыс істегенде, неғұрлым нақты ереже неғұрлым нақты болмайды. Осылайша, осы мысалда неғұрлым жалпы ереже барлық абзацтардың түсін анықтайды, бірақ екіншіден, белгілі бір параграфтарда ғана орнатылатындығынан артық ерекше ереже.
Міне, бұл кейбір HTML түзетулерінде қолданылуы мүмкін:
Бұл параграф көгілдір түспен көрсетіледі, ол беттің әдепкі мәні болып табылады.
Бұл параграфта көк түсте болады.
Бұл парақ қызыл түспен көрсетіледі, өйткені сынып төлсипаты элементтің селекторлық стильден стандартты көк түсіне қайта жазылады.
Бұл мысалда «p.alert» стилі тек «ескерту» класын пайдаланатын элементтердің элементтеріне қолданылатын болады. Егер сіз бұл классты бірнеше HTML элементтерінде пайдалануды қаласаңыз, HTML элементін басынан бастап алып тастай аласыз стильдегі қоңырау (тек кезеңді (.) қалдырыңыз), келесідей:
.alert {background-color: # ff0000;}
Бұл класс енді қажет ететін кез келген элементке қол жетімді. «Ескерту» сынып төлсипатының мәні бар HTML-дің кез-келген бөлігі енді осы стильді алады. Төменде HTML-да бізде «ескерту» класын пайдаланатын параграфтың және 2-деңгейдің тақырыбы бар. Олардың екеуінде біз көрсеткен CSS негізінде қызыл түстің түсі болады.
Бұл тармақ қызыл жазылады.
Бұл h2 де қызыл болады.
Бүгінгі күні веб-сайттарда класстық атрибуттар көбінесе элементтерде жиі пайдаланылады, себебі олар идентификаторлардың ерекшелігі тұрғысынан жұмыс істеу оңайырақ. Көптеген ағымдағы HTML парақтарын сынып атрибуттарымен толтыру үшін табасыз, олардың кейбіреуі құжатта бірнеше рет қайталанады және бір рет пайда болуы мүмкін басқа.
ID селекторлары
Идентификатор идентификаторы оны тег немесе басқа HTML элементімен байланыстырмай-ақ белгілі бір стильге атау беруге мүмкіндік береді. Айта кетейік, сізде HTML туралы түзетулер бар, ол оқиғалар туралы ақпаратты қамтиды.
Сіз бұл бөлімді «оқиға» идентификаторының төлсипатын бере аласыз, содан кейін 1-пиксельді қара шекармен бөлісуді қаласаңыз, келесідей код кодын жазасыз:
#event {border: 1px solid # 000; }
ID селекторларымен шақыру - олар HTML құжатында қайталанбауы. Олар бірегей болуы керек (сіз өз сайтыңыздың бірнеше бетін бірдей идентификаторды пайдалана аласыз, бірақ әрбір жеке HTML құжатында бір рет қолдануға болады). Егер сізде осы шекара қажет болатын 3 оқиға болса, оларға «event1», «event2» және «event3» және олардың әрқайсысының мәнеріне ID атрибуттарын беру керек. Сондықтан, жоғарыда аталған «сынып» атрибуты атрибутін қолдану оңайырақ болар еді және олардың барлығын бірден стильдендіретін болар еді.
ID атрибуттары бар тағы бір қиындық - олар сынып атрибуттарына қарағанда жоғары ерекшелікке ие. Бұл дегеніміз, егер сізге CSS-тің бұрын орнатылған стилін анықтайтын болуы керек болса, идентификаторларға тым көп негізделген болсаңыз, мұны істеу қиын болуы мүмкін. Осы себепті көптеген веб-әзірлеушілер, егер олар тек осы мәнді бір рет қолданғысы келсе, және олардың орнына барлық стильдер үшін сыныптың аз атрибуттарына айналдырылған болса да, олардың түзетулерінде идентификаторларды пайдаланудан бас тартты.
ID атрибуттары ойнатылатын бір аймақ, бет-беттегі тірек сілтемелері бар бетті жасау керек болғанда. Мысалы, параллакс стилінің веб-торабы болса, сол беттегі әртүрлі бөліктерге «секіру» сілтемелері бар бір беттің барлық мазмұнын қамтиды. Бұл ID атрибуттары мен осы байланыстырушы сілтемелерді қолданатын мәтін сілтемелері арқылы жасалады.
Сілтемедегі href атрибуты үшін # белгісінің алдындағы сол атрибуттың мәнін төмендегідей қосасыз:
Бұл сілтеме
Басылғаннан немесе түртілгеннен кейін, бұл сілтеме осы ID төлсипаты бар беттің бір бөлігіне өтеді. Егер беттегі ешбір элемент осы ID мәнін пайдаланбаса, сілтеме ештеңе жасамайды.
Есте сақтаңыз, егер сіз сайтта бет сілтемесін жасауды қаласаңыз, ID атрибуттарын пайдалану қажет болады, бірақ жалпы CSS стильдеу мақсаттары үшін сыныптарға ауыса аласыз. Бүгінгі беттерді таңдаймын - сынып селекторларын мүмкіндігінше қолданамын және тек қана CSS-дегі крюк ретінде емес, сонымен қатар бет сілтемесі ретінде әрекет ету үшін атрибутты қажет болған кезде ғана идентификаторларға ауысамын.
Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard, 8/9/17 жылы редакцияланған