Ampiasao ny CSS mba hampifanaraka ny sary eo ankavanan'ny Layout webpage
Jereo amin'ny ankabeazan'ny tranonkala androany ary ho hitanao ny firafitry ny lahatsoratra sy sary mamelatra ny ankamaroan'ireo pejy ireo. Tena mora ny mametraka lahatsoratra sy sary ho an'ny pejy . Ny endri-tsoratra dia asiana alalana mampiasa ny marika HTML ho toy ny paragrafy, lisitra, ary lohateny, raha toa ka tafiditra ao ny sary .
Ny fahaizana mamolavola io lahatsoratra io sy ireo sary ireo dia miara-miasa tsara ny mpamorona tranonkala lehibe! Tsy tianareo fotsiny fa ny tontolonao sy ny sary dia miseho iray isaky ny iray hafa, izany hoe ny fomba amam-panao azy ireo dia tsy maintsy ampidirina am-paosy. Tsia, mila manara-maso ny fomba ifehezan'ny lahatsoratra sy ny sary miaraka amin'ny zavatra izay ho endriky ny endrika asehon'ny tranonkalanao.
Ny fananana sary izay mifatotra amin'ny ilany havia amin'ny pejy iray raha ny lohatenin'ity pejy ity dia mitodika manodidina azy dia fomba fitsaboana mahazatra ho an'ny fanontana natao printy ary koa ho an'ny tranonkala. Amin'ny teny anaty tranonkala, io vokatra io dia fantatra amin'ny hoe manidina ny sary . Izany fomba izany dia tanterahina miaraka amin'ny fananana CSS ho an'ny "float". Ity trano ity dia mamela ny lahatsoratra hivezivezy manodidina ny sary havia havia eo amin'ny ilany havanana. (Na eo amin'ny sary eo ankavia miankavanana miankavia.) Andao hojerentsika ny fomba hahatratrarana io vokatra io.
Atombohy amin'ny HTML
Ny zavatra voalohany tokony hataonao dia manana HTML hiasa. Ho an'ny ohatra asehontsika, hanoratra andinin-tsoratra iray isika ary hampiditra sary eo am-piandohan'ny andininy (alohan'ny lahatsoratra, fa aorian'ny fanokafana
tag). Ity dia mitovy amin'ireto marika HTML ireto:
Amin'ny alàlan'ny fanamarihana, ny tranonkalanay dia hampiseho amin'ny sary eo ambonin'ilay lahatsoratra. Ity dia satria sary dia singa mifandraika amin'ny HTML. Midika izany fa ny tranonkala dia mampiseho tsipika an-tsipika alohan'ny aorian'ity endri-drakitra ity. Hanova izany fomba fijery izany amin'ny alàlan'ny famadihana amin'ny CSS. Voalohany anefa, dia hampitombo ny lanjan-tsaratsara eo amin'ny saintsika . Ity kilasy ity dia ho toy ny "hook" izay hampiasaintsika amin'ny CSS any aoriana.
Mariho fa ity antokon'ny "havia" ity dia tsy manao na inona na inona amin'ny tenany manokana! Mba hahatratrarana ny fomba fanirianay, mila mampiasa CSS manaraka izahay.
CSS Styles
Amin'ny alàlan'ny HTML eo an-toerana, anisan'izany ny toetoetry ny "havia", dia afaka mivadika ho CSS isika izao. Hanampy fitsipika iray ho an'ny tabilao misy ny sary izahay izay mety hitifitra io sary io ary manampy ampiana kely eo akaikiny ihany koa mba tsy hikorontana loatra ilay lahatsoratra izay mamadika ny sary. Ity ny CSS izay azonao soratana:
.left {float: left; padding: 0 20px 20px 0; }Ity fomba ity dia mamela ilay sary eo ankavia ary manampy ampiana kely (ampiasaina amin'ny sora-tanana CSS sasany) eo ankavanany sy eo ambany ny sary.
Raha averinao indray ilay pejy ahitana ity HTML ity amin'ny navigateur, dia havaozina eo amin'ny ankavia ny sary ary ny andinin-tSoratra dia maneho ny zony miaraka amin'ny isa mifanaraka aminy. Mariho fa ny sandan'ny lanjan'ny "havia" izay nampiasaintsika dia tsy ara-dalàna. Azontsika atao ny miantso azy io satria ny teny hoe "havia" dia tsy manao na inona na inona. Ilaina ny manana ny toetoetry ny kilasy ao amin'ny HTML izay miasa miaraka amin'ny style CSS izay mamaritra ny fanovana ataonao izay tianao hatao.
Fomba hafa ahafahana manatratra ireo lamina ireo
Ity fomba iray ity hanomezana endrika ny singa iray ny toetoetran'ny kilasy ary avy eo mampiasa fomba tsotra CSS izay mikoriana ilay singa dia fomba iray ahafahanao manatontosa ity sary "ankavia miankavia" ity. Azonao atao koa ny maka ny lanjan'ny kilasy amin'ny sary ary manamboatra azy amin'ny CSS amin'ny fanoratana sehatra iray voafaritra kokoa. Ohatra, andeha hojerentsika ohatra iray izay ahitana ny sary ao anatin'ny fizaràna iray misy lanjan'ny "main content".
Raha te-hanamboatra ity sary ity ianao dia afaka manoratra ity CSS ity:
.main-content img {float: left; padding: 0 20px 20px 0; }Ao amin'ity sehatra ity, ny sainay dia havadika ho havia, miaraka amin'ny lahatsoratra mifatratra manodidina azy tahaka ny teo aloha, saingy tsy nila nanampy sarobidy fanampiny ho an'ny fanamarihanay izahay. Ny fanaovana izany amin'ny ambaratonga dia afaka manampy amin'ny fananganana tahiry HTML kely, izay mora kokoa amin'ny fitantanana ary afaka manampy amin'ny fanatsarana ny fahombiazana.
Farany, azonao atao aza ny mampiditra mivantana avy hatrany ny karazan-tserasera amin'ny endrika HTML anao:
Ity fomba fampianarana ity dia antsoina hoe " style in style ". Tsy azo ekena izany satria mampiavaka ny endriky ny singa iray miaraka amin'ny fanamarihana ara-struktur azy. Ny fanao tsara indrindra ao amin'ny tranonkala dia milaza fa ny endriky sy ny rafitry ny pejy dia tokony hisaraka. Tena manampy tokoa izany raha mila manova ny fandaharam-potoanao ny pejinao ary mitady ny habaka sy fitaovana samihafa miaraka amin'ny tranonkala miresaka. Ny fananana ny endriky ny pejy mifamatotra amin'ny HTML dia mahatonga azy ireo ho sarotra kokoa ny manoratra ny fangatahan'ny media izay hanitsy ny fomba fijerin'ny tranonkala raha ilaina ho an'ireo sehatra samihafa ireo.
Lahatsoratra niavian'i Jennifer Krynin. Edited by Jeremy Girard on 4/3/17.