CSS ережелері - "height", "width" және "overflow".

9 Тамыз 2014

Бүгін сіз CSS ережелері: height (биіктік), width (ені), overflow (толып кету) туралы кең мағлұмат аласыз.

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

Ал CSS туралы мағлұматтарды қайдан алуға болады, әрине бұрын мен айтып кеткен HTML тегтерінің бірыңғай стандарттары бекітілген W3C консорциумырың сайтынан, ал нақтылап айтқанда CSS спецификациясы деп аталатын парақша бетінен көре аласыз.Оны ашқанда жоғарғы жағында көрсетілген менюден properties дегенге өтіңіз, сонда мына төмендегідей кестелер тізімі сол CSS ережелері болып табылады:|


Енді осы тізімдегі "height"пен "width" - дерге қарайық:



Бұл ережеде олардың үнсіздік (по умолчанию) бойынша мәні "auto" деп көрсетілген, яғни бұл оның мөлшері нақты көрсетілмесе онда браузерлер ол элементерді парақша бетінде өз қалаулары бойынша орналастырады деген сөз. 

Яғни, CSS ережелері бойынша height және width олардың биіктігі мен енін анықтайды.Бірақ бұл ережеге тек блок тегтері ғана бағынады, олар туралы мен бұрынғы мақаламда баяндап өткенмін.Ал тармақ тектері ол ережелерді  ескермейді.

Сондықтан, height пен width туралы айтқанда тек блок тектері сөз болады.

Олар жоғарыда көрсетілгендей былай сипатталады:


Мысал үшін мына төменде көрсеткендей қылып гипертексті тілмен жазылған скрипт кодын Notepad редакторына салайық.

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

1."div" контейнері мен оның ішіне салынған абзацты "width"бен  "height" арқылы сипаттау.

 

"div" контейнерінің ені оның ішіне салынған "p" тегі арқылы жазылған абзацтың енінен кіші.Бұл жағдайда абзац "div" контейнерінен шығып тұрады.

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

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

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

Меніңше,  "width" бен "height" түсінікті сияқты.Енді "overflow" деген не екенін ұғып көрейік.

2. "overflow"- толып кеткен деген мағына білдіреді.Ол да жоғарыда келтірілген W3C стандарттарындағы ережеге сай былай сипатталады:


Бұл ережеде оның үнсіздік (по умолчанию) арқылы мәні "visible" ( көрсетіледі).

"overflow" қалай жұмыс істейтінін түсінуге келесі мысал көмектеседі.Сүйікті редакторымыз Notepad ке мына HTML кодын жазайық:


Енді осы жазылған "csshtwo.html" файлын   Денвер арқылы тағы да шақырайық:

Көріп отырғаныңыздай екі абзац әп-әдемі боп парақша бетіне жайғаса қалды.Енді олардың тыныштығын бұзайық, ол үшін бірінші абзацтың енін азайтып 100 пиксел қылып өзгертейік.Және бұл өзгерістерді сол "csshtwo.html" файлда жасай берейік.


Енді осының нәтижесін көру үшін тағы да оны Денвер арқылы шақырып көрейік.


Бірінші абзац ені кішірейгенмен мәтін толық сиып тұр.

Енді осы бірінші абзацтың биіктігін тағы да өзгерту мақсатында "50px" ге дейін кішірейтейік, ол үшін тағы да"csshtwo.html" дің кодын  өзгертейік:


Оның нәтижесін көру үшін тағы да браузерде localhost/testphp/csshtwo.html деп шақырамыз:


Міне контейнерге симай толып кетті деген осы болады.Бірінші абзацқа тек жоғарғы екі жол ғана сиып қалғвндары симай сыртқа шығып тұр.Енді осы жерде көмекке "overflow" келеді.Абзацтың симай қалған бөлігін былай "overflow:hidden" деп жазып, жасырып яғни көрсетпей тастауға болады.

Ол үщін тағы да "csshtwo.html" файлдың кодын былай өзгертеміз:


Бұл скриптің кодының нәтижесін тағы да  браузердің адрес теретін жолында localhost/testphp/csshtwo.html деп шақырамыз.


Екі жолдан басқасы көрінбей қалды, бірақ бізге оны толық көрсету керек болса, "overflow"-дің "auto" деген мәнін қолдану керек.


Сонда ол бөлікте оның құрамын шетінде көрсетілген стрелкалар арқылы толық айналдырып көруге арналған  аймақша пайда болады.

Оның қалай жұмыс істейтінін көру үшін тағы да оны Денверде шақырамыз.Нәтиже төмендегідей:

 


  Ал сіз симаған мәтіннің мазмұнын тек бір жағынан ғана, яғни мына жоғарыдағы мысалда, оны тек оң жағын ғана айналдырып көргенді қалауыңыз мүмкін.Онда төменгі айналу аймағын жасыру үшін "overflow-x:hidden;overflow-y:auto""-деп екі рет сипаттап, төмендегідей түрде "csshtwo.html" кодына өзгеріс жасаймыз:


Тағы да браузер арқылы  localhost/tesphp/csshtwo.html деп шақырамыз:


Міне , енді ойдағыдай  болып шықты, яғни "overflow" ды өз мақсатымызда пайдалану өте жеңіл болып шықты.

Ал енді ең басында көрсетілген "width" бен "height" -тардың пайыздық өлшеміне тоқталатын болсақ, ол өлшем оның сыртқы контейнеріне қарасты есептелінеді.Мысалы, абзацтың ені 30% деп көрсетіліп, ал ол өзі  ені  120px ,болатын "div" контейнеріне орналасқан болса, онда "p" абзац "div"-тің төрттен бір бөлігіне орналасады.Және бұл көрсеткіш тек сыртқы контейнер өлшемі болғанда ғана жүзеге асады. 

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

Пікірлер