Ata tutotonu, tusiga, ma poloka elemene pe a fausiaina upega tafaʻilagi
Afai o loʻo e aʻoaʻo pe faʻapefea ona fausia ni 'upega tafaʻilagi , o se tasi o togafiti masani masani e te manaʻomia e te faʻaaogaina, o le auala e faʻapipiʻi ai mea i le faʻatalama o le masini. O lona uiga o le faʻatotonugaina o se ata i luga o le itulau, pe mafai foi ona avea ma totonugalemu-faʻamaonia tusitusiga e pei o ulutala o se vaega o le mamanu.
O le auala saʻo e ausia ai lenei ata vaaia o ata faʻapitoa poʻo le tusiga poʻo lou itulau atoa o le faʻaaogaina lea o le Cascading Style Sheets (CSS) . O le tele o meatotino mo le faʻatotonugaina o loʻo i CSS talu mai le version 1.0, ma e latou te galulue faʻatasi ma CSS3 ma 'upega tafaʻilagi faaonapo nei.
E pei o le tele o vaega o le mamanu o le uepi, e tele auala e faʻaaoga ai le CSS e faʻatotonu ai elemene ile itulau. Seʻio tatou tilotilo i ni auala eseese e faʻaaoga ai le CSS e ausia ai lenei vaaiga vaaia.
I luga o Vaaiga Aoao o le Faʻaaogaina o le CSS i le Nofoaga Autu ile HTML
Faʻasalalau i le CSS e mafai ona avea ma luʻitau mo le amataina o mamanu uepesite aua e tele auala eseese e ausia ai lenei lava ata vaaia. E ui o le tele o metotia e mafai ona manaia pe faʻavasegaina le atinaʻeina i luga o le initaneti e iloa e le o auala uma e galue ai i elemene uma, e mafai ona avea ma luitau tele mo polofesa faʻapitoa fou talu mai le tele o auala eseese o lona uiga e tatau ona latou iloa le taimi e faʻaogaina ai le auala. O le mea e sili ona lelei e fai o le maua lea o se malamalamaaga i ni nai auala. A o amata ona e faʻaaogaina, o le a e iloa poʻo le a le auala e sili ona aoga i ia tulaga.
I se tulaga maualuga, e mafai ona e faʻaaoga CSS i:
- Faletusi tutotonu
- Nofoaga tutotonu o le elemene (e pei o se vaevaega)
- Tutotonu se ata
- Tuʻu faʻataʻatia se poloka poʻo se ata
I le tele (tele) tausaga ua mavae, e mafai e tagata faufautua i le initaneti ona faʻaoga le 'mea autu' e faʻatautū ai ata ma tusitusiga, ae o lena HTML elemene ua faʻanoanoa nei ma ua le toe lagolagoina i luga o 'upega tafaʻilagi faʻaonapo nei. O lona uiga e tatau ona e aloese mai le faʻaaogaina o lenei HTML elemene pe afai e te manaʻo i au itulau e faʻaalia lelei ma usitai i tulaga faʻaonapo nei! O le mafuaʻaga na faʻaaogaina ai lenei elemene, i se vaega lautele, aua o uepesiteite faʻaonapo nei e tatau ona i ai se vavaeesega manino o le fausaga ma le faiga. HTML e faʻaaogaina e fausia ai le faʻatulagaga aʻo faʻatino e le CSS le faiga. Talu ai o le faʻatotonuina o se ata vaaia o se elemene (pe faʻapefea ona foliga nai lo le mea o loʻo i ai), o lena sitaili e taulimaina ma le CSS, ae le o le HTML. O le mea lea e mafua ai le faaopoopoina o se "autu> tag i le siata HTML e le saʻo e tusa ai ma tulaga faʻaonapo nei o upega tafaʻilagi. Ae, o le a tatou liliu atu i le CSS ina ia lelei ma totonugalemu o tatou elemene.
Faʻasalalau Upu ma CSS
O le mea pito sili ona faigofie e faʻapipiʻi i luga o le upega tafaʻilagi o le tusiga. E na o le tasi lava le ituaiga fale e tatau ona e iloa e faia ai lenei mea: tusitusi-fetaui. Faʻaaoga le CSS style i lalo, mo se faʻataʻitaʻiga:
p.center {text-align: center; }
Faatasi ai ma lenei laina o le CSS, o parakalafa uma e tusia ma le vasega tutotonu o le a faʻapotonugalemu i totonu o lona matua matua. Mo se faʻataʻitaʻiga, afai o le parakalafa o loʻo i totonu o le vaevaega, o lona uiga o se tamaititi o lena vaevaega, o le a totonugalemu i totonu o le
O se faʻataʻitaʻiga o lenei vasega o loʻo faʻaaoga i le pepa HTML:
O lenei tusiga e totonugalemu.
Aʻo faʻatotonugaina le faʻaogaina o le 'upega tafaʻilagi ma le faʻaogaina o meafaitino, ia manatua o le a totonugalemu i totonu o lona' elemene ma e le o totonugalemu i le itulau atoa ia lava. Ia manatua foi e mafai ona faigata le faitauina o tusiga tutotonu ile faitauga mo le tele o tusitusiga, o le mea lea ia faʻaaogaina ai lenei lavalava. O ulutala ma poloka laiti o tusitusiga, e pei o le teaser mo se tusiga poʻo isi mea e masani ai, e masani lava ona faigofie ona faitau ma faʻamaonia pe a faʻatotonuina, ae tele poloka o tusitusiga, e pei o le tusitusiga atoa lava ia, o le a faigata ona faʻaaoga pe afai o le mea e tumu i totonu tauamiotonuina. Manatua, o le faitauina e masani lava o le ki pe a sau i le upega tafaʻilagi.
Faʻamaumauga o Polokalama o Faʻamaumauga i totonu ole CSS
O poloka poloka o soʻo se elemene i luga o lau itulau o loʻo i ai se lautele lautele ma ua faʻatuina o se elemene poloka. O le tele o taimi, o nei poloka e faia i le faʻaaogaina o le HTML
failautusi {
tafatafa: 0 auto;
lautele: 80em;
}
O lenei CSS shorthand mo le mea pito i lalo o le a seti ai le pito i luga ma le pito i lalo i le taua o le 0, ao le agavale ma le taumatau o le a faʻaogaina le "auto." O lenei mea e manaʻomia ai soʻo se avanoa e maua ma tufatufa tutusa i le va o itu e lua o le matalama o matafaga, faʻatautaia lelei le elemene i le itulau.
Faʻaaogaina i le HTML:
ae o le tusi o loʻo i totonu o loʻo tuʻu faʻatasi.
A faʻapea o lau poloka ei ai le lautele o le lautele, o le a totonugalemu lava i totonu o le elemene o loo iai. O le upu o loʻo i ai i totonu o lena poloka o le a le totonugalemu i totonu, ae o le a tuua-tauamiotonuina. O lenei mea o loʻo totoe le faʻamaonia-o le faʻamaonia i le le mafai ona maua i luga o le 'upega tafaʻilagi. Afai e te manaʻo e faʻapipiʻi foi le tusiga, e mafai ona e faʻaaogaina le mea na faʻaogaina muamua i le tusitusiga ma lenei auala e faʻatotonu ai le vaevaega.
Faʻaauau Ata ma CSS
E ui o le tele o tagata suʻesuʻe o le a faʻaalia ata e faʻaogaina i le faʻaaogaina o le mea lava lea e tasi-o le mea lea ua tatou vaʻavaʻai i le parakalafa, e le o se manatu lelei le faalagolago i lena auala e pei ona le fautuaina e le W3C . Talu ai e le o fautuaina, o loʻo i ai pea se avanoa e mafai ai ona filifilia e le au suʻesuʻe ia lumanaʻi lenei auala.
Nai lo le faʻaaogaina o tusitusiga-fetaui e faʻatotonu ai se ata, e tatau ona e taʻu manino atu i le masini o le ata o se elemene-poloka. I lenei auala, e mafai ona e faʻatotonuina e pei ona e faia i se isi poloka. O le CSS e faia lenei mea e tupu:
img.center {
faʻaalia: poloka;
tafatafa-tauagavale: auto;
tafatafa-taumatau: auto;
}
Ma o le HTML lea mo le ata tatou te mananao e totonugalemu i ai:
E mafai foʻi ona e faʻapipiʻi mea faitino e faʻaaoga ai i le laina CSS (silasila i lalo), ae o lenei faiga e LE FAITAU talu ai ona faʻaopopoina faʻailoga i totonu o lau siata HTML. Manatua, matou te mananaʻo e vavae ese le lanu ma le fausaga, o lea e faʻaopoopoina ai le sitaili o le CSS i lau code HTML i le vavaeina o le teteʻa ma, i lea tulaga, e tatau ona aloese i soo se taimi e mafai ai.
Faʻatulagaina Elemene Faʻamataʻu ma le CSS
O le faʻalauteleina o mea faitino e masani ona luitauina i le mamanu o le initaneti, ae faʻatasi ai ma le faʻatagaina o le CSS Flexible Box Layout Module i le CSS3, o loʻo i ai nei se auala e faia ai.
O le faʻatulagaina o le vaitusi tutusa e tutusa lelei ma le faʻaogaina o le laina faʻafefiloi o loʻo ufiufi i luga. O le meatotino a le CSS e faʻatusatusa-faʻatusatusa ma le tau ogatotonu.
.vcenter {
laina faʻatusa-faʻatusatusa: ogatotonu;
}
O le mea pito i lalo i lenei auala, e le o mea uma e lagolagoina le laiga CSS FlexBox, e ui o loʻo faʻaauau pea ona o mai i lenei auala fou le laiga o le CSS! O le mea moni, o tagata suʻesuʻe uma faʻaonapo nei i aso nei o loʻo lagolagoina lenei style CSS. O lona uiga e naʻo ou popolega i le Flexbox o le a sili atu le tele o faʻamaumauga o le sailiga.
Afai ei ai au mataupu ma suʻesuʻega tuai, ua fautuaina e le W3C e te tuʻuina i totonu o se atigipusa le tusi i totonu o se koneteina e faʻaaoga ai le auala lenei:
- Tuu ia elemene ina ia totonugalemu i totonu o se elemene o lo oi ai, e pei o se vaevaega.
- Faʻamau se maualuga maualalo i luga o le mea o iai.
- Faʻaalia o loʻo i ai le elemene o se laulau laulau.
- Seti le laina i luga i le "vaeluagalemu."
Mo se faʻataʻitaʻiga, o le CSS:
.vcenter {
mita-maualuga: 12em;
faʻaalia: laulau-cell;
laina faʻatusa-faʻatusatusa: ogatotonu;
}
Ma o le HTML lenei:
O lenei tusitusiga e faʻatotonugalemu i totonu o le pusa.
Faʻamatalaga Faʻamatalaga ma Faʻamualuga o Internet Explorer
E i ai nisi auala e faʻamalosi ai Internet Explorer (IE) e faʻatotonuga ona faʻaaoga lea o faʻamatalaga tuʻutuʻu ina ia na o IE e iloa ai sitaili, ae o ni nai upu leaga ma le leaga. O le tala fiafia e faapea, faatasi ai ma le faaiuga lata mai a le komiti a le kamupani a le IE, e le tatau ona vave maua e le au sailiiliga i luga o le upega tafaʻilagi, ona faafaigofie ai i le aufaipisinisi ona faʻaaoga auala faʻapenei e pei o CSS FlexBox lea o le a faia uma ai le laiga CSS, e le na o le faʻatautaia, sili atu ona faigofie mo tagata uma faʻailoga uepi.