Ahoana ny fomba hanovana ny tranonkalan'ny fonosana miaraka amin'ny CSS

Ny fanehoana an-tsary tsara dia ampahany manan-danja amin'ny tranonkala mahomby. CSS manome anao ny fifehezana goavana amin'ny endriky ny soratra ao amin'ny tranonkala web izay azonao ampiasaina. Anisan'izany ny fahafahana manova ny loko amin'ny endritsoratra izay ampiasainao.

Azonao atao ny manova ny lokon'ny loko amin'ny fampiasana ny takelaka ivelany, endri-tsoratra ao anaty , na azo ovaina amin'ny fampiasana fanoratana ao anatin'ny rakitra HTML. Ny fomba fanao tsara indrindra dia milaza fa tokony hampiasainao ny endri-tsoratra ivelany ho an'ny CSS anao. Ny takelaka anatiny, izay endritsoratra mivantana ao amin'ny "lohan-dalan'ny" rakitrao, dia amin'ny ankapobeny dia ampiasaina amin'ny tranokala kely sy pejy. Tokony halavaina ny styles inline raha toa izy ireo dia mitovy amin'ny karazan-tsoratra "taloha" izay nataontsika tamin'ny taona maro lasa izay. Ireo endri-tsoratra ety ireo dia mahatonga azy ireo ho sarotra amin'ny fitantanana ny endri-tsoratra fanoratana satria mila manova azy ianao amin'ny isam-bolana.

Amin'ity lahatsoratra ity dia hianatra ny fomba hanovana ny loko ianao amin'ny alàlan'ny endri-tsoratry ny endrika ivelany sy fomba iray ampiasaina amin'ny andalana paragrafy. Azonao atao ny mampihatra ny toetra fanovàna mitovy amin'ny fanovana ny lokon'ny soratra amin'ny andalana rehetra manodidina ny lahatsoratra, anisan'izany ny marika .

Ampio ny lokon'ny fanoratana ny loko

Ho an'ity ohatra ity dia mila dokam-barotra HTML ianao amin'ny takelaka fanamarihanao sy ny rakitra CSS iray hafa mifandraika amin'io rakitra io. Ny tahirin-kevitra HTML dia mety hampisy singa maromaro ao aminy. Ny iray ifaneraserantsika amin'ny tanjon'ity lahatsoratra ity dia singa paragrafy.

Ity dia fomba hanovana ny loko misy soratra amin'ny lahatsoratra amin'ny alàlan'ny paragrafy mampiasa ny takelaka ivelany anao.

Ny soatoavin'ny loko dia azo aseho amin'ny teny fanalahidy, ny tarehintsoratra RGB, na ny loko hexadecimal.

  1. Ampio ny toetra ambaran'ny style para:
    1. p {}
  2. Ampiasao ny fananana loko amin'ny fomba. Apetraho eo akaikin'io fananana io ny colon
    1. p {color:}
  3. Ampio ny lanjanao loko aorian'ilay fananana. Ataovy azo antoka ny hamarana io sanda io miaraka amin'ny semi-colon:
    1. p {loko: black;}

Ireo takelaka ao amin'ny pejinao dia ho mainty.

Ity ohatra ity dia mampiasa teny fanalahidy iray - "mainty". Izany dia fomba iray hampidirana loko ao amin'ny CSS, saingy tena voafetra izany. Ny fampiasana teny fanalahidy ho an'ny "mainty" sy ny "fotsy" dia tsotra satria efa voafaritra tsara ireo loko roa ireo, saingy inona no mitranga raha mampiasa teny fototra toy ny "mena", "manga", na "maitso" ianao? Inona tokoa moa ny aloky ny mena, manga, na maitso? Tsy azonao atao ny manondro mazava ny loko maniry ilainao amin'ny teny fanalahidy. Izany no mahatonga ny soatoavina hexadecimal matetika ampiasaina ho solon'ny teny fanalahidy.

p {color: # 000000; }

Ity style CSS ity koa dia mametraka ny lokon'ny fehintsoratrao amin'ny mainty, satria ny codex hex an'ny # 000000 dia midika ho mainty. Azonao ampiasaina mihitsy aza ny sora-tanana miaraka amin'ny sanda hex ary manorata azy ho # 000 fotsiny ary ho azonao izany.

Araka ny efa voalaza tetsy aloha, ny soavaly hex dia miasa tsara rehefa mila loko izay tsy mainty na fotsy fotsiny. Ity misy ohatra iray:

p {color: # 2f5687; }

Ity sanda hex ity dia mametraka ireo fehintsoratra amin'ny loko manga, fa tsy toy ilay teny hoe "manga", io code hex io dia manome anao ny fahafahana mametraka loko manga manokana - azo inoana fa ilay nofinan'ilay mpamorona rehefa mamorona ny interface ity tranonkala ity. Amin'io tranga io, ny lokon'ny lokony dia midika ho manga midadasika sy matevina.

Farany, afaka mampiasa ny soatoavin'ny RGBA ho an'ny loko ianao. Ny RGCA dia atolotra ankehitriny amin'ireo navigateur maoderina rehetra, noho izany dia azonao ampiasaina ireo sanda ireo amin'ny alahelo kely fa tsy ho azo ampiasaina amin'ny tranonkala iray izy io, fa afaka mametraka mora foana ihany koa.

p {color: rgba (47,86,135,1); }

Ity mari-pahaizana RGBA ity dia mitovy amin'ny loko manga efa voafaritra teo aloha. Ny sanda 3 voalohany dia mamaritra ny soatoavin'ny Red, Green, ary Blue ary ny laharana farany dia ny alfa alpha. Voafaritra amin'ny "1", izay midika hoe "100%", noho izany dia tsy hanana mangarahara izany loko izany. Raha mametraka izany amin'ny laharan-drakitra iray ianao, tahaka ny .85, dia handika izany amin'ny 85% ny tsy fahampiana ary ny loko dia mangarahara kely.

Raha te-handroba ny soatoavanao loko ianao, dia izao no hataonao:

p {
loko: # 2f5687;
loko: rgba (47,86,135,1);
}

Ity syntax ity dia mametraka ny code hex eo aloha. Izany dia mampiavaka io isa io amin'ny laharana RGBA. Midika izany fa ny tranokala maoderina izay tsy manohana ny RGBA dia hahazo ny lanjany voalohany ary tsy miraharaha ny faharoa. Ny mpampiasa maoderina dia hampiasa ny faharoa ho an'ny CSS.