Көптеген жылдар бойы CSS-нің қалқып кетуі веб-сайттың макеттерін құрудағы маңызды, бірақ қажет компонент болды. Егер сіздің дизайныңыз бірнеше бағандарға арналған болса, сіз өзгермеліге айналды . Бұл әдіс мәселесі, веб-дизайнерлер / әзірлеушілер күрделі сайт орналасуларын жасау кезінде көрсеткен керемет өнертабысқа қарамастан, CSS флоты ешқашан осы жолмен пайдаланылмауға тиіс еді.
Платформа және CSS орналасуы көптеген жылдар бойы веб-дизайнында орын алатындығына сенімді болғанымен, CSS Grid және Flexbox қоса жаңа орналасу әдістері енді веб-дизайнерлерге олардың орналасу жоспарларын жасаудың жаңа әдістерін береді. Көптеген әлеуетті көрсететін тағы бір жаңа орналасу әдістемесі - CSS көпше бағандары.
CSS бағандары бірнеше жыл бойы болды, бірақ бұрынғы браузерлерде (негізінен Internet Explorer-дің ескі нұсқалары) қолдаудың жетіспеушілігі көптеген веб-мамандарды осы стильдерді өндіріс жұмысында пайдаланудан сақтады.
IE-дің ескі нұсқаларына қолдау көрсетудің аяқталуымен, кейбір веб-дизайнерлер енді CSS-нің жаңа нұсқаларын, CSS-ны қоса алғанда, жаңа CSS-ті қарап шығу әдістерімен тәжірибе жасап жатыр.
CSS бағандарының негіздері
Оның есімі көрсеткендей, CSS көпше бағандары (CSS3 көп бағанды орналасуы деп те аталады) мазмұнды бағандардың белгіленген санына бөлуге мүмкіндік береді. Сіз пайдаланатын ең негізгі CSS сипаттары:
- бағандар саны
- column-gap
Баға санау үшін қалаған бағандардың санын көрсетесіз. Бұл бағандар аралықтары немесе бағандар арасындағы аралық болады. Браузер бұл мәндерді қабылдайды және мазмұнды сіз көрсеткен бағандар санына біркелкі бөледі.
CSS-дағы бірнеше бағандардың жалпыға бірдей үлгісі - бұл газет мақаласында көретін нәрсеге ұқсас бірнеше бағандарға мәтіндік мазмұн блогын бөлу. Сізде келесі HTML түзетулеріңіз бар екенін айт (мысалы, мысалы, бір мақсатқа жету үшін, мен тек бір параграфтың басталуын ғана ескеремін, ал іс жүзінде бұл түзетулердегі мазмұнның бірнеше параграфы болуы мүмкін).
Сіздің мақалаңыздың тақырыбы
Мәтіннің көп тармақтарын елестетіңіз ...
Егер сіз осы CSS стильдерін жазсаңыз:
.content {-moz-баған-саны: 3; -webkit-бағанның саны: 3; бағанның саны: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; }Бұл CSS ережесі «мазмұны» бөлімді олардың арасындағы 30 пиксельден кем емес 3 тең бағанға бөледі. Егер 3 орнына екі баған қажет болса, сіз бұл мәнді өзгерте аласыз және браузер мазмұнды біркелкі бөлу үшін осы бағандардың жаңа енін есептейді. Алдымен сатушы-префикстік қасиеттерді, содан кейін алдын ала жазылмаған мәлімдемелерді қолданамыз.
Бұл оңай, сондықтан оны пайдалану веб-сайтты пайдалану үшін күмән тудырады. Ия, мазмұнды бірнеше бағандарға бөлуге болады, бірақ бұл Интернеттегі жақсы оқу тәжірибесі болмауы мүмкін, әсіресе осы бағандардың биіктігі экранның «қабатының» астына түссе.
Оқырмандар толық мазмұнды оқу үшін жоғары және төмен қарай жылжу керек. Дегенмен, CSS бағаналарының бастығы сіз мұнда көргендей қарапайым және оны кейбір параграфтардың мазмұнын бөліп қана қоймай, көп нәрсе жасау үшін қолдануға болады - ол, шынымен, орналасу үшін пайдаланылуы мүмкін.
Орналасу CSS бағандарымен
Мазмұнның 3 бағанына ие мазмұн аумағы бар веб-сайтыңыз бар екенін айтыңыз. Бұл әдеттегі веб-сайттың орналасуы және сол 3 бағанға жету үшін әдетте сізде орналасқан бөлімшелерді жүзіп отыратын боласыз. CSS бірнеше бағандарымен бұл әлдеқайда жеңіл.
Міне, кейбір HTML үлгісі:
Соңғы жаңалықтар
Мазмұн осында келеді ...
Келе жатқан оқиғалар
Мазмұн мына жерде ...
p>
Осы бірнеше бағандарды жасау үшін CSS бұрын көргендеріңізден басталады:
.content {-moz-баған-саны: 3; -webkit-бағанның саны: 3; бағанның саны: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; } Енді браузер бұл мазмұнды біркелкі бөліп алғысы келгендіктен, осы бөлімшелердің мазмұны әртүрлі болса, бұл браузер шынымен жеке бөлімнің мазмұнын бөліп, оны бір бағанға қосып, содан кейін тағы біреуін жалғастырыңыз (мұны эксперимент жүргізу үшін осы кодты қолданып көріп, әрбір бөлім ішіндегі әртүрлі мазмұн ұзындықтарын қосыңыз)!
Бұл сіз қалаған нәрсе емес. Сіз осы бөлімшелердің әрқайсысын ерекше баған жасауды және жеке бөлімнің мазмұнын қаншалықты үлкен немесе кішкентай болсын десеңіз де, оны бөліп алғыңыз келмейді. Бұған CSS-дің қосымша бір жолын қосу арқылы қол жеткізуге болады:
.content div {display: inline-block; } Бұл браузер оны бірнеше бағандарға бөлсе де, «мазмұнның» ішіндегі бөлімдерді өзгеріссіз сақтауға мәжбүр болады. Тіпті одан да жақсы, өйткені мұнда тіркелген ені ештеңе бермегендіктен, бұл бағандар шолғыш өлшемі өзгерген сайын автоматты түрде өзгереді, бұл оларға жауап беретін веб-сайттарға арналған тамаша бағдарлама. Осы «кірістірілген блок» стилінде орнына 3 дивизияның әрқайсысы мазмұнның ерекше бағаны болады.
Бағанның енін пайдалану
Пайдалануға болатын «бағаннан басқа» басқа қасиет бар және сіздің орналасуыңыздың қажеттіліктеріне байланысты, ол сіздің сайтыңыз үшін жақсы таңдау болуы мүмкін. Бұл «баған ені». Бұрын көрсетілгендей HTML түзетулерін пайдалану арқылы біз мұны біздің CSS-мен жасай аламыз:
.content {-moz-баған ені: 500px; -webkit-баған ені: 500px; баған ені: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; } .content div {display: inline-block; } Бұл жұмыс істеу тәсілі браузер бұл бағанды «баған енін» осы бағанның ең үлкен мәні ретінде пайдаланады. Сондықтан браузер терезесі ені 500 пиксельден аз болса, бұл 3 бөлімше бір бағанда, басқа бірінің шыңында көрінеді. Бұл мобильді / кішкентай экран орналасуларына арналған әдеттегі орналасу.
Браузер ені көрсетілген бағанның бос орындарымен қатар 2 бағанға сəйкес болу үшін жеткілікті үлкен болған сайын, браузер автоматты түрде бір бағаннан екі бағанға өтеді. Экранның енін көбейте беріңіз және ақыр соңында, сіз 3 баған дизайны аламыз, әрқайсысы біздің 3 бөлімнен өз бағанында көрсетіледі. Тағы да, бұл жауапты, көп құрылғыға ыңғайлы орналасуды алудың тамаша тәсілі және сіз тіпті макет мәнерлерін өзгерту үшін медиа сұрауларын пайдаланудың қажеті жоқ!
Басқа баған сипаттары
Мұнда қамтылған сипаттардан басқа, бағандар арасында ереже жасауға мүмкіндік беретін түс, мәнер және ені мәндерін қамтитын «баған-ереже» үшін қасиеттері бар. Егер бағандарыңызды бөліп алатын кейбір сызықтар болса, олар шекаралардың орнына пайдаланылады.
Эксперимент уақыты
Қазіргі уақытта CSS көп деңгейлі баған орналасуы өте жақсы қолдау. Префикстермен веб-пайдаланушылардың 94% -дан астамы осы стильдерді көре алады, ал қолдау көрсетілмейтін топ шынымен Internet Explorer-дің көне ескі нұсқалары болар еді.
Осы деңгейдегі қолдаудың арқасында, CSS бағандарымен эксперимент жасамауға және осы стильдерді өндіріске дайын веб-сайттарға енгізудің қажеті жоқ. Осы мақалада ұсынылған HTML және CSS-ті пайдалана отырып, эксперименттеріңізді бастауға және әр түрлі мәндермен ойнай аласыз, бұл сіздің сайтыңыздың орналасу қажеттіліктері үшін не жақсы болатындығын көре аласыз.
Келе жатқан оқиғалар
Мазмұн мына жерде ...
p>
Осы бірнеше бағандарды жасау үшін CSS бұрын көргендеріңізден басталады:
.content {-moz-баған-саны: 3; -webkit-бағанның саны: 3; бағанның саны: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; }Енді браузер бұл мазмұнды біркелкі бөліп алғысы келгендіктен, осы бөлімшелердің мазмұны әртүрлі болса, бұл браузер шынымен жеке бөлімнің мазмұнын бөліп, оны бір бағанға қосып, содан кейін тағы біреуін жалғастырыңыз (мұны эксперимент жүргізу үшін осы кодты қолданып көріп, әрбір бөлім ішіндегі әртүрлі мазмұн ұзындықтарын қосыңыз)!
Бұл сіз қалаған нәрсе емес. Сіз осы бөлімшелердің әрқайсысын ерекше баған жасауды және жеке бөлімнің мазмұнын қаншалықты үлкен немесе кішкентай болсын десеңіз де, оны бөліп алғыңыз келмейді. Бұған CSS-дің қосымша бір жолын қосу арқылы қол жеткізуге болады:
.content div {display: inline-block; }Бұл браузер оны бірнеше бағандарға бөлсе де, «мазмұнның» ішіндегі бөлімдерді өзгеріссіз сақтауға мәжбүр болады. Тіпті одан да жақсы, өйткені мұнда тіркелген ені ештеңе бермегендіктен, бұл бағандар шолғыш өлшемі өзгерген сайын автоматты түрде өзгереді, бұл оларға жауап беретін веб-сайттарға арналған тамаша бағдарлама. Осы «кірістірілген блок» стилінде орнына 3 дивизияның әрқайсысы мазмұнның ерекше бағаны болады.
Бағанның енін пайдалану
Пайдалануға болатын «бағаннан басқа» басқа қасиет бар және сіздің орналасуыңыздың қажеттіліктеріне байланысты, ол сіздің сайтыңыз үшін жақсы таңдау болуы мүмкін. Бұл «баған ені». Бұрын көрсетілгендей HTML түзетулерін пайдалану арқылы біз мұны біздің CSS-мен жасай аламыз:
.content {-moz-баған ені: 500px; -webkit-баған ені: 500px; баған ені: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; } .content div {display: inline-block; }Бұл жұмыс істеу тәсілі браузер бұл бағанды «баған енін» осы бағанның ең үлкен мәні ретінде пайдаланады. Сондықтан браузер терезесі ені 500 пиксельден аз болса, бұл 3 бөлімше бір бағанда, басқа бірінің шыңында көрінеді. Бұл мобильді / кішкентай экран орналасуларына арналған әдеттегі орналасу.
Браузер ені көрсетілген бағанның бос орындарымен қатар 2 бағанға сəйкес болу үшін жеткілікті үлкен болған сайын, браузер автоматты түрде бір бағаннан екі бағанға өтеді. Экранның енін көбейте беріңіз және ақыр соңында, сіз 3 баған дизайны аламыз, әрқайсысы біздің 3 бөлімнен өз бағанында көрсетіледі. Тағы да, бұл жауапты, көп құрылғыға ыңғайлы орналасуды алудың тамаша тәсілі және сіз тіпті макет мәнерлерін өзгерту үшін медиа сұрауларын пайдаланудың қажеті жоқ!
Басқа баған сипаттары
Мұнда қамтылған сипаттардан басқа, бағандар арасында ереже жасауға мүмкіндік беретін түс, мәнер және ені мәндерін қамтитын «баған-ереже» үшін қасиеттері бар. Егер бағандарыңызды бөліп алатын кейбір сызықтар болса, олар шекаралардың орнына пайдаланылады.
Эксперимент уақыты
Қазіргі уақытта CSS көп деңгейлі баған орналасуы өте жақсы қолдау. Префикстермен веб-пайдаланушылардың 94% -дан астамы осы стильдерді көре алады, ал қолдау көрсетілмейтін топ шынымен Internet Explorer-дің көне ескі нұсқалары болар еді.
Осы деңгейдегі қолдаудың арқасында, CSS бағандарымен эксперимент жасамауға және осы стильдерді өндіріске дайын веб-сайттарға енгізудің қажеті жоқ. Осы мақалада ұсынылған HTML және CSS-ті пайдалана отырып, эксперименттеріңізді бастауға және әр түрлі мәндермен ойнай аласыз, бұл сіздің сайтыңыздың орналасу қажеттіліктері үшін не жақсы болатындығын көре аласыз.