Te whakamahi i nga Classes Style me nga ID

Nga Akoranga me nga TT Tautoko Tautoko i to CSS

Ko te hanga i nga paetukutuku kei runga i te Tukutuku o tenei ra, me whai whakaaro nui ki te CSS (Pepa Whakairo Tohu). Ko nga tohutohu e hoatu ana e koe he paetukutuku hei whakatau me pehea e turangi ai i te matapihi tirotiro. Ka whakamahi koe i te raupapa o "momo" ki to tuhinga HTML ka waihanga i te ahua me te paanga o to paetukutuku.

He maha nga huarahi hei whakamahi i nga momo waahanga kua taakitia i runga ake i tetahi tuhinga, engari ko te nuinga o nga wa e hiahia ana koe ki te whakamahi i te ahua i etahi o nga mea timatanga i roto i te tuhinga, engari ehara i nga wa katoa o taua kaupapa.

Ka hiahia pea koe ki te waihanga i tetahi kāhua ka taea e koe te tono ki te maha o nga huānga i roto i te tuhinga, me te kore e whakahou i te ture ahua mo ia takitahi. Hei whakatutuki i enei momo e hiahiatia ana, ka whakamahi koe i te akomanga me nga huanga ID HTML. Ko enei huanga ko nga huanga o te ao e taea te whakamahi ki te tata ki nga tohu HTML katoa .e whakaatu ana koe ahakoa he mahi wehewehe koe, he parakalaka, he hononga, he paparangi, he waahanga ranei o nga atu HTML i roto i to tuhinga, ka taea e koe te tahuri ki te akomanga me nga huanga ID ki te awhina ia koe ki te whakatutuki i tenei mahi!

Nga Kaiwhiwhi Pakeke

Ka taea e te kaitohutohu o te akomanga ki a koe te whakatau i nga momo maha ki te huānga kotahi ranei i te tuhinga. Hei tauira, ka hiahia pea koe ki etahi waahanga o to kuputuhi e karangahia ana i roto i te tae rereke mai i te toenga o te tuhinga i roto i te tuhinga. Ko enei waahanga kua whakaatuhia he waahanga "mataara" kei te tautuhi koe i te whaarangi. Ka taea e koe te tautuhi i nga pararangi ki nga akomanga penei:


p {tae: # 0000ff; }
p.alert {te tae: # ff0000; }

Ko enei momo ka tautuhi i te tae o nga parawae katoa ki te puru (# 0000ff), engari ko tetahi waahanga me te huanga o te akomanga o te "mataara" ka hurihia ki te whero (# ff0000). Ko te mea na te mea ko te huanga o te akomanga he mea tino nui atu i te ture CSS tuatahi, e whakamahi ana i te kaitohu tohu anake.

A, no te mahi tahi me CSS, ka whakakorea he ture motuhake i tetahi waahanga iti ake. Na i roto i tenei tauira, ko te nuinga o te ture ka whakatau i te tae o nga parawae katoa, engari ko te tuarua, ko te ture motuhake ake kaore e kaha ki te whakatakoto i etahi waahanga.

Anei ka taea te whakamahi i tenei i etahi tohu HTML:


Ka whakaatuhia tenei pararangi ki te puru, ko te taunoa mo te whārangi.


Ko tenei waahanga ka waiho ano i te puru.


A ka whakaatuhia tenei pararangi i te whero mai i te waahanga o te akomanga ka huri i te karaehe paerewa taiao mai i te huinga o te kaitono.

I roto i taua tauira, ko te ahua o te "p.alert" ka whakamahi anake ki nga waahanga paraka e whakamahi ana i taua konga "mataara". Ki te hiahia koe ki te whakamahi i taua akomanga i runga i nga huinga HTML maha, ka tangohia e koe te huānga HTML mai i te timatanga o te te tikanga kāhua (kia tika te waiho i te wa (.) i te waahi), penei:


.alert {taiao-tae: # ff0000;}

Kei te wātea tenei akomanga ki tetahi mea e hiahia ana. Ko tetahi waahanga o to HTML e whakaatu ana i te uara o te akomanga o te "mataara" ka whiwhi i tenei ahua. I roto i te HTML i raro nei, kei a maatau he parawae me tetahi pane 2 e whakamahi ana i te akomanga "mataara". Ko enei e rua ka whai papanga-whero whero i runga i te CSS i whakaaturia e matou.


Ka tuhia tenei panui ki te whero.

Na ka h2 tenei h2.

I runga i nga paetukutuku i tenei ra, ka whakamahia nga huanga o te akomanga ki te nuinga o nga huinga, no te mea hewari ake te mahi ki a raatau mai i te tirohanga motuhake o nga ID. Ka kitea e koe nga wharangi HTML o naianei ka whakakiia ki nga huanga o te akomanga, ko etahi o enei e whakahuatia ana i nga wa maha i roto i te tuhinga me etahi atu e puta ana i te wa kotahi.

Kaiwhiri ID

Ka taea e te kaitohu ID te tuku ingoa ki tetahi momo tahua kaore e whakauru ana ki te tohu me tetahi atu huanga HTML . Meahia he wehewehenga i roto i to tohu tohu HTML kei roto i nga korero mo tetahi kaupapa.

Ka taea e koe te hoatu i tenei wehenga he huanga ID mo te "kaupapa", a, ki te hiahia koe ki te whakariterite i taua wehenga ki te rohe pango 1-pika nui ka tuhia he waehere ID penei:


#event [rohe: 1px pakari # 000; }

Ko te wero me nga kaiwhiwhi ID kaore e taea te whakahuatia i roto i te tuhinga HTML. Me motuhake ratou (ka taea e koe te whakamahi i taua ID i runga i nga waarangi maha o to pae, engari kotahi anake i roto i ia tuhinga HTML takitahi). Na, mehemea he 3 nga kaupapa i hiahiatia e koe mo tenei rohe, me hiahia koe ki te hoatu ki a ratou nga huanga ID o "event1", "event2" me te "event3" me te mahinga ia ia. Na reira, ka nui atu te mahinga ki te whakamahi i te waahanga o te "kaupapa" e kiia ana i mua ake nei, me te tahua i te katoa i te wa kotahi.

Ko tetahi atu wero ki nga huanga ID ko te mea he nui atu te korero motuhake atu i nga huanga o te akomanga. Ko te tikanga tenei mehemea kei te hiahia koe ki te whai CSS hei whakakore i te hanganga i tautuhia i mua, ka tino uaua ki te mahi i te mea mehemea kua whakawhirinaki nui koe ki nga ID. Ko tenei he maha nga kaihanga tukutuku kua neke atu i te whakamahi i nga ID i to raatau tohu, ahakoa he hiahia anake ta ratou ki te whakamahi i taua uara, a, ka tahuri ki nga ahuatanga iti mo te waahanga mo nga tata katoa.

Ko tetahi o nga wahi e tae mai ai nga huanga ID ki te waitohu ka hiahia koe ki te waihanga i tetahi whārangi e hono ana i nga hononga o te punga. Hei tauira, ki te whai koe i tetahi paetukutuku taapiri paraira e whakauru ana i nga ihirangi katoa i runga i tetahi whārangi kotahi me nga hononga e "peke" ki nga waahanga o tera waahanga. Ka mahia tenei ma te whakamahi i nga huanga ID me nga hononga kuputuhi e whakamahi ana i enei hononga hono.

Ka tapiri noa koe i te uara o taua huanga, i mua i te tohu tohu, ki te huanga href o te hononga, penei:

Koinei te hononga

A, no te pāwhiri ka pa ranei, ka peke tenei hono ki te waahanga o te whārangi e whai ana i tenei huanga ID. Mena kaore he huanga i te whārangi e whakamahi ana i tenei uara ID, kaore e taea e te hono te mahi i tetahi mea.

Kia mahara, ki te hiahia koe ki te waihanga i te whārangi-hono e hono ana ki runga i tetahi pae, ka hiahiatia nga huanga ID, engari ka taea tonu te tahuri ki nga karaehe mo nga kaupapa taiao CSS. Ko tenei taku tohu i nga waahanga i tenei ra - I whakamahia e au nga kaitono o te akomanga i te mea e taea me te tahuri ki nga ID anake ina hiahia ahau ki te mahi kia kaua e mahi hei maatau mo CSS anake, ano he hononga hono-raarangi.

He tuhinga taketake na Jennifer Krynin. I whakatikaia e Jeremy Girard i te 8/9/17