Ṣẹda awọn aaye ati awọn iyatọ ti ara ẹni ti awọn eroja ni HTML pẹlu CSS
Ṣiṣẹda awọn alafo ati sisọpa ti ara ẹni ti awọn eroja ti o wa ni HTML le jẹ nira lati ni oye fun olupilẹṣẹ ayelujara ti o bẹrẹ. Eyi jẹ nitori HTML ni ohun-ini kan ti a mo bi "isinmi alawo funfun." boya o tẹ 1 aaye tabi 100 ninu koodu HTML rẹ, aṣàwákiri wẹẹbu naa ṣokalẹ awọn aaye naa si isalẹ si aaye kan ṣoṣo kan. Eyi yatọ si eto bi Microsoft Word , eyi ti o fun laaye iwe-aṣẹ awọn olubese lati fi awọn aaye alagbe pọ lati ya awọn ọrọ ati awọn ero miiran ti iwe naa jẹ.
Eyi kii ṣe bi aaye siseto aaye ayelujara ti ṣiṣẹ.
Nítorí náà, bawo ni o ṣe n ṣe afikun awọn aṣiṣe ni HTML ti o fi han lori oju-iwe ayelujara ? Atilẹkọ yii ṣe ayẹwo diẹ ninu awọn ọna oriṣiriṣi.
Awọn aaye ni HTML pẹlu CSS
Ọna ti o fẹ julọ lati fi aaye kun ni awọn HTML rẹ jẹ pẹlu Awọn itọsọna Style Cascading (CSS) . CSS yẹ ki o lo lati fi aaye eyikeyi ojulowo oju-iwe wẹẹbu kan, ati pe niwon sisọ jẹ apakan ti awọn ẹya ara ẹrọ wiwo ti oju-iwe kan, CSS jẹ ibi ti o fẹ ki a ṣe eyi.
Ni CSS, o le lo boya awọn agbegbe tabi awọn ohun elo padding lati fi aaye kun awọn eroja. Pẹlupẹlu, ohun elo-ọrọ naa ṣe aaye aaye si iwaju ọrọ naa, gẹgẹbi fun awọn paragirafi ti o wa.
Eyi jẹ apẹẹrẹ ti bi a ṣe le lo CSS lati fi aaye kun iwaju gbogbo awọn paragira rẹ. Fi CSS ti o tẹle yii ranṣẹ si ita rẹ tabi folda ti inu :
p {
ọrọ-alakọ: 3em;
}
Awọn aaye ni HTML: Inu rẹ Text
Ti o ba fẹ lati fi aaye kun afikun tabi meji si ọrọ rẹ, o le lo aaye ti kii ṣe fifọ.
Iwa-ọrọ yii n ṣe gẹgẹbi iwa-aaye ipo-ọrọ deede, nikan ko ni ṣubu ninu ẹrọ lilọ kiri ayelujara.
Eyi jẹ apẹẹrẹ ti bi a ṣe le fi aaye marun kun inu ila kan ti ọrọ:
Oro yii ni awọn alafo marun marun inu rẹ
Nlo HTML:
Oro yii ni & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; awọn aaye miiran marun diẹ ninu rẹ
O tun le lo aami tag lati fi awọn isinmi afikun sii.
Yi gbolohun ni ila marun ni opin ni opin ti
Idi ti o fi wa ni HTML jẹ Aṣiṣe Búburú
Lakoko ti awọn aṣayan wọnyi ba ṣiṣẹ - iṣiṣe awọn alafo ti kii ṣe ailewu yoo tun fi aye si ọna rẹ ati awọn isinmi ila yoo fi aye si isale yii ti o wa loke - kii ṣe ọna ti o dara julọ lati ṣẹda aaye ni oju-iwe ayelujara rẹ. Fifi awọn eroja wọnyi kun si HTML rẹ ṣe afikun alaye wiwo si koodu dipo iyatọ awọn ọna ti oju-iwe kan (HTML) lati awọn awoṣe wiwo (CSS). Awọn iṣẹ ti o dara julọ n sọ pe awọn wọnyi yẹ ki o jẹ ọtọtọ fun awọn idi diẹ, pẹlu irorun ti mimuṣe ni ọjọ iwaju ati apapọ iwọn faili ati išẹ oju-iwe.
Ti o ba lo oju-ara ti ita lati ṣe apejuwe gbogbo awọn aza ati aye rẹ, lẹhinna yiyipada awọn aza fun gbogbo aaye naa ni o rọrun lati ṣe, niwon o ni lati mu iru iwe-ara ti o wa.
Wo apẹrẹ ti o wa loke ti gbolohun pẹlu awọn ami afihan marun ni opin rẹ. Ti o ba fẹ iye ti sisẹ ni isalẹ ti gbogbo paragira, o yoo nilo lati fi koodu HTML naa si gbogbo abalaye ni gbogbo aaye rẹ. Eyi ni iye ti o dara julọ ti imuduro afikun eyi ti yoo ṣafọ oju-iwe rẹ.
Pẹlupẹlu, ti o ba pinnu si ọna ti aaye yi wa ni pupọ tabi kekere, ati pe o fẹ lati yi o pada diẹ, iwọ yoo nilo lati satunkọ gbogbo paradagi kọọkan ni gbogbo aaye ayelujara rẹ. Ko si ṣeun!
Dipo ki o fi awọn eroja siseto wọnyi si koodu rẹ, lo CSS.
p {
padding-isalẹ: 20px;
}
Iwọn ila kan ti CSS yoo fi aaye si aaye labẹ awọn akọsilẹ ti oju-iwe rẹ. Ti o ba fẹ yi iyipada naa pada ni ojo iwaju, ṣatunkọ ila kan (dipo koodu koodu gbogbo rẹ) ati pe o dara lati lọ!
Nisisiyi, ti o ba nilo lati fi aaye kan kun ni apakan kan ti aaye ayelujara rẹ, lilo aami
tabi aaye kan ti kii ṣe ailewu kii ṣe opin aiye, ṣugbọn o nilo lati ṣọra.
Lilo awọn aṣayan atokọ HTML ti o wa ni titẹ sii le jẹ iwọn irun diẹ. Lakoko ti ọkan tabi meji le ma ṣe ipalara aaye rẹ, ti o ba tẹsiwaju ọna naa, iwọ yoo mu awọn iṣoro sinu awọn oju-iwe rẹ. Ni ipari, o dara ju ti o yipada si CSS fun iṣeto HTML, ati gbogbo awọn oju-iwe ayelujara ti o nilo oju wiwo.