He aha nga rau kāhua Cascading (CSS)?
Panuitia i raro nei mo te whakamaaramatanga katoa mo te mahi o nga rau momo riipene. Ka whakaatuhia a maatau taupānga ki te tihi o te wharangi kia ngawari te rapu me te whakamahi. Mena kei te panui koe i tenei tuhinga ma te imeera, ma te whangai ranei, paatohia ki kōpekehia to CSS.
Ki te kore koe e tino whakawhanake i nga pae, kare pea koe e tino marama ki nga pepa ahua whiti (CSS). Ko te CSS he reo rauhua ka whakamahia hei whakaahua i te ahua me te whakatakotoranga o te tuhinga kua tuhia ki roto HTML or XML. Ka taea te whakamahi CSS ki te tautuhi i nga momo mo nga momo huānga penei i te momotuhi, te tae, te mokowā, me te whakatakotoranga. Ko te CSS ka taea e koe te wehe i te whakaaturanga o to tuhinga HTML mai i ona ihirangi, kia maamaa ake te pupuri me te whakahou i te ahua tirohanga o to paetukutuku.
CSS Hanganga Reo
te kaiwhakawa Ko te huānga HTML e hiahia ana koe ki te whakaāhua, me te taonga a uara tautuhia nga momo e hiahia ana koe ki te hoatu ki taua huānga:
selector {
property: value;
}Hei tauira, ko te CSS e whai ake nei ka hanga katoa <h1> He tae whero nga huānga o te wharangi me te rahi momotuhi 32px:
CSS
h1 {
color: red;
font-size: 32px;
}huaputa
Pane
Ka taea hoki e koe te tautuhi CSS mo tetahi ID ahurei i runga i tetahi huānga:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}huaputa
Hoatu ranei he akomanga puta noa i nga huānga maha:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}huaputa
Kei te pirau au miramira he kupu kei roto i te tohu mokowhiti.
Ka taea e koe te whakauru CSS ki to tuhinga HTML ma nga huarahi e toru:
- CSS rōraina, mā te whakamahi i te
stylehuanga i runga i tetahi huānga HTML - CSS roto, te whakamahi i te
<style>huānga i roto i te<head>o to tuhinga HTML - CSS waho, ma te whakamahi i te konae .css motuhake e hono ana ki to tuhinga HTML ma te whakamahi i te
<link>huānga i roto i te<head>o to tuhinga HTML
CSS Urupare
He tino ngawari te CSS ka taea te whakamahi ki te whakatika i te whakaaturanga o nga huānga i runga i te taumira mata, kia rite ai to HTML engari ka hangaia aro ki te taumira taputapu:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}CSS Kōpeketanga
Ka kite koe i roto i te tauira i runga ake nei he korero, he patai pāpāho, he maha nga momo e whakamahi ana i nga mokowhiti me nga whaanga raina hei whakarite i te tirohanga o te CSS. He mahi pai ki te whakaiti, ki te kopiri ranei i to CSS ki to pae ki te whakaiti i te rahi o nga konae, me te wa ano ki te tono me te whakaputa i to ahua. Ehara i te mea iti… ka kitea e koe neke atu i te 50% te penapena moni mo etahi o nga tauira i runga ake nei.
He maha nga whirihoranga tūmau e tuku taputapu ka kōpeke aunoa i te CSS i runga i te rere me te keteroki i te konae iti kia kore ai koe e mahi a-ringa.
He aha te SCSS?
CSS Sassy (SCSS) he kaitukatuka mua CSS e taapiri ana i etahi atu mahi me te wetereo ki te reo CSS. Ka whakawhānuihia nga kaha o te CSS ma te tuku i te whakamahinga o nga taurangi, nga whakauru, nga mahi, me etahi atu waahanga kaore i te waatea i roto i te CSS paerewa.
Nga Painga SCSS
- Kia pai ake te tiaki: Ma te whakamahi i nga taurangi, ka taea e koe te penapena i nga uara ki te waahi kotahi ka whakamahi ano puta noa i to pepa ahua, kia maamaa ake te pupuri me te whakahou i o ahua.
- He pai ake te whakahaere: Ma te whakakotahitanga, ka taea e koe te whakarōpū me te whakamahi ano i nga huinga momo, kia pai ake ai te whakariterite me te ngawari o te panui.
- Kua piki ake te taumahinga: Kei roto i te SCSS te maha o nga ahuatanga kaore i te waatea i te CSS paerewa, penei i nga mahi, i nga hanganga whakahaere (hei tauira, mehemea) me nga mahi tatau. Ka taea e tenei te hanga i te ahua hihiri me te whakaatu.
- He pai ake te mahi: Ka whakahiatohia nga konae SCSS ki te CSS, ka taea te whakapai ake i te mahi ma te whakaiti i te nui o te waehere e tika ana kia tohatohahia e te kaitirotiro.
Nga ngoikoretanga o te SCSS
- Anau ako: He wetereo rereke te SCSS mai i te CSS paerewa, a me ako koe i tenei wetereo hou i mua i to whakamahi pai.
- Ētahi atu whīwhiwhi: Ahakoa ka taea e te SCSS te whakarite kia pai ake te whakarite me te ngawari ki te pupuri, ka taea ano e ia te whakauru atu i etahi atu uauatanga ki to turanga waehere, ina koa kaore koe i te mohio ki nga ahuatanga hou me te wetereo.
- Utauta: Hei whakamahi i te SCSS, ka hiahia koe ki tetahi kaitoi hei whakamaori i to waehere SCSS ki CSS. Me whai tatūnga taapiri me nga taputapu, ka waiho hei arai ki te urunga mo etahi kaiwhakawhanake.
I tenei tauira i raro nei, ka whakamahia e te waehere SCSS nga taurangi hei penapena uara ($primary-color a $font-size) ka taea te whakamahi ano puta noa i te pepa ahua. Ko te waehere CSS i hangaia mai i tenei waehere SCSS he rite, engari kaore i te whakauru i nga taurangi. Engari, ko nga uara o nga taurangi ka whakamahia tika i roto i te CSS.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}Ko tetahi atu ahuatanga o te SCSS e whakaatuhia ana i tenei tauira ko nga momo kohanga. I roto i te waehere SCSS, te h1 kua kohanga nga momo ki roto i te body kāhua, e kore e taea i roto i te CSS paerewa. Ina whakahiatohia te waehere SCSS, ka whakawhänuihia nga momo kohanga ki nga momo motuhake i roto i te waehere CSS.
I te katoa, he maha nga painga ka whakaratohia e te SCSS ki runga i te CSS paerewa, engari he mea nui ki te whakaaro ki nga hokohoko me te whiriwhiri i te taputapu tika mo to kaupapa i runga i o hiahia me o herenga.
