Sary afisy, lahatsoratra, ary fanakanana rehefa manamboatra tranokala
Raha mianatra manamboatra tranokala ianao , iray amin'ireo tricks mahazatra indrindra tokony horaisinao, dia ny fomba ifantohana ireo singa ao amin'ny varavarankala. Mety midika izany hoe mametraka sary eo amin'ny pejy izany, na mety ho ivon'ny fanamarinana ny lahatsoratra tahaka ny lohateniny ao anatin'ny famolavolana.
Ny fomba mety hanatontosana ny endrik'ity sary ity na sary na lahatsoratra manontolo na ny tranonkalanao manontolo dia ny fampiasana Cascading Style Sheets (CSS) . Ny ankabeazan'ny trano fonenana ho an'ny foibe dia efa tao CSS nanomboka tamin'ny version 1.0, ary niasa tamin'ny CSS3 sy ny tranonkala maoderina maoderina izy ireo .
Tahaka ny endriky ny endriky ny tranonkala, misy fomba maro ampiasàna ny CSS ho singa mifantoka amin'ny tranonkala. Andeha hojerentsika ny fomba samihafa ampiasain'ny CSS hahatratrarana ity endrika hita maso ity.
Amin'ny fanehoana ny fampiasana CSS amin'ny Elece Center ao HTML
Ny fanatonana amin'ny CSS dia mety ho fanamby hanombohana ny mpamorona tranonkala satria misy fomba maro samihafa hanatanterahana an'ity fomba iray ity. Na dia maro karazana fomba amam-panao aza ny mpizaha tranonkala tsara tarehy na efa za-draharaha izay mahafantatra fa tsy ny teknôlôjia rehetra no miasa amin'ny singa tsirairay, ity dia mety ho sarotra ho an'ny matihanina amin'ny tranonkala vaovao satria ny karazana fomba isan-karazany dia midika hoe mila mahafantatra izy ireo hoe rahoviana no ampiasaina. Ny zavatra tsara indrindra tokony hatao dia ny hahazo fahatakarana amin'ny fomba fohy vitsivitsy. Rehefa manomboka mampiasa azy ireo ianao, dia ho fantatrao hoe inona no fomba fiasa tsara indrindra amin'ny toe-javatra.
Amin'ny avo indrindra, afaka mampiasa CSS ianao amin'ny:
- Centre text
- Santionan'ny singa iray mifangaro (toy ny fizarana)
- Foibe an-tsary
- Miantehitra an-tsokosoko sary na sary iray
Maro (taona maro lasa izay, ireo mpanamboatra tranonkala dia afaka mampiasa ny singa
Famakiana lahatsoratra miaraka amin'ny CSS
Ny tena mora indrindra ny mifantoka amin'ny pejin'ny tranonkala dia lahatsoratra. Tsy misy afa-tsy toetra iray tokony haha-fantatrao hanaovana izany: text-align. Raiso ny style CSS eto ambany, ohatra:
p.center {text-align: center; }
Amin'ny alalan'ity andalana CSS ity, ny andininy rehetra voasoratra amin'ny kilasy afovoany dia mifantoka amin'ny horonan-tsarimihetsika ao anatin'ny elon-dreniny. Ohatra, raha ao anatin'ny fizaràna iray ilay andininy, midika izany fa zanaky ny fizarana io, dia hifantoka mivantana eo amin'ny
Ity misy ohatra iray amin'ity kilasy ity izay ampiharina ao amin'ny rakitra HTML:
Ity lahatsoratra ity dia mifototra amin'ny
Rehefa mifantoka amin'ny lahatsoratra amin'ny alimanakan'ny lahatsoratra dia tsarovy fa hifantoka ao anatin'ny singa misy azy izy io ary tsy voatery hiorina ao anatin'ny pejy feno. Tsarovy koa fa mety ho sarotra ny mamaky ny lahatsoratra ambaran'ny santionany ho an'ny votoatiny lehibe, ka ampiasao io fomba io tsikelikely. Lohateny sy vakoka kely misy soratra, toy ny lahatsoratra teaseran'ny lahatsoratra na votoaty hafa, dia mora mora foana ny mamaky sy mamerina rehefa mifantoka, fa ny vaki-tsoratra lehibe kokoa, toy ny lahatsoratra manontolo mihitsy, dia mety ho sarotra ny handevona raha feno ny votoatiny nohamarinina. Tadidio fa ny famakiana dia milefitra foana rehefa tonga amin'ny tranokalan'ny vohikala!
Fanapariahana ny votoatiny amin'ny CSS
Ny blocs dia singa iray eo amin'ny pejinanao izay manana farafahakeliny voafaritra ary asongadina ho singa mitoka-monina. Matetika, ireto blocs ireto dia noforonina tamin'ny fampiasana ny HTML
div.center {
margin: 0 auto;
width: 80em;
}
Ity tsenan'ny CSS ity ho an'ny fananana margin dia hametraka ny sisiny ambony sy ny sisiny ambany amin'ny sandan'ny 0, raha ny ankavia sy ny ankavanana dia mampiasa "auto." Izany dia maka ny toerana rehetra misy ary manasaraka azy eo anelanelan'ny lafiny roa amin'ny varavarankelin'ny fisainana, izay mamantatra tsara ny singa ao amin'ny pejy.
Ity dia ampiharina ao amin'ny HTML:
fa ny lahatsoratra ao anatiny dia havaozina havaozina.
Raha toa ka manana habe marika voafaritra ny sakana, dia hifantoka ao anatin'ny singa misy azy. Ny lahatsoratra voarakitra ao anatin'io sakana io dia tsy hiorina ao anatiny, fa havaozina-nohamarinina. Ity dia noho ny lahatsoratra sisa tavela-nohamarinina tao amin'ny tranonkala browsers. Raha toa ka te hifantoka amin'ny lahatsoratra ianao, dia azonao ampiasaina ilay fanovozam-pejy mifampitohy voarakitra miaraka amin'ny fomba fampiasana azy io mba hamantanana ny fizarana.
Afangaro sary amin'ny CSS
Raha ny ankamaroan'ny navigateurs dia mampiseho sary mifototra amin'ny fampiasana ilay lahatsoratra mitovy ihany-mampifanaraka ny fananana izay efa nodinihintsika teo amin'ilay fehintsoratra, tsy hevitra tsara hianteherana amin'izany fomba fiasa izany fa tsy omen'ny W3C . Koa satria tsy voatery izy io, dia misy foana ny fahafaha-midika fa ny fifantenana ny hoavin'ny browsers dia afaka mifidy ny tsy miraharaha an'io fomba io.
Raha tokony hampiasa ny tarehimarika-hampitombo ny sary iray, dia tokony hilaza amin'ny mpizara fa ny singa dia singa mifangaro. Amin'izany fomba izany, azonao atao ny mifantoka izany tahaka ny andoavanao hafa. Ity ny CSS mba hitrangan'izany:
img.center {
show: block;
margin-left: auto;
margin-right: auto;
}
Ary ity ny HTML ho an'ny sary izay tiantsika hifantohana:
Azonao atao ihany koa ny manantona ireo zavatra entina mampiasa CSS ao anaty (jereo eto ambany), saingy ity fomba ity dia TSY toro-hevitra satria manampy sary an-tsipiriany ao amin'ny marika HTML. Tadidio fa tianay ny manavaka ny endrika sy ny rafitra, noho izany ny fampidiran-tsoratra CSS amin'ny code HTML anao amin'ny fisarahana izay fisarahana ary raha tokony ho izany dia tokony hialana amin'ny fotoana rehetra izany.
Mifototra amin'ny CSS
Ny fametrahana fitaovana mifototra amin'ny seha-pifaneranana dia sarotra foana eo amin'ny sehatry ny tranonkala, saingy miaraka amin'ny famoahana ny CSS Flexible Layout Modul ao CSS3, misy fomba iray hanaovana izany.
Ny alam-barotra amin'ny fomba ofisialy dia miara-miasa amin'ny alim-borona ambaratonga ambony. Ny fananan-tany CSS dia mifanohitra amin'ny alàlan'ny sanda miditra.
.vcenter {
vertical-align: afovoany;
}
Ny tsy fahafantaran'ity fomba fiasa ity dia tsy ny browsers rehetra no manohana ny CSS FlexBox, na dia mihamaro hatrany aza ny manatona io fomba fiasa vaovao CSS io! Raha ny marina, ireo browsette maoderina rehetra ankehitriny dia manohana ity style CSS ity. Midika izany fa ny fanahianao tokana amin'ny Flexbox dia ny safidin'ny tranokala maivana kokoa.
Raha manana olana amin'ny rindrankajy zokiny ianao, dia manoro hevitra ny W3C fa ny lahatsoratra afovoany amin'ny sehatra iray dia mifototra amin'ny kaontinao amin'ny alalan'ity fomba manaraka ity:
- Apetraho ireo singa mifantoka ao anaty singa iray misy, toy ny div.
- Ampiasao avo lenta ny singa misy.
- Ambarao fa misy ny singa toy ny latabatra tabilao.
- Apetraho amin'ny "afovoany."
Ohatra, ity ny CSS:
.vcenter {
min-height: 12em;
mampiseho: latabatra-cell;
vertical-align: afovoany;
}
Ary eto ny HTML:
Ity lahatsoratra ity dia mifototra tsara ao anaty boaty.
Fandrindrana an-dàlambe sy alim-baventy Internet Explorer
Misy fomba sasantsasany ahafahana manery ny Internet Explorer (IE) hametraka santionany ary avy eo dia mampiasa fanehoan-kevitra mifandraika mba hahitana ny endriky ny IE ihany, saingy somary mampihomehy sy mahatsikaiky. Ny vaovao tsara dia satria amin'ny fanapahan-kevitr'i Microsoft vao haingana ny fametrahana ny fanohanana ireo dikan-teny taloha ao amin'ny IE, ireo mpiblaogy tsy voatanisa ireo dia tokony hivoaka tsy ho ela, mba hanamora kokoa ireo mpanamboatra tranonkala mampiasa fomba maoderina maoderina toy ny CSS FlexBox izay hahatonga ny CSS rehetra, Tsy hoe miorina fotsiny, mora kokoa ho an'ireo mpamorona tranonkala rehetra.