CSS селекторларының кең қолданылатын түрлері.

9 Тамыз 2014

CSS  туралы алдыңғы мақаламда айтып кеткенімдей , оның ережелері селекторлар арқылы белгіленіп HTML кодына енгізіледі.Яғни, HTML тегі осы ережелер арқылы қандай да бір қасиетке ие болады.Сол арқылы парақша беттеріндегі әр элемент керекті орнына жайғасады.

CSS селекторлары бірнеше түрге бөлінеді, олардың санының нақты қанша екенін айтып қажеті де жоқ.Өйткені CSS әр жаңа нұсқасымен бірге жаңа түрлері пайда бола береді, сондықтан мен тек қазіргі қолданыста жүргендерін және көп қолданылатын түрлерін ғана айтып өтпекпін.|

Осы жерде естеріңізге сала кетейін, бұл селесторларды біз бұрын айтып кеткенімдей бөлек CSS файлда сипаттап жазамыз да, HTML кодының <head></head> бөлігінде link арқылы жүктеу үшін жазып кетеміз.

Селекторлардың мынадай түрлері бар:

1. HTML тегтері селекторлар ретінде қолданылады.

Мен осының алдындағы сабағымда соның бір түрі "P" тегінің селектор ретінде абзац фонын әр түрлі түске бояғанын практика жүзінде көрсеттім.


Яғни кез келген HTML тегін селектор ретінде қолдана аламыз.Бірақ, мұның кемшілігі - ереже тек бір тегке байланып қалады.Мысалы, мен басқа бір абзацтың әріптерін қызылдан басқа түске бояғым келуі мүмкін ғой.Егер сондай қажеттілік туындай қалса көмекке  келесі "класс" деп аталатын селекторлар келе алады. 

2. Класс селекторлары былай жазылады:


Төменгі суретте екі түрлі селектор көсетіліп тұр.


Көріп отырғаныңыздай Р тегі екі түрдегі ережемен беріліп тұр.Бұлар не деп тұр екен, талдау жасайық.

Бірінші ереже, яғни бұл алдында айтып өткен тег селекторы ережесі бойынша, барлық абзацтарымыз жасыл түспен жазылуы керек.Бірақ, олардың ішінен қалаған абзацтарды өзгерте аламыз.Қалай дейсіздер ғой, жауабын табу үшін жоғарыдағы CSS стильдік таблицаны "testselectors.css" деп, ал төмендегі HTML кодын "testselectors.html" деп өзіміз жақсы білетін Notepad редакторына көшіріп жазып "testphp" папкасына сақтап жіберіңіздер.


Енді осыны локальдық сервер Денверде ашып қарайық.Ол үшін әр уақытта оған бірінші кірерде ярлык "Start Denwer"ді түртеміз.Сосын кез келген браузердің адрес теретін жолында "localhost/testphp/testselectors.html"  деп шақырамыз.Нәтиже төмендегідей болды.

Ол html файлды Денвер арқылы емес, жай түртіп жіберіп те нәтижесін көруге болады.Бірақ, сіз егер PHP скрипт тілін үйренгіңіз келсе, онда Денверде жұмыс істеу сізге дағдыға айналуы керек.Сондықтан, тест файлдарды осы локальдық серверде шақырғанымыз дұрыс деп санаймын.Егер Денверді пайдаланғыңыз келмесе, онда ол файлды папкасында екі рет түртіп жіберіп қарай беріңіз.


Яғни бұл жерде өзіңіз көріп отырғандай бірінші ереже бойынша барлық абзацтар жасылға боялды, бірақ сол абзацтардың кез келгенін  белгілі бір өзгеше ережемен сипаттасақ, ол "p"тегімен байланысын үзіп басқа ережеге бағынады.Яғни біздің мысалда ол барлық берілген жасыл түстен басқа сары түске ие болды.Яғни "p.wrap"-класс  селекторының дәрежесі  "p" - тег селекторы дәрежесінен жоғары болып тұр. 

Ал егер бір ережемен бірнеше тегтерді бағындыру керек болса, онда жоғарыда көрсетілген екінші ереже сықылды бірақ HTML тегі көрсетілмеген класс селекторын пайдалану керек.

Олай болса Notepadке төмендегідей қылып CSS файлын жазайық:


Сосын осы каскадты стильдік кестелер ережесі бекітілетін HTML кодын жазайық:


Бұл файлдың атын "testclass.html" деп атап "testphp" папкасына салып жіберелік.

Өздеріңіз көріп отырғандай, бірінші "р" абзацы көк түс кодымен #0000FF , ал екінші "р" абзацы, "div" блог тегі  және "span" тегімен қоршалған Қожа сөзі қызыл түс кодымен #FF0000 ережеленген.

Енді осы жазған HTML коды жазылған файлымызды  браузерде  localhost/testphp/testclass.html  деп шақырайық.Менде нәтижесі төмендегідей болды және сізде де солай болғанына сенімдімін.


3. Үшінші селекторлар түрі - бірегей (бірден-бір) идентификатор деп аталады.

Олардың класс селекторларынан айырмашылығы нүктенің орныны # (хеш) қолданылады және бірегей идентификатор  парақша бетінде тек бір тегпен бірге бір-ақ рет жазылады.

Тағы да Notepad те  алдыңғы жазып кеткен "testclass.css" файлын ашып ішіне #abc деген біоегей идентификаторын күлгін түс коды #9A32CD ережесімен қосып жазайық.


Енді осы стильдік кестелер файлын төмендегі көрсетілген HTML кодына link арқылы жазып жіберелік.


Осы HTML гипертексті тілінің web парақшаға айналған түрін көру үшін тағы да  браузер арқылы оны былай деп шақырамыз localhost/testphp/testiden.html.Нәтижесі төмендегідей:



4. Селекторлардың төртінші түрі әмбебап (универсальный) идентификатор деп аталады.

Ол былай белгіленеді:

* {color:red;}  -яғни бұл ереже бойынша парақ бетіндегі барлық әріптер қызыл түске ие болады.

5. Атрибуттар селекторлары деп аталатын селекторлар HTML тегінің атрибуттарын квадрат жақшаға алып сипатталады.

HTML туралы мақаламда мен атрибуттар туралы айтып өткенмін.Солардың бірі сілтемелерде қолданылатын "href" ті осы атрибуттар селекторына бір мысал ретінде қарастыруымызға болады. 

[href^="http"]{color:green;} - яғни бұл ереже бойынша  "http" мен басталатын (^-үздіксіз сөйлемшелер ережесі бойынша сөйлемнің ең басы дегенді білдіреді) барлық сыртқы сілтемелер жасыл түске боялады деген сөз.

6. Псевдокласс селекторлары HTML тегінен кейін қойылатын қос нүктеден соң орналасады.

Олар ешқашан HTML парақшасында көрсетілмейді, тек қана стильдік кестелер CSS файлында сипатталады.Оларға жататындары мыналар:

:link{color:green;}-Яғни мына келтірілген ереже бойынша бұл селектор әлі басылмаған сілтеме әріптерінің бояуын жасыл түске бояйды.

:vizited{color:green;} - ал бұл селектор басылған сілтемелер әріптерінің бояуын жасылға бояйтынын көрсетіп тұр.

Ал келесі псевдокласс селекторлары барлық HTML тегтерінде қолданылады:

a:active{color:red;}- сол жақ мышканы көрсетілген тегті басқанда ғана оның әріптері қызыл түске боялады.

a:hover{color:blue;}- бұл селектор ережесі бойынша тек мышка тегтің үстінен жүріп өткенде ғана тег көрсетілген түске боялады.

7. Енді баяндалатын селекторлар псевдоэлементтер селекторлары деп аталады.

Олар мыналар:

p:first-letter{color:blue;}

p:first-line{color:blue;}

p:after{content="Сонымен бітті.";}

p:before{conten="Қайырлы күн";}

Аттары айтып тұрғандай, абзацтағы бірінші әріп көкке,бірінші қатар көкке, абзац аяқталғанда "Сонымен бітті" деген сөйлем қосылады, абзац басталғанда  "Қайырлы күн" деп басталады.

Осы мақалам Сонымен бітті.

Егер мақала көңіліңізден шықса, онда онымен төмендегі түйме арқылы достарыңызбен бөлісіңіз

Пікірлер