Мазмұны
- 01. Торлы жүйелердің белгілі болуы
- 02. Тордан бізге не қажет
- 03. Жұмысты бастау
- 04. Оны сезімтал ету
- 05. іліңіз. Бұл мағыналық емес
- 06. Келесі қадамдар
- Ұнады ма? Оларды оқыңыз!
- Қажетті білім: Орташа CSS, аралық HTML
- Қажет: Код редакторы, шолушы
- Жоба уақыты: 1 сағат
- Қолдау файлы
Веб-сайттарды құру, шынын айтқанда, керемет. Біз бүкіл әлем бойынша жүздеген, мыңдаған, миллиондаған адамдар көретін бай, динамикалық тәжірибе жасаймыз. Біз жаңа ойыншықтармен ойнауға, барлық ең жақсы компаниялармен жұмыс істеуге және ақымақтыққа тап болмай шығуға дайынбыз (оның шындық екенін білесіз). Бұл жақсы нәрсе.
Нашарлығы (жарайды, қиын) - біз бұрынғыдан гөрі көбірек және көп түрлердегі браузерлер мен құрылғылармен күресуіміз керек және күрделі және толыққанды сайттар құруымыз керек. Сондықтан бізге торлы жүйелер қажет. Олар бізге заттарды тезірек және жақсырақ салуға және біздің саланың болашағын ескере отырып көмектеседі. Қазіргі заманғы электр жүйесіне не қажет екенін қарастырайық, содан кейін оны құрыңыз.
01. Торлы жүйелердің белгілі болуы
Торлар жаңа емес. Консервативті түрде бірнеше ондаған өміршең торлар жүйесі бар, олар сізге жұмыстарды аяқтауға көмектеседі. 960.gs, Blueprint, Bootstrap, 320 және одан жоғары, Golden Grid, semantic.gs ... және т.с.с., ad nauseam сияқты нәрселер бар. Әрқайсысы үстелге бірдеңе әкеледі, әрқайсысы қалаған нәрселерін қалдырады.
Торлардың өте танымал болу себебі - олардың жұмыс істеуі. Интернеттің орналасуын жасаған кезде, 10-дан тоғыз рет икемді тор жүйесі сіздің орналасуыңыздың 90 пайызын алады және жеке кодтау уақытын үнемдейді. Торлы жүйелер біздің ойлауымызды шектеп, бізді аулақ болуымыз керек нәрселерге мәжбүрлейді деген заңды алаңдаушылық бар, бірақ кішкене тәртіп пен берік дизайн процесінің арқасында біз бұған жол бере алмаймыз.
02. Тордан бізге не қажет
Торлы жүйеден не іздейміз? Мұнда қарастыратынымыз - кез-келген мәселені шешу емес, бірақ бұл мәселеге шабуыл жасаудың болашақты ойластыратын (және өте керемет) тәсілі.
Біздің тордан бізге не қажет:
- Бізге нақты макеттер үшін икемділік қажет. Бізде мүмкін орналасу талаптарының көп бөлігін жабуға мүмкіндік беретін конфигурацияда жеткілікті бағандар болуы керек. Бұл дегеніміз, көптеген топтарға өте түйіршіксіз бөлінетін нәрсе. Біздің бүгінгі мақсатымыз үшін біз 12. пайдаланамыз, бұл бетті екіге, үштен және төрттен екі бөлікке бөлуге мүмкіндік береді.
- Біз торды ұяға сала білуіміз керек. Бағандардың бір деңгейі бізге сол жолдың бір бөлігін береді, бірақ N деңгейіне дейін ұялауға болатын нәрсе сізге керемет икемділік береді.
- Бізге жауап беру үшін тор қажет. Бұл сол жақтан шыққан сияқты көрінуі мүмкін, бірақ маған сеніңіз, бұл талап. Сіздің сайтыңызға қолдау көрсетуге қажет жүздеген түрлі құрылғылар бар және олардың саны өсуде. 960 тор қайтыс болды, ал жақсы редданс. Біздің тор сұйық болуы керек (пайызға негізделген) және кішігірім құрылғыларға масштабтау үшін конфигурацияланған болуы керек.
- Бізге өзгертілетін тор қажет. Жауапты тор жүйесін пайдаланушылардан болатын ең үлкен шағымдардың бірі - суағар өлшемі сияқты заттарды өзгертудің қиындығы. 4,4% -дан 3,6% -ға дейінгі арықтардың өзгеруіне негізделген пайыздық көрсеткіштерді қайта есептеу - бұл бір сағат жұмсаудың көңілді тәсілі емес. Біз мұны сәл талқылайтын салыстырмалы түрде аз пайдаланылатын CSS сипатын пайдалану арқылы орналастырамыз. Бұл өте керемет.
- Бізге тор артқа үйлесімді болуы керек. Бір нүктеге. Бүкіл әлем Chrome немесе iOS5 Mobile Safari қолданбайды. Айтуынша, біздің бүгінгі мақсатымыз Android, iOS 4+, Webkit браузерлері, Firefox және IE8 + үшін қолдау болады.
03. Жұмысты бастау
Бастау үшін бізге бос CSS файлы қажет тор. Біз бұл файлды торға қолданамыз, сондықтан оны кез-келген жобаға тастауға болады. Қосымша ескерту ретінде, біз бүгін салып жатқан тор 3-қорда қолданылған торға дәл (немесе өте жақын) болады (қазіргі уақытта 2.2.1-де).
Алдымен, торға синтаксис құрайық (бұл өте қарапайым). Негізінде, біз бағандарды ұстайтын жолдар жасаймыз. Біз бұл сөздерді адамның оқылымын сақтау үшін қолданамыз.
.қатар { }
.баған, .бағандар {}
.row .one {}
.row .two {}
.row .three {}
.өс. төрт. {}
.row .five {}
.row .six {}
.row .seven {}
.row .eight {}
.row .nine {}
.row .ten {}
.row. он бір {}
.row .twelve {}
Осы бос декларациялар арқылы сіз біздің синтаксистің HTML-де қандай болатынын көре аласыз. Көлемі үш бірдей бағаннан тұратын жол құру үшін біз мынаны жасаймыз:
div>
div>
...
/ div>
div>
...
/ div>
div>
...
/ div>
/ div>
Бұл бағандардың әрқайсысында біз кез келген ерікті мазмұн болуы мүмкін. Енді сол бағандар мен жолдар нақты жұмыс істеуі керек. Бұл қасиеттерді .қатар және .баған, .бағандар декларациялар:
.row {ені: 1000px; максималды ені: 100%; минималды ені: 768px; маржа: 0 автоматты; }
. баған,. бағандар {өзгермелі: сол жақта; мин-биіктігі: 1px; төсеме: 0 15px; позиция: салыстырмалы; }
Жарайды, мұнда не болып жатқанын түсіндірейік:
- Жол ені: Жол элементінде біз жолдың енін 1000px етіп орнаттық (біздің негізгі парақтың ені). Сонымен қатар, біз максималды ені 100% деп айттық, яғни браузер кішірейген кезде (мысалы, iPad немесе iPhone-да) жол терезенің енінен аспауы керек. Біздің минималды еніміз IE8-де жолдардың кішігірім болмауын қамтамасыз етеді, бұл медиа сұраныстарға қолдау көрсетпейді.
- Жол шегі: Маржаны орнату арқылы: 0 автоматты түрде біз өз қатарларымызды параққа орналастырдық.
- Бағанды орналастыру: Біздің бағандар дәл қазір солға жылжытылған, сондықтан олар бір-біріне қарсы тұрады.
- Мин биіктігі баған: Min-height қасиеті бос бағанның өзгермелі тәртіпке әсер ететіндігіне көз жеткізеді.
- Баған төсемесі: Бұл толтырғыш қасиеті шын мәнінде біздің бағананың шұңқыры болып табылады. Оны 15px деңгейіне орнату арқылы біз бағанның сол жағында және оң жағында 15px қойып, бағандар арасында 30px арықтар жасаймыз.
Бұл біздің тордың жұмыс істеуі үшін қажет нәрсенің бір бөлігі ғана екені анық. Біздің бағандарымыздың енін жариялауымыз керек екені анық. Бізде 12 баған торы болғандықтан, бұл ендер 100-ге пайызбен, 12-ге бөлінген бағандардың саны болып табылады. Мысалы: 6/12 = 0,5, 50%. Біздің ендер келесідей:
.row .one {ені: 8.33%}
.row .two {ені: 16.66%}
.row .three {ені: 25%}
.row .four {ені: 33.33%}
.row .five {ені: 41.66%}
.row .six {ені: 50%}
.row .seven {ені: 58.33%}
.row .eight {ені: 66.66%}
.row .nine {ені: 75%}
.row .ten {ені: 83.33%}
.row .eleven {ені: 91.66%}
.row .twelve {ені: 100%}
Біздің бағандардың ені олардың баған санымен анықталатын өлшемді көрсетеді. Сіз қалай ойлайсыз: «егер біз олардың бағандарын олардың 100-ге бөлінуіне қарай жасасақ, оларға төселген төсем оларды кеңейтіп, торымызды бұрап алмаймыз ба?» Әдетте, иә. Мұның біз әлі сыни бөлігін қарастырайық, және сіз парақтың барлық элементтері үшін қарапайым декларацияны ұсынасыз:
* {қорап; қорап өлшемі: жиек қорабы; }
Бұл кішкентай мүлік біз үшін керемет әрі ирониялық нәрсе жасайды. Онда айтылғандай, беттегі элементтер объектінің еніне төсемдер мен шекараларды қоспауы керек, керісінше оларды еннің бөлігі ретінде қарастыруы керек.Осылайша, ені 50% және төсемі жоқ нысан ені 50% енімен және ішкі толтырғышпен 15px енімен бірдей болады. Өте жақсы?
Иә. Салқын. Бұл сонымен қатар IE6 қорап моделі. Ирондық, дұрыс па? Осы уақыт ішінде және мұның бәрі IE6-ны жояды (және бұл дұрыс) және соңында IE6 қорап моделін кез-келген келесі шолғышқа қарағанда әлдеқайда ақылға қонымды түрде өңдеді. Бұл үшін W3C-ге рахмет. Бұл CSS қасиетінсіз немесе IE6 қорап моделінсіз 50% ені бар, бірақ 15px толтырғышпен объектіні құру мүмкін емес. (Ескерту: толығымен дұрыс емес. Бірақ қолдау кальк () CSS-те дәл қазір жоқ.)
Енді мұның шынымен жұмыс істеуі үшін бізге жеткізушінің префикстелген қасиеттері қажет (iOS 4 оны қолдамайды) -вебкитжәне Firefox қажет -moz). Толық декларация келесідей:
* {-moz-box-sizeing: border-box; -webkit-box-sizeing: border-box; қорап өлшемі: жиек қорабы; }
Егер сіз әрі қарай шекара қорабына сүңгуді қаласаңыз, Пол Ирланд шекара қорабын барлық нәрсеге пайдаланудың артықшылықтары туралы керемет пост жазды.
Біраз жұмсақ бөліктерге сүңгіп кетпес бұрын, еске түсірейік. Біздің тор дәл қазір келесідей болуы керек:
* {-moz-box-sizeing: border-box; -webkit-box-sizeing: border-box; қорап өлшемі: жиек қорабы; }
.row {ені: 1000px; максималды ені: 100%; минималды ені: 768px; маржа: 0 автоматты; }
. баған,. бағандар {өзгермелі: сол жақта; мин-биіктігі: 1px; төсеме: 0 15px; позиция: салыстырмалы; }
.row .one {ені: 8.33%}
.row .two {ені: 16.66%}
.row .three {ені: 25%}
.row .four {ені: 33.33%}
.row .five {ені: 41.66%}
.row .six {ені: 50%}
.row .seven {ені: 58.33%}
.row .eight {ені: 66.66%}
.row .nine {ені: 75%}
.row .ten {ені: 83.33%}
.row .eleven {ені: 91.66%}
.row .twelve {ені: 100%}
Жетістікке жету, бірақ бұл әлі жұмыс істемейді. Біріншіден, торды ұя салуды қолдайтын етіп реттейік. Біз пайыздық мөлшерлемені пайдаланып отырғандықтан, бұл өте қарапайым. Кез-келген кірістірілген жолда белгілі бір анықтамалар болады, әйтпесе ... жұмыс істейді. Осы жолды кейіннен қосыңыз .қатар декларация:
.row .row {ені: авто; макс-ені: жоқ; мин-ені: 0; маржа: 0 -15px; }
Мұндағы жалғыз күрделі нәрсе - біз қатарға оң және сол жақ шеттерін орнатамыз. Мұны біз контейнер қатарында, сондай-ақ кірістірілген бағандарда толтырғыш бар болғандықтан жасаймыз, бірақ біз сол толтырғышта екі еселенгіміз келмейді, әйтпесе кірістірілген жолдарымыз шегінетін болады. Теріс шеті мен ені: авто дегеніміз, жол бағанның қаптамасынан тыс, контейнер қатарының шеттеріне дейін кеңейеді.
Ұя салуды қолдау үшін бізге қажет нәрсе осы. Енді бізде HTML-де келесідей синтаксис болады:
div>
div>
div>
div>
...
/ div>
div>
...
/ div>
/ div>
/ div>
div>
...
/ div>
div>
...
/ div>
/ div>
Бұл қарапайым өзгеріс біз үшін көптеген орналасу опцияларын ашады. Өкінішке орай, біздің торымыз әлі де тозаққа айналды, бірнеше өзгеріссіз. Әрі қарай, құрамында тек қалқымалы элементтер болғанына қарамастан, жолдар дұрыс жинақталғанына көз жеткізейік (бұл жолдың биіктігі жоқ дегенді білдіреді). Біз толып кетуді қолданғымыз келмейді: .қатар, бізге көлеңке сияқты нәрселер шығу керек болған жағдайда. Оның орнына мынаны қолданыңыз:
/ * Николас Галлахердің микротүзеткіші * * /
.row: бұрын, .row: кейін, .clearfix: бұрын, .clearfix: кейін {мазмұн: «»; дисплей: кесте; }
.row: after, .clearfix: after {clear: both; }
.row, .clearfix {масштабтау: 1; }
Көріп отырғаныңыздай, Николас Галлахерге осы код үзіндісі туралы деректемелер. Бұл біздің қатарларымыздың нақты биіктікке жетуін қамтамасыз етеді, ал бір-біріне қабаттасқан жолдар олардың бағандарымен қабаттаспайды немесе өкінішті ештеңе жасамайды. Бұл кесте дисплейлерінің мінез-құлқына, сондай-ақ мазмұнға тәуелді: әр жолда біздің флотты тазартатын нәрсе ұсынғаннан кейін.
Бұл жерде біздің тор нақты жұмыс істейді. Біз жолдар мен бағандарды жасай аламыз және оларды ерікті мазмұнмен толтыра аламыз - тіпті басқа жолдар. Соңғы нәрсе, торды шынымен тәтті етіп көрсетуге көмектесетін жақсы нәрсе. Осы жолдарды кейіннен кейін орналастырыңыз .баған, .бағандар декларация:
[класс * = «баған»] + [класс * = «баған»]: соңғы бала {қалтқы: оң; }
[класс * = «баған»] + [класс * = «баған»]. соңы {қалтқы: сол; }
Егер сіз бұрын осындай селекторларды қолданбаған болсаңыз, бұл ақылға қонымсыз көрінуі мүмкін. Бөліп көрейік:
- [класс * = ”баған”] - Бұл HTML атрибутының мәніне бағытталған сәл көрінетін селектор. Бұл жағдайда «класс» атрибуты. Негізінен класы бар кез келген HTML элементі қамтиды «Баған» осы жерде сәйкес келеді. Осы типтегі селекторларға өте мұқият болу керек, өйткені олар «бүйірлік баған» немесе «бүйірлік баған» класына сәйкес келеді.
- [класс * = ”баған”] + [класс * = ”баған”] - Бұл бауырлас селектор біз тек келген бағандарды мақсат еткіміз келетіндігін білдіреді кейін басқа баған. Бұл бізге бір бағанды, мысалы, бір орталықтандырылған бағанды немесе он екі баған блогын түсіруге көмектеседі.
- [класс * = ”баған”] + [класс * = ”баған”]: соңғы бала - Ақырында, бұл бізге тек қана қажет екенін білдіреді соңғы басқа бағаннан кейін келетін баған. Әйтпесе, біз жолдың біріншісінен басқа әр бағанды алатын едік.
- өзгермелі: оң - Бұл пайыздық ен торларына қатысты мәселені шешуге көмектеседі: браузерлер оларды дәл осылай дөңгелектемейді. Мұнсыз сіз жолдардың бірдей жерде аяқтала бермейтінін байқайсыз. Егер ені 66,66% болса, бұл 666,6 пикселді білдірсе, кейбір браузерлер әр уақытта осы мәнді еденге қояды (тек 666px, Chrome), ал кейбіреулері еден мен төбені бір-біріне дөңгелектелген етіп, келесіге төмен қарай және т.б. ауыстырады (Firefox), ал кейбіреулері алдымен пайыздық қабат. Соңғы бағанды оң жаққа жылжыту дегеніміз, арықтағы су пикселден немесе одан екі үлкенірек болғанымен, оң жақ шеті әрдайым бірдей болады.
- [класс * = ”баған”] + [класс * = ”баған”]. соңы - Сіз шынымен де соңғы бағанның әр уақытта дұрыс жүруін қаламауыңыз мүмкін. Егер сіз тек екеуімен қатар жасасаңыз .төрт баған оң жақта әдейі бос кеңістігі бар блоктар, оның қалқымайтындығына көз жеткізу үшін .end класын қосуға болады. Әдетте бұл ықтималдығы аз, сондықтан сіз оған бас тартуыңыз керек.
Ой! Бұл екі сызық үшін маңызды түсіндірме, бірақ олар CSS таңдаулы және аздап бұзылуға тұрарлық. Енді біз аяқтадық (әзірге). Қайталап көрейік. Біздің тор қандай болуы керек:
* {-moz-box-sizeing: border-box; -webkit-box-sizeing: border-box; қорап өлшемі: жиек қорабы; }
.row {ені: 1000px; максималды ені: 100%; минималды ені: 768px; маржа: 0 автоматты; }
.row .row {ені: авто; макс-ені: жоқ; мин-ені: 0; маржа: 0 -15px; }
. баған,. бағандар {өзгермелі: сол жақта; мин-биіктігі: 1px; төсеме: 0 15px; позиция: салыстырмалы; }
[класс * = «баған»] + [класс * = «баған»]: соңғы бала {қалтқы: оң; }
[класс * = «баған»] + [класс * = «баған»]. соңы {қалтқы: сол; }
.row .one {ені: 8.33%}
.row .two {ені: 16.66%}
.row .three {ені: 25%}
.row .four {ені: 33.33%}
.row .five {ені: 41.66%}
.row .six {ені: 50%}
.row .seven {ені: 58.33%}
.row .eight {ені: 66.66%}
.row .nine {ені: 75%}
.row .ten {ені: 83.33%}
.row .eleven {ені: 91.66%}
.row .twelve {ені: 100%}
/ * Николас Галлахердің микротүзеткіші * * /
.row: бұрын, .row: кейін, .clearfix: бұрын, .clearfix: кейін {мазмұн: «»; дисплей: кесте; }
.row: after, .clearfix: after {clear: both; }
.row, .clearfix {масштабтау: 1; }
Бұл қазіргі заманғы электр желісінің өлшемдеріне сәйкес келе ме? Тексерейік:
- Икемділік: Ия, жұмысты бітіру үшін бізде бағандар мен ұялар жеткілікті.
- Ұялау: Тексеріңіз, жоғарыдан қараңыз.
- Жауапты: Әзірше емес. Хм. Мұны істейік.
04. Оны сезімтал ету
Бұл оқулық үшін біз жауап берудің минимумын қарастырамыз: кішкене құрылғыларда торды сызықтау және әрбір бағанның біріншісінің үстіне жасау. Бұл үшін біз IE8-ден басқа барлық мақсаттарда қолдау көрсетілетін CSS3 медиа сұрауын қолданамыз:
@media экраны ғана және (максималды ені: 767px) {
...
}
Біз құрылғының медиа сұранысын iPad-қа қарағанда кішірек етіп сәйкестендіреміз (оның ені кез-келген бағытта, әдеттегі немесе торлы дисплейлерде 768px құрайды). Осы медиа-сұраудың ішінде біз басымдық беруіміз керек:
.row {ені: авто; мин-ені: 0; шеткі-сол жақ: 0; оң жақ шеті: 0; }
. баған,. бағандар {ені: авто! маңызды; өзгермелі: жоқ; }
. баған: соңғы бала,. бағандар: соңғы бала {өзгермелі: жоқ; }
[class * = «column»] + [class * = «column»]: last-child {float: none; }
.баған: дейін, .бағандар: бұрын, .бағандар: кейін, .бағандар: {мазмұн: «» кейін; дисплей: кесте; }
.баған: кейін,. бағандар: кейін {анық: екеуі де; }
Мұнда бізге көп нәрсені түсіндіру қажет емес: негізінен біз шолғышқа кішігірім дисплейде бағандарды жылжытпаңыз, ені минималды емес, шетін бермеңіз деп айтамыз. . Мазмұн мен экранның шеті арасындағы алшақтықты жасау үшін біз жоғарыдағыдай толтырғышқа сүйенеміз және жақсы бағалаған кезде әр бағандағы флотты тазалаймыз. Бұл біздің торды жинақтайды, ал қалған% -ды жобалау біз үшін қалады.
Жарайды, енді бақылау тізімінде қалай жүрміз:
- Икемділік: Әлі жақсы.
- Ұялау: Рок-н-ролл.
- Жауапты: Иә. Біз жасай алатын көп нәрсе бар (және Foundation 3 торында, Github-та біз жасаймыз), бірақ бұл қазірдің өзінде жұмысты аяқтайды.
- Өзгертілетін: Ия, оңай. Бағандардағы төсемді және жолдардағы теріс жиектерді өзгерте отырып, біз екі өлшеммен су ағызатын өлшемді өзгерте аламыз. Егер 24 бағандық тор қажет болса, қарапайым математика 1, 2, 3-ті он екіге емес, 24-ке бөледі. Тәтті.
- Артқа үйлесімді: Иә. қораптың өлшемі іс жүзінде IE8-ге дейін жұмыс істейді (сурет). IE7-де қораптың өлшемін қосу үшін қолдануға болатын мінез-құлық файлы бар, бірақ оның автоматты еніне қатысты кейбір маңызды мәселелер бар. Жақын арада шешіледі деп үміттенеміз - егер бұл болса, біздің торап IE7-ге кіруге дайын.
Және бұл дженга. Шығыңыз және тәтті макеттер жасаңыз.
05. іліңіз. Бұл мағыналық емес
Ия, олай емес. Сіз бізді алдыңыз. Мұнда бір нәрсе бар: сіз semantic.gs сияқты семантикалық (мәліметтерді таза бөлу және көрсету) тор жасай аласыз, бірақ бұл үшін Sass сияқты алдын-ала процессор қажет. Басқа құралға деген қажеттіліктен тыс (және, шын мәнінде, Sass және оған ұқсас құралдар өте жақсы), семантикалық тордың CSS шығуы, ашығын айтқанда, ақылсыз. Сіз оларды оқуға және өзгертуге мүмкіндік беретін үтірмен бөлінген селекторлармен немесе қайта-қайта қайталанатын қасиеттермен аяқтайсыз. Семантикалық керемет, келешекте бұл маңызды бола бастайды, бірақ біз қазір ол жерде емеспіз. Клиенттерге арналған жақсы сайт салу дегеніміз - тез және қайталанатын құрылысты салу, және сіз бұл туралы алаңдамай тез құра аласыз (тым көп).
06. Келесі қадамдар
Мықты, толық торлы жүйеге ығысу, дерек көздеріне тапсырыс беру, N-объектілі торлар, үш блоктық тор сияқты нәрселер қажет. Сіз бұл тордың толық нұсқасын Github-тен біле аласыз (және қажет болған жағдайда оның дамуын көріңіз). Foundation ашық көзі болғандықтан, осы тормен ойнаңыз, толығымен танысыңыз, содан кейін оны жақсартуға көмектесіңіз. Біздің индустрия күн сайын дамып келеді, оның құралдары да қажет.
Джонатан есінде сақталғанға дейін үлкен геик болды, ол сандық медиа дизайны мансабына дейін Prodigy-де ескі онлайн лабиринт ойынын ойнаудан басталды. Ол ZURB үшін Батыс жағалауына шыққанға дейін біраз уақыт Алабамада қаржылық қызметтерді бағдарламалық қамтамасыз етуде жұмыс істеді: www.zurb.com
Ұнады ма? Оларды оқыңыз!
- Қосымшаны қалай құруға болады
- Дәл қазір графикалық дизайн бойынша ақысыз бағдарламалық жасақтама!
- Brilliant Wordpress оқулығын таңдау
- Біздің сүйікті веб-қаріптеріміз - және олардың құны бір тиын емес
