Sortu espazio eta elementu fisiko bereizketa HTML-rekin CSS
HTML elementuetan espazio eta bereizketa fisikoa sortzea zaila da ulertzeko hasierako web diseinatzaileentzat. Hau HTML delakoak "zuriuneen kolapsoa" izeneko propietate bat du. Idatzi 1 espazioa edo 100 zure HTML kodea idazten baduzu, web arakatzaileak automatikoki tolestu espazio horiek espazio bakarrean. Microsoft Word-en bezalako programa batetik desberdina da, dokumentu-sortzaileek espazio bat baino gehiago gehitzeko dokumentu horren beste elementu batzuei eta beste elementuei bereizteko.
Hau ez da web diseinuaren arteko tartea funtzionatzen.
Beraz, nola gehitu zuriuneak web orrian agertzen diren HTML-an? Artikulu honek hainbat modu aztertzen ditu.
HTML eremuak CSS dituzten espazioak
Zure HTML eremuak gehitzeko era hobetsia Cascading Style Sheets (CSS) da . CSS erabili behar da web orri baten ikusizko alderdiak gehitzeko, eta tarte bat orri baten diseinu bisualaren ezaugarrien parte da, CSS-a egin nahi duzun lekuan.
CSS-n, marjina edo betegarri propietateak erabili ditzakezu elementuen inguruko espazioa gehitzeko. Gainera, testuaren indentearen propietateak testuaren aurrealdean duen lekua gehitzen du, esate baterako, paragrafoen indentzea.
Hemen paragrafo guztien aurrean espazioa gehitzeko CSS erabiltzeko adibide bat da. Gehitu CSS hau kanpoko edo barneko estilo-orriari:
p {
testu-koska: 3em;
}
HTML eremuak: zure testuaren barruan
Nahi duzun espazio gehigarria edo bi zure testua gehitu nahi baduzu, hautsi gabeko espazioa erabil dezakezu.
Karaktere honek espazio-karaktere estandarra bezala jokatzen du, arakatzailearen barruan bakarrik ez du kolapsoa.
Hona hemen adibide bat nola bost espazio gehitzeko testu lerro baten barruan:
Testu honek barruan bost espazio gehiago ditu
HTML erabiltzen du:
Testu hau & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; izan da Bost barruko espazio gehiago
Etiketa ere erabil dezakezu lerro jauziak gehitzeko.
Esaldi hau bost lerro jauzi ditu amaieran
Zergatik HTML tartea Bad Idea da
Aukera hauek biak badira ere - zatitzailea ez den elementuek zure testura arteko tartea gehituko dute eta lerro jauziek goian azaldutako paragrafoaren azpian dagoen tartea gehituko dute. Hau ez da zure webguneko tartea sortzeko modurik onena. Elementu horiek zure HTML eran eranstea ikusizko informazioa kodeari gehitzen zaio estilo bisualen (CSS) orri baten egitura (HTML) bereizteko. Praktika onak honako hauek dira: arrazoi ugari egon behar dute, etorkizunean eguneratze errazak eta fitxategi-tamainaren eta orriaren errendimendu orokorra barne.
Kanpoko estilo-orri bat erabiltzen baduzu estilo eta tarte guztiak eman ditzazun, gune osoarentzako estilo horiek aldatzea erraza da, estilo-orri bat besterik ez duzuelako.
Esaldiaren goiko adibidea kontuan hartu bost atalen etiketekin amaieran. Paragrafo bakoitzaren behealdean tarte kopuru hori nahi baduzu, HTML kodea gehitu behar duzu paragrafo guztietan zure webgunean. Hori dela eta, zure markak estutu egingo dituen markaketa gehigarria da.
Gainera, tarte hori gehiegizkoa edo txikia den aldetik behera erabakitzen baduzu eta pixka bat aldatzea nahi baduzu, paragrafo bakoitza zure webguneko osagai guztiak editatu beharko zenituzke. Ez eskerrik asko!
Zehaztutako elementu horiek zure kodean gehitzea ordez, erabili CSS.
p {
padding-bottom: 20px;
}
CSS lerro batek zure orriaren paragrafoen arabera tartea gehituko luke. Etorkizuneko tartea aldatu nahi baduzu, editatu lerro hau (gune osoaren kodea ordez) eta joan zaitez!
Orain, zure webguneko zati batean leku bakar bat gehitu behar baduzu,
etiketa edo haustura bakarreko espazio bakarra ez da munduaren amaiera, baina kontuz ibili behar duzu.
Lineaz kanpoko HTML tarteen aukerak erabiliz, irristakorra den malda bat izan daiteke. Bata edo gehiago zure webgunea minik egin ezean, bidea jarraitzen baduzu, zure orriak arazoak sor ditzakezu. Azkenean, hobe duzu CSS HTML tartea eginez, eta beste web orrien ikusizko beharrak.