Ngā Puka Ahua me CSS

Ako ki te whakapai ake i te titiro o to paetukutuku

Ko te ako ki te whakamahi i te ahua o te CSS he huarahi pai hei whakapai ake i te titiro o to paetukutuku. Ko nga ahua HTML kei te nuinga o nga mea tino nui i runga i te nuinga o nga paetukutuku. He maha nga waimarie me te whakamahi i nga mahi kaore e nui ana te ahua o te ahua.

Ma te CSS, ka taea te huri. Ko te whakakotahi i te CSS me nga tohu paari ake ka taea te whakaputa etahi ahua ataahua.

Huria nga Tae

Ka rite ki te tuhinga, ka taea e koe te huri i te papa o mua me nga tae papamuri o nga huinga hanga.

He ara ngawari ki te huri i te tae papamuri o te tata o nga ahuatanga katoa ko te whakamahi i te taonga papamuri-te tae ki te tohu whakauru. Hei tauira, ko tenei waehere he tae papanga puru (# 9cf) i runga i nga mea katoa.

whakauru {
tae-tae: # 9cf;
tae: # 000;
}

Hei huri i te tae papamuri o etahi o nga momo hanga, tohua noa atu te kupenga me te whiriwhiri i te momo. Hei tauira:

whakauru, textarea, tīpako {
tae-tae: # 9cf;
tae: # 000;
}

Me mohio ki te huri i te tae kuputuhi ki te panui i to panui o te tae. Ko te rereketanga o nga tae e awhina ana ki te hanga i nga mea ahuatanga atu. Hei tauira, ko te kuputuhi i runga i te karaehe whero whero pouri he tinowari te korero ki te maama te tae kuputuhi. Hei tauira, ko tenei waehere he tuhinga maama i runga i te papamuri whero.

whakauru, textarea, tīpako {
karaehe-tae: # c00;
tae: #fff;
}

Ka taea ano e koe te whakaatu i te tae papamuri i runga i te tohu puka. Kia mahara ko te tūtohu puka ko te mea poraka , na te tae kei roto i te taatai ​​katoa, ehara i nga waahi anake o nga huānga.

Ka taea e koe te tāpiri i te papamuri kōwhai ki tētahi huānga poraka hei tuwhera i te rohe, penei:

puka {
tae-tae: #ffc;
}

Tāpirihia te Taitapa

Ka rite ki nga tae, ka taea e koe te whakarereke i nga rohe o nga momo ahua. Ka taea e koe te taapiri i tetahi rohe tata i te ahua katoa. Me tino whakanui atu i nga paera, ka whakauruhia ranei nga mea hanga i te taha o te rohe.

Anei he tauira o te waehere mo te pango pango 1-pika me te 5 pikaro o te panuku:

puka {
rohe: 1px tauhou # 000;
te taraiwa: 5px;
}

Ka taea e koe te whakanoho i nga rohe ki runga ake i te ahua anake. Hurihia te rohe o nga mea whakauru ki te whakauru ia ratou:

whakauru {
rohe: 2px tahuna # c00;
}

Kia tupato ka whakanohoia e koe nga waahanga ki nga pouaka whakaurunga, me te mea ka iti iho te ahua o nga pouaka whakauru, kaore hoki etahi o te iwi e mohio ka taea e ratou te whakakii i te puka.

Whakaritehia nga Tahua Ahua

Na roto i te whakakotahi i nga mea ahua me te whakaaro me etahi CSS, ka taea e koe te whakaturia tetahi ahua ahua pai e whakaoti ana i te hoahoa me te tahora o to pae.