Die plasing van items op 'n webblad is noodsaaklik vir die algehele ontwerp. Alhoewel daar ander maniere is om die uitleg te beïnvloed, soos om tabelle te gebruik ( wat ons nie aanbeveel nie ), is die beste om CSS te gebruik .
Hierna kyk ons hoe om 'n eenvoudige CSS-styl inlyn-eiendom te gebruik om beelde, tabelle, paragrawe en meer te pas.
Nota: Hierdie selfde metodes kan ook op eksterne style sheets gebruik word, maar aangesien dit van toepassing is op individuele items en waarskynlik so bly, is dit beter om in-lyn stilering te gebruik soos hieronder genoem.
Rig teksparagrawe uit
Die paragraaf tag is die eerste plek om te begin met die uitleg van jou webblad. Die opening en sluitingsetikette lyk soos volg:
Die standaardbelyning van teks in 'n paragraaf is aan die linkerkant van die bladsy, maar jy kan ook jou paragrawe regs en middelpunt belyn.
Deur die float-eiendom te gebruik, kan u paragrawe regs of links van die ouerelement inlyn. Enige ander elemente in die ouer element sal rondom die swaai element vloei.
Om die beste effek met 'n paragraaf te kry, is dit die beste om 'n wydte op die paragraaf te stel wat kleiner is as die ouerelement.
Rig die teks binne paragrawe
Waarskynlik, die mees interessante belyning vir paragraafteks is "regverdig", wat die leser vertel om die teks in lyn te bring, in wese, sowel aan die regterkant as aan die linkerkant van die venster.
Om die teks in 'n paragraaf te regverdig, sal u die eienskap vir teksbelyning gebruik.
U kan ook al die teks binne 'n paragraaf aan die regterkant of die linkerkant (die verstek) belyn deur die teksbelyningseiendom te gebruik.
Die teks-lyn-eiendom sal die teks binne-in die element uitlê. Tegnies is dit nie veronderstel om beelde wat in die paragraaf of ander element voorkom, in te sluit nie, maar die meeste blaaiers behandel beelde as inlyn vir hierdie eiendom.
Aligning Images
Deur die float-eiendom op 'n prentetiket te gebruik, kan jy die plasing van beelde op die bladsy definieer en hoe die teks rondom hulle omdraai.
Net soos die bostaande paragrawe, sal die eiendomslys vir float-style in die prentetiket jou prent op die bladsy plaas en die leser vertel hoe om teks en ander elemente rondom die prent te vloei.
Teks wat die bogenoemde prentjie-tag volg, vloei om die beeld regs soos die prentjie aan die linkerkant van die skerm vertoon.
As ek wil hê dat die teks omgee om die prentjie te draai, gebruik ek die duidelike eienskap:
Aligning More than Parameters
Maar, wat as jy meer wil ooreenstem as net 'n paragraaf of 'n beeld? Jy kan eenvoudig 'n styl eiendom in elke paragraaf, maar daar is 'n merker wat jy kan gebruik wat meer effektief is:
Omring eenvoudig die teks en beelde (insluitend HTML-etikette ) met die tag en die styl-eienskap (float of text-align) en alles in daardie afdeling sal in lyn wees met hoe jy dit wil hê.
Hou in gedagte dat belynings wat by paragrawe of beelde in die afdeling gevoeg word, vereer word, wat die tag oorheers.