Sa diha nga magsugod ka sa pagtukod sa mga webpage gamit ang HTML, magsugod ka sa pagtrabaho uban ang paghan-ay. Sa paghimo sa imong site nga tan-awon sa paagi nga gusto nimo kini tan-awon, nga tingali ang pagparis sa usa ka disenyo nga imong gimugna o sa lain nga tigdisenyo, imong gusto nga usbon ang gidak-on sa teksto niana nga site, ingon man ang ubang mga elemento sa panid. Aron mahimo kini mahimo ka magsugod sa pagpangita alang sa usa ka "tag" nga tag sa HTML, apan dali ka nga makit-an nga wala kini.
Ang tag sa gidak-on sa HTML wala diha sa HTML. Hinunoa, aron sa pagpahimutang sa gidak-on sa imong mga font, mga imahen o layout kinahanglan nga gamiton ang Cascading Style Sheets. Sa pagkatinuod, ang bisan unsang kausaban sa kausaban nga imong gikinahanglan sa usa ka teksto sa usa ka site o laing elemento kinahanglan nga pagdumala sa CSS! Ang HTML alang lamang sa estraktura.
Ang pinakaduol nga tag sa usa ka tag sa size sa HTML mao ang daan nga tag sa font, nga sa tinuud naglakip sa usa ka gidak-on nga hiyas. Pasidan-an nga kini nga tag wala na usba sa kasamtangan nga mga bersyon sa HTML ug mahimong dili suportado sa mga browser sa umaabot! Dili nimo gusto nga gamiton ang tag sa font sa imong HTML! Hinunoa, kinahanglan ka makakat-on sa CSS sa pag-gidak-on sa imong mga elemento sa HTML ug estilo sa imong webpage.
Mga Sukod sa Font
Ang mga pagsulat sa mga font mao ang labing sayon nga butang sa gidak-on sa CSS. Moreso kay sa pag-sizing nga ang teksto, nga adunay CSS nga mahimo nimo nga mas espesipiko mahitungod sa typography sa imong website . Mahimo nimong ipasabut ang gidak-on sa font, ang kolor, ang casing, ang gibug-aton, ang nanguna, ug daghan pa. Uban sa tag sa font, mahimo mo lamang ipasabot ang gidak-on, ug unya usa lamang ka gidaghanon nga may kalabutan sa default nga font size sa browser nga lahi sa matag kustomer.
Aron i-set ang imong parapo nga adunay gidak-on nga font nga 12pt, gamita ang estilo nga gidak-on sa estilo sa font:
h3 {font-size = 24px; }Kini nga estilo magpahimutang sa gidak-on sa font nga headiing3 nga mga elemento nga 24 ka pixel. Mahimo nimo kini idugang sa estilo sa estilo sa gawas ug ang tanang H3s sa imong site mogamit niini nga estilo.
Kung gusto ka magdugang og mga estilo sa typographic sa imong teksto, mahimo nimo kining idugang sa kining CSS nga lagda:
h3 {font-size: 24px; kolor: # 000; font-weight: normal; }Kini dili lamang magbutang sa gidak-on sa font alang sa H3s, kini usab maghimo sa kolor nga itom (nga mao ang kodigo nga hex sa # 000) ug kini mag-igo sa gibug-aton sa "normal". Sa baylo, ang mga browser naghatag sa mga ulohan 1-6 ingon nga maisag nga teksto, busa kini nga estilo mo-override nga wala'y katinoan ug sa tinuud "dili maisog" ang teksto.
Gidak-on sa Imahe
Ang mga hulagway mahimo nga malisud aron mahibal-an ang mga gidak-on tungod kay mahimo nimo nga gamiton ang browser sa pag-resize sa imahe. Siyempre, ang pag-usab sa mga hulagway sa browser usa ka dili maayo nga ideya tungod kay kini makahimo sa mga pahina sa pag-load sa mas hinay-hinay ug ang mga browser sa kasagaran makahimo og dili maayo nga trabaho sa pag-usab sa sukdanan, sa paghimo sa mga hulagway nga dili maayo tan-awon. Hinunoa, kinahanglan mong gamiton ang graphics software aron ma-resize ang mga hulagway ug dayon isulat ang ilang aktwal nga mga gidak-on sa imong Web page HTML.
Dili sama sa mga font, ang mga imahen mahimong gamiton ang HTML o CSS aron mahibal-an ang gidak-on. Gihubit nimo ang gilapdon sa imahe ug ang gitas-on. Kon mogamit ka sa HTML, mahimo nimong ipaila ang gidak-on sa gidak-on sa pixel. Kon mogamit ka sa CSS, mahimo nimong gamiton ang ubang mga pagsukod lakip ang mga pulgada, sentimetro, ug mga porsyento. Kining katapusang bili, mga porsyento, mapuslanon kaayo kon ang imong mga hulagway kinahanglan nga likido, sama sa usa ka responsive nga website.
Aron ipasabut ang gidak-on sa imong gidak-on gamit ang HTML, gamita ang gitas-on ug gilapdon nga mga hiyas sa img tag. Pananglitan, kini nga imahe mahimong 400x400 pixel square:
taas = "400" width = "400" alt = "image" />Aron ipasabut ang gidak-on sa imong gidak-on gamit ang CSS, gamita ang gitas-on ug estilo sa gilapdon Ania ang sama nga hulagway, gamit ang CSS aron mahibal-an ang gidak-on:
style = "height: 400px; width: 400px;" alt = "image" />Mga Layout
Ang labing komon nga gidak-on nga imong gipasabut sa usa ka layout mao ang gilapdon, ug ang unang butang nga imong gikinahanglan sa paghukom mao ang paggamit sa usa ka fixed width layout o usa ka responsive nga website. Sa laing pagkasulti, imo bang ipasabot ang gilapdon nga eksaktong gidaghanon sa mga pixel, pulgada, o mga punto? O imo ba nga ibutang ang imong gilapdon nga lugway aron mahimo nga flexible gamit ang em o porsyento? Aron mahibal-an ang gidak-on sa imong layout, gigamit nimo ang gilapdon ug gitas-on sa CSS properties sama sa imong gusto sa usa ka imahe.
Pag-ayo sa gilapdon:
style = "width: 600px;">Lapad sa likido:
style = "width: 80%;">Sa diha nga ikaw nagdesisyon sa mga gilapdon alang sa imong layout, imong hinumduman ang lainlaing browser width nga mahimo gamiton sa imong mga magbabasa ug ang lainlaing mga gamit nga ilang gigamit usab. Mao kini ang hinungdan nga responsive websites , nga makausab sa ilang layout ug sizing base sa nagkalainlain nga mga himan ug mga gidak-on sa screen, mao ang labing maayo nga praktis nga sumbanan karon.