CSS ережелері - "float" және "clear".

10 Тамыз 2014

Бүгінгі сабағымда мен сайтты блоктар арқылы беттеуде кең қолданылатын CSS ережеселері - "float" және "clear" туралы мағлұмат бермекпін.

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

"Div" контейнерлерінің, ия болмаса жалпы HTML тегтерінің табиғи қозғалыс дағдысы деп олардың парақша бетінде бірінің астына бірі орналасуын айтады.Ал олардың осы табиғатын өзгертетін CSS ережелерінің бірі - осы "float".

Осы ереже арқылы жазылған тегтерді қалқитын элементтер деп атайды.|

Енді оның ережелерін анықтау үшін әдеттегідей W3C стандарттарына жүгінеміз:

 

Бұл стандарттар бойынша, егер HTML тегіне CSS ережелері "float:left" болып берілсе ол сол жаққа, "float:right" жазылса оңға орналаса алады.Ал үнсіздік бойынша ол  "none" мәніне ие болады.

Енді мысал ретінде жоғарыда сілтемеде көрсетілгендей бір "div" және бір "span" алайық та, былай HTML кодын Notepad ке жазып шығайық.


Бұл файлды мен "cssflcl.html" деп атадым да өзімнің тәжірибеге арналған файлдарымды сақтайтын папкаға сақтап жібердім.Сіз де солай файлды өз папкаңызға сақтап болған соң оны не Денвер арқылы, не оны жай ғана түртіп жіберіп ашыңыз.Менде нәтиже былай болды, яғни "div" те, "span" да табиғи түрде жылжып, бірінің астына бірі кодта қалай жазылса солай парақ бетінде орналасты.


Енді "span" тегіне "float:left" деп жазып, "cssflcl.html файлын тағы да өзгертейік:


 Енді ол файлды ашып төмендегі суреттен "span" -ның сол жаққа орын ауыстырғанын көреміз:


Бұл жерде ескеретін мәселе мынада:"margin" тармақ тегтерінде негізінде ескерілмейді, бірақ бұл мысалда "span"- тармақ тегіне "float:left" ережесі берілген соң, ол өзгеріске ұшырап блок тегі құсап әрекет жасап отыр.

Енді жақсы делік, жасыл блок сол жаққа көшті, бірақ оны "div" байқайтын емес, сол күйі міз-бақпай орнын босатпай тұр.

CSS ережесі - "clear".

"Div" блокты  "span" тегіне тиесілі орыннан кетіру үшін басқа бір ереже қолданылады- ол ереже "clear" деп аталады.

Оны анықтау үшін тағы да жоғарыда көрсеткендей W3C стандартына жүгінеміз:

 

Бұл ереже былай дейді және бұл сөз ағылшынша орынды не кеңістікті босату дегенді білдіреді:

1. "clear:left" - ережесі бұл тег үшін сол жақ бос болатынын көрсетіп тұр.

2. "clear:right"- ережесі  бұл тег үшін оң жақ босатылатынын айқындап тұр .

3. "clear:both" -ережесі жазылған элемент екі жағын да босата алады.

Демек, осы ережені негізге алып жоғарыдағы "span" тегі өз орнын толық меншіктей алады екен.Оған көз жеткізу үшін, жоғарыдағы кодымыздағы "div" тегіне "clear:left" деп жазайық.


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


Соңында "div" қырсыққанын қойып, өз орнына көшіп тынды, себебі оған жазылған "clear:left" ережесі оған оның оң жағының бос болуын бұйырды.

Сонымен, қорыта айтқанда "float" ережесі осы қасиеттерінің арқасында блок беттеуде кеңінен қолданылады.  

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

Пікірлер