Тураллара: CSS-макети

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

айтуусун текстти тегиздөө

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

• текстти тегиздөө: борбору;

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

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

Кииннэммит блогу

Сен ортосунда курс трассаны коюп келсе, CSS бир топ жакшы жолун сунуш кыла алат: тышкы билмейинче маржасын колдонуу. Padding бөгөттөөлөр элементтери жана сап-блок катары көрсөтүлүшү мүмкүн. Svoysva балл 0 (тик толтургучтар), жана унаам (туурасынан автоматтык чегинүү) болушу керек:

• маржа: 0 унаам;

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

блогунун сол же оң четинде келтирүү

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

• .left {жадымда: сол;}
• .right {жадымда: оң}

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

• .left {жадымда: сол;}
• .right {жадымда: оң}
• колонтитул {айкын: эки}

түздөлгөн материалы жалпы агымындагы чыгып кетип, оң кулагандан класстары менен, башкача айтканда, бардык башка элементтер элементтердин бар экенин эске алынбайт. Менчик айкын: эки агымы клеткалардан тундурулган колонтитул жыгылуусуна же кандайдыр-бир башка көзгө берет, сол жана оң экөөндө Көл (сүзүү) тыюу салынат. Ошондуктан, биз, мисалы, төмөнкү колонтитул төмөндөө которгон жатат.

тигинен тегиздөө

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

• жогорку чек тегиздөө - .Балдарды {тике тегиздөө: чокусу};
• Ортодо - .Балдарды {тике тегиздөө: орто};
• Төмөнкү чектин тегиздөө - .Балдарды {тике тегиздөө: төмөнкү};

бөгөттөөлөр элементтердин аудио текстти тегиздөө, же тике тегиздөө колдонулбайт.

түздөтүлгөн бирдик менен мүмкүн болгон кыйынчылыктар

Кээде CSS-жол борборуна тегиздөө DIV бир аз кыйналып калышы мүмкүн. Мисалы, калкып колдонууда: мисалы, үч блоктор бар: .Биринчиден, .Экинчиден жана таркатылат. экинчи жана үчүнчү блоктору биринчи жатышат. класстын менен бир элемент экинчи солго түздөлгөн жана акыркы бөлүгү - укугуна. эки арыктан түшүп ылайыкташтырууга кийин. аталык элемент бийиктигин аныкталган эмес болсо, (мисалы, 30em), ал туунду бирдиктеринин бийиктигин сунуп, жок болот. Бул катаны алдын алуу үчүн, "тъзългён" колдонууга - .Экинчиден жана адептик көргөн өзгөчө бирдик. CSS-коду:

• .Экинчи {сүзүп: сол}
• .Үчүнчүдөн {жадымда: оң}
• .clearfix {бийиктиги: 0; түшүнүктүү: экөө тең;}

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

• .left {жадымда: сол}
• .right {жадымда: оң}
• .container: кийин {мазмуну: ''; дисплей: стол; түшүнүктүү: экөө тең;}

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

Дагы бир маселе көп жайгашуусун кездешкен - Кыргыз-блок элементтерин трассаны. алардын ар бири кийин орун түрдө кошулат. Handle терс кемтиги менен аныкталат маржа мүлкүн берет. Мисалы, кайра, аз көп колдонулган башка жолдору бар Тамганын көлөмүн. Бул учурда, ата-эне элементтердин касиеттери арип өлчөмү каттады: 0. Тексттин блокторду чегинде жайгашкан болсо, сап-блок элементтердин касиеттери каалаган ариптин өлчөмүнө кайтып келишти. Мисалы, арип өлчөмү: 1em. ыкма дайыма эле ыңгайлуу боло бербейт, ошондуктан, ал тышкы айырмачылык менен ого бетер көп нускасын колдонулат.

жалпы жайгашуусун жана жайгашуусу, жана дүкөндөрдө жүк жайгашкан, жана бир аз сайтында сүрөттөрүн: Blocks тегиздөө сизге сулуу жана иш барактарын түзүүгө мүмкүндүк берет.