Ko nga whakaahua o te pokapū, nga tuhinga, me nga waahi poraka ina hangaia nga paetukutuku
Mena kei te ako koe ki te hanga whare tukutuku , ko tetahi o nga mahinga noa e hiahiatia ana e koe ko te whakahaere i nga mea kei roto i te matapihi tirotiro. Ko te tikanga tenei ko te whakairi i tetahi ahua i runga i te whaarangi, i te mea ka taea e te pokapu-te whakatika i nga tuhinga hei waahanga hei waahanga o te hoahoa.
Ko te huarahi tika ki te whakatutuki i tenei tirohanga ataata o nga whakaahua tawhito, kuputuhi ranei, tae noa ki to paetukutuku tukutuku katoa, ko te whakamahi i nga Rau Tangata Whakairo (CSS) . Ko te nuinga o nga mea mo te whakauru i roto i te CSS mai i te putanga 1.0, a ka mahi nui ki a CSS3 me nga kaituera tukutuku hou .
He maha nga waahanga o te hoahoa tukutuku, he maha nga huarahi hei whakamahi i te CSS ki nga kaupapa pokapū i roto i te wharangi tukutuku. Kia tirohia etahi huarahi rereke hei whakamahi CSS hei whakatutuki i tenei tirohanga ataata.
I runga i te Whakamarama i te CSS ki nga Paerewa Poari i te HTML
Ko te maatauranga me te CSS he mea uaua ki te timata i nga kaihoahoa tukutuku na te mea he maha nga huarahi rereke hei whakatutuki i tenei ahua ataata. Ahakoa he momo pai, he waahi ranei nga kaiwhakarato tukutuku e mohio ana kaore nga mahi katoa e mahi i runga i nga mea katoa, he tino uaua tenei mo nga kaiwhakaako tukutuku hou mai i te maha o nga tikanga e hiahia ana kia mohio ki te wa e whakamahi ai i taua huarahi. Ko te mea pai rawa ki te mahi, ko te mohio ki nga huarahi maha. A, ka timata koe ki te whakamahi i aua mea, ka ako koe he aha te tikanga e mahi pai ana i aua wa.
I te taumata tiketike, ka taea e koe te whakamahi CSS ki:
- Kuputuhi o te pokapū
- Whakaritehia he huinga taumata-poraka (rite te wehenga)
- Te pokapū he pikitia
- Ka poutū he poraka he poraka ranei he whakapakoko
He maha nga tau kua pahure ake nei, ka taea e nga kaihoahoa tukutuku te whakamahi i te "pokapū" ki te whakauru i nga whakaahua me nga kuputuhi, engari kua whakakorea te mea HTML , kaore ano i te tautokona ki nga kaituhi tukutuku hou. Ko te tikanga tenei kia kaua e whakamahi i tenei kaupapa HTML ki te hiahia koe ki te whakaatu tika me te whakarite i nga paerewa hou! Ko te take i whakakorea ai tenei kaupapa, ko te waahanga nui, no te mea he wehewehenga motuhake nga waahanga hou o te waahanga me te ahua. Ka whakamahia te HTML hei hanga hanganga i te wa e tohutohu ana a CSS i te kāhua. No te mea ko te whakawhitinga he tohu ataata o te huānga (he pehea te ahua o te ahua o te ahua), ko te ahua o te ahua e mahihia ana e CSS, ehara i te HTML. Ko te aha tenei ka whakauruhia ai te tohu "pokapū" ki te hanganga HTML he hē i runga i nga paerewa tukutuku hou. Engari, ka tahuri tatou ki te CSS kia pai ake ai o tatou huinga.
Whakaurua Kuputuhi ki CSS
Ko te mea tino pai ki te whakauru i runga i te paetukutuku he kuputuhi. Kotahi noa nga taonga tahua e hiahia ana koe ki te mohio ki te mahi i tenei: tautuhi kuputuhi. Tangohia te ahua CSS i raro, hei tauira:
p.center {tuhinga kuputuhi: pokapū; }
Ki tenei raupapa o CSS, ka whakawhäitihia nga parawae katoa e tuhia ana me te akomanga pokapū i roto i tana kaupapa matua. Hei tauira, mehemea kei roto i te wehenga te paraka, te tikanga ko te tamaiti o taua wehenga, ka tuhia ki te taatai i roto i te
Anei he tauira o tenei akomanga ka whakamahia i roto i te tuhinga HTML:
Kua tuhia tenei tuhinga.
A, no te whakatairanga i te kuputuhi me te taangata kuputuhi, maharahia ka whakauruhia ki roto i ona waahanga, kaore hoki i whakauruhia ki roto i te katoa o te pukapuka tonu. Me mahara ano he mea uaua ki te korero mo nga porowhita nui, he pai te whakamahi i tenei ahua. Ko nga upoko me nga poraka iti o te kuputuhi, me te kuputuhi teaser mo te tuhinga, me etahi atu ihirangi, he maha ngawari ki te korero me te pai i te waahanga, engari he nui nga waahanga, ano he tuhinga tonu ake, he uaua ki te kai mehemea he tino pokapu te ihirangi tika. Kia mahara, ko te korerotanga he maatau tonu ia ka tae mai ki te kuputuhi paetukutuku!
Whakaraupapa Poraka Ihirangi me CSS
Ko nga poraka tetahi o nga huinga i runga i to papanga kei te whanui tawhito, kua whakaturia hei pou-paetahi taumata. Ko te nuinga o nga wa, ka hangaia enei poraka ma te whakamahi i te huānga HTML
kaituhi {
tapahi: 0 auto;
whanui: 80em;
}
Ko tenei CSS mo te waahi tawhito ka whakaturia nga tawhito runga me raro ki te uara 0, ka whakamahia te taha maui me te tika "auto". Ko te tikanga tenei he waahi e wātea ana, e wehewehea ana i waenganui i nga taha e rua o te matapihi kawewhenua, me te whakatairanga i te kaupapa i runga i te whārangi.
I konei ka whakamahia i roto i te HTML:
engari ko te kuputuhi i roto i te reira ka mahue te whakawhiti.
I te wa e tohua ana e to poraka te whanui tautuhi, ka uru atu ki roto i te huānga o roto. Ko nga kuputuhi kei roto i taua poraka kaore e tau ana ki roto, engari ka waiho-ka tika. Kei te waihohia tenei kuputuhi kaituhi-kua whakatikahia i te taunoa i roto i nga pūtirotiro tukutuku. Mena e hiahia ana koe ki te tuhi i te tuhinga, ka taea e koe te whakamahi i nga tuhinga tautuhi-taapiri i hipokina e matou i mua i tenei taha ki tenei huarahi ki te whakatairanga i te wehenga.
Whakanuihia nga Images me CSS
Ahakoa te nuinga o nga kaitoro e whakaatu ana i nga whakaahua e whakatairangahia ana ma te whakamahi i te ahua o te tuhinga kuputuhi rite kua tirohia e matou mo te waahanga, ehara i te mea pai ki te whakawhirinaki ki taua tikanga kaore i te tūtohuhia e te W3C . Mai i te mea kaore i te tūtohutia, he waahi tonu ka taea e nga putanga o te hunga heke ki te whiriwhiri ki te whakarereke i tenei tikanga.
Engari ki te whakamahi i te kuputuhi ki te whakauru i tetahi pikitia, me tino whakaatu koe ki te rorohiko e whakaatu ana te ahua ki te huinga taumata-paraka. I tenei ara, ka taea e koe te whakauru ki a koe kia rite ki tetahi atu poraka. Tenei ko te CSS kia hangaia tenei:
img.center {
whakaatu: poraka;
taha-maui: auto;
tawhito-matau: auto;
}
Na konei ko te HTML e mo te ahua e hiahia ana matou kia tauhia:
Ka taea hoki e koe te whakauru i nga taonga ki te whakamahi i te CSS-raupapa (tirohia i raro nei), engari ko tenei waahanga kaore i te whakaarohia mai i te mea ka whakanuia e ia nga hanganga ataata ki to tohu tohu HTML. Kia mahara, e hiahia ana matou ki te wehewehe i te momo me te hanganga, na ko te whakauru i nga momo CSS ki taau waehere HTML me te wehenga i taua wehenga, me te penei, me karohia i nga wa katoa ka taea.
Te Whakatairanga i nga Mea Pouturu me te CSS
Ko te whakatairanga i ngaa mea i te waarangi he uaua i roto i te hoahoa tukutuku, engari me te tukunga o te CSS Flexible Box Layout Module i CSS3, he huarahi inaianei hei mahi.
Ko te hanganga matapihi e mahi rite ana ki te hanganga whakapae kua taupokina ki runga. Ko te taonga CSS he poutū-e hāngai ana ki te uara waenga.
.vcenter {
poutū-taurangi: waenganui;
}
Ko te whakaheke ki tenei huarahi ko te kore i te katoa o nga kaituhi e tautoko CSS FlexBox, ahakoa kei te haere tonu atu ki tenei mahinga whakatakotoranga CSS hou! Ko te mea pono, kei te tautoko nga kaihoahoa hou o tenei ra i te ahua o te CSS. Ko te tikanga tenei ko to raruraru noa iho ki a Flexbox ka nui ake te putanga o te tirotiro.
Mena kei a koe nga take me nga kaituhi tawhito, e taunaki ana te W3C kia whakauru koe i nga kuputuhi i roto i te pouaka ma te whakamahi i te tikanga e whai ake nei:
- Tuhia nga hiko ki te whakauru ki roto i te huānga whakauru, pērā i te div.
- Tautuhia he teitei iti i runga i te huānga kei roto.
- Whakapuakihia ko te whakauru o te huānga hei tepu ripanga.
- Tautuhia te whakawhitinga poutū ki "waenganui."
Hei tauira, koinei te CSS:
.vcenter {
min-teitei: 12em;
whakaatu: tepu-tepu;
poutū-taurangi: waenganui;
}
Na konei ko te HTML:
Ko tenei kuputuhi kei te poutū ki te pouaka.
Poutū Poutū me nga Tauwhitinga Tawhito o Internet Explorer
He maha nga huarahi hei akiaki i te Internet Explorer (IE) ki te pokapū, ka whakamahi i nga korero tuituru kia kite anake te IE i nga momo, engari he iti te verbose me te kino. Ko te rongo pai ko te whakatau a Microsoft mo te whakaheke i te tautoko mo nga putanga pakeke o IE, me tere ake te tirotiro o nga kaiwhakarato ki te whakamahi i nga huarahi raupapa hou rite CSS FlexBox, ka hanga i nga mahinga CSS katoa, ehara i te whakawhitinga, i te maatau ake mo nga kaihoahoa tukutuku katoa.