Lilo CSS lati so aworan kan si apa osi ti oju-iwe ayelujara wẹẹbu
Ṣayẹwo fere eyikeyi oju-iwe wẹẹbu loni ati pe iwọ yoo ri apapo ọrọ ati awọn aworan ti o ṣajọpọ awọn oju-iwe yii. O rọrun lati fi ọrọ ati awọn aworan kun si oju-iwe kan . A ti fi ọrọ naa pamọ si lilo awọn afi HTML afiṣe bi awọn paraka, awọn akojọ, ati awọn akọle, nigba ti awọn aworan wa pẹlu lilo element .
Igbara lati ṣe ọrọ naa ati awọn aworan naa ṣiṣẹ pọ ni ohun ti o ṣafihan awọn apẹẹrẹ ayelujara pupọ! O ko fẹ pe ọrọ rẹ ati awọn aworan han ọkan lẹhin ti ẹlomiiran, ti o jẹ bi o ṣe le ṣe awọn aṣiṣe -ipele yii ni aiyipada. Rara, o fẹ diẹ ninu awọn iṣakoso lori bi ọrọ ati awọn aworan ṣe nṣàn pọ ni ohun ti yoo jẹ ẹda aworan ti oju-iwe ayelujara rẹ tẹlẹ.
Nini aworan ti o ni deede si apa osi ti oju-iwe kan nigba ti ọrọ ti oju-iwe naa n ṣaakiri o jẹ itọju imọran ti o wọpọ fun apẹrẹ ti a tẹjade ati fun awọn oju-iwe ayelujara. Ni awọn aaye ayelujara, a mọ pe ipa yii ni bi o ṣe ṣafo aworan naa . Yi ara ti wa ni waye pẹlu awọn ẹtọ CSS fun "float". Ilẹ-ini yi gba aaye laaye lati ṣakoso ni ayika aworan ti osi-ọtun si ẹgbẹ ọtun rẹ. (Tabi ni ayika aworan ti o tọ si ọtun si apa osi.) Jẹ ki a wo bi o ṣe le ṣe aṣeyọri ipa ipawo yii.
Bẹrẹ Pẹlu HTML
Ohun akọkọ ti o nilo lati ṣe ni diẹ ninu awọn HTML lati ṣiṣẹ pẹlu. Fun apẹẹrẹ wa, a yoo kọ akọsilẹ ọrọ kan ati ki o fi aworan kan kun ni ibẹrẹ ti paragirafi (ṣaaju ki ọrọ naa, ṣugbọn lẹhin ibẹrẹ
tag). Eyi ni ohun ti iyasọtọ HTML wulẹ:
Nipa aiyipada, oju-iwe ayelujara wa yoo han pẹlu aworan ti o wa loke ọrọ naa. Eyi jẹ nitori awọn aworan jẹ awọn eroja-ipele ni HTML. Eyi tumọ si pe aṣàwákiri aṣàwákiri ṣafihan ṣaaju ati lẹhin ti o jẹ aiyipada aworan. A yoo yi oju aiyipada yii pada nipa titan si CSS. Ni akọkọ, sibẹsibẹ, a yoo fi iye-akọọlẹ kan kun si iṣiro aworan wa . Iyẹn kilasi yoo ṣiṣẹ bi "kii" ti a yoo lo ninu CSS wa nigbamii.
Akiyesi pe kilasi yii ti "osi" ko ṣe nkankan rara rara! Fun wa lati ṣe aṣeyọri ara wa ti o fẹ, a nilo lati lo CSS nigbamii.
Awọn CSS Styles
Pẹlu awọn HTML wa ni ibi, pẹlu ipalara ti kilasi wa ti "osi", a le yipada si CSS bayi. A yoo fi ofin kun ofin ti o wa ti yoo ṣafo aworan naa ki o tun fi aaye kekere kan diẹ si ẹhin ki ọrọ ti yoo fi ipari si aworan naa ko ni lodi si i ni pẹkipẹki. Eyi ni CSS o le kọ:
.left {leefofo loju omi: osi; padding: 0 20px 20px 0; }Ọwọ yii lo awọn aworan si apa osi ki o ṣe afikun irọwọ kekere kan (lilo diẹ ninu awọn CSS shorthand) si apa ọtun ati isalẹ ti aworan naa.
Ti o ba ṣe atunyẹwo oju-iwe ti o ni HTML yii ninu ẹrọ lilọ kiri ayelujara, aworan naa yoo wa ni apa osi bayi ati pe ọrọ ti paragira yoo han si ọtun rẹ pẹlu iye to yẹ fun aye laarin awọn meji. Akiyesi iye ipo kilasi ti "osi" ti a lo jẹ lainidii. A le ti pe o ni ohunkohun nitori pe ọrọ "osi" ko ṣe nkankan lori ara rẹ. Eyi nilo lati ni ijẹrisi kilasi ni HTML ti o nṣiṣẹ pẹlu gangan CSS ti o kọ awọn ayipada wiwo ti o n wa lati ṣe.
Awọn ọna miiran lati ṣe Aṣeyọri Awọn Iwọnyi
Ilana yii ti fifun aworan aworan ti a pe ni kilasi ati lẹhinna lilo CSS ti gbogbogbo ti o n ṣaṣe iṣaro jẹ ọna kan ti o le ṣe eyi "aworan ti o wa ni apa osi" wo. O tun le gba iye kilasi kuro ninu aworan naa ki o si ṣe ara rẹ pẹlu CSS nipa kikọwe olutọtọ diẹ sii. Fun apeere, jẹ ki a wo apẹẹrẹ ni ibi ti aworan naa wa ni inu pipin pẹlu iye-iye ti "akoonu-akọkọ".
Lati ṣe aworan aworan yii, o le kọ CSS yii:
.main-content img {float: osi; padding: 0 20px 20px 0; }Ni iwọn yii, aworan wa yoo jẹ deede si apa osi, pẹlu ọrọ ti n ṣanfo ni ayika rẹ gẹgẹbi tẹlẹ, ṣugbọn a ko nilo lati fi iye-iye ti o pọju sii si ifamisi wa. Ṣiṣe eyi ni apapọ le ṣe iranlọwọ lati ṣẹda faili HTML kekere kan, eyi ti yoo rọrun lati ṣakoso ati pe o le tun ṣe iranlọwọ lati ṣe atunṣe iṣẹ.
Nikẹhin, o tun le fi awọn aza kun si taara HTML rẹ, bii eyi:
Yi ọna ti a npe ni " awọn ọna inline ". Kii ṣe imọran nitori pe o daapọ mọ ara ti ẹya kan pẹlu fifiwe si eto rẹ. Awọn iṣẹ ti o dara julọ oju-iwe ayelujara ṣe itọsọna pe ara ati ọna ti oju-iwe kan yẹ ki o wa ni iyatọ. Eyi jẹ paapaa wulo nigbati oju-iwe rẹ nilo yi iyipada rẹ pada ki o wa fun awọn titobi iboju pupọ ati awọn ẹrọ pẹlu aaye ayelujara idahun. Nini ara ti oju-iwe ti o wa ni oju-iwe HTML yoo jẹ ki o nira pupọ si awọn ibeere igberisi alakoso ti yoo ṣatunṣe oju-iwe ti aaye rẹ bi o ṣe nilo fun awọn iboju miiran.
Atilẹkọ article nipasẹ Jennifer Krynin. Edited by Jeremy Girard lori 4/3/17.