Html hyperText Markup Language гипертекстті өңдеу тілі
HTML тегтері селекторлар ретінде қолданылады
жүктеу/скачать 0,77 Mb.
|
CSS-qaz 1
- Бұл бет үшін навигация:
- 2. Класс селекторлары былай жазылады
| 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 деп шақырайық.Менде нәтижесі төмендегідей болды және сізде де солай болғанына сенімдімін. жүктеу/скачать 0,77 Mb. Достарыңызбен бөлісу:
|