CSS ережелері - "padding","margin" және "border" туралы.

9 Тамыз 2014

Бүгінгі сабақ "padding", "margin"  және "border" деген CSS ережелеріне арналады.

Ал бұл сабақты түсіндіру үшін мен сіздерге көптен бері айтқым келіп жүрген Mozilla Firefox браузерінің қосымша кіріспесі Firebug туралы қысқаша айтып кеткім  келіп отыр, себебі оны пайдаланбайтын web-сайт жасаушылар жоқ сияқты.Онсыз сайт жасау мүмкін емес, себебі ол сайт жасаудағы ең басты және ең керекті құрал.Оны сіз Мозилланың жоғарыдағы менюінің ішінен Инструменты->Дополнения деген парақша бетіне төменде көрсеткенімдей кіріп, қоңыздың суретімен белгіленген  Firebug расширениесін өз компьютеріңізге тегін жүктей аласыз.


Мен өзім 3 браузерді пайдаланамын: негізінде Опера және кейде Google Chrome браузерлерін ғаламторға шығу үшін, ал Мозилла Firefox браузерін сайт парақшаларын жасау үшін.|

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

Әзірге осы Firebug-тің тек бір қасиетін назарларыңызға ұсынбақпын, себебі ол бүгінгі тақырыпты түсінуге көп көмек бере алады.

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

Оның тек осы қасиетін ғана басқа да браузерлер көрсете алады, бірақ программаны дұрыстауды  (отладка)  олар Firebug  сияқты жақсы атқара алмайды.

Мен назарларыңызға өз парақшамдағы екінші абзацтың үстінен мышканың оң жақ кнопкасын басқандағы түсілген суретті ұсынамын:


Енді  "Исследовать элемент" арқылы шыққан бетке талдау жасайық:


Бұл бетте алдарыңыздағы кодтың бір бөлігі, оның ішінде көк жолмен боялып тұрған үстінен мышкамен түртілген р абзацы. Жасыл стрелкалармен көрсетіп отырғанымның жоғарыға бағытталғаны сол абзацты көрсетіп, ал төмен қараған стрелка тіктөртбұрыштың ішіндегі сол абзацтың парақша бетіндегі орнын көрсетіп тұр.

Міне, бүгінгі сабақ осы тіктөртбұрышты талдау арқылы бүгінгі тақырып иелері "padding","margin" және  "border" сипаттамаларын түсіну болмақшы.

Яғни парақша бетіндегі кез келген HTML тегінің (тармақ тегтері және блок тегтері ) осындай сипаттағы тіктөртбұрышы, демек ол тегтің "padding","margin"  және "border" сипаттамалары болады деген тұжырым туады.

Сонымен, суреттегі тіктөртбұрыштың ең ортасындағы көк түсті бөлігі біздің р абзацымыз, ал оның сыртындағы жасыл түспен көмкерілген аймақ- "padding" (ішкі бос кеңістік) деп аталады.

Ал "padding" сыртын айнала жағалап орналасқан сары түсті аймақ - "border" (шекара) деп аталады.

Сыртқы қоңыр түсті "border"-ді қоршаған аймақ "margin" (сыртқы бос кеңістік) деп аталады.

Мысалы, парақша бетіне мәтін жазғанда болмаса сурет орналастырғанда, оны "div" не "p" контейнерлеріне салғанда ол мәтін не суреттің шекарасы-"border" пайда болады.Оны сіз қалауыңызша оған белгілі бір мән беру арқылы көрсете аласыз, ал егер оның мәнін көрсетпесеңіз ол шекара мүлде көрінбейді.

Ал "padding" мен "margin" сипаттамаларының анықтамасы басқаша, олар ана бір фильмдегі көрінбейтін адам сияқты  ешқашан парақша бетінде көрінбейді.Бірақ, парақшаны беттеуде алатын орны ерекше - оларсыз сайт сайт бола алмайды.


Яғни, бұл суреттен өздеріңіз көріп отырғандай "padding-top"-HTML тегінен (мысалы, мәтіннен не суреттен) шекараға (border) дейінгі аралықты, "margin-top"- шекарадан жоғарғы келесі HTML тегінің "margin-іне" дейінгі аралықты, "border-top" - сол шекараның жоғарыдағы енін көрсететін мөлшемдер.

Ал "padding-right"- оң жақтағы "border-right"-қа дейінгі аралықты, "margin-right" - "border-right" тан келесі көрші HTML тегінің "margin"-іне дейінгі аралықты, "border-right" - оң жақтағы шекараның енін көрсетіп тұр.

Қалғандары осылар тектес сипатталады.

Енді W3C стандарттары бекітілген сайттан олардың CSS ережелерін көшіріп алайық:

1."padding": "padding-top"-  "padding-right" "padding-bottom" "padding-left"



2."margin":



3."border":



"Padding", "margin" мен  "border" CSS ережелерінің жазылуы.

1. Осы аталған ережелер жазылғанда белгілі бір тәртіпке бағынады, яғни төмендегі суретте көрсетілген стрелка-нұсқағыштар көрсеткен бағыт бойынша алдымен top-жоғарғысы, сосын right-оң жақ, одан кейін bottom-төменгісі, соңынан left-сол жақтағысы жазылуы керек. 

  

2. Осы аталған CSS ережелерінің 4 түрлі жазылуы бар.Олар төмендегі суретте нақтылап көрсетілген, әр ереженің жанында стрелкамен оның баламасы бейнеленген.Егер сипаттамалардың арасында мәндері ұқсасы  кездессе, олар ережелер баламасымен өрнектеле алады.Яғни, бұл балама ережелер сайт парақшаларының кодын жазғанда көп жеңілдік береді.


Кез келген сайт парақшасының кодын көру мүмкіндігі 

Жоғарыда айтып өткенімдей, сізде Firebug болмаса да қалаған браузеріңізде кез келген сайттың кез келген жерінде тұрып мышканың оң жақ кнопкасын басып HTML тегінің жоғарыда талдап өткен блоктық макетін ғана емес, сол сияқты  сайттың кодын да және оның CSS ережелерін де көре аласыз.

Мысалы, Опера браузеріндегі менің парақшамды алайық:



Енді осы окнодағы мен қызыл стрелкамен көрсеткен "Styles"деген вкладканы бассаңыз, стильдік кестелер, яғни осы белгілі бір HTML тегіне қатысты жазылған CSS ережелерін көре аласыз. 


Қаласаңыз, сіз бұл стильдік кестелер, яғни CSS мәндерін өзгертіп өз браузеріңізде парақшаның өзгерген сипатын көре аласыз.Бірақ, бұл тек сіздің браузерде ғана орын алады, әрине негізгі кодты тікелей өзгерте алмайсыз.Мәнін өзгерту үшін мышканың нұсқағышын сол көрсетілген  мәннің үстінен екі рет басып, пайда болған блокқа қалаған мәніңізді қоясыз, парақша сол бойда өзгеріске қшырайды. 

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

Пікірлер