CSS колдонуу интернет Долбоор сол жагына чейин сүрөттү түздөп,
Бүгүнкү күндө дээрлик ар бир интернет баракты карачы, эгер ал барактардын бөлүгүн түзгөн текст жана сүрөттөрдүн айкалышын көрүшөт. Бул текстти жана кошуу үчүн абдан жеңил болуп баракка сүрөттөрдү . Текст стандарт менен коддолгон HTML теги сүрөттөр аркылуу киргизилет, ал эми пункттарына, тизмелер жана сыяктуу элементин .
деген текст жана сүрөттөр менен бирге эле, иштеп чыгарууга жөндөмдүү өзүнчө улуу желе дизайнерлер айырмаланып турат! Сиз жөн гана бул кандай болуп сиздин текстти жана сүрөттөрдү биринин артынан бири пайда болуп, кереги жок блок-даражадагы элементтер демейки жайгалышын болот. Жок, текст жана сүрөттөр акыр сайта көрүнөө дизайн кандай болот чогуу агып кандай белгилүү бир келет.
Бир барактын сол жагына чейин ашууда сүрөттү алып , ошол беттеги тексти аны айланып агат интернет беттеринде басма үлгүсүнө жалпы дизайн дарылоо болуп саналат жана ошондой эле. Желе мааниде алганда, бул таасир сүрөттү калкып катары белгилүү . Бул ыкма менен жетишилет CSS менчик "көрүнөт" үчүн. Бул мүлк текст солго түздөлгөн бейнеси анын оң тарапка агып мүмкүнчүлүк берет. (Же туура түздөлгөн бейнеси, сол тарапка.) Бул көрсөтмө натыйжа кантип карап көрөлү.
Баштоо менен HTML
эмне керек биринчи нерсе менен иштөө үчүн бир HTML бар. Биздин Мисалы, текстти жазып жана пунктунун башындагы сүрөттү кошууга болот (тексти чейин, ал эми ачуу <б> тегинин кийин). Мына ошол HTML белгилөө көрүнүш мына мындай:
<таки "сүрөттөр / Аскер соту-picture.jpg" чыкма = "Башы менен сурот" /> пункттун тексти менен бул жерден чыгат. Бул мисалда, биз Аскер соту сүрөттө айкел жок, андыктан бул текст, кыязы, Аскер соту үчүн адам жөнүндө болот.
Алыдын ала, биздин интернет тексти Жогорудагы сүрөттө көрүнүп турган. Бул сүрөттөр HTML-жылы блок-деңгээл элементтери болуп эсептелет. Бул браузер көрсөткөнү сап алдында жана демейки боюнча сүрөт элементи кийин кете турганын билдирет. Биз CSS кайрылып бул демейки карап өзгөрөт. Биринчиден, Бирок, биз кошот , биздин сүрөт элементтерин класс Наркы . Бул класс кийин биздин CSS колдоно турган "берүүсүндө" катары иш-аракет кылат.
<таки "сүрөттөр / Аскер соту-picture.jpg" чыкма = "Башы менен сурот" класс = "сол" /> пункттун тексти менен бул жерден чыгат. Бул мисалда, биз Аскер соту сүрөттө айкел жок, андыктан бул текст, кыязы, Аскер соту үчүн адам жөнүндө болот.
"Сол" бул тобу өз алдынча эч нерсе кылган бургула! Келгиле, биз каалаган стилди жетүү үчүн, биз колдонуу керек CSS кийинки.
CSS Styles
"Сол", биздин класс сыпаты, анын ичинде жерге болгон HTML менен, биз азыр CSS кайрылсак болот. Биз бир эреже кошуу турган салынган акыры айкелдин айланасын ороп турган текст өтө тыгыз ага каршы жагын эмес, ошондуктан бул сүрөттөлүштү тапталган, ошондой эле анын жанында бир аз толтургуч кошуп келет. Бул жерде сиз жазууга мүмкүн CSS болуп саналат:
.left {жадымда: сол; толтургучтар: 0 20px 20px 0; }Бул ыкма, солго бул сүрөттөлүштү сүзүп, бир аз алып келбейт толтургуч айкелдин укугун жана аягына чейин (айрым CSS жазышат колдонуу).
Эгер браузер аркылуу ушул HTML камтылган баракты карап, имиджи эми сол жана эки жээктин ортосундагы аралык пунктунда тексти тиешелүү суммасы, анын укугу пайда болорун да шайкеш келет. Биз негизсиз эмес колдонгон "сол" классы маани бургула. өз алдынча эч нерсе, биз кандай термин "сол", анткени эч нерсе деп келдим эле. Бул үчүн керек HTML класстык касиетти сен үчүн издеп көрүү өзгөртүүлөрдү көрүүдө чыныгы CSS стили менен иш алып барат.
Бул мүнөзүнөн жетүүнүн жолдорун
сүрөт элементи класстык касиетти берип, анан элементин сүзүп жалпы CSS ыкма менен мындай ыкмасы, бул "сол сүрөтү түздөлгөн" карап ишке ашыра алмак гана бир жолу болуп саналат. Ошондой эле, айкелдин чечип класстык баасын алып, конкреттүү селектор жазуу менен CSS менен стилдештирүүнү мүмкүн. Мисалы, ал сүрөттөлүш "башкы-мазмуну" деген класстык наркы менен бөлүнүү ичинде жерде бир мисал карап көрөлү.
<ОРУСИЯ = "негизги мазмуну"> <б> <таки "сүрөттөр / Аскер соту-picture.jpg" чыкма = "Башы менен сурот" /> пункттун тексти менен бул жерден чыгат. Бул мисалда, биз Аскер соту сүрөттө айкел жок, андыктан бул текст, кыязы, Аскер соту үчүн адам жөнүндө болот.Бул сүрөттү стили менен, бул CSS деп жазган:
негизги мазмуну Img {калкып: сол; толтургучтар: 0 20px 20px 0; }Бул sceario, биздин сүрөт чейин эле айланасында сүзүп тексти менен, солго түздөлгөн болмок, бирок биз белгилөө үчүн кошумча класс наркын кошуунун кажети жок. масштабда бул иш башкарууга ээ болууга жардам берет, ошондой эле иш-аракеттеринин натыйжалуулугун жогорулатуу жардам бере ала турган аз HTML билэни, түзүүгө жардам берет.
Акыр-аягы, ал тургай образын түздөн-түз HTML белгилөө салып кошуп, бул сыяктуу:
<таки "сүрөттөр / Аскер соту-picture.jpg" чыкма = "Башы менен сурот" стили = "лидерлери: сол; чектен: 0 20px 20px 0;" /> Пункттун тексти менен бул жерден чыгат. Бул мисалда, биз Аскер соту сүрөттө айкел жок, андыктан бул текст, кыязы, Аскер соту үчүн адам жөнүндө болот.
Бул ыкма "деп аталат киргизилген стилдери ". ал ачык-айкын жана анын структуралык белгилери бар бир элементтин стилин айкалыштырып, анткени ал сунуш эмес. Желе мыкты тажрыйбалар барактын стили жана түзүлүшү оолак болушу керек деп койсок болот. Сенин бет керек бул, өзгөчө пайдалуу , анын калыбын өзгөртүү жана ар түрдүү экран өлчөмү жана түзмөктөр издеп бир жооп сайты менен. HTML менен тыгыз бетине стили бар, ал андан бетер кыйын болот жазуучу медиа суроо ар башка экрандарда үчүн сиздин сайттын көз карашын өзгөртүүгө болот.
Атайга Krynin тарабынан Original макалада. Jeremy Джирард тарабынан 4/3/17 күнү өзгөртүлдү.