Center сүрөттөр, текст жана сайттарды куруу бөгөттөөлөр элементтери
Эгер болсо, сайттарды түзүүнү үйрөнүп , аны үйрөнүү керек таралган ыкмаларды бир серепчи терезесинде ден айтуусун болот. Бул беттеги сүрөттү борборунда билдириши мүмкүн, же долбоордун бир бөлүгү катары аталыштар сыяктуу борбор-актаган текст болушу мүмкүн.
Ортодо сүрөт, текст же ал тургай, бүт баракчасына ушул көрүү карап ишке ашыруу үчүн туура жол менен колдонуу менен стилдерди (CSS) . Борборго үчүн касиеттери көбү 1.0 нускасына бери CSS болуп, алар менен катуу иш CSS3 жана заманбап интернет браузер .
Дизайн көптөгөн аспектилери сыяктуу эле, бир интернет-беттеги элементтер айтуусун CSS колдонуу үчүн бир нече жолдору бар. бул көрсөтмө карап жетүү үчүн CSS колдонуу үчүн бир нече ар кандай жолдор менен карап көрөлү.
HTML борбору элементтерге CSS колдонуу боюнча жалпы жөнүндө
CSS менен борборунда бир көрүнөө стилди ишке ашыруу үчүн көптөгөн ар кандай жолдор бар, анткени желе дизайнер баштап үчүн кыйынга турушу мүмкүн. ыкмаларынын ар түрдүүлүгү бардык ыкмалары ар бир элементи боюнча иштеген жок экенин жакшы же тажрыйбалуу желе иштеп чыгуучулары болушу мүмкүн, ал эми бул ыкмалардын ар кайсы ыкманы колдоно билиши керек дегенди билдирет, анткени акыркы интернет адистер үчүн аябай кыйын болушу мүмкүн. эмне жакшы нерсе бир нече ыкмаларды бир түшүнүккө ээ болуп саналат. сен аларды колдоно баштайт, сен кайсы учурларда кайсы ыкмасы жакшы иштейт билебиз.
жогорку де гээлде, сиз CSS менен колдоно аласыз:
- Center текст
- блок-даражадагы элементи борбору (бир бөлүмү сыяктуу)
- сүрөттү Center
- Тик бир тууганыбыздын жыгылуусуна же сүрөттү бурабыз
Көп (көп) жыл мурун, интернет дизайнерлер сүрөт жана текст айтуусун <борбору> элементин тийиши мүмкүн, бирок ал HTML элемент азыр эскирип калган жана мындан ары азыркы интернет браузерлерде колдоого алынат. Бул сиз барактар туура чагылдырууга жана заманбап стандарттарга ылайык келсе, бул HTML элемент менен качышыбыз керек дегенди билдирет! заманбап сайттар түзүлүшү жана стили так бөлөк болушу керек, анткени, бул элемент эскирип калган себеби, чоң бөлүгү болуп саналат. HTML CSS стили жаздырып жатканда түзүмүн түзүү үчүн колдонулат. борборго элементтин көрүп өзгөчөлүгү (ал эмне эмес көрүнөт) болгондуктан, ошол стилдин CSS, HTML эмес, катышкан эмес. Бул <борбору> кошуу эмне үчүн HTML түзүлүшү теги заманбап желе стандарттарына ылайык туура эмес болуп саналат. Анын ордуна, биз элементтер жакшы жана борбор үчүн CSS кайрылат.
CSS менен Text борборлоштуруу
бир барагында айтуусун кезибизде текст болуп саналат. текстти тегиздөө: Бул сиз бир гана стили мүлк жок кыла билиши керек. Мисалы, төмөндө CSS образын алып:
p.center {текстти тегиздөө: борбору; }
CSS бул сапта менен, борбор класс менен ар бир пункт, анын ата-энеси элементтин ичинде туурасынан борбору болот. Мисалы, эгер ошол бөлүнүү бала дегенди билдирет пункт, бөлүштүрүүгө ичинде эле, ал <бөлүү> ичиндеги туурасынан борбору болот.
Бул жерде HTML документтин колдонулган бул классынын мисал келтирүүгө болот:
<-Б класс = "борбору"> Бул текст иштеп жатат.
текстти тегиздөө мүлк менен текст борборунда, ал анын камтыган элементтин ичинде борборго жана сөзсүз толук беттеги ичинде борбор жок болот экенин унутпа. Ошондой эле бул борбор-актаган текст мазмуну ири пакеттеринин окуп үчүн кыйын болушу мүмкүн эстеп, чанда бул стилди колдонуу. бир макала же башка мазмун үчүн тизер тексти сыяктуу текст кабарлардын чакан блоктору, борбор кезде көп окуп, жакшы үчүн жеңил, ал эми текст ири блоктору, өзү толук макалада сыяктуу мазмуну борбору болгон болсо, кырыш үчүн кыйын болмок акталат. Эске салсак, окумдуулугун дайыма ачкычы болуп саналат , ал сайты тексти келгенде!
CSS менен Мазмунду Blocks борборлоштуруу
Blocks аныкталган туурасы бар жана блок-деңгээл элемент катары белгиленет сиздин беттеги кандайдыр бир элементтер болуп саналат. Көп учурда, бул материалы HTML <бөлүү> элементин колдонуу менен түзүлөт. CSS менен блокторун айтуусун таралган жолу, сол жана машины туура чектерин да болуп саналат. Бул жерде ага карата "борборунун" бир тобу касиетти бар бөлүү үчүн CSS болуп саналат:
div.center {
маржа: 0 унаам;
туурасы: 80em;
}
Сол жана оң колдонуп, ал эми маржа менчик Бул CSS өтмө 0 маанидеги жогорку жана төмөнкү чектерин, жолго чыгышчу "Auto." Бул негизинен натыйжалуу беттеги элементи борборунда, жеткиликтүү жана терезеси терезеден эки тараптын ортосунда бир калыпта бөлүнгөн ар кандай орун алат.
Бул жерде HTML колдонулат:
<ОРУСИЯ = "борбору"> Бул бүт бөлүгү негизги орунда турат,
Бирок, чынында, аны ичинде текст түздөлгөн калат.
Көп сиздин бөгөттөөлөр аныкталган туурасы бар эле, ал камтыган элементтин ичинде өзүн-өзү сөз болот. Ошол блок камтылган текст ичинде бурбашыбыз керек, ал эми сол-негиздүү болот. Бул текст желе браузерлерде демейки калган-акталат becaus болуп саналат. Сиз ошондой эле борбор текстти каалаган болсо, текстти тегиздөө мүлктү биз бөлүнүп айтуусун Бул ыкма менен бирдикте республиканын мурда камтылбаган тийиши мүмкүн.
Борборго CSS менен Images
Көпчүлүк серепчилер буга чейин пунктунда үчүн карады эле текстти тегиздөө мүлктү пайдалануу менен биринчи орунга сүрөттөрдү өтөт, ал эми ал тарабынан сунуш кылынган эмес, ошондой эле техника таянуу жакшы идея эмес, W3C . Бул сунуш жок болгондуктан, браузерлердин келечектеги котормолорунда бул дайыма эле мүмкүнчүлүк бар, бул ыкманы четке шайлашы мүмкүн.
Анын ордуна сүрөттү айтуусун текстти тегиздөө колдонуп, ачык сүрөтү блок-даражадагы бөлүгү болуп саналат айтып бериши керек. Мына ушундай жол менен, сиз башка бир да чарчы жерин бербейт деп сөз болот. Мына, эмне үчүн CSS болуп саналат:
img.center {
дисплей: бөгөттөөлөр;
маржа-сол: унаам;
маржа-оң: унаам;
}
Бул жерде биз бурбашыбыз керек келет айкелдин үчүн HTML болуп саналат:
<Таки "blwebcam-sample.jpg" чыкма = "беби" класс = "борбору">
Ошондой эле бир-лайн CSS (төмөндө кара) пайдалануу менен объектилерди бурабыз, бирок бул ыкма аны HTML белгилөө салып көрүү образын алып келбейт, анткени сунуш ЭМЕС болот. сыяктуу эле, биз да ошондой бөлүнүү деп тыныгуу менен HTML кодексине CSS стилдерди кошуп, стили жана түзүмүн бөлүп келет унутпа, ал мүмкүн болушунча оолак болуу керек.
<Бөлүү стили = "текстти тегиздөө: борбору;">
Борборго Elements CSS менен тигинен
Борборго объекттер тигинен дайыма желе долбоордо кыйын, бирок CSS3 менен CSS Ийкемдүү кутуча жайылмасын модулдан бошотуу менен, аны эмне үчүн жол азыр жок.
Тигинен тегиздөө жогоруда жаап горизонталдуу трассанын сыяктуу иштейт. CSS менчик орто наркы менен тигинен тегиздөө болуп саналат.
.vcenter {
тигинен тегиздөө: орто;
}
Бул ыкмага жагы көбүрөөк жана бул жаңы CSS жайылмасы ыкмасына айланып келе жатат, бирок бардык браузерлер, CSS FlexBox колдоо эмес, деп! Чындыгында, бардык заманбап браузерлер, бүгүнкү күндө бул CSS стили колдоо. Бул Flexbox менен гана маселелер бир топ улуу браузер версия болорун билдирет.
Сен улуу браузерге маселелер болсо, W3C бир идишке тик борбору төмөнкү ыкмасын колдонуу менен сунуштайт:
- Мындай курс катары камтыган элементтин ичинде борбор турган элементтер, кой.
- камтыган элементке минималдуу бийиктиги коюу.
- стол клетка катары камтыган элементин жарыялоо.
- үчүн тигинен тегиздөө коюу "ортосунда."
Мисалы, бул жерде CSS болуп саналат:
.vcenter {
мин-бийиктиги: 12em;
дисплей: стол-клетка;
тигинен тегиздөө: орто;
}
Бул жерде HTML болуп саналат:
<ОРУСИЯ = "vcenter">
Бул текст тик коробкага жатат.
Vertical борборуна жана Internet Explorer улгайган Versions
гана IE образын көрүп ушунчалык шарттуу комментарий анда бурабыз жана Internet Explorer (IE) мажбурлоо үчүн бир нече жолдору бар пайдаланышат, бирок алар бир аз дайын жана түрү суук болуп саналат. жакшы кабар, IE улгайган котормолордо колдоону токтотушу Microsoft акыркы чечими менен, ошол unsupporting браузерлер жолдо боюнча жакында, интернет дизайнерлер заманбап башкага пайдалануу үчүн жардам алуу керек бардык CSS калыбын кылам CSS FlexBox сыяктуу ыкмалар болуп саналат эле борборунда эмес, бардык интернет дизайнерлердин үчүн иштешет.