ар кандай интернет бетине карап жана текст мазмуну жана сүрөттүн айкалышын көрүшөт. Бул элементтердин да сайт ийгилиги абдан маанилүү болуп саналат. Текст мазмуну сайт коноктору окуп эмне жана эмне издөө колдоно турган , алардын рейтингинде алгоритмдердин бөлүгү катары. Сүрөттөр сайтына көрүү кызыгуу кошуу жана тексттин мазмунун күчөшүнө жардам берет.
сайттарга текстти жана сүрөттөрдү кошуу жеңил болот. Текст сүрөттөрү элементи менен беттеги жайгаштырылат, ал эми пункттарына, материалдардын аталыштарын жана тизмелерде сыяктуу стандарттуу HTML Tags менен кошулат. Эгер интернет-беттеги сүрөттү кошулгандан кийин, бирок, текст бейнеси (бир сүрөттөлүш HTML кодексине кошо демейки жолу кайсы браузерден аткарылганын) эмес, ал төмөндө тегиздөө кийинки агымын керек болушу мүмкүн. Негизи, бул көз караш, же CSS колдонуу менен жетишүүгө мүмкүн эки жол бар (сунушталат) же түздөн-түз көрсөтмө көрсөтмөлөрдү кошуп, HTML (сиз сайтына стили жана түзүлүшү өзүнчө жашагысы келет, анткени, сунуш кылынбайт).
CSS колдонуу
Жол Барактын тексттери жана сүрөттөрү пландоо жана браузер алардын көрүү стилдери кантип пайда өзгөртүүгө туура жол менен CSS . биз-беттеги (бир сүрөттөлүш тегерегинде текст агымын кабыл алуу) боюнча көргөзмө өзгөртүү жөнүндө сөз болуп жатат бери эле, эсимде, бул стилдерди домендик билдирет.
- Биринчиден, сиздин интернет-беттеги үчүн сүрөттү кошууга. Ошол HTML эч кандай көрсөтмө мүнөздөмөлөрү (туурасы, бийиктиги баалуулуктар сыяктуу) алып салынсын унутпа. Бул, өзгөчө, маанилүү бир жооп сайт сүрөттүн көлөмү браузердин негизинде айырмаланышы мүмкүн. Кээ бир программалык камсыздоо, Текшерүү комиссиясы сыяктуу эле, ал курал менен кошо кыстарылат элестер менен туурасы, бийиктиги маалыматтарды кошуп, ошондуктан HTML коду бул маалыматтарды алып салуу үчүн шектенбесек болот! Бекем бол, бирок, анын ичинде тиешелүү жылып-чыкма текст . Бул жерде HTML коду карап кандай мисал болуп саналат:
- <Таки "/ сүрөттөр / команда-Рюноскэ.jpg Мындан" чыкма = "Биздин кызматкерлердин сүрөт">
- Styling максаттары үчүн, силер да бир сүрөттөлүш турган класс кошо аласыз. Бул класс балл биздин CSS ишинде колдоно турган болот. Бул өзгөчө стили, биз сүрөт тегиздөө каалаган жол жараша, же "туура", "сол", баалуулуктарын пайдалануу, эреже боюнча, бирок биз бул жерде колдонууга балл, негизсиз экенин белгилешет. Биз жөнөкөй синтаксисин жакшы иш таап, түшүнүү үчүн келечекте сайтты башкаруу мүмкүн башкаларга жеңил болуп, бирок силер каалаган бул бир класс баасын бере алмак.
- <Таки "/ сүрөттөр / команда-Рюноскэ.jpg Мындан" чыкма = класстын "Биздин кызматкерлердин сүрөт" = "сол">
- өзү, бул класс балл эч нерсе кыла албай калат. Сүрөт жазуусу текстти сол шайкеш болбойт. Бул үчүн, биз азыр CSS делосуна буруш керек.
- Сиздин салынган, сиз азыр төмөнкү стилди кантип кошууга болот:
- .left {
- сүзүп: сол;
- толтургучтар: 0 20px 20px 0;
- }
- Бул жерде эмне кылып колдонууга болот CSS "калкып" мүлктү , нормалдуу документ агуудан сүрөттү сууруп болот (ал сүрөттөлүш, адатта, көрсөтө турган жол менен, жердин түпкүрүндө түздөлгөн тексти менен) жана ал идишке сол жагына чейин, аны тегиздөө болот . менен HTML белгилөө боюнча андан кийин келген тексти ага оройт. Ошондой эле, биз бул текст эмес, түздөн-түз бейнеси каршы турганын, ошондуктан кээ бир жакшы билмейинче, баалуулуктарды кошумчалады. Тескерисинче, ал Барактын долбоордо көрүнөө сулуу боло турган кээ бир жакшы менен жазылып калат. толтургучтар үчүн CSS, кыскача айтканда, биз 0 айкелдин жогорку жана сол жагына баалуулуктарын, жана анын сол жана аягына чейин 20 пикселди кошумчалады. Эске, сен сол түздөлгөн сүрөттүн оң жагы бир толтургуч кошуу керек. Укук түздөлгөн сүрөт (биз бир заматта карашат) жакшы билмейинче, анын сол жагында колдонулат болмок.
- Эгер сиз браузерде сиздин сайтыбызды көрүү болсо, азыр сенин сүрөтү барактын сол жагына чейин ашууда жана текст сонун, аны тегерете курчап көрүшү керек. мындай дагы бир жолу сүрөтү "солго калкып" жатат.
- Эгер укук өтүшү үчүн бул сүрөттү өзгөртө каалаган болсо, (бул макаланы коштогон сүрөт мисалы сыяктуу), ал жөнөкөй болот. Биринчиден, "сол" классы наркы боюнча стили өзүбүздүн эле CSS кошулган тышкары, биз да оң-трассанын бирин бар экендигине ынанууга тийиш. Бул сыяктуу болушу мүмкүн:
- .right {
- сүзүп: укуктуу;
- толтургучтар: 0 0 20px 20px;
- }
- Сиз бул биз жазган биринчи CSS менен дээрлик бирдей экенин көрө алабыз. бир гана айырмасы, биз "калкып" менчик жана биз колдонгон жакшы билмейинче, баалуулуктарды (Биздин бейнебиз укугун ордуна сол жагына чейин айрым кошуу) үчүн пайдалануу зарыл.
- Акыр-аягы, сиз HTML менен "туура" жана "сол" тартып буркандын класстын баасын өзгөртө турган:
- <Таки "/ сүрөттөр / команда-Рюноскэ.jpg Мындан" чыкма = класс = "укугу", "Биздин кызматкерлердин сүрөт">
- Азыр браузер сенин бетине карап жана сүрөт текст жарашыктуу айланасында ташуу менен укугу келтирилиши керек. Биз интернет барактарын түзүп жатканда, биз ушул стилде, жана зарыл болсо, бул көрсөтмө стилин колдоно алабыз, биз үчүн бардык Стилдерди "укук", "сол" да кошуп алышат. Бул эки стилдери биз алардын тегерегиндеги текстти ташуу менен сүрөттөрдү стилдештирүүнү керек болгондо эмне кылса болот жакшы, коддун өзгөчөлүктөрү болот.
Анын ордуна CSS ичинен HTML колдонуу (жана эмне үчүн # 39 & Shouldn; т кылгыла)
Бул HTML менен бир сүрөттөлүш тегерегинде түздөө текстти кылууга мүмкүн болсо да, интернет стандарттары CSS (жана жогоруда көрсөтүлгөн кадамдарды) биз структурасын бир бөлөк (HTML) жана стили (CSS) сактай алабыз деп барып, ыкмасы болуп саналат деп койсок болот. Бул кээ бир түзмөктөрдө жана долбоорлор үчүн, эске алганда, өзгөчө маанилүү болуп саналат, ал текст айкелдин айланып агып зарылдыгы деле жок болушу мүмкүн. Кичирээк экрандарда үчүн жооп сайттын жайгашуусу текст, чынында эле, айкелдин ылдый жактан жана бул сүрөттөлүш экрандын толук туурасын созулуп деп тегиздөө деп талап кылышы мүмкүн. Бул жонокой менен жүргүзүлөт медиа суроо сиздин стилдери сиздин HTML белгилөө оолак болсо. Сүрөттөлүштүн жана текст ар башкача, көрүүчүлөр үчүн ар кандай экраны пайда болот, бүгүнкү күндө көп түзмөк дүйнөдө бул бөлүү интернет бетине узак мөөнөттүү ийгилик жана башкаруу үчүн абдан маанилүү.