көп жылдар бою, CSS салга сайтында долбоорду түзүүдө оюндагыдай, бирок, зарыл компоненти болуп келген. Сиздин долбоор бир нече мамычалардын деп атап жатса, анда сен сал кайрылган . көйгөй менен ушул ыкма желе дизайнерлери бул укмуш акылына карабай, деп / иштеп комплекстүү сайт долбоорду түзүү боюнча көрсөтүп, CSS салга чынында эле ушундай жол менен колдонууга арналган эмес.

салга жүктөп жана CSS ханан келип, көп жылдан бери интернет долбоордо бир жерде сөзсүз болот, ал эми, анын ичинде CSS тармагы акыркы жасалгалоо ыкмалары жана Flexbox азыр интернет дизайнерлер өздөрүнүн сайтын долбоорду түзүү үчүн жаңы жолдорун берип жатабыз. дараметин өкчөмө таш дагы бир жаңы катмары ыкмасы CSS нече Columns болуп саналат.

CSS-тилкелерде эми ​​бир нече жылдан бери болуп келатат, бирок, улуу браузерлер (Internet Explorer негизинен улгайган котормолорунда) колдоонун жоктугу, аларды өндүрүштүк ишине бул стилдерди колдонуудан баш тартып, көптөгөн интернет адистерди сактап калды.

IE ошол эски котормолорунда колдоо жыйынтыгы менен, кээ бир интернет дизайнерлери азыр киргизилген жаңы CSS тусун, CSS катардан эксперимент жана алар сал менен караганда, бул жаңы ыкмалар менен көбүрөөк көзөмөл бар экенин таап.

CSS мамычалар негиздери

Анын аталышынын өзү эле, CSS көп тилкелерде (ошондой эле CSS3 көп тилке жайгашууда катары белгилүү) бул катардан бир нече мазмунду бөлүнүп мүмкүнчүлүк берет. сиз колдоно турган негизги CSS касиеттери бар:

• бардык мамычаларды бөлүп-саны
• бардык мамычаларды бөлүп-ажырым

бардык мамычаларды бөлүп-эсептөө үчүн, сиз каалаган мамычаларынын санын аныктайт. бардык мамычаларды бөлүп ажырым Ошол түркүктүн ортосуна желип же аралыгы болот. Серепчи бул баалуулуктарды жана сиз көрсөткөн мамычаларга санына кирген да бир калыпта мазмунду бөлүү талап кылынат.

иш жүзүндө CSS нече тилкеде жалпы мисалы сиз гезити макалада эмне сыяктуу бир нече мамычаларга, кирип текст мазмунунун блокту бөлүп болот. төмөнкү HTML Өмүрдү бар деп (мисал үчүн экенин белгилеп, мен иш жүзүндө, кыязы, бул белгилери боюнча мазмунду бир нече пункттары болмок эмес, бирок ошол эле учурда, бири-пунктунун башталышы берип жатам):

<ОРУСИЯ = "мазмун">

Сиздин макаланын аталышы <б> Бул жерде текстти пункттарында көп дейли ...

Эгер сиз бул CSS стилдерди мындай деп жазган:

.Алар {-moz-тилке-саны: 3; -webkit-тилке-саны: 3; бардык мамычаларды бөлүп-саны: 3; -moz-тилке-ажырым: 30px; -webkit-тилке-ажырым: 30px; бардык мамычаларды бөлүп-ажырым: 30px; }

Бул CSS эреже алардын ортосундагы 30 пиксел ажырымдын менен 3 барабар мамычаларга "мазмун" бөлүнүп-бөлүнүп турган. Эгер ордуна 3 ичинен эки бөлүккө келсе, сиз жөн гана баасын жана браузер калыпта мазмунду бөлүнүп ошол мамычаларынын жаңы кендигинин эсептээрин өзгөрмөк. Кабарлоо биз эмес жакка арыздар менен, биринчи кезекте соода-жакка касиетин колдонуу керек.

Бул, чынында эле, жеңил, ушундай жол менен аны пайдалануу сайты пайдалануу үчүн шектүү болуп саналат. Ооба, силер бир нече мамычаларга мазмуну бир тутам бөлүүгө болот, бирок, бул тилкеде бийиктиги экрандын "кой", төмөн түшүп, айрыкча, интернет үчүн мыкты окуу тажрыйбасы болушу мүмкүн эмес.

Окурмандардын анда толук мазмунду окуу үчүн өйдө-ылдый жылдырып керек. Анткен менен, CSS-тилкелерде негизги Силер бул жерде көрүп сыяктуу жеңил, ал эми жөн эле караганда алда канча көптү кыла колдонсо болот, кээ бир пункттар боюнча мазмунду экиге - бул, чынында эле, жайгаштыруу үчүн колдонсо болот.

CSS катардан жайылмасын көрүү

Сиз мазмундагы 3 тилкелер мазмун аянты сайтыбызды бар экенин айт. Бул өтө мүнөздүү сайты жайгашуусу болуп саналат, ал эми 3-бөлүккө жетүү үчүн, адатта, бар бөлүнүүлөрдү сүзүп жүрүшмөк. CSS нече тилкеде менен, ал абдан кыйын болот.

Бул жерде кээ бир үлгү HTML болуп саналат:

<ОРУСИЯ = "мазмун"> <ОРУСИЯ = "жаңылык">

Акыркы кабарлар <б> бул барып турган мазмун ... <бөлүү> <ОРУСИЯ = "блог">

Биздин Blog <б> Мазмун жакка барып ... <бөлүү> <ОРУСИЯ = "окуялар">

Алдыда Events <б> Мазмун ... бул жерге барып, <бөлүү>

Бул бир нече бөлүккө үчүн CSS буга чейин көрүп, эмне менен башталат:

.Алар {-moz-тилке-саны: 3; -webkit-тилке-саны: 3; бардык мамычаларды бөлүп-саны: 3; -moz-тилке-ажырым: 30px; -webkit-тилке-ажырым: 30px; бардык мамычаларды бөлүп-ажырым: 30px; }

Эми, бул жерде маселе Серепчи бул мазмунду бир калыпта жайгашкан, ошондуктан бул бөлүмдөрдүн мазмуну узундугу ар түрдүү болсо, ал серепчи иш жүзүндө бир колонна үчүн башталышы кошуп, жеке бөлүмүнүн мазмуну бөлүнөт бөлүп жаргысы келсе аны тартып, башкача айтканда, андан кийин башка уланууда (Эгер мындай бир эксперимент жана ар бир бөлүк ичиндеги мазмуну ар кандай барарын кошуу үчүн бул кодду колдонуп көрүүгө болот)!

Бул сиз каалаган эмес. Сиз бул бөлүнүп келбейт Бул бөлүмдөрдүн ар кандай гана чоң болобу, кичине жеке бөлүмүнүн мазмун болушу мүмкүн, а так мамычаны түзүү жана, келет. Сиз CSS бул кошумча бир сапты кошумчалоо менен жетүүгө болот:

.Алар бөлүү {дисплей: саптагы бөгөттөө; }

Бул браузер бул бир нече тилкеде, бөлүнүшү да сакталып кала үчүн "Content" ичинде болуп саналган жик мажбур кылат. Да жакшы, биз бир нерсе туруктуу туурасын берген эмес, анткени, бул рубрика жазуусу браузер аларга үчүн идеалдуу арыз кабыл алуу, ошондой эле resizes өлчөмдү турган сезимтал сайттардын . жерде "саптагы бөгөттөө" стили менен, 3 бөлүмдөрдүн ар мазмуну өзүнчө тилке болуп калат.

Тилке-Width колдонуу

сиз колдоно аласыз "бардык мамычаларды бөлүп-эсептөө" башка дагы бир туура эмес, жана жайгашуу муктаждыгына жараша, ал, чынында, сиздин сайтка жакшы тандалган болушу мүмкүн. Бул "бардык мамычаларды бөлүп-туурасы" болот. Жогоруда көрсөтүлгөн сыяктуу эле, HTML Өмүрдү колдонуп, анын ордуна биздин CSS менен мындай кылышы мүмкүн:

.Алар {-moz-тилке-туурасы: 500px; -webkit-тилке-туурасы: 500px; бардык мамычаларды бөлүп-туурасы: 500px; -moz-тилке-ажырым: 30px; -webkit-тилке-ажырым: 30px; бардык мамычаларды бөлүп-ажырым: 30px; } .Алар бөлүү {дисплей: саптагы бөгөттөө; }

бул иш ушундай жол менен серепчи ошол тилкенин максималдуу мааниси бул "бардык мамычаларды бөлүп-туурасынан" колдонгон болот. серепчи терезеси 500 пиксел кенен болсо да, бул 3 бөлүнүүчүлүк бир тилкеге ​​пайда болмок, башка чокуларынын биринде. Бул мобилдик / чакан экран катмары үчүн колдонулган типтүү катмар болуп саналат.

Серепчи туурасы көбөйөт көрсөтүлгөн мамыча кемчиликтер менен бирге 2-тилке бата турганчалык көп болушу керек эле, браузер дароо эки тилкеде бир мамыча жайгашууда чейин созулат. экрандын бардык жазылыгын жогорулатуу болгула, акыр-аягы, алардын өз тилкеде көрсөткөн биздин 3 бөлүмдөрдүн ар бир 3-мамыча долбоорду алат. Дагы, бул бир нече жооп алуу үчүн көп жолу көп түзмөк достук долбоорлор, жана да колдонуунун зарылдыгы жок медиа суроо жасалгалоо стилин өзгөртүү үчүн!

Башка Тилке касиеттери

Бул жерде камтылган касиетинен тышкары, сиз түркүктүн ортосуна эрежелерди түзүү үчүн, анын ичинде түс, "бардык мамычаларды бөлүп-эреже" да касиеттери бар, стили, туурасы баалуулуктарды берет. Эгер мамычаларды бөлүп айрым саптар бар келсе, бул анын ордуна чек колдонулат.

Убакыт экспериментке

Учурда, CSS Бир нече тилкеде жайылмасын абдан жакшы колдоого алынат. жардамы менен, интернет колдонуучулардын 94% дан ашыгы бул стилдерди көрө турган жана колдоого алынбай топ чынында эле баары мындан ары колдоого алынышы мүмкүн эмес Internet Explorer көп улуу нускалары болмок.

азыр жерде колдоо бул денгээлинде менен, CSS катардан эксперимент жана өндүрүштүк даяр сайттарында ушул стилде жайгаштыруу баштоо үчүн эмес, эч кандай себеп жок. Бул макалада берилген HTML жана CSS аркылуу тажрыйба баштоо жана сайттын жайгашуусу муктаждыктары үчүн мыкты иштеп болорун көрүш үчүн, ар кандай баалуулуктарга айланып ойной алат.